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,
"black-1": #333333,
"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%;
padding: 16px 16px 10px 16px;
box-sizing: border-box;
background-color: #f5f7fa;
background-color: #fafbfc;
background-image: none;
background-size: cover;
background-position: center center;
@@ -102,7 +102,7 @@
font-weight: 900;
letter-spacing: 6px;
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-text-fill-color: transparent;
}

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

@@ -9,7 +9,10 @@
<div class="centermap">
<div class="maptitle">
<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>
<div class="mapwrap">
@@ -21,10 +24,18 @@
车辆实况
</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>
@@ -45,17 +56,16 @@ export default {
data() {
return {
maptitle: "2536238",
maptitle2:'',
maptitle2: "",
options: {},
code: "china", //china 代表中国 其他地市是行政编码
//code:"440000",
echartBindClick: false,
isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面
currentMap : 'china', // 当前显示的地图层级
currentMap: "china", // 当前显示的地图层级
showType: 1, //显示内容类型： 1车辆信息，2加氢站信息
currentBgColor2:'',
currentBgColor3:'',
currentBgColor2: "",
currentBgColor3: "",
};
},
created() {},
@@ -65,44 +75,46 @@ export default {
this.getYearData();
this.showType = 1;
this.currentBgColor2 = '#1976d2';
this.currentBgColor2 = "#1976d2";
this.getData("china");
//this.getData("440000");
},
methods: {
changeShow1() {
this.showType = 1;
this.currentBgColor2 = '#1976d2';
this.currentBgColor3 = '';
this.currentBgColor2 = "#1976d2";
this.currentBgColor3 = "";
this.getData(this.code);
},
changeShow2() {
this.currentBgColor2 = '';
this.currentBgColor3 = '#1976d2';
this.currentBgColor2 = "";
this.currentBgColor3 = "#1976d2";
this.showType = 2;
this.getData(this.code);
},
goToPage() {
//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://192.168.0.219:9528/vehicle-lnSituation?"+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.maptitle = res.data.yearCarbon ; //单位kg
this.maptitle = res.data.yearCarbonTon; //单位吨
this.maptitle2 = '吨';
this.maptitle2 = "吨";
});
},
getData(code) {
@@ -110,25 +122,35 @@ 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) {
this.getGeojson(res.data.regionCode, res.data.dataList);
this.mapclick();
} else {
this.$Message.warning(res.msg);
this.$Message.warning(
"获取车辆信息失败：" + (res.msg || "未知错误")
);
}
});
} 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);
//if (res.success)
if (res.status) {
this.getGeojson2(res.data.regionCode, res.data.dataList);
this.mapclick();
} else {
this.$Message.warning(res.msg);
this.$Message.warning(
"获取加氢站信息失败：" + (res.msg || "未知错误")
);
}
});
}
@@ -142,27 +164,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 = {};
@@ -178,7 +199,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;
@@ -194,11 +214,16 @@ 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);
},
@@ -211,27 +236,26 @@ export default {
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 = {};
@@ -245,20 +269,24 @@ 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);
},
@@ -334,6 +362,7 @@ export default {
zoom: zoom,
geoIndex: 1,
top: top,
showLegendSymbol: false, // 存在legend时显示
tooltip: {
show: true,
formatter: function (params) {
@@ -347,7 +376,7 @@ export default {
return params.name;
}
},
backgroundColor: "rgba(0,0,0,.6)",
backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#333333",
@@ -367,7 +396,8 @@ export default {
},
rich: {},
},
emphasis: { //高亮时显示
emphasis: {
//高亮时显示
label: {
show: false,
},
@@ -404,10 +434,13 @@ export default {
},
{
data: data2,
type: "effectScatter",
type: "scatter",
coordinateSystem: "geo",
symbol:
"image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
symbolSize: function (val) {
return 4;
return 20;
// return val[2] / 50;
},
legendHoverLink: true,
@@ -427,12 +460,31 @@ 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)",
backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#333333",
@@ -455,13 +507,6 @@ export default {
show: true,
},
// colorBy: "data",
itemStyle: {
color: "rgba(255,255,255,1)",
borderColor: "rgba(2255,255,255,2)",
borderWidth: 4,
shadowColor: "#000",
shadowBlur: 10,
},
},
],
//动画效果
@@ -534,6 +579,7 @@ export default {
data: data,
//data: [1,100],
selectedMode: false, //是否允许选中多个区域
showLegendSymbol: false, // 存在legend时显示
zoom: zoom,
geoIndex: 1,
top: top,
@@ -550,7 +596,7 @@ export default {
return params.name;
}
},
backgroundColor: "rgba(0,0,0,.6)",
backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#333333",
@@ -570,7 +616,8 @@ export default {
},
rich: {},
},
emphasis: { //高亮时显示
emphasis: {
//高亮时显示
label: {
show: false,
},
@@ -607,10 +654,18 @@ export default {
},
{
data: data2,
type: "effectScatter",
// type: "effectScatter",
// coordinateSystem: "geo",
// symbolSize: function (val) {
// return 4;
// // return val[2] / 50;
// },
type: "scatter",
coordinateSystem: "geo",
symbol:
"image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/station25.png",
symbolSize: function (val) {
return 4;
return 20;
// return val[2] / 50;
},
legendHoverLink: true,
@@ -630,11 +685,23 @@ 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)",
backgroundColor: "rgba(255,255,255,0.8)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#333333",
@@ -657,13 +724,13 @@ export default {
show: true,
},
// colorBy: "data",
itemStyle: {
color: "rgba(255,255,255,1)",
borderColor: "rgba(2255,255,255,2)",
borderWidth: 4,
shadowColor: "#000",
shadowBlur: 10,
},
// itemStyle: {
// color: "rgba(255,255,255,1)",
// borderColor: "rgba(2255,255,255,2)",
// borderWidth: 4,
// shadowColor: "#000",
// shadowBlur: 10,
// },
},
],
//动画效果
@@ -692,7 +759,7 @@ export default {
}
});
this.echartBindClick = true;
}
},
},
destroyed() {
// 销毁事件监听

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

@@ -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;
let vehicleCount = 0;
@@ -153,18 +153,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];
@@ -182,7 +177,7 @@
this.$set(this.cards, 3, change);
});
},
}
},
};
</script>
@@ -227,9 +222,9 @@
}
.number {
font-weight: 700;
color: #1976d2; /* 高亮数字颜色 */
margin-right: 6px;
}
.unit {
@@ -281,7 +276,6 @@
animation-delay: 0.6s;
}
/* 圆形平台 */
.platform-circle {
position: absolute;
@@ -329,4 +323,3 @@
content: "🛡";
}
</style>