diff --git a/src/views/dataMonitoring/historyDataTrend/index.vue b/src/views/dataMonitoring/historyDataTrend/index.vue index 6208d7f..d4333b1 100644 --- a/src/views/dataMonitoring/historyDataTrend/index.vue +++ b/src/views/dataMonitoring/historyDataTrend/index.vue @@ -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() {