浅色版2
This commit is contained in:
lnljyang
@@ -15,7 +15,7 @@
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #091a40;
|
||||
background-color: #fafafa;
|
||||
// overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -9,12 +9,18 @@
|
||||
<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">
|
||||
@@ -25,10 +31,18 @@
|
||||
<div class="quanguo1" @click="goToPage()" v-if="showType === 1">
|
||||
车辆实况
|
||||
</div>
|
||||
<div class="quanguo2" @click="changeShow1()" :style="{ backgroundColor: currentBgColor2 }">
|
||||
<div
|
||||
class="quanguo2"
|
||||
@click="changeShow1()"
|
||||
:style="{ backgroundColor: currentBgColor2 }"
|
||||
>
|
||||
<div>车辆信息</div>
|
||||
</div>
|
||||
<div class="quanguo3" @click="changeShow2()" :style="{ backgroundColor: currentBgColor3 }">
|
||||
<div
|
||||
class="quanguo3"
|
||||
@click="changeShow2()"
|
||||
:style="{ backgroundColor: currentBgColor3 }"
|
||||
>
|
||||
<div>加氢站</div>
|
||||
</div>
|
||||
<div class="quanguo4" v-if="code === 'china'">
|
||||
@@ -56,10 +70,10 @@ export default {
|
||||
//code:"440000",
|
||||
echartBindClick: false,
|
||||
isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面
|
||||
currentMap : 'china', // 当前显示的地图层级
|
||||
currentMap: "china", // 当前显示的地图层级
|
||||
showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
|
||||
currentBgColor2:'',
|
||||
currentBgColor3:'',
|
||||
currentBgColor2: "",
|
||||
currentBgColor3: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
@@ -69,20 +83,20 @@ export default {
|
||||
this.getYearData();
|
||||
|
||||
this.showType = 1;
|
||||
this.currentBgColor2 = '#158e8e';
|
||||
this.currentBgColor2 = "#158e8e";
|
||||
//this.getData("china");
|
||||
this.getData(this.code);
|
||||
},
|
||||
methods: {
|
||||
changeShow1() {
|
||||
this.showType = 1;
|
||||
this.currentBgColor2 = '#158e8e';
|
||||
this.currentBgColor3 = '';
|
||||
this.currentBgColor2 = "#158e8e";
|
||||
this.currentBgColor3 = "";
|
||||
this.getData(this.code);
|
||||
},
|
||||
changeShow2() {
|
||||
this.currentBgColor2 = '';
|
||||
this.currentBgColor3 = '#158e8e';
|
||||
this.currentBgColor2 = "";
|
||||
this.currentBgColor3 = "#158e8e";
|
||||
this.showType = 2;
|
||||
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://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("年度碳排量");
|
||||
console.log(res);
|
||||
this.totalCarbon = res.data.yearCarbon || "0";
|
||||
this.totalMileage = res.data.yearMileage || "0";
|
||||
@@ -112,7 +129,10 @@ export default {
|
||||
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) => {
|
||||
currentGET("big9", {
|
||||
regionCode: code,
|
||||
adcodeLevel: this.currentMap,
|
||||
}).then((res) => {
|
||||
console.log("map车辆分布", res);
|
||||
//if (res.success)
|
||||
if (res.status) {
|
||||
@@ -124,7 +144,10 @@ export default {
|
||||
});
|
||||
} else if (this.showType === 2) {
|
||||
//改为显示全国所有加氢站信息 停止使用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);
|
||||
//if (res.success)
|
||||
if (res.status) {
|
||||
@@ -145,27 +168,26 @@ 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) => {
|
||||
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
|
||||
(res) => {
|
||||
return res;
|
||||
});
|
||||
}
|
||||
);
|
||||
echarts.registerMap(name, mapjson);
|
||||
|
||||
}
|
||||
console.log(mapjson);
|
||||
let cityCenter = {};
|
||||
@@ -181,7 +203,6 @@ export default {
|
||||
if (cityCenter[item.name]) {
|
||||
if (item.vehicleTotal === undefined || item.vehicleTotal === null) {
|
||||
item.vehicleTotal = 0;
|
||||
|
||||
}
|
||||
if (item.onLineCount === undefined || item.onLineCount === null) {
|
||||
item.onLineCount = 0;
|
||||
@@ -197,38 +218,42 @@ export default {
|
||||
}
|
||||
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) => {
|
||||
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
|
||||
(res) => {
|
||||
return res;
|
||||
});
|
||||
}
|
||||
);
|
||||
echarts.registerMap(name, mapjson);
|
||||
|
||||
}
|
||||
console.log(mapjson);
|
||||
let cityCenter = {};
|
||||
@@ -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) {
|
||||
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;
|
||||
@@ -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,10 +432,12 @@ 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;
|
||||
@@ -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: {
|
||||
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) ;
|
||||
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",
|
||||
@@ -476,9 +528,9 @@ export default {
|
||||
},
|
||||
//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;
|
||||
@@ -502,7 +554,6 @@ export default {
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: [
|
||||
|
||||
// "#66a9c9",
|
||||
// "#2f90b9",
|
||||
// "#1781b5",
|
||||
@@ -570,7 +621,8 @@ export default {
|
||||
},
|
||||
rich: {},
|
||||
},
|
||||
emphasis: { //高亮时显示
|
||||
emphasis: {
|
||||
//高亮时显示
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
@@ -630,8 +682,20 @@ 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)",
|
||||
@@ -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;
|
||||
@@ -839,7 +902,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;
|
||||
}
|
||||
@@ -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,7 +940,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;
|
||||
}
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
import { currentGET } from "api/modules";
|
||||
|
||||
export default {
|
||||
name: "BlinkingIcons",
|
||||
@@ -145,7 +145,7 @@
|
||||
methods: {
|
||||
getData() {
|
||||
currentGET("big1").then((res) => {
|
||||
console.log('当日实况');
|
||||
console.log("当日实况");
|
||||
console.log(res);
|
||||
|
||||
let onLineCount = 0;
|
||||
@@ -154,18 +154,13 @@
|
||||
let dayHydrogen = 0;
|
||||
let dayMileage = 0;
|
||||
|
||||
if(res !==null && res.data !==null )
|
||||
{
|
||||
if(res.data.onLineCount !== null)
|
||||
onLineCount = res.data.onLineCount;
|
||||
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;
|
||||
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];
|
||||
@@ -183,7 +178,7 @@
|
||||
this.$set(this.cards, 3, change);
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -227,9 +222,9 @@
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #45f3ff; /* 高亮数字颜色 */
|
||||
color: #1890ff;
|
||||
font-weight: 700;
|
||||
margin-right: 6px;
|
||||
|
||||
}
|
||||
|
||||
.unit {
|
||||
@@ -239,7 +234,7 @@
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
color: #b9e4ff;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
@@ -280,7 +275,6 @@
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
|
||||
/* 圆形平台 */
|
||||
.platform-circle {
|
||||
position: absolute;
|
||||
@@ -328,4 +322,3 @@
|
||||
content: "🛡";
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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,7 +58,6 @@ 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() {
|
||||
@@ -62,33 +65,26 @@ export default {
|
||||
},
|
||||
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";
|
||||
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
|
||||
{
|
||||
} else {
|
||||
//console.log("偶数index: " + index);
|
||||
item.exchangeColor = "#ffcc00";
|
||||
item.priceColor = "#ffcc00";
|
||||
item.regionColor = "#ffcc00";
|
||||
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);
|
||||
@@ -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>
|
||||
|
||||
@@ -13,7 +13,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 @click="tableClick">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
@@ -26,32 +30,82 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</vue-seamless-scroll>
|
||||
|
||||
</div>
|
||||
<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
|
||||
<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'}">
|
||||
<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
|
||||
: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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</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() {
|
||||
@@ -84,7 +137,6 @@ export default {
|
||||
},
|
||||
tableData: [],
|
||||
setVehicleDialog: false,
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -92,14 +144,14 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
tableClick() {
|
||||
console.log('tableClick')
|
||||
console.log("tableClick");
|
||||
this.setVehicleDialog = true;
|
||||
},
|
||||
closeDialog() {
|
||||
this.setVehicleDialog = false;
|
||||
},
|
||||
getExchangeData() {
|
||||
currentGET("big13").then(res => {
|
||||
currentGET("big13").then((res) => {
|
||||
console.log("当日汇总数据：");
|
||||
console.log(res.data);
|
||||
this.tableData = res.data;
|
||||
@@ -108,16 +160,12 @@ export default {
|
||||
});
|
||||
},
|
||||
formatMileageKm(row, column, cellValue, index) {
|
||||
if(row.nodeName === null)
|
||||
return '0km';
|
||||
else
|
||||
return cellValue + 'km';
|
||||
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,26 +185,31 @@ 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 {
|
||||
@@ -182,9 +235,8 @@ thead {
|
||||
text-align: center; /* 确保单元格内容居中 */
|
||||
}
|
||||
.closeButton {
|
||||
color: gray;
|
||||
color: #fff;
|
||||
background-color: #013f6a;
|
||||
|
||||
}
|
||||
/* 内容容器滚动设置 */
|
||||
.dialog-body-wrapper {
|
||||
@@ -198,27 +250,49 @@ 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;
|
||||
background-color: #f5f7fa;
|
||||
// text-align: center;
|
||||
} */
|
||||
/* .dialog-table th {
|
||||
background-color: #011946 !important;
|
||||
color: #000000;
|
||||
background-color: #e3f2fd !important;
|
||||
color: white;
|
||||
}
|
||||
.dialog-table td {
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
@@ -226,6 +300,10 @@ thead {
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user