历史数据分析前端代码数据完善
This commit is contained in:
parent
7850bfafd8
commit
0c823cfe79
@ -85,7 +85,52 @@ watch(
|
||||
const activeKey = ref(1)
|
||||
const loading = ref(false)
|
||||
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 data = reactive({
|
||||
queryParams: {
|
||||
@ -98,28 +143,69 @@ const data = reactive({
|
||||
query: { ...useRoute().query },
|
||||
})
|
||||
const { queryParams, query } = toRefs(data)
|
||||
function getElectricityMeter(params) {
|
||||
getEnergyIndexByModelId(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
electricityMeter.value = res.data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
label: item.indexName,
|
||||
value: item.indexId,
|
||||
}
|
||||
})
|
||||
queryParams.value.meterId = res.data.length > 0 ? res.data[0].indexId : ""
|
||||
getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
/** 节点单击事件 */
|
||||
// function getElectricityMeter(params) {
|
||||
// getEnergyIndexByModelId(params).then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// electricityMeter.value = res.data.map((item) => {
|
||||
// return {
|
||||
// ...item,
|
||||
// label: item.indexName,
|
||||
// value: item.indexId,
|
||||
// }
|
||||
// })
|
||||
// queryParams.value.meterId = res.data.length > 0 ? res.data[0].indexId : ""
|
||||
// getList()
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// /** 节点单击事件 */
|
||||
// function handleNodeClick(data) {
|
||||
// queryParams.value.nodeId = data.id
|
||||
// queryParams.value.nodeName = data.label
|
||||
// setTimeout(() => {
|
||||
// handleTimeType(queryParams.value.timeType)
|
||||
// }, 200)
|
||||
// }
|
||||
// 节点点击事件
|
||||
function handleNodeClick(data) {
|
||||
queryParams.value.nodeId = data.id
|
||||
queryParams.value.nodeName = data.label
|
||||
queryParams.value.nodeId = data.id;
|
||||
queryParams.value.nodeName = data.label; // 假设节点label是“总装车间”“涂装车间”“注塑车间”
|
||||
console.log("当前点击的车间：", queryParams.value.nodeName);
|
||||
|
||||
setTimeout(() => {
|
||||
handleTimeType(queryParams.value.timeType)
|
||||
}, 200)
|
||||
handleTimeType(queryParams.value.timeType);
|
||||
}, 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) {
|
||||
queryParams.value.timeType = e
|
||||
@ -127,11 +213,11 @@ function handleTimeType(e) {
|
||||
getElectricityMeter({ modelId: queryParams.value.nodeId })
|
||||
}
|
||||
|
||||
function changeTimeType(e) {
|
||||
console.log(e)
|
||||
queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00")
|
||||
getElectricityMeter({ modelId: queryParams.value.nodeId })
|
||||
}
|
||||
// function changeTimeType(e) {
|
||||
// console.log(e)
|
||||
// queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD HH:00:00")
|
||||
// getElectricityMeter({ modelId: queryParams.value.nodeId })
|
||||
// }
|
||||
|
||||
function switchBtnType(e) {
|
||||
activeKey.value = e
|
||||
@ -140,48 +226,95 @@ function switchBtnType(e) {
|
||||
}
|
||||
}
|
||||
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() {
|
||||
loading.value = true
|
||||
let params = {
|
||||
nodeId: queryParams.value.nodeId,
|
||||
timeType: queryParams.value.timeType,
|
||||
dataTime: queryParams.value.dataTime,
|
||||
indexId: queryParams.value.meterId,
|
||||
loading.value = true;
|
||||
const currentShop = queryParams.value.nodeName; // 当前车间（如“总装车间”）
|
||||
const currentTimeType = queryParams.value.timeType; // 日/小时
|
||||
|
||||
// 从模板中获取当前车间的对应时间类型假数据
|
||||
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") {
|
||||
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
|
||||
}),
|
||||
},
|
||||
],
|
||||
|
||||
// 构造表格假数据
|
||||
const baseDate = proxy.dayjs(queryParams.value.dataTime).format("YYYY-MM-DD");
|
||||
const fakeTableData = shopData.time.map((time, index) => {
|
||||
const fullTime = currentTimeType === 'DAY'
|
||||
? `${baseDate} ${time.replace('时', '')}:00:00`
|
||||
: `${baseDate} ${time}:00`;
|
||||
|
||||
return {
|
||||
indexName: currentShop,
|
||||
value: shopData.data[index],
|
||||
dataTime: fullTime
|
||||
};
|
||||
});
|
||||
|
||||
lineChartData.value = {
|
||||
title: `${currentShop}${currentTimeType === 'DAY' ? '日维度' : '小时维度'}点位值趋势（假数据）`,
|
||||
xAxis: shopData.time, // X轴时间（直接用模板中的“00时”“14:00”等）
|
||||
series: [
|
||||
{
|
||||
name: `${currentShop}点位值`,
|
||||
data: shopData.data, // Y轴数值
|
||||
itemStyle: {
|
||||
// 为不同车间设置专属颜色（便于区分）
|
||||
color: currentShop === '上海干巷总装车间' ? '#409eff' :
|
||||
currentShop === '上海干巷涂装车间' ? '#f56c6c' : '#67c23a'
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
// 4. 赋值并关闭加载状态
|
||||
tableData.value = fakeTableData;
|
||||
loading.value = false;
|
||||
}
|
||||
// 碳排放管理-碳排放量核算-搜索
|
||||
function handleQuery() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user