diff --git a/src/assets/css/modules/variables.scss b/src/assets/css/modules/variables.scss index bf01f21..23140e0 100644 --- a/src/assets/css/modules/variables.scss +++ b/src/assets/css/modules/variables.scss @@ -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 ); // 字体大小 diff --git a/src/views/home.scss b/src/views/home.scss index 2582d06..672e628 100644 --- a/src/views/home.scss +++ b/src/views/home.scss @@ -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; } diff --git a/src/views/indexs/center-map.vue b/src/views/indexs/center-map.vue index dba1710..c2a40f7 100644 --- a/src/views/indexs/center-map.vue +++ b/src/views/indexs/center-map.vue @@ -9,7 +9,10 @@
- 今年累计碳减排{{ maptitle }}{{ maptitle2 }} + 今年累计碳减排{{ maptitle }}{{ maptitle2 }}
@@ -21,11 +24,19 @@ 车辆实况
-
-
车辆信息
+
+
车辆信息
-
-
加氢站
+
+
加氢站
@@ -45,17 +56,16 @@ export default { data() { return { maptitle: "2536238", - maptitle2:'', + maptitle2: "", options: {}, code: "china", //china 代表中国 其他地市是行政编码 //code:"440000", echartBindClick: false, isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面 - currentMap : 'china', // 当前显示的地图层级 - showType: 1, //显示内容类型： 1车辆信息，2加氢站信息 - currentBgColor2:'', - currentBgColor3:'', - + currentMap: "china", // 当前显示的地图层级 + showType: 1, //显示内容类型： 1车辆信息，2加氢站信息 + currentBgColor2: "", + currentBgColor3: "", }; }, created() {}, @@ -63,72 +73,84 @@ export default { mounted() { console.log(xzqCode); this.getYearData(); - + this.showType = 1; - this.currentBgColor2 = '#1976d2'; + this.currentBgColor2 = "#1976d2"; this.getData("china"); //this.getData("440000"); }, methods: { - changeShow1(){ + changeShow1() { this.showType = 1; - this.currentBgColor2 = '#1976d2'; - this.currentBgColor3 = ''; + this.currentBgColor2 = "#1976d2"; + this.currentBgColor3 = ""; this.getData(this.code); }, - changeShow2(){ - this.currentBgColor2 = ''; - this.currentBgColor3 = '#1976d2'; + changeShow2() { + 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(res); - //this.maptitle = res.data.yearCarbon ; //单位kg - this.maptitle = res.data.yearCarbonTon ; //单位吨 - this.maptitle2 = '吨'; - - }); + console.log("年度碳减排量"); + console.log(res); + //this.maptitle = res.data.yearCarbon ; //单位kg + this.maptitle = res.data.yearCarbonTon; //单位吨 + this.maptitle2 = "吨"; + }); }, 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) => { + if (this.showType === 1) { + 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) => { + } else if (this.showType === 2) { + 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,33 +164,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; @@ -176,33 +197,37 @@ 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); }, - /** + /** * @description: 获取geojson * @param {*} name china 表示中国 其他省份行政区编码 * @param {*} mydata 接口返回列表数据 @@ -211,33 +236,32 @@ 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) => { - 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; @@ -245,25 +269,29 @@ 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(data2); @@ -291,11 +319,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", @@ -324,7 +352,7 @@ export default { series: [ { name: "MAP", - type: "map", + type: "map", map: name, // zlevel: 2, // aspectScale: 0.78, @@ -334,6 +362,7 @@ export default { zoom: zoom, geoIndex: 1, top: top, + showLegendSymbol: false, // 存在legend时显示 tooltip: { show: true, formatter: function (params) { @@ -341,13 +370,13 @@ 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; } }, - 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,22 +460,41 @@ 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)", + backgroundColor: "rgba(255,255,255,0.8)", borderColor: "rgba(147, 235, 248, .8)", textStyle: { color: "#333333", }, }, - 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], @@ -455,25 +507,18 @@ 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, - }, }, ], - //动画效果 - // animationDuration: 1000, - // animationEasing: 'linear', - // animationDurationUpdate: 1000 + //动画效果 + // animationDuration: 1000, + // animationEasing: 'linear', + // animationDurationUpdate: 1000 }; this.options = option; }, //加氢站信息 init2(name, data, data2) { - // console.log('加氢站init_data'); + // console.log('加氢站init_data'); // console.log(data); // console.log('加氢站init_data2'); // console.log(data2); @@ -490,15 +535,15 @@ export default { visualMap: { left: 20, bottom: 20, - pieces: [ + pieces: [ { 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: [ // "#c3d7df", // "#5cb3cc", // "#8abcd1", @@ -527,13 +572,14 @@ export default { series: [ { name: "MAP", - type: "map", + type: "map", map: name, // zlevel: 2, // aspectScale: 0.78, data: data, //data: [1,100], selectedMode: false, //是否允许选中多个区域 + showLegendSymbol: false, // 存在legend时显示 zoom: zoom, geoIndex: 1, top: top, @@ -544,13 +590,13 @@ 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.siteTotalCount}
当前运营总数: ${params.data.siteCount}`; } else { 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,21 +685,33 @@ 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)", + backgroundColor: "rgba(255,255,255,0.8)", borderColor: "rgba(147, 235, 248, .8)", textStyle: { color: "#333333", }, }, - 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], @@ -657,19 +724,19 @@ 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, + // }, }, ], - //动画效果 - // animationDuration: 1000, - // animationEasing: 'linear', - // animationDurationUpdate: 1000 + //动画效果 + // animationDuration: 1000, + // animationEasing: 'linear', + // animationDurationUpdate: 1000 }; this.options = option; }, @@ -683,7 +750,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); @@ -692,7 +759,7 @@ export default { } }); this.echartBindClick = true; - } + }, }, destroyed() { // 销毁事件监听 diff --git a/src/views/indexs/left-top.vue b/src/views/indexs/left-top.vue index 4ef2890..62b8692 100644 --- a/src/views/indexs/left-top.vue +++ b/src/views/indexs/left-top.vue @@ -1,332 +1,325 @@ - - - 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); - }); - }, - } - }; - - - - \ No newline at end of file +} + +/* 图标模拟，可用 Font Awesome 等替换 */ +.icon-phone::before { + content: "☎"; +} +.icon-shield::before { + content: "⛨"; +} +.icon-star::before { + content: "★"; +} +.icon-protect::before { + content: "🛡"; +} +