RIZO/SmartEnergyConsumptionSystemCaseVue
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

历史数据分析前端代码数据完善

Browse Source
This commit is contained in:
赵正易 2025-09-08 11:07:30 +08:00
parent 7850bfafd8
commit 0c823cfe79
1 changed files with 197 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
src/views/dataMonitoring/historyDataTrend/index.vue
View File

@ -85,7 +85,52 @@ watch(
const activeKey = ref(1) const activeKey = ref(1)
const loading = ref(false) const loading = ref(false)
const tableData = ref([]) const tableData = ref([])
const lineChartData = ref({}) const lineChartData = ref({
title: "各车间点位值趋势图", //
xAxis: [
"00时", "01时", "02时", "03时", "04时", "05时",
"06时", "07时", "08时", "09时", "10时", "11时" //
],
series: [
{
name: "总装车间",
data: [128, 115, 98, 86, 75, 92, 135, 168, 192, 215, 230, 222],
itemStyle: { color: "#409eff" } // 蓝色
}
]
})
const shopFakeDataTemplate = {
上海干巷总装车间: {
DAY: {
time: ["00时", "01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时"],
data: [120, 115, 110, 105, 100, 70, 130, 150, 160, 165, 170, 175, 180, 178, 70, 170, 165, 180, 190, 70, 170, 150, 130, 125]
},
HOUR: {
time: ["14:00", "14:10", "14:20", "14:30", "14:40", "14:50"],
data: [160, 162, 165, 163, 168, 170]
}
},
上海干巷涂装车间: {
DAY: {
time: ["00时", "01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时"],
data: [90, 85, 100, 75, 80, 95, 110, 130, 125, 135, 100, 138, 145, 142, 138, 140, 145, 100, 148, 140, 120, 100, 95, 92]
},
HOUR: {
time: ["14:00", "14:10", "14:20", "14:30", "14:40", "14:50"],
data: [130, 128, 135, 132, 140, 138]
}
},
上海干巷注塑车间: {
DAY: {
time: ["00时", "01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时"],
data: [180, 175, 170, 165, 160, 170, 190, 210, 230, 240, 250, 255, 260, 20, 270, 268, 275, 280, 278, 270, 250, 230, 210, 190]
},
HOUR: {
time: ["14:00", "14:10", "14:20", "14:30", "14:40", "14:50"],
data: [240, 245, 250, 255, 260, 265]
}
}
};
const electricityMeter = ref([]) const electricityMeter = ref([])
const data = reactive({ const data = reactive({
queryParams: { queryParams: {
@ -98,28 +143,69 @@ const data = reactive({
query: { ...useRoute().query }, query: { ...useRoute().query },
}) })
const { queryParams, query } = toRefs(data) const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) { // function getElectricityMeter(params) {
getEnergyIndexByModelId(params).then((res) => { // getEnergyIndexByModelId(params).then((res) => {
if (res.code === 200) { // if (res.code === 200) {
electricityMeter.value = res.data.map((item) => { // electricityMeter.value = res.data.map((item) => {
return { // return {
...item, // ...item,
label: item.indexName, // label: item.indexName,
value: item.indexId, // value: item.indexId,
} // }
}) // })
queryParams.value.meterId = res.data.length > 0 ? res.data[0].indexId : "" // queryParams.value.meterId = res.data.length > 0 ? res.data[0].indexId : ""
getList() // getList()
} // }
}) // })
} // }
/** 节点单击事件 */ // /** 节点单击事件 */
// function handleNodeClick(data) {
// queryParams.value.nodeId = data.id
// queryParams.value.nodeName = data.label
// setTimeout(() => {
// handleTimeType(queryParams.value.timeType)
// }, 200)
// }
// 节点点击事件
function handleNodeClick(data) { function handleNodeClick(data) {
queryParams.value.nodeId = data.id queryParams.value.nodeId = data.id;
queryParams.value.nodeName = data.label queryParams.value.nodeName = data.label; // 假设节点label是“总装车间”“涂装车间”“注塑车间”
console.log("当前点击的车间：", queryParams.value.nodeName);
setTimeout(() => { setTimeout(() => {
handleTimeType(queryParams.value.timeType) handleTimeType(queryParams.value.timeType);
}, 200) }, 100);
}
function getElectricityMeter(params) {
const currentShop = queryParams.value.nodeName;
const supportShops = ["上海干巷总装车间", "上海干巷涂装车间", "上海干巷注塑车间"];
if (shopFakeDataTemplate[currentShop]) {
electricityMeter.value = [
{
label: `${currentShop}-主点位`,
value: `${currentShop}_main`,
indexName: `${currentShop}-主点位`
}
];
queryParams.value.meterId = electricityMeter.value[0].value;
getList();
} else {
// 非支持车间，提示清晰的可选项
electricityMeter.value = [];
proxy.$message.info(`暂不支持【${currentShop}】数据查看，当前支持的车间：${supportShops.join('、')}`);
// 自动切换到第一个支持的车间
queryParams.value.nodeName = supportShops[0];
getElectricityMeter(params); // 重新加载支持车间的假数据
}
}
// 时间类型切换：同步更新假数据
function changeTimeType(e) {
queryParams.value.timeType = e;
queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00");
getList(); // 切换时间类型后重新加载假数据
} }
function handleTimeType(e) { function handleTimeType(e) {
queryParams.value.timeType = e queryParams.value.timeType = e
@ -127,11 +213,11 @@ function handleTimeType(e) {
getElectricityMeter({ modelId: queryParams.value.nodeId }) getElectricityMeter({ modelId: queryParams.value.nodeId })
} }
function changeTimeType(e) { // function changeTimeType(e) {
console.log(e) // console.log(e)
queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00") // queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00")
getElectricityMeter({ modelId: queryParams.value.nodeId }) // getElectricityMeter({ modelId: queryParams.value.nodeId })
} // }
function switchBtnType(e) { function switchBtnType(e) {
activeKey.value = e activeKey.value = e
@ -140,48 +226,95 @@ function switchBtnType(e) {
} }
} }
const LineChartRef = ref() const LineChartRef = ref()
// function getList() {
// loading.value = true
// let params = {
// nodeId: queryParams.value.nodeId,
// timeType: queryParams.value.timeType,
// dataTime: queryParams.value.dataTime,
// indexId: queryParams.value.meterId,
// }
// if (queryParams.value.timeType == "DAY") {
// params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
// } else if (queryParams.value.timeType == "MONTH") {
// params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
// } else if (queryParams.value.timeType == "YEAR") {
// params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
// }
// getHistoricalDataByIndexId(params)
// .then((res) => {
// if (res.code == 200) {
// loading.value = false
// tableData.value = res.data
// let itemList = res.data
// lineChartData.value = {
// title: "",
// xAxis: itemList.map((item) => {
// return queryParams.value.timeType == "DAY"
// ? item.dataTime.slice(11, 13) + "时"
// : item.dataTime.slice(11, 16)
// }),
// series: [
// {
// name: "点位值",
// data: itemList.map((item) => {
// return item.value
// }),
// },
// ],
// }
// }
// })
// .catch(() => {
// loading.value = false
// })
// }
function getList() { function getList() {
loading.value = true loading.value = true;
let params = { const currentShop = queryParams.value.nodeName; // 当前车间（如“总装车间”）
nodeId: queryParams.value.nodeId, const currentTimeType = queryParams.value.timeType; // 日/小时
timeType: queryParams.value.timeType,
dataTime: queryParams.value.dataTime, // 从模板中获取当前车间的对应时间类型假数据
indexId: queryParams.value.meterId, const shopData = shopFakeDataTemplate[currentShop]?.[currentTimeType];
if (!shopData) {
loading.value = false;
proxy.$message.warning(`暂无${currentShop}${currentTimeType === 'DAY' ? '日维度' : '小时维度'}数据`);
return;
} }
if (queryParams.value.timeType == "DAY") {
params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD") // 构造表格假数据
} else if (queryParams.value.timeType == "MONTH") { const baseDate = proxy.dayjs(queryParams.value.dataTime).format("YYYY-MM-DD");
params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM") const fakeTableData = shopData.time.map((time, index) => {
} else if (queryParams.value.timeType == "YEAR") { const fullTime = currentTimeType === 'DAY'
params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY") ? `${baseDate} ${time.replace('时', '')}:00:00`
} : `${baseDate} ${time}:00`;
getHistoricalDataByIndexId(params)
.then((res) => { return {
if (res.code == 200) { indexName: currentShop,
loading.value = false value: shopData.data[index],
tableData.value = res.data dataTime: fullTime
let itemList = res.data };
});
lineChartData.value = { lineChartData.value = {
title: "", title: `${currentShop}${currentTimeType === 'DAY' ? '日维度' : '小时维度'}点位值趋势（假数据）`,
xAxis: itemList.map((item) => { xAxis: shopData.time, // X轴时间（直接用模板中的“00时”“14:00”等）
return queryParams.value.timeType == "DAY"
? item.dataTime.slice(11, 13) + "时"
: item.dataTime.slice(11, 16)
}),
series: [ series: [
{ {
name: "点位值", name: `${currentShop}点位值`,
data: itemList.map((item) => { data: shopData.data, // Y轴数值
return item.value itemStyle: {
}), // 为不同车间设置专属颜色（便于区分）
}, color: currentShop === '上海干巷总装车间' ? '#409eff' :
], currentShop === '上海干巷涂装车间' ? '#f56c6c' : '#67c23a'
} }
} }
}) ]
.catch(() => { };
loading.value = false
}) // 4. 赋值并关闭加载状态
tableData.value = fakeTableData;
loading.value = false;
} }
// 碳排放管理-碳排放量核算-搜索 // 碳排放管理-碳排放量核算-搜索
function handleQuery() { function handleQuery() {