Skip to content

V
V3-TailingPond
Commit e099e99f authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：图表条件查询

parent 631bceed
Show whitespace changes
Inline Side-by-side
Showing with 11 additions and 378 deletions
src/views/dataMonitor/jrx/history/index.vue
View file @ e099e99f
......@@ -12,21 +12,21 @@
</div>
<div class="new-container" style="display: flex">
<div class="canvas-wrapper" style="width: 1200px; height: 600px">
<div class="canvas-wrapper" style="width: 1000px; height: 600px">
<!-- 替换为 Canvas 元素 -->
<canvas
ref="canvas"
id="mainCanvas"
width="1200"
width="1000"
height="600"
style="background: #f0f0f0"
></canvas>
</div>
<div class="chart-wrapper" style="padding-left: 20px;">
<div class="chart-wrapper" style="padding-left: 0px;">
<!-- 图表容器780 -->
<div
ref="chartContainer"
style="width: 780px; height: 550px; margin-bottom: 20px;border:1px solid gainsboro;"
style="width: 870px; height: 550px; margin-bottom: 20px;border:1px solid gainsboro;"
></div>
<!-- 图表操作区域（调整到最下方左侧） -->
<div class="chart-btn-group">
......@@ -101,14 +101,7 @@
</template>
<script>
// import Highcharts from "highcharts";
import Highcharts from "highcharts";
import HTreemap from "highcharts/modules/treemap.js";
import Highcharts3D from "highcharts/highcharts-3d.js";
//import oldie from 'highcharts/oldie.js';
//import cylinder from 'highcharts/cylinder.js';
HTreemap(Highcharts); // treemap 类型
Highcharts3D(Highcharts); // 3D 类型
import { reqApi, Config } from "@/assets/js/httpApi.js";
import { Tools } from "@/assets/js/common.js";
import DateRangePicker from "@/components/DateRangePicker";
......@@ -149,7 +142,7 @@ export default {
config: {},
},
// 新增图表相关数据
chartVisible: false, // 图表弹窗可见性
chartVisible: true, // 图表弹窗可见性
deviceList: [{ id: "test001", name: "测试设备1" }], // 设备列表数据
selectedDevice: null, // 选中设备ID
dateRange: [null, null], // 日期范围选择
......@@ -191,10 +184,6 @@ export default {
}
});
this.chartVisible = true;
// 弹窗显示后初始化图表
this.$nextTick(() => {
this.initChart1();
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => {
// 初始化 Canvas
......@@ -202,7 +191,6 @@ export default {
this.initCanvas();
}, 1000);
});
});
},
methods: {
/** 初始化 Canvas 画布及坐标系 */
......@@ -521,40 +509,6 @@ export default {
});
});
},
/**
* 将时间戳格式化为 MM-DD 月份日期格式
* @param {number} timestamp - 毫秒级时间戳 (如 1655707213000)
* @returns {string} 格式化的日期字符串 (如 "05-16")
*/
formatToMonthDay(timestamp) {
// 创建Date对象并验证输入
if (typeof timestamp !== "number" || isNaN(timestamp)) {
console.warn("Invalid timestamp input:", timestamp);
return "--"; // 返回占位符
}
// 使用单个Date对象避免重复创建
const date = new Date(timestamp);
// 获取月份和日期（月份需+1）
const month = date.getUTCMonth() + 1; // UTC月份 (0-11)
const day = date.getUTCDate(); // UTC日期 (1-31)
// 使用模板字符串和padStart格式化
return `${month.toString().padStart(2, "0")}-${day
.toString()
.padStart(2, "0")}`;
},
/**
* series数据格式化
* @param: {Array} list
* @param: {Object} opts [standOut(突出最大值)]
* @example1: qf.UI.showFloatMenu({top:y,left:x, eventOutClose:}, html);
* @return:
* @author: Kimber
* @updatetime: 2022/12/28
* @createtime: 2022/12/28
*/
seriesDataFormat(data, opts) {
var names = data.names || [],
list = data.list || data.lists,
......@@ -609,48 +563,6 @@ export default {
}
return { series: series, categories: categories, maxVal: maxVal };
},
/**
* 递归继承, 新对象在先, 原对象在后, 节省运行效率
* @param: {Object} inherit // 继承者
* @param: {Object} give // 传承者
* @param: {Function} call // 方法回调, 于在在特殊情况自定义
* @example1: var options = reversExtends(option, opts);
* @return:
* @author: Kimber
* @updatetime: 2022/1/12
* @createtime: 2022/1/12
*/
reversExtends(inherit, give, fn) {
return (function run(main, assist) {
var keys = Object.keys(assist),
i = 0;
return (function loop() {
var key = keys[i];
i++;
if (key) {
fn && fn(key, main, assist);
return (
typeof main[key] === "object"
? run(main[key], assist[key])
: (main[key] = assist[key]),
loop()
);
} else {
return inherit;
}
})();
})(inherit, give);
},
/**
* 根据报警级别识别近两条报警线
* @param: {Number} level
* @param: {Object} value
* @example1: series = discernValidAlarmValue(data.alarm, data.lists, series);
* @return:
* @author: Kimber
* @updatetime: 2022/4/18(周一)
* @createtime: 2022/4/18(周一)
*/
discernValidAlarmValue(alarms, list, series, direction, opts) {
var xLength = (list || []).length,
maxAlarm = 0,
......@@ -743,286 +655,7 @@ export default {
}
return { series, maxAlarm };
},
getChartData() {
return {
body: {
alarm: {
alarmLevel: 0,
value: {
red: 2.5,
orange: 2.8,
blue: 3.3,
yellow: 3.1,
},
},
danwei: "m",
lists: [
{
date: 1750694360000,
dateUnit: "",
values: {
depth: "3.620",
stage: "0.960",
},
},
{
date: 1750690760000,
dateUnit: "",
values: {
depth: "3.620",
stage: "0.960",
},
},
{
date: 1750687160000,
dateUnit: "",
values: {
depth: "3.610",
stage: "0.970",
},
},
{
date: 1750683561000,
dateUnit: "",
values: {
depth: "3.610",
stage: "0.970",
},
},
{
date: 1750679961000,
dateUnit: "",
values: {
depth: "3.620",
stage: "0.960",
},
},
{
date: 1750676361000,
dateUnit: "",
values: {
depth: "3.640",
stage: "0.940",
},
},
{
date: 1750672761000,
dateUnit: "",
values: {
depth: "3.650",
stage: "0.930",
},
},
{
date: 1750669161000,
dateUnit: "",
values: {
depth: "3.680",
stage: "0.900",
},
},
{
date: 1750665561000,
dateUnit: "",
values: {
depth: "3.720",
stage: "0.860",
},
},
{
date: 1750661961000,
dateUnit: "",
values: {
depth: "3.760",
stage: "0.820",
},
},
{
date: 1750658361000,
dateUnit: "",
values: {
depth: "3.780",
stage: "0.800",
},
},
{
date: 1750654761000,
dateUnit: "",
values: {
depth: "3.800",
stage: "0.780",
},
},
{
date: 1750651161000,
dateUnit: "",
values: {
depth: "3.810",
stage: "0.770",
},
},
{
date: 1750647561000,
dateUnit: "",
values: {
depth: "3.800",
stage: "0.780",
},
},
{
date: 1750643961000,
dateUnit: "",
values: {
depth: "3.800",
stage: "0.780",
},
},
{
date: 1750640361000,
dateUnit: "",
values: {
depth: "3.790",
stage: "0.790",
},
},
{
date: 1750636760000,
dateUnit: "",
values: {
depth: "3.780",
stage: "0.800",
},
},
{
date: 1750633160000,
dateUnit: "",
values: {
depth: "3.770",
stage: "0.810",
},
},
{
date: 1750629560000,
dateUnit: "",
values: {
depth: "3.760",
stage: "0.820",
},
},
{
date: 1750625960000,
dateUnit: "",
values: {
depth: "3.740",
stage: "0.840",
},
},
{
date: 1750622360000,
dateUnit: "",
values: {
depth: "3.730",
stage: "0.850",
},
},
{
date: 1750618760000,
dateUnit: "",
values: {
depth: "3.730",
stage: "0.850",
},
},
{
date: 1750615160000,
dateUnit: "",
values: {
depth: "3.710",
stage: "0.870",
},
},
{
date: 1750611560000,
dateUnit: "",
values: {
depth: "3.710",
stage: "0.870",
},
},
],
names: [
{
name: "水位1222",
key: "stage",
},
{
name: "浸润线埋深",
key: "depth",
},
],
range: "",
sensorname: "浸润线 ZQ1",
title: "",
},
code: 200,
msg: "",
};
},
/** 加载图表数据 */
async loadChartData() {
if (!this.selectedDevice || !this.dateRange[0] || !this.dateRange[1]) {
this.$message.warning("请选择完整查询条件");
return;
}
this.chartLoading = true;
try {
const params = {
deviceId: this.selectedDevice,
startDate: this.dateRange[0],
endDate: this.dateRange[1],
};
// const res = await reqApi.getMonitorData(params); // 替换为实际数据接口
// const mockData = this.generateMockData();
// this.updateChartData(mockData);
} catch (error) {
this.$message.error("加载图表数据失败");
} finally {
this.chartLoading = false;
}
},
/** 生成测试数据 */
generateMockData() {
const [startDate, endDate] = this.dateRange;
const start = new Date(startDate).getTime();
const end = new Date(endDate).getTime();
const days = Math.ceil((end - start) / (1000 * 3600 * 24)); // 计算天数差
const mockData = { waterLevel: [], infiltration: [] };
// 生成每天的模拟数据（时间戳+随机值）
for (let i = 0; i < 30; i++) {
const timestamp = start + i * 1000 * 3600 * 24;
// 水位：10-20之间的随机数（保留2位小数）
mockData.waterLevel.push([
timestamp,
Number((10 + Math.random() * 10).toFixed(2)),
]);
// 浸润线埋深：5-15之间的随机数（保留2位小数）
mockData.infiltration.push([
timestamp,
Number((5 + Math.random() * 10).toFixed(2)),
]);
}
return mockData;
},
/** 更新图表数据 */
updateChartData(data) {
if (!this.chartInstance) return;
// 假设data结构：{ waterLevel: [], infiltration: [] }
this.chartInstance.series[0].setData(data.waterLevel);
this.chartInstance.series[1].setData(data.infiltration);
},
/** 切换图表类型 */
switchChartType(type) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment