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

update1.6

Browse Source
This commit is contained in:
lnljyang
2026-01-07 09:51:51 +08:00
parent 3bb5419386
commit 667006bb89
4 changed files with 523 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,13 @@ $colors: (
"dark": #222222, "dark": #222222,
"black-1": #333333, "black-1": #333333,
"black": #000000, "black": #000000,
"icon": #1976d2 "icon": #1976d2,
// 新增浅色主题专用颜色
"bg-light": #fafbfc,
"bg-lighter": #ffffff,
"border-light": #e4e7ed,
"text-secondary": #606266,
"text-regular": #909399
); );
// 字体大小 // 字体大小

4
src/views/home.scss
View File

@@ -16,7 +16,7 @@
height: 100%; height: 100%;
padding: 16px 16px 10px 16px; padding: 16px 16px 10px 16px;
box-sizing: border-box; box-sizing: border-box;
background-color: #f5f7fa; background-color: #fafbfc;
background-image: none; background-image: none;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@@ -102,7 +102,7 @@
font-weight: 900; font-weight: 900;
letter-spacing: 6px; letter-spacing: 6px;
width: 100%; width: 100%;
background: linear-gradient(92deg, #2c5aa0 0%, #1e88e5 48.8525390625%, #1976d2 100%); background: linear-gradient(92deg, #1976d2 0%, #2196f3 48.8525390625%, #42a5f5 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }

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

@@ -9,7 +9,10 @@
<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">{{ maptitle }}</span>{{ maptitle2 }}</span> <span class="titletextBefore"
>今年累计碳减排<span class="titletext">{{ maptitle }}</span
>{{ maptitle2 }}</span
>
<div class="you"></div> <div class="you"></div>
</div> </div>
<div class="mapwrap"> <div class="mapwrap">
@@ -21,11 +24,19 @@
车辆实况 车辆实况
</div> </div>
<div class="quanguo2" @click="changeShow1()" :style="{ backgroundColor: currentBgColor2 }"> <div
<div >车辆信息</div> class="quanguo2"
@click="changeShow1()"
:style="{ backgroundColor: currentBgColor2 }"
>
<div>车辆信息</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>
<Echart id="CenterMap" :options="options" ref="CenterMap" /> <Echart id="CenterMap" :options="options" ref="CenterMap" />
@@ -45,17 +56,16 @@ export default {
data() { data() {
return { return {
maptitle: "2536238", maptitle: "2536238",
maptitle2:'', maptitle2: "",
options: {}, options: {},
code: "china", //china 代表中国 其他地市是行政编码 code: "china", //china 代表中国 其他地市是行政编码
//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() {},
@@ -63,72 +73,84 @@ export default {
mounted() { mounted() {
console.log(xzqCode); console.log(xzqCode);
this.getYearData(); this.getYearData();
this.showType = 1; this.showType = 1;
this.currentBgColor2 = '#1976d2'; this.currentBgColor2 = "#1976d2";
this.getData("china"); this.getData("china");
//this.getData("440000"); //this.getData("440000");
}, },
methods: { methods: {
changeShow1(){ changeShow1() {
this.showType = 1; this.showType = 1;
this.currentBgColor2 = '#1976d2'; this.currentBgColor2 = "#1976d2";
this.currentBgColor3 = ''; this.currentBgColor3 = "";
this.getData(this.code); this.getData(this.code);
}, },
changeShow2(){ changeShow2() {
this.currentBgColor2 = ''; this.currentBgColor2 = "";
this.currentBgColor3 = '#1976d2'; this.currentBgColor3 = "#1976d2";
this.showType = 2; this.showType = 2;
this.getData(this.code); this.getData(this.code);
}, },
goToPage() { goToPage() {
//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-lnSituation?"+this.code, "_blank"); window.open(
"http://47.100.49.118:8090/vehicle-lnSituation?" + this.code,
"_blank"
);
//window.open("http://127.0.0.1:9528/vehicle-lnSituation?"+this.code, "_blank"); //window.open("http://127.0.0.1:9528/vehicle-lnSituation?"+this.code, "_blank");
//window.open("http://192.168.0.219:9528/vehicle-lnSituation?"+this.code, "_blank"); //window.open("http://192.168.0.219:9528/vehicle-lnSituation?"+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.maptitle = res.data.yearCarbon ; //单位kg //this.maptitle = res.data.yearCarbon ; //单位kg
this.maptitle = res.data.yearCarbonTon ; //单位吨 this.maptitle = res.data.yearCarbonTon; //单位吨
this.maptitle2 = '吨'; this.maptitle2 = "吨";
});
});
}, },
getData(code) { getData(code) {
console.log("code", code); console.log("code", code);
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) {
this.getGeojson(res.data.regionCode, res.data.dataList); this.getGeojson(res.data.regionCode, res.data.dataList);
this.mapclick(); this.mapclick();
} else { } else {
this.$Message.warning(res.msg); this.$Message.warning(
"获取车辆信息失败：" + (res.msg || "未知错误")
);
} }
}); });
}else if(this.showType === 2){ } else if (this.showType === 2) {
currentGET("big10", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => { currentGET("big10", {
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) {
this.getGeojson2(res.data.regionCode, res.data.dataList); this.getGeojson2(res.data.regionCode, res.data.dataList);
this.mapclick(); this.mapclick();
} else { } else {
this.$Message.warning(res.msg); this.$Message.warning(
"获取加氢站信息失败：" + (res.msg || "未知错误")
);
} }
}); });
} }
@@ -142,33 +164,32 @@ 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(
return res; (res) => {
}); return res;
echarts.registerMap(name, mapjson); }
);
echarts.registerMap(name, mapjson);
} }
console.log(mapjson); console.log(mapjson);
let cityCenter = {}; let cityCenter = {};
let arr = mapjson.features; let arr = mapjson.features;
//根据geojson获取省份中心点 //根据geojson获取省份中心点
arr.map((item) => { arr.map((item) => {
cityCenter[item.properties.name] = cityCenter[item.properties.name] =
item.properties.centroid || item.properties.center; item.properties.centroid || item.properties.center;
@@ -176,33 +197,37 @@ export default {
let newData = []; let newData = [];
mydata.map((item) => { mydata.map((item) => {
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;
} }
if(item.dayMileage===undefined || item.dayMileage===null){ if (item.dayMileage === undefined || item.dayMileage === null) {
item.dayMileage = 0; item.dayMileage = 0;
} }
if(item.dayHydrogen===undefined || item.dayHydrogen===null){ if (item.dayHydrogen === undefined || item.dayHydrogen === null) {
item.dayHydrogen = 0; item.dayHydrogen = 0;
} }
if(item.dayCarbon===undefined || item.dayCarbon===null){ if (item.dayCarbon === undefined || item.dayCarbon === null) {
item.dayCarbon = 0; item.dayCarbon = 0;
} }
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);
}, },
/** /**
* @description: 获取geojson * @description: 获取geojson
* @param {*} name china 表示中国 其他省份行政区编码 * @param {*} name china 表示中国 其他省份行政区编码
* @param {*} mydata 接口返回列表数据 * @param {*} mydata 接口返回列表数据
@@ -211,33 +236,32 @@ export default {
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(
return res; (res) => {
}); return res;
echarts.registerMap(name, mapjson); }
);
echarts.registerMap(name, mapjson);
} }
console.log(mapjson); console.log(mapjson);
let cityCenter = {}; let cityCenter = {};
let arr = mapjson.features; let arr = mapjson.features;
//根据geojson获取省份中心点 //根据geojson获取省份中心点
arr.map((item) => { arr.map((item) => {
cityCenter[item.properties.name] = cityCenter[item.properties.name] =
item.properties.centroid || item.properties.center; item.properties.centroid || item.properties.center;
@@ -245,25 +269,29 @@ 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);
@@ -291,11 +319,11 @@ export default {
{ gte: 500, label: "500 辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。 { gte: 500, label: "500 辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 100, lte: 500, label: "100-500 辆" }, { gte: 100, lte: 500, label: "100-500 辆" },
{ gte: 50, lte: 100, label: "50-100 辆" }, { gte: 50, lte: 100, label: "50-100 辆" },
{ lte: 50, label: "1-50 辆" },// 不指定 min，表示 min 为无限大（-Infinity）。 { lte: 50, label: "1-50 辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。
], ],
inRange: { inRange: {
// 渐变颜色，从小到大 // 渐变颜色，从小到大
color: [ color: [
// "#c3d7df", // "#c3d7df",
// "#5cb3cc", // "#5cb3cc",
// "#8abcd1", // "#8abcd1",
@@ -324,7 +352,7 @@ export default {
series: [ series: [
{ {
name: "MAP", name: "MAP",
type: "map", type: "map",
map: name, map: name,
// zlevel: 2, // zlevel: 2,
// aspectScale: 0.78, // aspectScale: 0.78,
@@ -334,6 +362,7 @@ export default {
zoom: zoom, zoom: zoom,
geoIndex: 1, geoIndex: 1,
top: top, top: top,
showLegendSymbol: false, // 存在legend时显示
tooltip: { tooltip: {
show: true, show: true,
formatter: function (params) { formatter: function (params) {
@@ -341,13 +370,13 @@ export default {
//console.log(params); //console.log(params);
if (params.data) { if (params.data) {
//return params.name + "：" + params.data["value"][2]; //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`; 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 { } else {
return params.name; return params.name;
} }
}, },
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#333333", color: "#333333",
@@ -367,7 +396,8 @@ export default {
}, },
rich: {}, rich: {},
}, },
emphasis: { //高亮时显示 emphasis: {
//高亮时显示
label: { label: {
show: false, show: false,
}, },
@@ -404,10 +434,13 @@ export default {
}, },
{ {
data: data2, data: data2,
type: "effectScatter",
type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
symbol:
"image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
symbolSize: function (val) { symbolSize: function (val) {
return 4; return 20;
// return val[2] / 50; // return val[2] / 50;
}, },
legendHoverLink: true, legendHoverLink: true,
@@ -427,22 +460,41 @@ 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(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#333333", color: "#333333",
}, },
}, },
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) + "\n "+param.data["value"][2]; //2025.03.31 //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, fontSize: 11,
offset: [0, 2], offset: [0, 2],
@@ -455,25 +507,18 @@ export default {
show: true, show: true,
}, },
// colorBy: "data", // colorBy: "data",
itemStyle: {
color: "rgba(255,255,255,1)",
borderColor: "rgba(2255,255,255,2)",
borderWidth: 4,
shadowColor: "#000",
shadowBlur: 10,
},
}, },
], ],
//动画效果 //动画效果
// animationDuration: 1000, // animationDuration: 1000,
// animationEasing: 'linear', // animationEasing: 'linear',
// animationDurationUpdate: 1000 // animationDurationUpdate: 1000
}; };
this.options = option; this.options = option;
}, },
//加氢站信息 //加氢站信息
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);
@@ -490,15 +535,15 @@ export default {
visualMap: { visualMap: {
left: 20, left: 20,
bottom: 20, bottom: 20,
pieces: [ pieces: [
{ gte: 100, label: "100 座以上" }, // 不指定 max，表示 max 为无限大（Infinity）。 { gte: 100, label: "100 座以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 30, lte: 100, label: "30-100 座" }, { gte: 30, lte: 100, label: "30-100 座" },
{ gte: 10, lte: 30, label: "10-30 座" }, { gte: 10, lte: 30, label: "10-30 座" },
{ lte: 10, label: "1-10 座" },// 不指定 min，表示 min 为无限大（-Infinity）。 { lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。
], ],
inRange: { inRange: {
// 渐变颜色，从小到大 // 渐变颜色，从小到大
color: [ color: [
// "#c3d7df", // "#c3d7df",
// "#5cb3cc", // "#5cb3cc",
// "#8abcd1", // "#8abcd1",
@@ -527,13 +572,14 @@ export default {
series: [ series: [
{ {
name: "MAP", name: "MAP",
type: "map", type: "map",
map: name, map: name,
// zlevel: 2, // zlevel: 2,
// aspectScale: 0.78, // aspectScale: 0.78,
data: data, data: data,
//data: [1,100], //data: [1,100],
selectedMode: false, //是否允许选中多个区域 selectedMode: false, //是否允许选中多个区域
showLegendSymbol: false, // 存在legend时显示
zoom: zoom, zoom: zoom,
geoIndex: 1, geoIndex: 1,
top: top, top: top,
@@ -544,13 +590,13 @@ export default {
//console.log(params); //console.log(params);
if (params.data) { if (params.data) {
//return params.name + "：" + params.data["value"][2]; //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.siteTotalCount}<br>当前运营总数: ${params.data.siteCount}`; return `${params.name}<br>加氢站总数: ${params.data.siteTotalCount}<br>当前运营总数: ${params.data.siteCount}`;
} else { } else {
return params.name; return params.name;
} }
}, },
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#333333", color: "#333333",
@@ -570,7 +616,8 @@ export default {
}, },
rich: {}, rich: {},
}, },
emphasis: { //高亮时显示 emphasis: {
//高亮时显示
label: { label: {
show: false, show: false,
}, },
@@ -607,10 +654,18 @@ export default {
}, },
{ {
data: data2, data: data2,
type: "effectScatter", // type: "effectScatter",
// coordinateSystem: "geo",
// symbolSize: function (val) {
// return 4;
// // return val[2] / 50;
// },
type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
symbol:
"image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/station25.png",
symbolSize: function (val) { symbolSize: function (val) {
return 4; return 20;
// return val[2] / 50; // return val[2] / 50;
}, },
legendHoverLink: true, legendHoverLink: true,
@@ -630,21 +685,33 @@ 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(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#333333", color: "#333333",
}, },
}, },
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) + "\n "+param.data["value"][2]; //2025.03.31 //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, fontSize: 11,
offset: [0, 2], offset: [0, 2],
@@ -657,19 +724,19 @@ export default {
show: true, show: true,
}, },
// colorBy: "data", // colorBy: "data",
itemStyle: { // itemStyle: {
color: "rgba(255,255,255,1)", // color: "rgba(255,255,255,1)",
borderColor: "rgba(2255,255,255,2)", // borderColor: "rgba(2255,255,255,2)",
borderWidth: 4, // borderWidth: 4,
shadowColor: "#000", // shadowColor: "#000",
shadowBlur: 10, // shadowBlur: 10,
}, // },
}, },
], ],
//动画效果 //动画效果
// animationDuration: 1000, // animationDuration: 1000,
// animationEasing: 'linear', // animationEasing: 'linear',
// animationDurationUpdate: 1000 // animationDurationUpdate: 1000
}; };
this.options = option; this.options = option;
}, },
@@ -683,7 +750,7 @@ export default {
if (this.echartBindClick) return; if (this.echartBindClick) return;
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图 //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
this.$refs.CenterMap.chart.on("click", (params) => { this.$refs.CenterMap.chart.on("click", (params) => {
console.log(params); console.log(params);
let xzqData = xzqCode[params.name]; let xzqData = xzqCode[params.name];
if (xzqData) { if (xzqData) {
this.getData(xzqData.adcode); this.getData(xzqData.adcode);
@@ -692,7 +759,7 @@ export default {
} }
}); });
this.echartBindClick = true; this.echartBindClick = true;
} },
}, },
destroyed() { destroyed() {
// 销毁事件监听 // 销毁事件监听

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

@@ -1,332 +1,325 @@
<template> <template>
<div class="cards-container"> <div class="cards-container">
<!-- 四个卡片 --> <!-- 四个卡片 -->
<div class="card"> <div class="card">
<!-- 数值与文字 --> <!-- 数值与文字 -->
<div class="card-info"> <div class="card-info">
<!-- 主数值（高亮） --> <!-- 主数值（高亮） -->
<div class="value-line"> <div class="value-line">
<span class="number">{{ cards[0].value }}</span> <span class="number">{{ cards[0].value }}</span>
<span class="unit">{{ cards[0].unit }}</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> </div>
<!-- 标签说明 -->
<div class="label">{{ cards[0].label }}</div>
</div> </div>
<div class="card">
<!-- 数值与文字 --> <!-- 图标及其闪动背景 -->
<div class="card-info"> <div class="icon-wrapper">
<!-- 主数值（高亮） --> <!-- 背后闪动的竖直矩形 -->
<div class="value-line"> <div class="icon-bg icon-bg-0"></div>
<span class="number">{{ cards[1].value }}</span> <!-- 圆形平台 -->
<span class="unit">{{ cards[1].unit }}</span> <div class="platform-circle"></div>
</div> <!-- 图标本身（此处用Unicode或自定义图标） -->
<!-- 标签说明 --> <div class="icon">
<div class="label">{{ cards[1].label }}</div> <img src="@/assets/img/left/1.svg" class="images" />
</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> </div>
</div> </div>
</div> </div>
</template> <div class="card">
<!-- 数值与文字 -->
<script> <div class="card-info">
import { currentGET } from 'api/modules' <!-- 主数值（高亮） -->
<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", <div class="icon-wrapper">
data() { <!-- 背后闪动的竖直矩形 -->
return { <div class="icon-bg icon-bg-1"></div>
cards: [ <!-- 圆形平台 -->
{ <div class="platform-circle"></div>
id: 1, <!-- 图标本身（此处用Unicode或自定义图标） -->
value: "452/807", <div class="icon">
unit: "辆", <img src="@/assets/img/left/2.svg" class="images" />
label: "在线车数", </div>
srcValue: "@/assets/img/left_top_lv.png", </div>
}, </div>
{ <div class="card">
id: 2, <!-- 数值与文字 -->
value: "561", <div class="card-info">
unit: "kg", <!-- 主数值（高亮） -->
label: "当日减碳", <div class="value-line">
srcValue: "@/assets/img/left/1.svg", <span class="number">{{ cards[2].value }}</span>
}, <span class="unit">{{ cards[2].unit }}</span>
{ </div>
id: 3, <!-- 标签说明 -->
value: "534", <div class="label">{{ cards[2].label }}</div>
unit: "kg", </div>
label: "当日用氢量",
srcValue: "@/assets/img/left/1.svg", <!-- 图标及其闪动背景 -->
}, <div class="icon-wrapper">
{ <!-- 背后闪动的竖直矩形 -->
id:4, <div class="icon-bg icon-bg-2"></div>
value: "3300", <!-- 圆形平台 -->
unit: "km", <div class="platform-circle"></div>
label: "当日里程", <!-- 图标本身（此处用Unicode或自定义图标） -->
srcValue: "@/assets/img/left/1.svg", <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 = res.data.onLineCount + "/" + res.data.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(); };
}, </script>
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]; <style scoped>
change.value = res.data.onLineCount + "/" + res.data.vehicleCount; /* 整体背景 */
this.$set(this.cards, 0, change); .cards-container {
display: flex;
change = this.cards[1]; justify-content: space-around;
change.value = dayCarbon; align-items: flex-end;
this.$set(this.cards, 1, change); padding-left: 0px;
change = this.cards[2]; padding-top: 30px;
change.value = dayHydrogen; padding-bottom: 30px;
this.$set(this.cards, 2, change); background-image: none;
change = this.cards[3]; background-color: transparent;
change.value = dayMileage; background-repeat: no-repeat;
this.$set(this.cards, 3, change); background-position: 0% 100%;
});
},
}
};
</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: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0% 100%;
} }
.images{ .images {
width: 65px; width: 65px;
height: 70px; height: 70px;
margin-left: 10px; margin-left: 10px;
margin-top: -5px; margin-top: -5px;
}
/* 单个卡片 */
.card {
position: relative;
width: 180px;
text-align: center;
color: #333333;
}
/* 卡片信息区域 */
.card-info {
margin-bottom: 120px; /* 给下方图标区域留出空间 */
margin-left: 10px;
}
.value-line {
font-size: 20px;
margin-bottom: 8px;
width: 120px;
}
.number {
font-weight: 700;
color: #1976d2; /* 高亮数字颜色 */
margin-right: 6px;
}
.unit {
font-size: 14px;
opacity: 0.8;
}
.label {
font-size: 16px;
color: #666666;
}
/* 图标容器 */
.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: none;
background-color: rgba(25, 118, 210, 0.1);
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(25, 118, 210, 0.3), transparent 70%);
border-radius: 50%;
box-shadow: 0 0 8px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.3);
}
/* 图标 */
.icon {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
color: #1976d2;
}
/* 关键帧动画：闪动 */
@keyframes blink {
0% {
opacity: 0.5;
} }
/* 单个卡片 */ 100% {
.card { opacity: 1;
position: relative;
width: 180px;
text-align: center;
color: #333333;
} }
}
/* 卡片信息区域 */
.card-info { /* 图标模拟，可用 Font Awesome 等替换 */
margin-bottom: 120px; /* 给下方图标区域留出空间 */ .icon-phone::before {
margin-left:10px; content: "☎";
} }
.icon-shield::before {
.value-line { content: "⛨";
font-size: 20px; }
margin-bottom: 8px; .icon-star::before {
width:120px; content: "★";
} }
.icon-protect::before {
.number { content: "🛡";
color: #1976d2; /* 高亮数字颜色 */ }
margin-right: 6px; </style>
}
.unit {
font-size: 14px;
opacity: 0.8;
}
.label {
font-size: 16px;
color: #666666;
}
/* 图标容器 */
.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: none;
background-color: rgba(25, 118, 210, 0.1);
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(25, 118, 210, 0.3), transparent 70%);
border-radius: 50%;
box-shadow: 0 0 8px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.3);
}
/* 图标 */
.icon {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
color: #1976d2;
}
/* 关键帧动画：闪动 */
@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>