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 @@ ...@@ -12,21 +12,21 @@
</div> </div>
<div class="new-container" style="display: flex"> <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 元素 -->
<canvas <canvas
ref="canvas" ref="canvas"
id="mainCanvas" id="mainCanvas"
width="1200" width="1000"
height="600" height="600"
style="background: #f0f0f0" style="background: #f0f0f0"
></canvas> ></canvas>
</div> </div>
<div class="chart-wrapper" style="padding-left: 20px;"> <div class="chart-wrapper" style="padding-left: 0px;">
<!-- 图表容器780 --> <!-- 图表容器780 -->
<div <div
ref="chartContainer" 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>
<!-- 图表操作区域（调整到最下方左侧） --> <!-- 图表操作区域（调整到最下方左侧） -->
<div class="chart-btn-group"> <div class="chart-btn-group">
...@@ -101,14 +101,7 @@ ...@@ -101,14 +101,7 @@
</template> </template>
<script> <script>
// import Highcharts from "highcharts";
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 { reqApi, Config } from "@/assets/js/httpApi.js";
import { Tools } from "@/assets/js/common.js"; import { Tools } from "@/assets/js/common.js";
import DateRangePicker from "@/components/DateRangePicker"; import DateRangePicker from "@/components/DateRangePicker";
...@@ -149,7 +142,7 @@ export default { ...@@ -149,7 +142,7 @@ export default {
config: {}, config: {},
}, },
// 新增图表相关数据 // 新增图表相关数据
chartVisible: false, // 图表弹窗可见性 chartVisible: true, // 图表弹窗可见性
deviceList: [{ id: "test001", name: "测试设备1" }], // 设备列表数据 deviceList: [{ id: "test001", name: "测试设备1" }], // 设备列表数据
selectedDevice: null, // 选中设备ID selectedDevice: null, // 选中设备ID
dateRange: [null, null], // 日期范围选择 dateRange: [null, null], // 日期范围选择
...@@ -191,10 +184,6 @@ export default { ...@@ -191,10 +184,6 @@ export default {
} }
}); });
this.chartVisible = true;
// 弹窗显示后初始化图表
this.$nextTick(() => {
this.initChart1();
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染） // 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => { this.$nextTick(() => {
// 初始化 Canvas // 初始化 Canvas
...@@ -202,7 +191,6 @@ export default { ...@@ -202,7 +191,6 @@ export default {
this.initCanvas(); this.initCanvas();
}, 1000); }, 1000);
}); });
});
}, },
methods: { methods: {
/** 初始化 Canvas 画布及坐标系 */ /** 初始化 Canvas 画布及坐标系 */
...@@ -521,40 +509,6 @@ export default { ...@@ -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) { seriesDataFormat(data, opts) {
var names = data.names || [], var names = data.names || [],
list = data.list || data.lists, list = data.list || data.lists,
...@@ -609,48 +563,6 @@ export default { ...@@ -609,48 +563,6 @@ export default {
} }
return { series: series, categories: categories, maxVal: maxVal }; 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) { discernValidAlarmValue(alarms, list, series, direction, opts) {
var xLength = (list || []).length, var xLength = (list || []).length,
maxAlarm = 0, maxAlarm = 0,
...@@ -743,286 +655,7 @@ export default { ...@@ -743,286 +655,7 @@ export default {
} }
return { series, maxAlarm }; 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) { 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