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

Compare commits

merge into: yanglijie:master
Branches Tags
yanglijie:master yanglijie:dev-ljyang
...
pull from: yanglijie:dev-ljyang
Branches Tags
yanglijie:dev-ljyang yanglijie:master

2 Commits
master ... dev-ljyang

Author SHA1 Message Date
lnljyang
64e9a61472 浅色版2 2026-01-06 11:58:33 +08:00
lnljyang
36c6f01eb1 改浅色 2026-01-06 11:10:20 +08:00
21 changed files with 872 additions and 716 deletions
Expand all files Collapse all files

2
src/App.vue
View File

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

40
src/assets/css/index.scss
View File

@@ -96,17 +96,17 @@
.yh-big-input { .yh-big-input {
width: 253px; width: 253px;
height: 14px; height: 14px;
background: transparent; background: #ffffff;
border: 1px solid rgba(255, 255, 255, .53); border: 1px solid #d9d9d9;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #000000;
padding: 6px 10px; padding: 6px 10px;
font-size: 14px; font-size: 14px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
&:focus { &:focus {
outline: none; outline: none;
border-color: #31abe3; border-color: #1890ff;
} }
} }
@@ -116,17 +116,17 @@
.el-input__inner { .el-input__inner {
padding: 6px 10px; padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, .53); border: 1px solid #d9d9d9;
background-color: transparent; background-color: #000000;
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
color: #fff; color: #000000;
&:hover{ &:hover{
border-color: rgba(255, 255, 255, .8); border-color: #40a9ff;
} }
&:focus { &:focus {
outline: none; outline: none;
border-color: #31abe3; border-color: #1890ff;
} }
} }
@@ -136,19 +136,19 @@
.yh-big-button { .yh-big-button {
width: 53px; width: 53px;
height: 26px; height: 26px;
background: #00b1d6; background: #1890ff;
border-radius: 4px; border-radius: 4px;
// border-color: #00b1d6; // border-color: #1890ff;
border-width: 1px; border-width: 1px;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #fff; color: #000000;
font-size: 15px; font-size: 15px;
&:hover, &:hover,
&:focus { &:focus {
// border-color: #0597b4; // border-color: #40a9ff;
background: #0597b4; background: #40a9ff;
} }
} }
@@ -177,8 +177,8 @@
//表格样式重置 //表格样式重置
.ve-table { .ve-table {
$border-color: #525371; $border-color: #e8e8e8;
// $border-color: rgba(255, 255, 255, .43); // $border-color: rgba(0, 0, 0, .15);
box-sizing: border-box; box-sizing: border-box;
.ve-table-container { .ve-table-container {
@@ -229,8 +229,8 @@
box-sizing: border-box; box-sizing: border-box;
th.ve-table-header-th { th.ve-table-header-th {
background: #04004E; background: #fafafa;
color: #FFF; color: #000000;
border-color: $border-color; border-color: $border-color;
box-sizing: border-box; box-sizing: border-box;
line-height: 1; line-height: 1;
@@ -244,7 +244,7 @@
tr.ve-table-body-tr td.ve-table-expand-td, tr.ve-table-body-tr td.ve-table-expand-td,
tr.ve-table-expand-tr td.ve-table-expand-td { tr.ve-table-expand-tr td.ve-table-expand-td {
background: transparent; background: transparent;
color: #FFA500; color: #000000;
border-color: $border-color; border-color: $border-color;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -256,7 +256,7 @@
} }
&.ve-table-row-hover tr.ve-table-body-tr:hover td { &.ve-table-row-hover tr.ve-table-body-tr:hover td {
background-color: rgba(0, 0, 0, .22); background-color: rgba(24, 144, 255, .1);
box-sizing: border-box; box-sizing: border-box;
} }
} }

16
src/assets/css/modules/variables.scss
View File

@@ -1,17 +1,17 @@
// 颜色 // 颜色 - 浅色主题
$colors: ( $colors: (
"primary": #1A5CD7, "primary": #1890ff,
"info-1": #4394e4, "info-1": #40a9ff,
"info": #4b67af, "info": #1890ff,
"white": #ffffff, "white": #ffffff,
"light": #f9f9f9, "light": #f5f7fa,
"grey-1": #999999, "grey-1": #999999,
"grey": #666666, "grey": #666666,
"dark-1": #5f5f5f, "dark-1": #333333,
"dark": #222222, "dark": #222222,
"black-1": #171823, "black-1": #000000,
"black": #000000, "black": #000000,
"icon": #5cd9e8 "icon": #1890ff
); );
// 字体大小 // 字体大小

14
src/assets/css/variable.scss
View File

@@ -1,12 +1,12 @@
// 颜色 // 颜色 - 浅色主题
$primary-color: #1890ff; $primary-color: #1890ff;
$primary-color-hl: rgb(41, 52, 67); $primary-color-hl: #40a9ff;
$default-color: #006569; $default-color: #1890ff;
$link: #1890ff; $link: #1890ff;
$active-color: rgb(0, 101, 105); $active-color: #096dd9;
$del-color: #ff1839; $del-color: #ff4d4f;
$content-background: #f3f5fa; $content-background: #ffffff;
$table-header-background: #d8eaff; $table-header-background: #f0f7ff;
$primary-color-rgba: rgba($color: $primary-color, $primary-color-rgba: rgba($color: $primary-color,
$alpha: 0.1, $alpha: 0.1,

10
src/components/item-wrap/item-wrap.vue
View File

@@ -53,9 +53,9 @@ $item_title_content-height: calc(100% - 38px);
height: $item-title-height; height: $item-title-height;
line-height: $item-title-height; line-height: $item-title-height;
width: 100%; width: 100%;
color: #31abe3; color: #1890ff;
text-align: center; text-align: center;
// background: linear-gradient(to right, transparent, #0f0756, transparent); // background: linear-gradient(to right, transparent, #f0f7ff, transparent);
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -76,9 +76,9 @@ $item_title_content-height: calc(100% - 38px);
letter-spacing: 2px; letter-spacing: 2px;
background: linear-gradient( background: linear-gradient(
92deg, 92deg,
#acb1b7 0%, #666666 0%,
#00eaff 48.8525390625%, #1890ff 48.8525390625%,
#01aaff 100% #096dd9 100%
); );
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

2
src/views/dishboard.vue
View File

@@ -146,7 +146,7 @@
<style scoped> <style scoped>
.dashboard { .dashboard {
background: #0a1931; background: #0a1931;
color: white; color: #000000;
padding: 20px; padding: 20px;
} }
.header { .header {

22
src/views/home.scss
View File

@@ -1,5 +1,5 @@
.scale-wrap { .scale-wrap {
color: #d3d6dd; color: #000000;
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
overflow: hidden; overflow: hidden;
@@ -15,7 +15,7 @@
height: 100%; height: 100%;
padding: 16px 16px 10px 16px; padding: 16px 16px 10px 16px;
box-sizing: border-box; box-sizing: border-box;
background-image: url("../assets/img/u0.svg"); background-color: #f5f7fa;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
@@ -90,11 +90,13 @@
right: 0; right: 0;
top: 30px; top: 30px;
font-size: 18px; font-size: 18px;
color: #000000;
display: flex; display: flex;
align-items: center; align-items: center;
.blq-icon-shezhi02 { .blq-icon-shezhi02 {
cursor: pointer; cursor: pointer;
color: #000000;
} }
} }
} }
@@ -156,7 +158,7 @@
font-weight: 900; font-weight: 900;
letter-spacing: 6px; letter-spacing: 6px;
width: 100%; width: 100%;
background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%); background: linear-gradient(92deg, #1890ff 0%, #40a9ff 48.8525390625%, #096dd9 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@@ -178,12 +180,12 @@
width: 130px; width: 130px;
height: 36px; height: 36px;
border-radius: 18px 0px 0px 18px; border-radius: 18px 0px 0px 18px;
color: #00FBF8; color: #1890ff;
text-indent: 26px; text-indent: 26px;
line-height: 36px; line-height: 36px;
font-size: 16px; font-size: 16px;
margin-right: 20px; margin-right: 20px;
background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0)); background: linear-gradient(to right, rgba(24, 144, 255, .1), rgba(24, 144, 255, 0));
} }
} }
} }
@@ -226,7 +228,7 @@
.setting_inner { .setting_inner {
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #ffffff;
width: 340px; width: 340px;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -234,11 +236,11 @@
top: 0; top: 0;
z-index: 1; z-index: 1;
color: #000000; color: #000000;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .08);
.setting_header { .setting_header {
font-size: 20px; font-size: 20px;
color: rgb(0, 0, 0); color: #000000;
font-weight: 900; font-weight: 900;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
@@ -256,11 +258,11 @@
// display: flex; // display: flex;
.setting_label { .setting_label {
color: #555454; color: #000000;
} }
.setting_label_tip{ .setting_label_tip{
font-size: 12px; font-size: 12px;
color: #838282; color: #666666;
} }
} }
} }

2
src/views/home.vue
View File

@@ -119,7 +119,7 @@ export default {
} }
.title-name{ .title-name{
color: white; color: #000000;
font-size: 30px; font-size: 30px;
font-weight: 600; font-weight: 600;
margin-left: 20px; margin-left: 20px;

12
src/views/indexs/center-bottom.vue
View File

@@ -20,7 +20,7 @@ export default {
// { name: '其它：10%', value: 260 } // { name: '其它：10%', value: 260 }
] ]
], ],
colors: ["#00E5FF", "#FF5733"] colors: ["#1890ff", "#ff9800"]
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"] //colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
}; };
}, },
@@ -48,7 +48,7 @@ export default {
text: '', text: '',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: '#DDDDDD', // 将原来的 #999 改为更亮的灰色 color: '#000000', // 浅色主题使用黑色
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 14 fontSize: 14
} }
@@ -63,7 +63,7 @@ export default {
left: 'center', left: 'center',
width: '600px', width: '600px',
itemStyle: { itemStyle: {
borderColor: 'orange', borderColor: '#ff9800', // 使用较暗的橙色边框
borderWidth: 1 borderWidth: 1
}, },
label: { label: {
@@ -76,17 +76,17 @@ export default {
rich: { rich: {
name: { // 新增 name 样式 name: { // 新增 name 样式
fontSize: 14, fontSize: 14,
color: 'yellow', // 使用亮白色 color: '#666666', // 使用深灰色降低亮度
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
value: { value: {
fontSize: 12, fontSize: 12,
color: 'orange', color: '#ff9800', // 使用较暗的橙色
padding: [0, 5, 0, 0] padding: [0, 5, 0, 0]
}, },
percent: { percent: {
fontSize: 12, fontSize: 12,
color: '#FF5733' // 保留原有橙色 color: '#f57c00' // 使用更深的橙色
} }
} }
}, },

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

@@ -9,12 +9,18 @@
<div class="centermap"> <div class="centermap">
<div class="maptitle"> <div class="maptitle">
<div class="zuo"></div> <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 class="you"></div>
</div> </div>
<div class="mileagetitle"> <div class="mileagetitle">
<div class="zuo"></div> <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 class="you"></div>
</div> </div>
<div class="mapwrap"> <div class="mapwrap">
@@ -25,10 +31,18 @@
<div class="quanguo1" @click="goToPage()" v-if="showType === 1"> <div class="quanguo1" @click="goToPage()" v-if="showType === 1">
车辆实况 车辆实况
</div> </div>
<div class="quanguo2" @click="changeShow1()" :style="{ backgroundColor: currentBgColor2 }"> <div
class="quanguo2"
@click="changeShow1()"
:style="{ backgroundColor: currentBgColor2 }"
>
<div>车辆信息</div> <div>车辆信息</div>
</div> </div>
<div class="quanguo3" @click="changeShow2()" :style="{ backgroundColor: currentBgColor3 }"> <div
class="quanguo3"
@click="changeShow2()"
:style="{ backgroundColor: currentBgColor3 }"
>
<div>加氢站</div> <div>加氢站</div>
</div> </div>
<div class="quanguo4" v-if="code === 'china'"> <div class="quanguo4" v-if="code === 'china'">
@@ -56,10 +70,10 @@ export default {
//code:"440000", //code:"440000",
echartBindClick: false, echartBindClick: false,
isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面 isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面
currentMap : 'china', // 当前显示的地图层级 currentMap: "china", // 当前显示的地图层级
showType: 1, //显示内容类型： 1车辆信息，2加氢站信息 showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
currentBgColor2:'', currentBgColor2: "",
currentBgColor3:'', currentBgColor3: "",
}; };
}, },
created() {}, created() {},
@@ -69,20 +83,20 @@ export default {
this.getYearData(); this.getYearData();
this.showType = 1; this.showType = 1;
this.currentBgColor2 = '#158e8e'; this.currentBgColor2 = "#158e8e";
//this.getData("china"); //this.getData("china");
this.getData(this.code); this.getData(this.code);
}, },
methods: { methods: {
changeShow1() { changeShow1() {
this.showType = 1; this.showType = 1;
this.currentBgColor2 = '#158e8e'; this.currentBgColor2 = "#158e8e";
this.currentBgColor3 = ''; this.currentBgColor3 = "";
this.getData(this.code); this.getData(this.code);
}, },
changeShow2() { changeShow2() {
this.currentBgColor2 = ''; this.currentBgColor2 = "";
this.currentBgColor3 = '#158e8e'; this.currentBgColor3 = "#158e8e";
this.showType = 2; this.showType = 2;
this.getData(this.code); this.getData(this.code);
}, },
@@ -90,18 +104,21 @@ export default {
//window.open("http://localhost:9528/vehicle-management/vehicle-state?"+this.code, "_blank"); //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://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"); //window.open("http://192.168.0.219:9528/vehicle-situation?"+this.code, "_blank");
}, },
parseAdcodeLevel(adcode) { parseAdcodeLevel(adcode) {
const codeStr = String(adcode); const codeStr = String(adcode);
if (codeStr.endsWith('0000')) return 'province'; // 省级（如 440000） if (codeStr.endsWith("0000")) return "province"; // 省级（如 440000）
if (codeStr.endsWith('00')) return 'city'; // 市级（如 440300） if (codeStr.endsWith("00")) return "city"; // 市级（如 440300）
return 'district'; // 区县级（如 440305） return "district"; // 区县级（如 440305）
}, },
getYearData() { getYearData() {
currentGET("big3").then((res) => { currentGET("big3").then((res) => {
console.log('年度碳排量'); console.log("年度碳排量");
console.log(res); console.log(res);
this.totalCarbon = res.data.yearCarbon || "0"; this.totalCarbon = res.data.yearCarbon || "0";
this.totalMileage = res.data.yearMileage || "0"; this.totalMileage = res.data.yearMileage || "0";
@@ -112,7 +129,10 @@ export default {
this.currentMap = this.parseAdcodeLevel(code); this.currentMap = this.parseAdcodeLevel(code);
//2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息 //2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息
if (this.showType === 1) { if (this.showType === 1) {
currentGET("big9", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => { currentGET("big9", {
regionCode: code,
adcodeLevel: this.currentMap,
}).then((res) => {
console.log("map车辆分布", res); console.log("map车辆分布", res);
//if (res.success) //if (res.success)
if (res.status) { if (res.status) {
@@ -124,7 +144,10 @@ export default {
}); });
} else if (this.showType === 2) { } else if (this.showType === 2) {
//改为显示全国所有加氢站信息 停止使用big14 使用big15 2025.10.16 szy //改为显示全国所有加氢站信息 停止使用big14 使用big15 2025.10.16 szy
currentGET("big15", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => { currentGET("big15", {
regionCode: code,
adcodeLevel: this.currentMap,
}).then((res) => {
console.log("加氢站_map分布", res); console.log("加氢站_map分布", res);
//if (res.success) //if (res.success)
if (res.status) { if (res.status) {
@@ -145,27 +168,26 @@ export default {
async getGeojson(name, mydata) { async getGeojson(name, mydata) {
this.code = name; this.code = name;
this.currentMap = name; this.currentMap = name;
console.log('当前地图层级'); console.log("当前地图层级");
console.log(this.currentMap); console.log(this.currentMap);
//如果要展示南海群岛并且展示的是中国的话 //如果要展示南海群岛并且展示的是中国的话
let geoname=name let geoname = name;
if (this.isSouthChinaSea && name == "china") { if (this.isSouthChinaSea && name == "china") {
geoname = "chinaNanhai"; geoname = "chinaNanhai";
} }
//如果有注册地图的话就不用再注册 了 //如果有注册地图的话就不用再注册 了
let mapjson = echarts.getMap(name); let mapjson = echarts.getMap(name);
console.log('已经是否已存在的地图数据'); console.log("已经是否已存在的地图数据");
if (mapjson) { if (mapjson) {
mapjson = mapjson.geoJson; mapjson = mapjson.geoJson;
} } else {
else
{
//console.log('当前未注册地图'); //console.log('当前未注册地图');
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => { mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
(res) => {
return res; return res;
}); }
);
echarts.registerMap(name, mapjson); echarts.registerMap(name, mapjson);
} }
console.log(mapjson); console.log(mapjson);
let cityCenter = {}; let cityCenter = {};
@@ -181,7 +203,6 @@ export default {
if (cityCenter[item.name]) { if (cityCenter[item.name]) {
if (item.vehicleTotal === undefined || item.vehicleTotal === null) { if (item.vehicleTotal === undefined || item.vehicleTotal === null) {
item.vehicleTotal = 0; item.vehicleTotal = 0;
} }
if (item.onLineCount === undefined || item.onLineCount === null) { if (item.onLineCount === undefined || item.onLineCount === null) {
item.onLineCount = 0; item.onLineCount = 0;
@@ -197,38 +218,42 @@ export default {
} }
newData.push({ newData.push({
name: item.name, 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); console.log(newData);
this.init(name, mydata, newData); this.init(name, mydata, newData);
}, },
async getGeojson2(name, mydata) { async getGeojson2(name, mydata) {
this.code = name; this.code = name;
this.currentMap = name; this.currentMap = name;
console.log('加氢站_当前地图层级'); console.log("加氢站_当前地图层级");
console.log(this.currentMap); console.log(this.currentMap);
//如果要展示南海群岛并且展示的是中国的话 //如果要展示南海群岛并且展示的是中国的话
let geoname=name let geoname = name;
if (this.isSouthChinaSea && name == "china") { if (this.isSouthChinaSea && name == "china") {
geoname = "chinaNanhai"; geoname = "chinaNanhai";
} }
//如果有注册地图的话就不用再注册 了 //如果有注册地图的话就不用再注册 了
let mapjson = echarts.getMap(name); let mapjson = echarts.getMap(name);
console.log('加氢站_已经是否已存在的地图数据'); console.log("加氢站_已经是否已存在的地图数据");
if (mapjson) { if (mapjson) {
mapjson = mapjson.geoJson; mapjson = mapjson.geoJson;
} } else {
else
{
//console.log('当前未注册地图'); //console.log('当前未注册地图');
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => { mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
(res) => {
return res; return res;
}); }
);
echarts.registerMap(name, mapjson); echarts.registerMap(name, mapjson);
} }
console.log(mapjson); console.log(mapjson);
let cityCenter = {}; let cityCenter = {};
@@ -242,27 +267,31 @@ export default {
let newData = []; let newData = [];
mydata.map((item) => { mydata.map((item) => {
if (cityCenter[item.name]) { if (cityCenter[item.name]) {
if(item.siteTotalCount===undefined || item.siteTotalCount===null ){ if (
item.siteTotalCount === undefined ||
item.siteTotalCount === null
) {
item.siteTotalCount = 0; item.siteTotalCount = 0;
} }
if (item.siteCount === undefined || item.siteCount === null) { if (item.siteCount === undefined || item.siteCount === null) {
item.siteCount = 0; item.siteCount = 0;
} }
newData.push({ newData.push({
name: item.name, 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); console.log(newData);
this.init2(name, mydata, newData); this.init2(name, mydata, newData);
}, },
init(name, data, data2) { init(name, data, data2) {
console.log('init_data'); console.log("init_data");
console.log(data); console.log(data);
console.log('init_data2'); console.log("init_data2");
console.log(data2); console.log(data2);
let top = 45; let top = 45;
let zoom = 1.05; let zoom = 1.05;
@@ -306,7 +335,7 @@ export default {
], ],
}, },
textStyle: { textStyle: {
color: "#fff", color: "#000000",
}, },
}, },
geo: { geo: {
@@ -347,7 +376,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#fff",
}, },
}, },
label: { label: {
@@ -364,7 +393,8 @@ export default {
}, },
rich: {}, rich: {},
}, },
emphasis: { //高亮时显示 emphasis: {
//高亮时显示
label: { label: {
show: false, show: false,
}, },
@@ -402,10 +432,12 @@ export default {
{ {
//data: data2, //data: data2,
//type: "effectScatter", //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", type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
symbol: 'image://' + require('../../assets/img/cars.png'), symbol: "image://" + require("../../assets/img/cars.png"),
symbolSize: function (val) { symbolSize: function (val) {
return 20; return 20;
//return 4; //return 4;
@@ -427,34 +459,54 @@ export default {
if (params.data) { if (params.data) {
console.log("params.data"); console.log("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]); console.log(
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"; 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]}'; //return '${params.name} <br />车辆总数：${params.data[value][2]} <br /> GPS在线总数：${ params.data.[value][3]}';
} }
}, },
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#fff",
}, },
}, },
label: { label: {
formatter: (param) => { 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) ; //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 param.data.value[2]; // 显示车辆总数
} }
return ''; return "";
}, },
fontSize: 11, fontSize: 16,
offset: [0, 2], offset: [0, 2],
position: "bottom", position: "bottom",
textBorderColor: "#fff", color: "#000",
textShadowColor: "#000",
textShadowBlur: 10,
textBorderWidth: 0,
color: "#FFF",
show: true, show: true,
}, },
// colorBy: "data", // colorBy: "data",
@@ -476,9 +528,9 @@ export default {
}, },
//2025.9.11 szy add begin //2025.9.11 szy add begin
init2(name, data, data2) { init2(name, data, data2) {
console.log('init_data'); console.log("init_data");
console.log(data); console.log(data);
console.log('init_data2'); console.log("init_data2");
console.log(data2); console.log(data2);
let top = 45; let top = 45;
let zoom = 1.05; let zoom = 1.05;
@@ -502,7 +554,6 @@ export default {
inRange: { inRange: {
// 渐变颜色，从小到大 // 渐变颜色，从小到大
color: [ color: [
// "#66a9c9", // "#66a9c9",
// "#2f90b9", // "#2f90b9",
// "#1781b5", // "#1781b5",
@@ -513,7 +564,7 @@ export default {
], ],
}, },
textStyle: { textStyle: {
color: "#fff", color: "#000000",
}, },
}, },
geo: { geo: {
@@ -553,7 +604,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#000000",
}, },
}, },
label: { label: {
@@ -570,7 +621,8 @@ export default {
}, },
rich: {}, rich: {},
}, },
emphasis: { //高亮时显示 emphasis: {
//高亮时显示
label: { label: {
show: false, show: false,
}, },
@@ -630,14 +682,26 @@ export default {
if (params.data) { if (params.data) {
console.log("params.data"); console.log("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]); console.log(
return params.data.name + "<br> 加氢站总数："+params.data["value"][2] + "<br> 当前运营总数: " + params.data["value"][3]; 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)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#000000",
}, },
}, },
label: { label: {
@@ -649,11 +713,11 @@ export default {
fontSize: 11, fontSize: 11,
offset: [0, 2], offset: [0, 2],
position: "bottom", position: "bottom",
textBorderColor: "#fff", textBorderColor: "#000000",
textShadowColor: "#000", textShadowColor: "#000",
textShadowBlur: 10, textShadowBlur: 10,
textBorderWidth: 0, textBorderWidth: 0,
color: "#FFF", color: "#000000",
show: true, show: true,
}, },
// colorBy: "data", // colorBy: "data",
@@ -694,7 +758,7 @@ export default {
} }
}); });
this.echartBindClick = true; this.echartBindClick = true;
} },
}, },
destroyed() { destroyed() {
// 销毁事件监听 // 销毁事件监听
@@ -706,7 +770,6 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mileagetitle { .mileagetitle {
height: 40px; height: 40px;
display: flex; display: flex;
@@ -732,7 +795,7 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: 900; font-weight: 900;
letter-spacing: 4px; letter-spacing: 4px;
color: white; color: #000000;
margin: 0 8px; margin: 0 8px;
} }
.zuo, .zuo,
@@ -781,7 +844,7 @@ export default {
font-size: 28px; font-size: 28px;
font-weight: 900; font-weight: 900;
letter-spacing: 6px; letter-spacing: 6px;
color: white; color: #000000;
margin: 0 10px; margin: 0 10px;
} }
.zuo, .zuo,
@@ -834,12 +897,13 @@ export default {
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #00eded;
border-radius: 10px; border-radius: 10px;
color: white; color: #000000;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;
cursor: pointer; 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; font-family: "微软雅黑", sans-serif;
z-index: 9999; z-index: 9999;
} }
@@ -852,12 +916,13 @@ export default {
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #00eded;
border-radius: 10px; border-radius: 10px;
color: white; color: #000000;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;
cursor: pointer; 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; font-family: "微软雅黑", sans-serif;
z-index: 9999; z-index: 9999;
} }
@@ -870,12 +935,13 @@ export default {
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #00eded;
border-radius: 10px; border-radius: 10px;
color: white; color: #000000;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;
cursor: pointer; 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; font-family: "微软雅黑", sans-serif;
z-index: 9999; z-index: 9999;
} }
@@ -886,7 +952,7 @@ export default {
left: 50%; /* 左边缘对齐 */ left: 50%; /* 左边缘对齐 */
transform: translateX(-50%); /* 向左移动自身宽度的50%以实现水平居中 */ transform: translateX(-50%); /* 向左移动自身宽度的50%以实现水平居中 */
bottom: 10px; bottom: 10px;
color: white; color: #000000;
} }
} }
} }

48
src/views/indexs/chart/baseChart.vue
View File

@@ -39,7 +39,7 @@ export default {
}, },
legend: { legend: {
data: ['碳减排量(kg)', '行驶里程(km)'], data: ['碳减排量(kg)', '行驶里程(km)'],
textStyle: { color: '#fff' } textStyle: { color: '#000000' }
}, },
grid: { grid: {
left: '18%', left: '18%',
@@ -50,16 +50,19 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#000000' } },
axisLabel: { color: '#fff' } axisLabel: { color: '#000000' }
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
// name: '碳减排量', // name: '碳减排量',
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#000000' } },
axisLabel: { color: '#fff' }, axisLabel: { color: '#000000' },
splitLine: { show: false }, splitLine: {
show: true,
lineStyle: { color: '#e8e8e8', type: 'dashed' }
},
axisLabel: { axisLabel: {
formatter: '{value}kg' formatter: '{value}kg'
} }
@@ -67,9 +70,12 @@ export default {
{ {
type: 'value', type: 'value',
// name: '行驶里程', // name: '行驶里程',
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#000000' } },
axisLabel: { color: '#fff' }, axisLabel: { color: '#000000' },
splitLine: { show: false }, splitLine: {
show: true,
lineStyle: { color: '#e8e8e8', type: 'dashed' }
},
axisLabel: { axisLabel: {
formatter: '{value}km' formatter: '{value}km'
} }
@@ -80,7 +86,7 @@ export default {
name: '碳减排量(kg)', name: '碳减排量(kg)',
type: 'bar', type: 'bar',
data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600], data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600],
itemStyle: { color: '#00BAFF' }, itemStyle: { color: '#1890ff' },
barWidth: 14 barWidth: 14
}, },
{ {
@@ -89,7 +95,7 @@ export default {
yAxisIndex: 1, yAxisIndex: 1,
data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500], data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500],
itemStyle: { color: '#FFC600' }, itemStyle: { color: '#52c41a' },
smooth: true, smooth: true,
lineStyle: { width: 2 }, lineStyle: { width: 2 },
symbol: 'circle', symbol: 'circle',
@@ -107,8 +113,8 @@ export default {
//subtext: '年度碳减排量', //subtext: '年度碳减排量',
left: 'center', left: 'center',
top: '40%', top: '40%',
textStyle: { color: '#fff', fontSize: 18 }, textStyle: { color: '#000000', fontSize: 18 },
subtextStyle: { color: '#fff', fontSize: 18} subtextStyle: { color: '#000000', fontSize: 18}
}, },
graphic: [ graphic: [
{ {
@@ -117,7 +123,7 @@ export default {
top: 'center', // 垂直居中 top: 'center', // 垂直居中
style: { style: {
text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示 text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示
fill: '#fff', fill: '#000000',
font: '16px sans-serif', font: '16px sans-serif',
} }
} }
@@ -131,8 +137,8 @@ export default {
label: { show: false }, label: { show: false },
labelLine: { show: false }, labelLine: { show: false },
data: [ data: [
{ value: 5, name: '碳排放量', itemStyle: { color: '#7d70f9' } }, { value: 5, name: '碳排放量', itemStyle: { color: '#1890ff' } },
{ value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } } { value: 95, name: 'other', itemStyle: { color: '#f0f0f0' } }
] ]
} }
] ]
@@ -147,8 +153,8 @@ export default {
//subtext: '年度行驶里程', //subtext: '年度行驶里程',
left: 'center', left: 'center',
top: '40%', top: '40%',
textStyle: { color: '#fff', fontSize: 18 }, textStyle: { color: '#000000', fontSize: 18 },
subtextStyle: { color: '#fff', fontSize: 12 } subtextStyle: { color: '#000000', fontSize: 12 }
}, },
graphic: [ graphic: [
{ {
@@ -157,7 +163,7 @@ export default {
top: 'center', // 垂直居中 top: 'center', // 垂直居中
style: { style: {
text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示 text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示
fill: '#fff', fill: '#000000',
font: '16px sans-serif', font: '16px sans-serif',
} }
} }
@@ -171,8 +177,8 @@ export default {
label: { show: false }, label: { show: false },
labelLine: { show: false }, labelLine: { show: false },
data: [ data: [
{ value: 85, name: '行驶里程', itemStyle: { color: '#00BAFF' } }, { value: 85, name: '行驶里程', itemStyle: { color: '#52c41a' } },
{ value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } } { value: 15, name: 'other', itemStyle: { color: '#f0f0f0' } }
] ]
} }
] ]

6
src/views/indexs/index.vue
View File

@@ -189,11 +189,11 @@ export default {
.tech-text { .tech-text {
font-size: 14px; font-size: 14px;
color: #8c8c8c; color: #666666;
font-weight: 500; font-weight: 500;
letter-spacing: 0.8px; letter-spacing: 0.8px;
white-space: nowrap; white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
position: relative; position: relative;
// 添加一个简洁的下划线装饰 // 添加一个简洁的下划线装饰
@@ -204,7 +204,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: linear-gradient(90deg, #8c8c8c 0%, transparent 100%); background: linear-gradient(90deg, #666666 0%, transparent 100%);
opacity: 0.4; opacity: 0.4;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }

6
src/views/indexs/left-bottom.vue
View File

@@ -56,17 +56,17 @@ export default {
legend: { legend: {
//data: ['用氢量', '用电量', '行驶里程'], //data: ['用氢量', '用电量', '行驶里程'],
data: ['碳减排(kg)','行驶里程(km)'], data: ['碳减排(kg)','行驶里程(km)'],
textStyle: { color: '#fff' } textStyle: { color: '#000000' }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: this.seriesData, data: this.seriesData,
axisLine: { lineStyle: { color: '#fff' } } axisLine: { lineStyle: { color: '#000000' } }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#000000' } },
splitLine: { lineStyle: { color: '#091a40' } }, splitLine: { lineStyle: { color: '#091a40' } },
axisLabel: { axisLabel: {
formatter: '{value}kg' formatter: '{value}kg'

8
src/views/indexs/left-center.vue
View File

@@ -142,13 +142,13 @@ export default {
textStyle: { textStyle: {
rich: { rich: {
value: { value: {
color: "#ffffff", color: "#000000",
fontSize: 24, fontSize: 24,
fontWeight: "bold", fontWeight: "bold",
lineHeight: 20, lineHeight: 20,
}, },
name: { name: {
color: "#ffffff", color: "#000000",
lineHeight: 20, lineHeight: 20,
}, },
}, },
@@ -159,7 +159,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#000000",
}, },
}, },
legend: { legend: {
@@ -177,7 +177,7 @@ export default {
// position: "outside", // position: "outside",
rich: { rich: {
b: { b: {
color: "#fff", color: "#000000",
fontSize: 12, fontSize: 12,
lineHeight: 26, lineHeight: 26,
}, },

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

@@ -101,7 +101,7 @@
</template> </template>
<script> <script>
import { currentGET } from 'api/modules' import { currentGET } from "api/modules";
export default { export default {
name: "BlinkingIcons", name: "BlinkingIcons",
@@ -145,7 +145,7 @@
methods: { methods: {
getData() { getData() {
currentGET("big1").then((res) => { currentGET("big1").then((res) => {
console.log('当日实况'); console.log("当日实况");
console.log(res); console.log(res);
let onLineCount = 0; let onLineCount = 0;
@@ -154,18 +154,13 @@
let dayHydrogen = 0; let dayHydrogen = 0;
let dayMileage = 0; let dayMileage = 0;
if(res !==null && res.data !==null ) if (res !== null && res.data !== null) {
{ if (res.data.onLineCount !== null) onLineCount = res.data.onLineCount;
if(res.data.onLineCount !== null)
onLineCount = res.data.onLineCount;
if (res.data.vehicleCount !== null) if (res.data.vehicleCount !== null)
vehicleCount = res.data.vehicleCount; vehicleCount = res.data.vehicleCount;
if(res.data.dayCarbon !== null) if (res.data.dayCarbon !== null) dayCarbon = res.data.dayCarbon;
dayCarbon = res.data.dayCarbon; if (res.data.dayHydrogen !== null) dayHydrogen = res.data.dayHydrogen;
if(res.data.dayHydrogen !== null) if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
dayHydrogen = res.data.dayHydrogen;
if(res.data.dayMileage !== null)
dayMileage = res.data.dayMileage;
} }
let change = this.cards[0]; let change = this.cards[0];
@@ -183,7 +178,7 @@
this.$set(this.cards, 3, change); this.$set(this.cards, 3, change);
}); });
}, },
} },
}; };
</script> </script>
@@ -211,7 +206,7 @@
position: relative; position: relative;
width: 180px; width: 180px;
text-align: center; text-align: center;
color: #fff; color: #000000;
} }
/* 卡片信息区域 */ /* 卡片信息区域 */
@@ -227,9 +222,9 @@
} }
.number { .number {
color: #45f3ff; /* 高亮数字颜色 */ color: #1890ff;
font-weight: 700;
margin-right: 6px; margin-right: 6px;
} }
.unit { .unit {
@@ -239,7 +234,7 @@
.label { .label {
font-size: 16px; font-size: 16px;
color: #b9e4ff; color: #262626;
} }
/* 图标容器 */ /* 图标容器 */
@@ -280,7 +275,6 @@
animation-delay: 0.6s; animation-delay: 0.6s;
} }
/* 圆形平台 */ /* 圆形平台 */
.platform-circle { .platform-circle {
position: absolute; position: absolute;
@@ -328,4 +322,3 @@
content: "🛡"; content: "🛡";
} }
</style> </style>

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

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

27
src/views/indexs/right-center-new.vue
View File

@@ -106,14 +106,14 @@ export default {
type: 'category', type: 'category',
data: xData, data: xData,
axisLabel: { axisLabel: {
color: 'white', color: '#000000',
interval: 0, interval: 0,
rotate: 45, // 保持倾斜以防文字重叠 rotate: 45, // 保持倾斜以防文字重叠
fontSize: 12, fontSize: 12,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' color: '#000000'
} }
} }
}, },
@@ -121,17 +121,17 @@ export default {
type: 'value', type: 'value',
name: '用氢量', name: '用氢量',
axisLabel: { axisLabel: {
color: 'white', color: '#000000',
formatter: '{value}kg' formatter: '{value}kg'
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(51, 153, 255, 0.3)' color: 'rgba(0, 0, 0, 0.1)'
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' color: '#000000'
} }
} }
}, },
@@ -144,16 +144,16 @@ export default {
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: '#6a99f8' color: '#40a9ff'
}, { }, {
offset: 1, offset: 1,
color: '#0b2149' color: '#1890ff'
}]) }])
}, },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color: '#fff', color: '#000000',
formatter: (params) => { formatter: (params) => {
return params.value === 0 ? '' : params.value+'kg'; return params.value === 0 ? '' : params.value+'kg';
} }
@@ -185,9 +185,9 @@ export default {
} }
button { button {
background: rgba(25, 61, 112, 0.8); background: #f0f0f0;
border: 1px solid #2f6ed4; border: 1px solid #d9d9d9;
color: #fff; color: #000000;
padding: 5px 15px; padding: 5px 15px;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
@@ -195,7 +195,8 @@ button {
} }
button.active { button.active {
background: #2f6ed4; background: #1890ff;
border-color: #4a8df8; border-color: #1890ff;
color: #000000;
} }
</style> </style>

6
src/views/indexs/right-center.vue
View File

@@ -105,12 +105,12 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData, data: xData,
axisLabel: { color: 'white' } axisLabel: { color: '#000000' }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
color: 'white' color: '#000000'
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@@ -153,7 +153,7 @@ export default {
button { button {
background: rgba(25, 61, 112, 0.8); background: rgba(25, 61, 112, 0.8);
border: 1px solid #2f6ed4; border: 1px solid #2f6ed4;
color: #fff; color: #000000;
padding: 5px 15px; padding: 5px 15px;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;

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

@@ -13,7 +13,11 @@
</thead> </thead>
</table> </table>
<div class="scroll-wrapper"> <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"> <table @click="tableClick">
<tbody> <tbody>
<tr v-for="(item, index) in tableData" :key="index"> <tr v-for="(item, index) in tableData" :key="index">
@@ -26,32 +30,82 @@
</tbody> </tbody>
</table> </table>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div class="dialog-container"> <div class="dialog-container">
<!-- :body-style="{ maxHeight: 'calc(100vh - 510px)', overflow: 'auto' }" --> <!-- :body-style="{ maxHeight: 'calc(100vh - 510px)', overflow: 'auto' }" -->
<el-dialog title="车辆当日信息" :visible.sync="setVehicleDialog" class="dialog_el" height="400px" width="803px" center <el-dialog
title="车辆当日信息"
:visible.sync="setVehicleDialog"
class="dialog_el"
height="400px"
width="803px"
center
:lock-scroll="false" :lock-scroll="false"
:append-to-body="true" :append-to-body="true"
:modal-append-to-body="true" :modal-append-to-body="true"
> >
<!-- width="100%" class="dialog-table" --> <!-- width="100%" class="dialog-table" -->
<div class="dialog-body-wrapper"> <div class="dialog-body-wrapper">
<el-table :data="tableData" border class="vehicleTable" height="600px" width="800px" :default-sort="{prop: 'totalMileage', order: 'descending'}"> <el-table
<el-table-column type="index" prop="tableIndex" label="序号" width="80px"></el-table-column> :data="tableData"
<el-table-column prop="plateNumber" label="车牌号" width="120px" sortable></el-table-column> border
<el-table-column prop="totalMileage" label="当前总里程" width="140px" :formatter="formatMileageKm" sortable></el-table-column> class="vehicleTable"
<el-table-column prop="dayMileage" label="当日里程" width="130px" :formatter="formatMileageKm" sortable></el-table-column> height="600px"
<el-table-column prop="dayHydrogen" label="当日用氢量" width="140px" :formatter="formatHydrogenKg" sortable></el-table-column> width="800px"
<el-table-column prop="dayCarbon" label="当日碳减排" width="140px" :formatter="formatHydrogenKg" sortable></el-table-column> :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> </el-table>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button class="closeButton" type="primary" size="small" @click="closeDialog">关闭</el-button> <el-button
class="closeButton"
type="primary"
size="small"
@click="closeDialog"
>关闭</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
@@ -60,16 +114,15 @@
</template> </template>
<script> <script>
import Vue from "vue";
import Vue from 'vue'
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
import { currentGET } from 'api/modules' import { currentGET } from "api/modules";
import { Dialog,Table, TableColumn } from 'element-ui' import { Dialog, Table, TableColumn } from "element-ui";
import 'element-ui/lib/theme-chalk/table.css' import "element-ui/lib/theme-chalk/table.css";
import 'element-ui/lib/theme-chalk/table-column.css' import "element-ui/lib/theme-chalk/table-column.css";
Vue.component('el-dialog', Dialog) Vue.component("el-dialog", Dialog);
Vue.use(Table) Vue.use(Table);
Vue.use(TableColumn) Vue.use(TableColumn);
export default { export default {
components: { vueSeamlessScroll }, components: { vueSeamlessScroll },
data() { data() {
@@ -84,7 +137,6 @@ export default {
}, },
tableData: [], tableData: [],
setVehicleDialog: false, setVehicleDialog: false,
}; };
}, },
mounted() { mounted() {
@@ -92,14 +144,14 @@ export default {
}, },
methods: { methods: {
tableClick() { tableClick() {
console.log('tableClick') console.log("tableClick");
this.setVehicleDialog = true; this.setVehicleDialog = true;
}, },
closeDialog() { closeDialog() {
this.setVehicleDialog = false; this.setVehicleDialog = false;
}, },
getExchangeData() { getExchangeData() {
currentGET("big13").then(res => { currentGET("big13").then((res) => {
console.log("当日汇总数据："); console.log("当日汇总数据：");
console.log(res.data); console.log(res.data);
this.tableData = res.data; this.tableData = res.data;
@@ -108,16 +160,12 @@ export default {
}); });
}, },
formatMileageKm(row, column, cellValue, index) { formatMileageKm(row, column, cellValue, index) {
if(row.nodeName === null) if (row.nodeName === null) return "0km";
return '0km'; else return cellValue + "km";
else
return cellValue + 'km';
}, },
formatHydrogenKg(row, column, cellValue, index) { formatHydrogenKg(row, column, cellValue, index) {
if(row.nodeName === null) if (row.nodeName === null) return "0kg";
return '0kg'; else return cellValue + "kg";
else
return cellValue + 'kg';
}, },
}, },
}; };
@@ -137,26 +185,31 @@ table {
text-align: center; /* 修改为居中对齐 */ text-align: center; /* 修改为居中对齐 */
} }
th { th,
padding: 10px 12px; td {
color:white; padding: 12px;
color: #2d3748;
font-size: 14px; font-size: 14px;
width: 20%; width: 24%;
text-align: center; /* 确保单元格内容居中 */ border-right: 1px solid rgba(79, 209, 197, 0.2);
height: 50px; /* 固定行高，与数据行保持一致 */ }
box-sizing: border-box;
th {
color: #000;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
td { td {
padding: 10px 12px; padding: 10px 12px;
color:rgb(0, 255, 204); color: #000;
font-size: 14px; font-size: 14px;
width: 20%; width: 20%;
text-align: center; /* 确保单元格内容居中 */ text-align: center; /* 确保单元格内容居中 */
} }
thead { thead {
background: #013f6a; color: #ffffff;
padding: 10%; font-weight: 600;
} }
.dialog_el >>> .el-dialog__body { .dialog_el >>> .el-dialog__body {
@@ -182,9 +235,8 @@ thead {
text-align: center; /* 确保单元格内容居中 */ text-align: center; /* 确保单元格内容居中 */
} }
.closeButton { .closeButton {
color: gray; color: #fff;
background-color: #013f6a; background-color: #013f6a;
} }
/* 内容容器滚动设置 */ /* 内容容器滚动设置 */
.dialog-body-wrapper { .dialog-body-wrapper {
@@ -198,26 +250,48 @@ thead {
width: 300px; width: 300px;
height: 0px; /* 适配大屏，数据较多可增加高度 */ height: 0px; /* 适配大屏，数据较多可增加高度 */
overflow: hidden; overflow: hidden;
background-color: #031a47; background: linear-gradient(
border-radius: 8px; 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 { .dialog_el .el-table {
background-color: transparent !important; background-color: transparent !important;
/* width: 100%; */ border-radius: 8px;
/* back */ 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{ /* .dialog-table{
background-color: #031a47; background-color: #ffffff;
} */ } */
/* .dialog-table { /* .dialog-table {
// background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%); // background: linear-gradient(135deg, #031a47 0%, #e4e8ed 100%);
background-color: #013f6a; background-color: #f5f7fa;
// text-align: center; // text-align: center;
} */ } */
/* .dialog-table th { /* .dialog-table th {
background-color: #011946 !important; background-color: #e3f2fd !important;
color: white; color: white;
} }
.dialog-table td { .dialog-table td {
@@ -226,6 +300,10 @@ thead {
.scroll-wrapper { .scroll-wrapper {
height: 550px; /*适配大屏，数据较多可增加高度 */ height: 550px; /*适配大屏，数据较多可增加高度 */
overflow: hidden; 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 { .scroll-container table {
@@ -233,10 +311,16 @@ thead {
} }
tr { 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) { 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> </style>

2
src/views/indexs/right-top-new.vue
View File

@@ -77,7 +77,7 @@ table {
th { th {
padding: 12px; padding: 12px;
color:white; color: #000000;
font-size: 14px; font-size: 14px;
width: 20%; width: 20%;
text-align: center; /* 确保单元格内容居中 */ text-align: center; /* 确保单元格内容居中 */

8
src/views/indexs/right-top.vue
View File

@@ -133,7 +133,7 @@ export default {
itemHeight: .0, itemHeight: .0,
itemGap: 10, itemGap: 10,
textStyle: { textStyle: {
color: 'white', color: '#000000',
fontSize: 16, fontSize: 16,
fontWeight: 'normal', fontWeight: 'normal',
fontFamily: 'Arial, sans-serif' fontFamily: 'Arial, sans-serif'
@@ -153,7 +153,7 @@ export default {
data: this.XAxisData, data: this.XAxisData,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: '#000000',
width: 1 width: 1
} }
}, },
@@ -165,7 +165,7 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
color: 'white', color: '#000000',
fontSize: 12, fontSize: 12,
interval: 1, interval: 1,
rotate: 45 rotate: 45
@@ -220,7 +220,7 @@ export default {
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color: '#fff', color: '#000000',
fontSize: 12, fontSize: 12,
formatter: (params) => { formatter: (params) => {
return params.value === 0 ? '' : params.value; return params.value === 0 ? '' : params.value;