<script>
import Schart from "vue-schart";
import { reactive, ref } from "vue";
import LineChart from "../components/LineChart.vue";
import request from '../utils/request.js';
export default {
name: "dashboard",
components: { LineChart, Schart },
setup() {
const name = localStorage.getItem("ms_username");
const radioValue = ref('井深');
const options2 = {
type: "line",
title: {
text: "钻井数据折线图",
},
"labels": [
"01-12-00:00", "01-12-04:00", "01-12-08:00", "01-12-12:00", "01-12-16:00", "01-12-20:00",
"01-13-00:00", "01-13-04:00", "01-13-08:00", "01-13-12:00", "01-13-16:00", "01-13-20:00",
],
"datasets": [
{
"label": "井深",
"data": [85, 85.09, 262.1, 120.9, 137.1, 230, 240, 245, 260, 275, 195, 235]
},
{
"label": "钻头位置",
"data": [85.00, 85.09, 85.21, 85.32, 85.44, 85.61, 85.65, 85.75, 85.90, 86.04, 86.09, 86.26]
},
{
"label": "大钩高度",
"data": [1.56, 1.55, 1.56, 1.55, 1.55, 85.61, 85.65, 85.75, 85.69, 86.04, 86.09, 86.28]
},
{
"label": "大钩载荷",
"data": [26.21, 26.25, 26.25, 26.58, 26.17, 26.26, 26.40, 25.65, 26.87, 26.54, 26.64, 26.65]
},
{
"label": "钻压",
"data": [37.15, 41.72, 48.19, 15.72, 57.92, 14.17, 14.15, 14.22, 14.22, 14.17, 29.68, 39.01]
}
]
};
// 添加控制抽屉显示的响应式数据
const drawer = ref(false);
// Reactive data for the charts
const yAxisData = ref(['2024-11-00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']);
// const id_井41 = ref([
// [980, 455, 1500, 238, 1290, 1457, 1320, 1500, 1600, 1650, 1700, 3000],
// [666, 832, 801, 756, 2144, 1130, 1120, 1400, 1500, 1459, 1600, 1750],
// [1583, 2315, 2962, 1256, 2260, 1660, 2919, 2627, 2052, 1965, 1669, 1723],
// [2571, 2404, 2895, 2341, 2211, 2864, 2217, 1848, 1487, 1653, 1035, 1283],
// [1279, 2695, 2342, 2566, 2619, 1670, 2597, 1785, 2911, 1780, 1719, 2670],
// [2170, 2308, 2003, 2753, 2013, 1526, 1893, 2345, 2031, 1689, 1604, 1577],
// ]);
// const id_井42 = ref([
// [1880, 2814, 1597, 1284, 1810, 1739, 2115, 1220, 2231, 2821, 1005, 2508],
// [1097, 1984, 1587, 1219, 1971, 1655, 2035, 1929, 1454, 1153, 1705, 1166],
// [2681, 2514, 2896, 1123, 1593, 2494, 2699, 1694, 1718, 1885, 1489, 2128],
// [2353, 1747, 1584, 2199, 1765, 1488, 2624, 1428, 2335, 1016, 2587, 2702],
// [2079, 1114, 2319, 1624, 2143, 2315, 2874, 1641, 2920, 2591, 1657, 2886],
// [1705, 1939, 2044, 2770, 1432, 2593, 2394, 2190, 2727, 1449, 1872, 2984],
// ]);
const xAxisMax = ref([3000, 3500, 4000, 4500, 5000, 5500]);
const seriesName = ref(['井深', '钻头位置', '大钩高度', '大钩负荷', '扭矩', '转盘转速']);
const wellboreId = ref([
{ value: 'id_井41', label: '井41' },
{ value: 'id_井42', label: '井42' },
]
);
const chartSettings = reactive([{ xData: 'id_井41' }]);
const charts = ref([]);
const chartsPropMulti = ref(['井深', '钻头位置', '大钩高度', '大钩负荷', '扭矩', '转盘转速']);
const optionsPropMulti = ref(
[ { value: '井深', label: '井深' },
{ value: '扭矩', label: '扭矩' },
{ value: '钻头位置', label: '钻头位置' },
{ value: '大钩高度', label: '大钩高度' },
{ value: '大钩负荷', label: '大钩负荷' },
{ value: '转盘转速', label: '转盘转速' },]
);
const addChart = () => {
chartSettings.push({ xData: 'id_井41' });
};
const createCharts = () => {
console.log('chartSettings ：' + JSON.stringify(chartSettings));
charts.value = chartSettings.map(setting => {
console.log('查询的井id是：'+setting.xData)
request({
url: '/test',
method: 'get'
}).then(data => {
console.log('数据库返回值是', data.value);
return { xData: data };
}).catch(error => {
console.error('Error fetching data:', error);
});
// if (setting.xData === 'xAxisData1') {
// return { xData: xAxisData1.value };
// } else {
// return { xData: xAxisData2.value };
// }
});
console.log('charts是'+JSON.stringify(charts));
};
const removeChart = (index) => {
chartSettings.splice(index, 1);
charts.value.splice(index, 1);
};
const fetchDataDemo = () => {
request({
url: '/test',
method: 'get'
}).then(data => {
console.log('Data fetched:', data);
}).catch(error => {
console.error('Error fetching data:', error);
});
};
return {
name,
options2,
radioValue,
yAxisData,
xAxisMax,
seriesName,
chartSettings,
charts,
addChart,
createCharts,
removeChart,
drawer,
fetchDataDemo,
wellboreId,
chartsPropMulti,
optionsPropMulti,
};
},
};
</script>
控制台输出
chartSettings ：[{"xData":"id_井41"}]
Dashboard.vue:236 查询的井id是：id_井41
Dashboard.vue:253 charts是{"_rawValue":[null],"_shallow":false,"__v_isRef":true,"_value":[null]}
数据库返回值是 (6) [Array(12), Array(12), Array(12), Array(12), Array(12), Array(12)]
从代码和日志来看，charts 数据中的值始终为 null，这意味着你的数据请求 (request) 并没有正确返回或被处理。看起来你的 createCharts 函数中的 request 请求并没有正确处理异步数据，导致 charts.value 为空。你可以使用 async/await 来确保异步请求完成之后再更新 charts。下面是调整后的 createCharts 函数：
const createCharts = async () => {
console.log('chartSettings ：' + JSON.stringify(chartSettings));
const chartDataPromises = chartSettings.map(async (setting) => {
console.log('查询的井id是：' + setting.xData);
try {
const data = await request({
url: '/test',
method: 'get'
});
console.log('数据库返回值是', data.value);
return { xData: data.value }; // 返回实际数据
} catch (error) {
console.error('Error fetching data:', error);
return { xData: [] }; // 如果请求失败，返回空数据
}
});
// 等待所有数据请求完成
const chartData = await Promise.all(chartDataPromises);
charts.value = chartData; // 更新 charts 数据
console.log('charts是', JSON.stringify(charts));
};
Comments NOTHING