From 64e9a61472be95b9535311d2b3f9b33d4e9c8c86 Mon Sep 17 00:00:00 2001 From: lnljyang <506960565@qq.com> Date: Tue, 6 Jan 2026 11:58:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=85=E8=89=B2=E7=89=882?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 6 +- src/views/indexs/center-map.vue | 366 ++++++++++------- src/views/indexs/left-top.vue | 631 ++++++++++++++--------------- src/views/indexs/right-bottom.vue | 64 +-- src/views/indexs/right-top-day.vue | 268 +++++++----- 5 files changed, 741 insertions(+), 594 deletions(-) diff --git a/src/App.vue b/src/App.vue index a779653..eb33ef1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,7 +7,7 @@ --> @@ -15,7 +15,7 @@ #app { width: 100vw; height: 100vh; - background-color: #091a40; + background-color: #fafafa; // overflow: hidden; } - \ No newline at end of file + diff --git a/src/views/indexs/center-map.vue b/src/views/indexs/center-map.vue index 4a974a3..ba21fee 100644 --- a/src/views/indexs/center-map.vue +++ b/src/views/indexs/center-map.vue @@ -9,30 +9,44 @@
- 今年碳减排总量{{ totalCarbon/1000 }}吨 + 今年碳减排总量{{ totalCarbon / 1000 }}吨
- 总里程数{{ totalMileage }}万km + 总里程数{{ totalMileage }}万km
中国 -
+
车辆实况
-
-
车辆信息
+
+
车辆信息
-
-
加氢站
+
+
加氢站
-
-
全国车辆范围
+
+
全国车辆范围
@@ -56,10 +70,10 @@ export default { //code:"440000", echartBindClick: false, isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面 - currentMap : 'china', // 当前显示的地图层级 - showType: 1, //显示内容类型： 1车辆信息，2加氢站信息 - currentBgColor2:'', - currentBgColor3:'', + currentMap: "china", // 当前显示的地图层级 + showType: 1, //显示内容类型： 1车辆信息，2加氢站信息 + currentBgColor2: "", + currentBgColor3: "", }; }, created() {}, @@ -67,22 +81,22 @@ export default { mounted() { console.log(this.xzqCode); this.getYearData(); - + this.showType = 1; - this.currentBgColor2 = '#158e8e'; + this.currentBgColor2 = "#158e8e"; //this.getData("china"); this.getData(this.code); }, methods: { - changeShow1(){ + changeShow1() { this.showType = 1; - this.currentBgColor2 = '#158e8e'; - this.currentBgColor3 = ''; + this.currentBgColor2 = "#158e8e"; + this.currentBgColor3 = ""; this.getData(this.code); }, - changeShow2(){ - this.currentBgColor2 = ''; - this.currentBgColor3 = '#158e8e'; + changeShow2() { + this.currentBgColor2 = ""; + this.currentBgColor3 = "#158e8e"; this.showType = 2; this.getData(this.code); }, @@ -90,29 +104,35 @@ export default { //window.open("http://localhost:9528/vehicle-management/vehicle-state?"+this.code, "_blank"); //window.open("http://47.100.49.118:8090/vehicle-situation?"+this.code, "_blank"); - window.open("http://127.0.0.1:9528/vehicle-situation?"+this.code, "_blank"); + window.open( + "http://127.0.0.1:9528/vehicle-situation?" + this.code, + "_blank" + ); //window.open("http://192.168.0.219:9528/vehicle-situation?"+this.code, "_blank"); }, parseAdcodeLevel(adcode) { const codeStr = String(adcode); - if (codeStr.endsWith('0000')) return 'province'; // 省级（如 440000） - if (codeStr.endsWith('00')) return 'city'; // 市级（如 440300） - return 'district'; // 区县级（如 440305） + if (codeStr.endsWith("0000")) return "province"; // 省级（如 440000） + if (codeStr.endsWith("00")) return "city"; // 市级（如 440300） + return "district"; // 区县级（如 440305） }, getYearData() { currentGET("big3").then((res) => { - console.log('年度碳排量'); - console.log(res); - this.totalCarbon = res.data.yearCarbon || "0"; - this.totalMileage = res.data.yearMileage || "0"; - }); + console.log("年度碳排量"); + console.log(res); + this.totalCarbon = res.data.yearCarbon || "0"; + this.totalMileage = res.data.yearMileage || "0"; + }); }, getData(code) { console.log("code", code); this.currentMap = this.parseAdcodeLevel(code); - //2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息 - if(this.showType === 1){ - currentGET("big9", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => { + //2025.9.10 szy 增加showType 分类处理，1时处理车辆信息，2时处理加氢站信息 + if (this.showType === 1) { + currentGET("big9", { + regionCode: code, + adcodeLevel: this.currentMap, + }).then((res) => { console.log("map车辆分布", res); //if (res.success) if (res.status) { @@ -122,9 +142,12 @@ export default { this.$Message.warning(res.msg); } }); - }else if(this.showType === 2){ - //改为显示全国所有加氢站信息 停止使用big14 使用big15 2025.10.16 szy - currentGET("big15", { regionCode: code, adcodeLevel: this.currentMap }).then((res) => { + } else if (this.showType === 2) { + //改为显示全国所有加氢站信息 停止使用big14 使用big15 2025.10.16 szy + currentGET("big15", { + regionCode: code, + adcodeLevel: this.currentMap, + }).then((res) => { console.log("加氢站_map分布", res); //if (res.success) if (res.status) { @@ -145,33 +168,32 @@ export default { async getGeojson(name, mydata) { this.code = name; this.currentMap = name; - console.log('当前地图层级'); + console.log("当前地图层级"); console.log(this.currentMap); //如果要展示南海群岛并且展示的是中国的话 - let geoname=name + let geoname = name; if (this.isSouthChinaSea && name == "china") { geoname = "chinaNanhai"; } //如果有注册地图的话就不用再注册 了 let mapjson = echarts.getMap(name); - console.log('已经是否已存在的地图数据'); + console.log("已经是否已存在的地图数据"); if (mapjson) { mapjson = mapjson.geoJson; - } - else - { + } else { //console.log('当前未注册地图'); - mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => { - return res; - }); - echarts.registerMap(name, mapjson); - + mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then( + (res) => { + return res; + } + ); + echarts.registerMap(name, mapjson); } - console.log(mapjson); + console.log(mapjson); let cityCenter = {}; - let arr = mapjson.features; + let arr = mapjson.features; - //根据geojson获取省份中心点 + //根据geojson获取省份中心点 arr.map((item) => { cityCenter[item.properties.name] = item.properties.centroid || item.properties.center; @@ -179,62 +201,65 @@ export default { let newData = []; mydata.map((item) => { if (cityCenter[item.name]) { - if(item.vehicleTotal===undefined || item.vehicleTotal===null ){ + if (item.vehicleTotal === undefined || item.vehicleTotal === null) { item.vehicleTotal = 0; - } - if(item.onLineCount===undefined || item.onLineCount===null){ + if (item.onLineCount === undefined || item.onLineCount === null) { item.onLineCount = 0; } - if(item.dayMileage===undefined || item.dayMileage===null){ + if (item.dayMileage === undefined || item.dayMileage === null) { item.dayMileage = 0; } - if(item.dayHydrogen===undefined || item.dayHydrogen===null){ + if (item.dayHydrogen === undefined || item.dayHydrogen === null) { item.dayHydrogen = 0; } - if(item.dayCarbon===undefined || item.dayCarbon===null){ + if (item.dayCarbon === undefined || item.dayCarbon === null) { item.dayCarbon = 0; } newData.push({ name: item.name, - value: cityCenter[item.name].concat(item.vehicleTotal).concat(item.onLineCount).concat(item.dayMileage).concat(item.dayHydrogen).concat(item.dayCarbon), + value: cityCenter[item.name] + .concat(item.vehicleTotal) + .concat(item.onLineCount) + .concat(item.dayMileage) + .concat(item.dayHydrogen) + .concat(item.dayCarbon), }); } }); - console.log('开始初始化地图'); + console.log("开始初始化地图"); console.log(newData); this.init(name, mydata, newData); }, async getGeojson2(name, mydata) { this.code = name; this.currentMap = name; - console.log('加氢站_当前地图层级'); + console.log("加氢站_当前地图层级"); console.log(this.currentMap); //如果要展示南海群岛并且展示的是中国的话 - let geoname=name + let geoname = name; if (this.isSouthChinaSea && name == "china") { geoname = "chinaNanhai"; } //如果有注册地图的话就不用再注册 了 let mapjson = echarts.getMap(name); - console.log('加氢站_已经是否已存在的地图数据'); + console.log("加氢站_已经是否已存在的地图数据"); if (mapjson) { mapjson = mapjson.geoJson; - } - else - { + } else { //console.log('当前未注册地图'); - mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => { - return res; - }); - echarts.registerMap(name, mapjson); - + mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then( + (res) => { + return res; + } + ); + echarts.registerMap(name, mapjson); } - console.log(mapjson); + console.log(mapjson); let cityCenter = {}; - let arr = mapjson.features; + let arr = mapjson.features; - //根据geojson获取省份中心点 + //根据geojson获取省份中心点 arr.map((item) => { cityCenter[item.properties.name] = item.properties.centroid || item.properties.center; @@ -242,27 +267,31 @@ export default { let newData = []; mydata.map((item) => { if (cityCenter[item.name]) { - if(item.siteTotalCount===undefined || item.siteTotalCount===null ){ + if ( + item.siteTotalCount === undefined || + item.siteTotalCount === null + ) { item.siteTotalCount = 0; - } - if(item.siteCount===undefined || item.siteCount===null){ + if (item.siteCount === undefined || item.siteCount === null) { item.siteCount = 0; - } + } newData.push({ name: item.name, - value: cityCenter[item.name].concat(item.siteTotalCount).concat(item.siteCount), + value: cityCenter[item.name] + .concat(item.siteTotalCount) + .concat(item.siteCount), }); } }); - console.log('加氢站_开始初始化地图'); + console.log("加氢站_开始初始化地图"); console.log(newData); this.init2(name, mydata, newData); - }, + }, init(name, data, data2) { - console.log('init_data'); + console.log("init_data"); console.log(data); - console.log('init_data2'); + console.log("init_data2"); console.log(data2); let top = 45; let zoom = 1.05; @@ -288,11 +317,11 @@ export default { { gte: 500, label: "500辆以上" }, // 不指定 max，表示 max 为无限大（Infinity）。 { gte: 100, lte: 500, label: "100-500辆" }, { gte: 50, lte: 100, label: "50-100辆" }, - { lte: 50, label: "1-50辆" },// 不指定 min，表示 min 为无限大（-Infinity）。 + { lte: 50, label: "1-50辆" }, // 不指定 min，表示 min 为无限大（-Infinity）。 ], inRange: { // 渐变颜色，从小到大 - color: [ + color: [ // "#c3d7df", // "#5cb3cc", // "#8abcd1", @@ -321,7 +350,7 @@ export default { series: [ { name: "MAP", - type: "map", + type: "map", map: name, // zlevel: 2, // aspectScale: 0.78, @@ -338,7 +367,7 @@ export default { //console.log(params); if (params.data) { //return params.name + "：" + params.data["value"][2]; - //return params.name + "：" + params.data.vehicleTotal + "辆"; + //return params.name + "：" + params.data.vehicleTotal + "辆"; return `${params.name}
车辆总数: ${params.data.vehicleTotal}
GPS在线数: ${params.data.onLineCount}
当日里程: ${params.data.dayMileage}km
当日用氢量: ${params.data.dayHydrogen}kg
当日减碳: ${params.data.dayCarbon}kg`; } else { return params.name; @@ -347,7 +376,7 @@ export default { backgroundColor: "rgba(0,0,0,.6)", borderColor: "rgba(147, 235, 248, .8)", textStyle: { - color: "#000000", + color: "#fff", }, }, label: { @@ -364,7 +393,8 @@ export default { }, rich: {}, }, - emphasis: { //高亮时显示 + emphasis: { + //高亮时显示 label: { show: false, }, @@ -402,13 +432,15 @@ export default { { //data: data2, //type: "effectScatter", - data: data2.filter(item => item.value && item.value.length > 2 && item.value[2] > 0), + data: data2.filter( + (item) => item.value && item.value.length > 2 && item.value[2] > 0 + ), type: "scatter", coordinateSystem: "geo", - symbol: 'image://' + require('../../assets/img/cars.png'), + symbol: "image://" + require("../../assets/img/cars.png"), symbolSize: function (val) { return 20; - //return 4; + //return 4; }, legendHoverLink: true, // showEffectOn: "render", @@ -427,34 +459,54 @@ export default { if (params.data) { console.log("params.data"); console.log(params.data); - console.log(params.data.name + "\n 车辆总数: "+params.data["value"][2] + "\n GPS在线数: " + params.data["value"][3]); - return params.data.name + "
车辆总数: "+params.data["value"][2] + "
GPS在线数: " + params.data["value"][3] + "
当日里程: " + params.data["value"][4] + "km
当日用氢量: " + params.data["value"][5] + "kg
当日减碳: " + 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 + + "
车辆总数: " + + params.data["value"][2] + + "
GPS在线数: " + + params.data["value"][3] + + "
当日里程: " + + params.data["value"][4] + + "km
当日用氢量: " + + params.data["value"][5] + + "kg
当日减碳: " + + params.data["value"][6] + + "kg" + ); //return '${params.name}
车辆总数：${params.data[value][2]}
GPS在线总数：${ params.data.[value][3]}'; - } + } }, backgroundColor: "rgba(0,0,0,.6)", borderColor: "rgba(147, 235, 248, .8)", textStyle: { - color: "#000000", + color: "#fff", }, }, - label: { + label: { formatter: (param) => { - //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28 + //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28 //return param.name.slice(0, 2) ; - if (param.data && param.data.value && param.data.value.length > 2 && param.data.value[2] > 0) { + if ( + param.data && + param.data.value && + param.data.value.length > 2 && + param.data.value[2] > 0 + ) { return param.data.value[2]; // 显示车辆总数 } - return ''; + return ""; }, - fontSize: 11, + fontSize: 16, offset: [0, 2], position: "bottom", - textBorderColor: "#000000", - textShadowColor: "#000", - textShadowBlur: 10, - textBorderWidth: 0, - color: "#000000", + color: "#000", show: true, }, // colorBy: "data", @@ -467,18 +519,18 @@ export default { }, }, ], - //动画效果 - // animationDuration: 1000, - // animationEasing: 'linear', - // animationDurationUpdate: 1000 + //动画效果 + // animationDuration: 1000, + // animationEasing: 'linear', + // animationDurationUpdate: 1000 }; this.options = option; }, //2025.9.11 szy add begin init2(name, data, data2) { - console.log('init_data'); + console.log("init_data"); console.log(data); - console.log('init_data2'); + console.log("init_data2"); console.log(data2); let top = 45; let zoom = 1.05; @@ -497,12 +549,11 @@ export default { { gte: 100, label: "100 座以上" }, // 不指定 max，表示 max 为无限大（Infinity）。 { gte: 30, lte: 100, label: "30-100 座" }, { gte: 10, lte: 30, label: "10-30 座" }, - { lte: 10, label: "1-10 座" },// 不指定 min，表示 min 为无限大（-Infinity）。 + { lte: 10, label: "1-10 座" }, // 不指定 min，表示 min 为无限大（-Infinity）。 ], inRange: { // 渐变颜色，从小到大 - color: [ - + color: [ // "#66a9c9", // "#2f90b9", // "#1781b5", @@ -528,7 +579,7 @@ export default { series: [ { name: "MAP", - type: "map", + type: "map", map: name, // zlevel: 2, // aspectScale: 0.78, @@ -544,7 +595,7 @@ export default { //console.log("series 1 formatter"); //console.log(params); if (params.data) { - //return params.name + "：" + params.data["value"][2]; + //return params.name + "：" + params.data["value"][2]; return `${params.name}
加氢站总数: ${params.data.siteTotalCount}
当前运营总数: ${params.data.siteCount}`; } else { return params.name; @@ -570,7 +621,8 @@ export default { }, rich: {}, }, - emphasis: { //高亮时显示 + emphasis: { + //高亮时显示 label: { show: false, }, @@ -630,9 +682,21 @@ export default { if (params.data) { console.log("params.data"); console.log(params.data); - console.log(params.data.name + "\n 加氢站总数:"+params.data["value"][2] + "\n 当前运营总数:" + params.data["value"][3]); - return params.data.name + "
加氢站总数："+params.data["value"][2] + "
当前运营总数: " + params.data["value"][3]; - } + console.log( + params.data.name + + "\n 加氢站总数:" + + params.data["value"][2] + + "\n 当前运营总数:" + + params.data["value"][3] + ); + return ( + params.data.name + + "
加氢站总数：" + + params.data["value"][2] + + "
当前运营总数: " + + params.data["value"][3] + ); + } }, backgroundColor: "rgba(0,0,0,.6)", borderColor: "rgba(147, 235, 248, .8)", @@ -640,11 +704,11 @@ export default { color: "#000000", }, }, - label: { + label: { formatter: (param) => { //return param.name.slice(0, 2) + "\n 车辆总数："+param.data["value"][2] + "\n GPS在线数："+param.data["value"][3]; //2025.03.28 //return param.name.slice(0, 2) + "\n "+param.data["value"][2]; //2025.03.31 - return param.name.slice(0, 2) ; + return param.name.slice(0, 2); }, fontSize: 11, offset: [0, 2], @@ -666,10 +730,10 @@ export default { }, }, ], - //动画效果 - // animationDuration: 1000, - // animationEasing: 'linear', - // animationDurationUpdate: 1000 + //动画效果 + // animationDuration: 1000, + // animationEasing: 'linear', + // animationDurationUpdate: 1000 }; this.options = option; }, @@ -685,7 +749,7 @@ export default { if (this.echartBindClick) return; //单击切换到级地图，当mapCode有值,说明可以切换到下级地图 this.$refs.CenterMap.chart.on("click", (params) => { - console.log(params); + console.log(params); let xzqData = xzqCode[params.name]; if (xzqData) { this.getData(xzqData.adcode); @@ -694,7 +758,7 @@ export default { } }); this.echartBindClick = true; - } + }, }, destroyed() { // 销毁事件监听 @@ -706,7 +770,6 @@ export default { }; - \ No newline at end of file +} + +/* 图标模拟，可用 Font Awesome 等替换 */ +.icon-phone::before { + content: "☎"; +} +.icon-shield::before { + content: "⛨"; +} +.icon-star::before { + content: "★"; +} +.icon-protect::before { + content: "🛡"; +} + diff --git a/src/views/indexs/right-bottom.vue b/src/views/indexs/right-bottom.vue index a2e9b11..2efa0c8 100644 --- a/src/views/indexs/right-bottom.vue +++ b/src/views/indexs/right-bottom.vue @@ -11,7 +11,11 @@
- + @@ -29,7 +33,7 @@