-
-
-
-
-
- 
+
diff --git a/src/views/indexs/center-bottom.vue b/src/views/indexs/center-bottom.vue
index 9af4250..14d0a38 100644
--- a/src/views/indexs/center-bottom.vue
+++ b/src/views/indexs/center-bottom.vue
@@ -7,6 +7,7 @@
diff --git a/src/views/indexs/chart/month-carbon.vue b/src/views/indexs/chart/month-carbon.vue
new file mode 100644
index 0000000..3768517
--- /dev/null
+++ b/src/views/indexs/chart/month-carbon.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
diff --git a/src/views/indexs/index.vue b/src/views/indexs/index.vue
index f3a9c02..1c45e0e 100644
--- a/src/views/indexs/index.vue
+++ b/src/views/indexs/index.vue
@@ -6,65 +6,130 @@
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
-
+
+ 
-
-
-
-
-
- Lingniu ESG Link
+
+ Lingniu ESG Link
+
+
+
-
+ {{ dateYear }} {{ dateWeek }} {{ dateDay }}
+
-
- {{ dateYear }} {{ dateWeek }} {{ dateDay }}
-
-
+ alt=""
+ />
-
-
-
-
+
用电量：${params[1].value}kWh
行驶里程：${params[2].value}km`; - // } - formatter: (params) => { - console.log(params); - return `用氢量：${params[0].value}kg
行驶里程：${params[1].value}km`; + this.$nextTick(() => { + if (!this.$refs.chart) return; + + const chart = echarts.init(this.$refs.chart); + + // 初始化12个月的数据 + const hydrogenData = new Array(12).fill(0); + const mileageData = new Array(12).fill(0); + + // 填充数据并转换单位 + this.monthHydrogen.forEach((value, index) => { + hydrogenData[index] = value ? Number((value / 1000).toFixed(2)) : 0; // kg转吨 + }); + + this.monthMileage.forEach((value, index) => { + mileageData[index] = value ? Number((value / 10000).toFixed(2)) : 0; // km转万km + }); + + // 计算数据范围 + const hydrogenMax = Math.max(...hydrogenData); + const mileageMax = Math.max(...mileageData); + + console.log('===== 月度行驶里程&用氢量 数据分析 ====='); + console.log('用氢量数据(吨):', hydrogenData); + console.log('里程数据(万km):', mileageData); + console.log('用氢量最大值(吨):', hydrogenMax); + console.log('里程最大值(万km):', mileageMax); + console.log('用氢量原始数据(kg):', this.monthHydrogen); + console.log('里程原始数据(km):', this.monthMileage); + + let option = { + grid: { + left: "12%", + right: "12%", + top: "15%", + bottom: "12%", + containLabel: true }, - }, - legend: { - //data: ['用氢量', '用电量', '行驶里程'], - data: ["用氢量", "行驶里程"], - //data: ['用电量', '行驶里程'], - textStyle: { color: "#333333" }, - }, - xAxis: { - type: "category", - boundaryGap: false, - data: [ - "1月", - "2月", - "3月", - "4月", - "5月", - "6月", - "7月", - "8月", - "9月", - "10月", - "11月", - "12月", + tooltip: { + trigger: "axis", + backgroundColor: "rgba(255, 255, 255, 0.9)", + borderColor: "#059669", + borderWidth: 1, + textStyle: { color: "#333333" }, + formatter: (params) => { + const month = params[0].name; + const hydrogen = params[0].value; + const mileage = params[1].value; + return `${month}
用氢量：${hydrogen}吨
行驶里程：${mileage}万公里`; + }, + }, + legend: { + show: true, + data: ["用氢量(吨)", "行驶里程(万公里)"], + textStyle: { + color: "#64748b", + fontSize: 12 + }, + top: 0, + itemWidth: 20, + itemHeight: 10 + }, + xAxis: { + type: "category", + boundaryGap: false, + data: [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + "8月", + "9月", + "10月", + "11月", + "12月", + ], + axisLine: { + lineStyle: { color: "#d1d5db" } + }, + axisLabel: { + color: "#64748b", + fontSize: 11, + interval: 0, // 显示所有月份 + rotate: 0 + }, + axisTick: { + show: false + } + }, + yAxis: [ + { + type: "value", + name: "吨", + nameTextStyle: { + color: "#059669", + fontSize: 12, + padding: [0, 0, 0, 0] + }, + min: 0, + max: hydrogenMax > 0 ? Math.ceil(hydrogenMax * 1.5) : 10, // 用氢量Y轴设置为最大值的1.5倍 + axisLine: { + show: false + }, + axisLabel: { + color: "#64748b", + fontSize: 11, + formatter: "{value}" + }, + splitLine: { + lineStyle: { + color: "#f1f5f9", + type: 'dashed' + } + } + }, + { + type: "value", + name: "万公里", + nameTextStyle: { + color: "#85E0E5", + fontSize: 12, + padding: [0, 0, 0, 0] + }, + min: 0, + max: mileageMax > 0 ? Math.ceil(mileageMax * 1.1) : 10, // 里程Y轴设置为最大值的1.1倍 + axisLine: { + show: false + }, + axisLabel: { + color: "#64748b", + fontSize: 11, + formatter: "{value}" + }, + splitLine: { + show: false + } + } ], - axisLine: { lineStyle: { color: "#666666" } }, - axisLabel: { color: "#333333" }, - }, - yAxis: { - type: "value", - axisLine: { lineStyle: { color: "#666666" } }, - splitLine: { lineStyle: { color: "#e0e0e0" } }, - axisLabel: { - color: "#333333", - //align: 'left', - // margin:70, - //width: 100, //将内容的宽度固定 - // overflow: 'truncate', //超出的部分截断 - formatter: "{value}kg", - }, - }, - series: [ - { - name: "用氢量", - type: "line", - //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900], - data: this.monthHydrogen, - // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle: { color: "#3399FF" }, - }, - // { - // name: '用电量', - // type: 'line', - // //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500], - // data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0], - // itemStyle: { color: '#3f89ff' } - // }, - { - name: "行驶里程", - type: "line", - //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000], - data: this.monthMileage, - //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle: { color: "#a060ff" }, - }, - ], - }; - chart.setOption(option); + series: [ + { + name: "用氢量(吨)", + type: "line", + yAxisIndex: 0, + data: hydrogenData, + itemStyle: { color: "#059669" }, + lineStyle: { + width: 2, + color: "#059669" + }, + smooth: true, + symbol: "circle", + symbolSize: 6, + showSymbol: false, + emphasis: { + showSymbol: true + } + }, + { + name: "行驶里程(万公里)", + type: "line", + yAxisIndex: 1, + data: mileageData, + itemStyle: { color: "#85E0E5" }, + lineStyle: { + width: 2, + color: "#85E0E5" + }, + smooth: true, + symbol: "circle", + symbolSize: 6, + showSymbol: false, + emphasis: { + showSymbol: true + } + }, + ], + }; + chart.setOption(option); + this.chart = chart; + this.chart.resize(); + }); }, }, }; @@ -147,7 +261,8 @@ export default { diff --git a/src/views/indexs/left-center.vue b/src/views/indexs/left-center.vue index 26facee..a25c8b9 100644 --- a/src/views/indexs/left-center.vue +++ b/src/views/indexs/left-center.vue @@ -6,14 +6,20 @@ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue --> -
+
重新获取
-
\ No newline at end of file
+
diff --git a/src/views/indexs/left-top.vue b/src/views/indexs/left-top.vue
index 62b8692..6ca0f5a 100644
--- a/src/views/indexs/left-top.vue
+++ b/src/views/indexs/left-top.vue
@@ -1,100 +1,64 @@
-
+
+
diff --git a/src/views/indexs/left-bottom.vue b/src/views/indexs/left-bottom.vue
index ec87843..ca824e2 100644
--- a/src/views/indexs/left-bottom.vue
+++ b/src/views/indexs/left-bottom.vue
@@ -32,114 +32,228 @@ export default {
},
mounted() {
this.getMonthData();
+ window.addEventListener("resize", this.handleResize);
+ },
+ beforeDestroy() {
+ window.removeEventListener("resize", this.handleResize);
+ if (this.chart) {
+ this.chart.dispose();
+ }
},
methods: {
+ handleResize() {
+ if (this.chart) {
+ this.chart.resize();
+ }
+ },
getMonthData() {
currentGET("big2").then((res) => {
- console.log("月度碳减排");
+ console.log("月度行驶里程&用氢量");
this.monthItems = res.data;
console.log(this.monthItems);
+
+ // 初始化12个月的数据为0
+ this.monthHydrogen = new Array(12).fill(0);
+ this.monthMileage = new Array(12).fill(0);
+ this.monthCarbon = new Array(12).fill(0);
+
this.monthItems.forEach((item) => {
- //console.log(item.monthHydrogen);
- //console.log(item.monthMileage);
- // this.monthHydrogen.push(item.monthHydrogen);
- // this.monthMileage.push(item.monthMileage);
let month = parseInt(item.months.substring(5, 7));
- this.monthMileage[month - 1] = item.monthMileage;
- this.monthCarbon[month - 1] = item.monthCarbon;
- this.monthHydrogen[month - 1] = item.monthHydrogen;
+ this.monthMileage[month - 1] = item.monthMileage || 0;
+ this.monthCarbon[month - 1] = item.monthCarbon || 0;
+ this.monthHydrogen[month - 1] = item.monthHydrogen || 0;
});
- //console.log('用氢量：'+ this.monthHydrogen);
- //console.log('里程数：'+ this.monthMileage);
+
+ console.log('用氢量：', this.monthHydrogen);
+ console.log('里程数：', this.monthMileage);
this.initChart();
});
},
initChart() {
- let chart = echarts.init(this.$refs.chart);
- let option = {
- grid:{
- left:'13%'
- },
- tooltip: {
- trigger: "axis",
- backgroundColor: "rgba(0, 0, 0, 0.8)",
- borderColor: "#333333",
- textStyle: { color: "#ffffff" },
- // formatter: (params) => {
- // console.log(params)
- // return `用氢量：${params[0].value}kg
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ {{ leftCards[0].label }}
+
+ {{ leftCards[0].value }}
+ {{ leftCards[0].unit }}
+
+
+
+
+ 
+
+
+
+
+ {{ leftCards[1].label }}
+
+ {{ leftCards[1].value }}
+ {{ leftCards[1].unit }}
+
+
+
+
+ 今年累计碳排
+
+ {{ yearCarbonTon }}
+ 吨
+
+
+
+ 相当于种植了约{{ treeCount }}棵树
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ {{ rightCards[0].label }}
+
+ {{ rightCards[0].value }}
+ {{ rightCards[0].unit }}
+
+
+
+
+ 
+
+
+
+
+ {{ rightCards[1].label }}
+
+ {{ rightCards[1].value }}
+ {{ rightCards[1].unit }}
+
+
-
-
-
-
-
-
-
-
-
-
-
用电量：${params[1].value}kWh
行驶里程：${params[2].value}km`; - // } - formatter: (params) => { - console.log(params); - return `用氢量：${params[0].value}kg
行驶里程：${params[1].value}km`; + this.$nextTick(() => { + if (!this.$refs.chart) return; + + const chart = echarts.init(this.$refs.chart); + + // 初始化12个月的数据 + const hydrogenData = new Array(12).fill(0); + const mileageData = new Array(12).fill(0); + + // 填充数据并转换单位 + this.monthHydrogen.forEach((value, index) => { + hydrogenData[index] = value ? Number((value / 1000).toFixed(2)) : 0; // kg转吨 + }); + + this.monthMileage.forEach((value, index) => { + mileageData[index] = value ? Number((value / 10000).toFixed(2)) : 0; // km转万km + }); + + // 计算数据范围 + const hydrogenMax = Math.max(...hydrogenData); + const mileageMax = Math.max(...mileageData); + + console.log('===== 月度行驶里程&用氢量 数据分析 ====='); + console.log('用氢量数据(吨):', hydrogenData); + console.log('里程数据(万km):', mileageData); + console.log('用氢量最大值(吨):', hydrogenMax); + console.log('里程最大值(万km):', mileageMax); + console.log('用氢量原始数据(kg):', this.monthHydrogen); + console.log('里程原始数据(km):', this.monthMileage); + + let option = { + grid: { + left: "12%", + right: "12%", + top: "15%", + bottom: "12%", + containLabel: true }, - }, - legend: { - //data: ['用氢量', '用电量', '行驶里程'], - data: ["用氢量", "行驶里程"], - //data: ['用电量', '行驶里程'], - textStyle: { color: "#333333" }, - }, - xAxis: { - type: "category", - boundaryGap: false, - data: [ - "1月", - "2月", - "3月", - "4月", - "5月", - "6月", - "7月", - "8月", - "9月", - "10月", - "11月", - "12月", + tooltip: { + trigger: "axis", + backgroundColor: "rgba(255, 255, 255, 0.9)", + borderColor: "#059669", + borderWidth: 1, + textStyle: { color: "#333333" }, + formatter: (params) => { + const month = params[0].name; + const hydrogen = params[0].value; + const mileage = params[1].value; + return `${month}
用氢量：${hydrogen}吨
行驶里程：${mileage}万公里`; + }, + }, + legend: { + show: true, + data: ["用氢量(吨)", "行驶里程(万公里)"], + textStyle: { + color: "#64748b", + fontSize: 12 + }, + top: 0, + itemWidth: 20, + itemHeight: 10 + }, + xAxis: { + type: "category", + boundaryGap: false, + data: [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + "8月", + "9月", + "10月", + "11月", + "12月", + ], + axisLine: { + lineStyle: { color: "#d1d5db" } + }, + axisLabel: { + color: "#64748b", + fontSize: 11, + interval: 0, // 显示所有月份 + rotate: 0 + }, + axisTick: { + show: false + } + }, + yAxis: [ + { + type: "value", + name: "吨", + nameTextStyle: { + color: "#059669", + fontSize: 12, + padding: [0, 0, 0, 0] + }, + min: 0, + max: hydrogenMax > 0 ? Math.ceil(hydrogenMax * 1.5) : 10, // 用氢量Y轴设置为最大值的1.5倍 + axisLine: { + show: false + }, + axisLabel: { + color: "#64748b", + fontSize: 11, + formatter: "{value}" + }, + splitLine: { + lineStyle: { + color: "#f1f5f9", + type: 'dashed' + } + } + }, + { + type: "value", + name: "万公里", + nameTextStyle: { + color: "#85E0E5", + fontSize: 12, + padding: [0, 0, 0, 0] + }, + min: 0, + max: mileageMax > 0 ? Math.ceil(mileageMax * 1.1) : 10, // 里程Y轴设置为最大值的1.1倍 + axisLine: { + show: false + }, + axisLabel: { + color: "#64748b", + fontSize: 11, + formatter: "{value}" + }, + splitLine: { + show: false + } + } ], - axisLine: { lineStyle: { color: "#666666" } }, - axisLabel: { color: "#333333" }, - }, - yAxis: { - type: "value", - axisLine: { lineStyle: { color: "#666666" } }, - splitLine: { lineStyle: { color: "#e0e0e0" } }, - axisLabel: { - color: "#333333", - //align: 'left', - // margin:70, - //width: 100, //将内容的宽度固定 - // overflow: 'truncate', //超出的部分截断 - formatter: "{value}kg", - }, - }, - series: [ - { - name: "用氢量", - type: "line", - //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900], - data: this.monthHydrogen, - // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle: { color: "#3399FF" }, - }, - // { - // name: '用电量', - // type: 'line', - // //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500], - // data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0], - // itemStyle: { color: '#3f89ff' } - // }, - { - name: "行驶里程", - type: "line", - //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000], - data: this.monthMileage, - //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle: { color: "#a060ff" }, - }, - ], - }; - chart.setOption(option); + series: [ + { + name: "用氢量(吨)", + type: "line", + yAxisIndex: 0, + data: hydrogenData, + itemStyle: { color: "#059669" }, + lineStyle: { + width: 2, + color: "#059669" + }, + smooth: true, + symbol: "circle", + symbolSize: 6, + showSymbol: false, + emphasis: { + showSymbol: true + } + }, + { + name: "行驶里程(万公里)", + type: "line", + yAxisIndex: 1, + data: mileageData, + itemStyle: { color: "#85E0E5" }, + lineStyle: { + width: 2, + color: "#85E0E5" + }, + smooth: true, + symbol: "circle", + symbolSize: 6, + showSymbol: false, + emphasis: { + showSymbol: true + } + }, + ], + }; + chart.setOption(option); + this.chart = chart; + this.chart.resize(); + }); }, }, }; @@ -147,7 +261,8 @@ export default { diff --git a/src/views/indexs/left-center.vue b/src/views/indexs/left-center.vue index 26facee..a25c8b9 100644 --- a/src/views/indexs/left-center.vue +++ b/src/views/indexs/left-center.vue @@ -6,14 +6,20 @@ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue --> -
-
-
-
-
-
-
+
+
+
+
-
+ 
+
+
+
+
-
-
- {{ cards[0].label }}
+
{{ cards[0].value }}
{{ cards[0].unit }}
-
- {{ cards[0].label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
+ 
+
+
+
+
-
-
- {{ cards[1].label }}
+
{{ cards[1].value }}
{{ cards[1].unit }}
-
- {{ cards[1].label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ 羚牛全国车辆信息
+ 922 功能中
+
+
-
+ 
+
+
+
+
-
-
- {{ cards[2].label }}
+
{{ cards[2].value }}
{{ cards[2].unit }}
-
- {{ cards[2].label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -110,31 +74,31 @@ export default {
cards: [
{
id: 1,
- value: "452/807",
- unit: "辆",
- label: "在线车数",
- srcValue: "@/assets/img/left_top_lv.png",
+ value: "8463.91",
+ unit: "kg",
+ label: "当日减碳量",
+ srcValue: "@/assets/img/left/1.svg",
},
{
id: 2,
- value: "561",
+ value: "1027.98",
unit: "kg",
- label: "当日减碳",
- srcValue: "@/assets/img/left/1.svg",
+ label: "当日用氢量",
+ srcValue: "@/assets/img/left/2.svg",
},
{
id: 3,
- value: "534",
- unit: "kg",
- label: "当日用氢量",
- srcValue: "@/assets/img/left/1.svg",
+ value: "403 / 977",
+ unit: "辆",
+ label: "在线数量",
+ srcValue: "@/assets/img/left/3.svg",
},
{
id: 4,
- value: "3300",
+ value: "18012.87",
unit: "km",
- label: "当日里程",
- srcValue: "@/assets/img/left/1.svg",
+ label: "当日行驶里程",
+ srcValue: "@/assets/img/left/4.svg",
},
],
};
@@ -162,16 +126,22 @@ export default {
if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
}
+ // 当日减碳量
let change = this.cards[0];
- change.value = res.data.onLineCount + "/" + res.data.vehicleCount;
+ change.value = dayCarbon;
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, 1, change);
+
+ // 在线数量
+ change = this.cards[2];
+ change.value = res.data.onLineCount + " / " + res.data.vehicleCount;
this.$set(this.cards, 2, change);
+
+ // 当日行驶里程
change = this.cards[3];
change.value = dayMileage;
this.$set(this.cards, 3, change);
@@ -182,144 +152,110 @@ export default {
diff --git a/src/views/indexs/right-bottom.vue b/src/views/indexs/right-bottom.vue
index c2dc15f..a55e2b7 100644
--- a/src/views/indexs/right-bottom.vue
+++ b/src/views/indexs/right-bottom.vue
@@ -3,7 +3,7 @@
+
+ 
+
+
+
+
-
-
- {{ cards[3].label }}
+
{{ cards[3].value }}
{{ cards[3].unit }}
-
- {{ cards[3].label }}
-
-
-
-
-
-
-
-
-
- | 交易所 | +交易所 | 项目 | 价格 (RMB) | 地区 | @@ -11,14 +11,20 @@
|---|
-
+
@@ -29,7 +35,7 @@
| {{ item.name }} | ++ {{ item.name }} + | {{ item.project }} | -{{ item.price }} | -{{ item.area }} | +{{ item.price }} | +{{ item.area }} |