Skip to content

V
V3-TailingPond
Commit 30508fd6 authored by lei's avatar lei
Browse files
Options

add:浸润线画布尺寸换算

parent 116e8ad4
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 149 deletions
.gitignore
View file @ 30508fd6
...@@ -24,3 +24,4 @@ selenium-debug.log ...@@ -24,3 +24,4 @@ selenium-debug.log
package-lock.json package-lock.json
yarn.lock yarn.lock
*.zip
src/views/dataMonitor/jrx/history/index.vue
View file @ 30508fd6
...@@ -113,7 +113,7 @@ export default { ...@@ -113,7 +113,7 @@ export default {
DateRangePicker, DateRangePicker,
TableFilter, TableFilter,
cuForm, cuForm,
cuTable, cuTable
}, },
data() { data() {
return { return {
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
size: 10, size: 10,
total: 0, total: 0,
loading: false, loading: false,
dataList: [], dataList: []
}, },
rules: {}, rules: {},
form: { form: {
...@@ -136,7 +136,7 @@ export default { ...@@ -136,7 +136,7 @@ export default {
search: {}, search: {},
item: {}, item: {},
file: 0, file: 0,
config: {}, config: {}
}, },
// 新增图表相关数据 // 新增图表相关数据
chartVisible: true, // 图表弹窗可见性 chartVisible: true, // 图表弹窗可见性
...@@ -155,16 +155,52 @@ export default { ...@@ -155,16 +155,52 @@ export default {
poImage: null, // 新增：po.png 图片对象 poImage: null, // 新增：po.png 图片对象
// Canvas绘制配置（支持批量扩展） // Canvas绘制配置（支持批量扩展）
poConfigs: [ poConfigs: [
{ x: 0, y: null, width: 879, height: 150 }, // 第一张po.png配置 { x: 0, y: null, width: 879, height: 150 }, // 第一张po.png配置
{ x: 0, y: null, width: 879 - 250, height: 150 }, // 第二张po.png配置（宽度减少250px） { x: 0, y: null, width: 879 - 250, height: 150 } // 第二张po.png配置（宽度减少250px）
], ],
guanConfigs: [ poConfigs: [
{ x: null, y: null, width: 6, height: 121, image: 'guanImage' }, // 第一张guan0.png { x: null, y: null, width: 6, height: 121, image: "guanImage" }, // 第一张guan0.png
{ x: null, y: null, width: 6, height: 200, image: 'guanImage' } // 第二张guan0.png（高度调整） { x: null, y: null, width: 6, height: 200, image: "guanImage" } // 第二张guan0.png（高度调整）
], ],
lineConfigs: [ lineConfigs: [
{ points: [], color: 'red', lineWidth: 2 }, // 红色连接线配置 { points: [], color: "red", lineWidth: 2 }, // 红色连接线配置
{ points: [], color: 'yellow', lineWidth: 2 } // 黄色连接线配置 { points: [], color: "yellow", lineWidth: 2 } // 黄色连接线配置
],
canvasData: [
{
name: "剖面名称",
height: "剖面高度",
width: "剖面宽度",
code: "剖面编号",
sdeg: "水区扇形起始角度",
diameter: "总直径",
jrxStepsDtoList: [
{
name: "台阶名称",
code: "台阶编号",
height: "高度(米)",
width: "宽度(米)",
slope: "坡度(deg)"
}
],
equipmentDataList: [
{
sensorid: "设备id",
sensorname: "设备名称",
unit: "设备单位",
stage: "水位（传感器到水面的距离）",
depth: "浸润线埋深(水位到管口的距离)(m)",
smhb: "// 水面海拔",
time: "时间",
holeDepth: "孔口高程",
jrxTrepanning: "浸润线开口深度",
redAlarm: "红色预警 此预警值针对的是depth 浸润线埋深",
orangeAlarm: "橙色预警",
yellowAlarm: "黄色预警",
blueAlarm: "蓝色预警"
}
]
}
] ]
}; };
}, },
...@@ -181,81 +217,77 @@ export default { ...@@ -181,81 +217,77 @@ export default {
if (deviceId) { if (deviceId) {
this.form.query.sensorid = deviceId; // 将deviceId赋值到查询条件的code字段 this.form.query.sensorid = deviceId; // 将deviceId赋值到查询条件的code字段
} }
this.handleCanvasData(this.canvasData);
}, },
mounted() { mounted() {
// 新增：动态调整Canvas尺寸 目前支持7层。 // 新增：动态调整Canvas尺寸 目前支持7层。
const poCount = 4; const poCount = 4;
const lineCount = 5 const lineCount = 5;
let canvasWidth = 1000; // 默认宽度 let canvasWidth = 1000; // 默认宽度
let canvasHeight = 600; // 默认高度 let canvasHeight = 600; // 默认高度
if (poCount > 4) { if (poCount > 4) {
canvasHeight = poCount * 150; // 高度 = 个数 × 150px canvasHeight = poCount * 150; // 高度 = 个数 × 150px
// canvasWidth = 1000 + (poCount - 4) * 150; // 宽度 = 原宽度 + (个数-4)×150px // canvasWidth = 1000 + (poCount - 4) * 150; // 宽度 = 原宽度 + (个数-4)×150px
} }
// 更新Canvas元素属性和样式
const canvasEl = this.$refs.canvas;
if (canvasEl) {
// 实际绘图区域尺寸（关键属性）
canvasEl.width = canvasWidth;
canvasEl.height = canvasHeight;
// 显示尺寸（与绘图区域保持一致）
canvasEl.style.width = `${canvasWidth}px`;
canvasEl.style.height = `${canvasHeight}px`;
}
// 更新Canvas元素属性和样式
const canvasEl = this.$refs.canvas;
if (canvasEl) {
// 实际绘图区域尺寸（关键属性）
canvasEl.width = canvasWidth;
canvasEl.height = canvasHeight;
// 显示尺寸（与绘图区域保持一致）
canvasEl.style.width = `${canvasWidth}px`;
canvasEl.style.height = `${canvasHeight}px`;
}
// 数据清洗 // 数据清洗
const po_pad_right = poCount > 4 ? 130 : 180 // 第一个台阶距离画布的距离 const po_pad_right = poCount > 4 ? 130 : 180; // 第一个台阶距离画布的距离
const poH = 150 const poH = 150;
const line_color = ['red', 'yellow', 'green', 'blue', 'white'] const line_color = ["red", "yellow", "green", "blue", "white"];
this.poConfigs = [] this.poConfigs = [];
this.guanConfigs = [] this.guanConfigs = [];
this.lineConfigs = [] this.lineConfigs = [];
for (let index = 0; index < poCount; index++) { for (let index = 0; index < poCount; index++) {
// 坡数据数据格式处理 // 坡数据数据格式处理
this.poConfigs.push({ this.poConfigs.push({
x: 0, x: 0,
y: canvasHeight-((index+1)*poH), y: canvasHeight - (index + 1) * poH,
width: canvasWidth - ((index+1)*po_pad_right), width: canvasWidth - (index + 1) * po_pad_right,
height: poH height: poH
});
}) // 管孔数据数据格式处理
// 管孔数据数据格式处理
this.guanConfigs.push({ this.guanConfigs.push({
x: this.poConfigs[index].width *0.75, x: this.poConfigs[index].width * 0.75,
y: canvasHeight - (this.poConfigs[index].height*(index+1)) + 30, y: canvasHeight - this.poConfigs[index].height * (index + 1) + 30,
width: 6, width: 6,
height: index == 0 ? 100 : 200, height: index == 0 ? 100 : 200,
image: 'guanImage' image: "guanImage"
}) });
} }
// 警戒线逻辑- 初始化4条线
// 警戒线逻辑- 初始化4条线 for (let index1 = 0; index1 < lineCount; index1++) {
for (let index1 = 0; index1 < lineCount; index1++) { this.lineConfigs.push({
this.lineConfigs.push({ // 设置 // 设置
points: [], points: [],
color: line_color[index1], color: line_color[index1],
lineWidth: 2, lineWidth: 2,
cha: 20*index1 // 每条线之间的差值 cha: 20 * index1 // 每条线之间的差值
}) });
}
}
// 警戒线种类下，根据管孔个数，设定对应的坐标点
this.lineConfigs.forEach((line, index)=>{ // 几个管孔几个坐标点
this.guanConfigs.forEach((guan, subindex)=>{
line.points.push({
x: guan.x+1,
y: guan.y + 30 + line.cha,
})
})
})
// 警戒线种类下，根据管孔个数，设定对应的坐标点
this.lineConfigs.forEach((line, index) => {
// 几个管孔几个坐标点
this.guanConfigs.forEach((guan, subindex) => {
line.points.push({
x: guan.x + 1,
y: guan.y + 30 + line.cha
});
});
});
this.$nextTick(() => { this.$nextTick(() => {
this.loadData(); this.loadData();
...@@ -263,9 +295,9 @@ export default { ...@@ -263,9 +295,9 @@ export default {
// 获取选择列表字典 // 获取选择列表字典
var selectList = this.Dict.selectList; var selectList = this.Dict.selectList;
Tools.asyncLoop.call(this, selectList, function (key, value, next) { Tools.asyncLoop.call(this, selectList, function(key, value, next) {
if (typeof value === "function") { if (typeof value === "function") {
value.call(this.Dict).then(function (res) { value.call(this.Dict).then(function(res) {
selectList[key] = res; selectList[key] = res;
next(); next();
}); });
...@@ -274,7 +306,7 @@ export default { ...@@ -274,7 +306,7 @@ export default {
} }
}); });
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染） // 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => { this.$nextTick(() => {
// 初始化 Canvas // 初始化 Canvas
setTimeout(() => { setTimeout(() => {
...@@ -283,6 +315,76 @@ export default { ...@@ -283,6 +315,76 @@ export default {
}); });
}, },
methods: { methods: {
// 处理canvas数据
handleCanvasData(list = []) {
const canvasData = { poConfigs: [], guanConfigs: [], lineConfigs: [] };
canvasData.lineConfigs = [
{ points: [], color: "red", lineWidth: 2 }, // 红色连接线配置
{ points: [], color: "yellow", lineWidth: 2 }, // 黄色连接线配置
{ points: [], color: "green", lineWidth: 2 }, // 绿色连接线配置
{ points: [], color: "blue", lineWidth: 2 }, // 蓝色连接线配置
{ points: [], color: "white", lineWidth: 2 } // 实际连接线配置
];
const tjNumber = list[0].jrxStepsDtoList.length;
//第一层台阶的开孔深度和设备图片相除的系数
const sbHeightModulus = list[0].equipmentDataList[0].jrxTrepanning / 130;
for (let index = 0; index < tjNumber; index++) {
canvasData.poConfigs.push({
x: 0,
y: 150 * index,
width: 879 - 250 * index,
height: 150
});
canvasData.guanConfigs.push({
x: 820 - 250 * index,
y: 600 - 150 * index,
width: 6,
height:
list[0].equipmentDataList[index].jrxTrepanning * sbHeightModulus,
image: "guanImage"
});
// 向红色连接线配置push数据
canvasData.lineConfigs[0].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].redAlarm * sbHeightModulus // y坐标
});
// 向黄色连接线配置push数据
canvasData.lineConfigs[1].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].orangeAlarm * sbHeightModulus // y坐标
});
// 向绿色连接线配置push数据
canvasData.lineConfigs[2].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].yellowAlarm * sbHeightModulus // y坐标
});
// 向蓝色连接线配置push数据
canvasData.lineConfigs[3].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].blueAlarm * sbHeightModulus // y坐标
});
// 向实际连接线配置push数据
canvasData.lineConfigs[4].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].depth * sbHeightModulus // y坐标
});
}
},
/** 初始化 Canvas 画布及坐标系 */ /** 初始化 Canvas 画布及坐标系 */
initCanvas() { initCanvas() {
// 获取 Canvas 元素和上下文 // 获取 Canvas 元素和上下文
...@@ -342,7 +444,9 @@ export default { ...@@ -342,7 +444,9 @@ export default {
this.ctx.lineWidth = config.lineWidth; this.ctx.lineWidth = config.lineWidth;
this.ctx.beginPath(); this.ctx.beginPath();
config.points.forEach((point, index) => { config.points.forEach((point, index) => {
index === 0 ? this.ctx.moveTo(point.x, point.y) : this.ctx.lineTo(point.x, point.y); index === 0
? this.ctx.moveTo(point.x, point.y)
: this.ctx.lineTo(point.x, point.y);
}); });
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
...@@ -384,7 +488,7 @@ export default { ...@@ -384,7 +488,7 @@ export default {
this.drawBackground(); this.drawBackground();
// 2. 绘制po.png（遍历配置数组） // 2. 绘制po.png（遍历配置数组）
console.log(this.poConfigs, 'poConfigs') console.log(this.poConfigs, "poConfigs");
this.poConfigs.forEach((config, index) => { this.poConfigs.forEach((config, index) => {
// // 第二张po.png的y坐标需要基于第一张计算（顶部对齐） // // 第二张po.png的y坐标需要基于第一张计算（顶部对齐）
// if (index === 1) { // if (index === 1) {
...@@ -395,7 +499,7 @@ export default { ...@@ -395,7 +499,7 @@ export default {
}); });
// 3. 绘制guan.png（遍历配置数组） // 3. 绘制guan.png（遍历配置数组）
console.log(this.guanConfigs, 'guanConfigs') console.log(this.guanConfigs, "guanConfigs");
this.guanConfigs.forEach((config, index) => { this.guanConfigs.forEach((config, index) => {
// const firstPo = this.poConfigs[0]; // const firstPo = this.poConfigs[0];
// const secondPo = this.poConfigs[1]; // const secondPo = this.poConfigs[1];
...@@ -457,11 +561,10 @@ export default { ...@@ -457,11 +561,10 @@ export default {
// 等待所有图片加载完成 // 等待所有图片加载完成
Promise.all([ Promise.all([
new Promise((resolve) => (this.bgImage.onload = resolve)), new Promise(resolve => (this.bgImage.onload = resolve)),
new Promise((resolve) => (this.waterImage.onload = resolve)), new Promise(resolve => (this.waterImage.onload = resolve)),
new Promise((resolve) => (this.poImage.onload = resolve)), new Promise(resolve => (this.poImage.onload = resolve)),
new Promise((resolve) => (this.guanImage.onload = resolve)), new Promise(resolve => (this.guanImage.onload = resolve))
]) ])
.then(() => { .then(() => {
// 所有图片加载完成后绘制 // 所有图片加载完成后绘制
...@@ -525,7 +628,6 @@ export default { ...@@ -525,7 +628,6 @@ export default {
// ); // );
// this.ctx.restore(); // this.ctx.restore();
// // 3. 绘制 guan0.png（po.png 右侧中间，上层） // // 3. 绘制 guan0.png（po.png 右侧中间，上层）
// this.ctx.save(); // this.ctx.save();
// this.ctx.setTransform(1, 0, 0, 1, 0, 0); // this.ctx.setTransform(1, 0, 0, 1, 0, 0);
...@@ -544,7 +646,6 @@ export default { ...@@ -544,7 +646,6 @@ export default {
// ); // );
// this.ctx.restore(); // this.ctx.restore();
// /** // /**
// * canvas绘画原则。坐标轴从左上角开始画，y轴要从上往下找y轴的起始原点。 // * canvas绘画原则。坐标轴从左上角开始画，y轴要从上往下找y轴的起始原点。
// * canvasWidth：this.canvas.height // 画布的宽度（目前为600） // * canvasWidth：this.canvas.height // 画布的宽度（目前为600）
...@@ -571,7 +672,6 @@ export default { ...@@ -571,7 +672,6 @@ export default {
// this.ctx.restore(); // this.ctx.restore();
// // 新增：绘制红色连接线（关键修改） // // 新增：绘制红色连接线（关键修改）
// this.ctx.save(); // this.ctx.save();
// this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（原点在左上角） // this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（原点在左上角）
...@@ -603,7 +703,6 @@ export default { ...@@ -603,7 +703,6 @@ export default {
// this.ctx.stroke(); // 描边绘制 // this.ctx.stroke(); // 描边绘制
// this.ctx.restore(); // this.ctx.restore();
// // 2. 绘制 water.png（临时恢复默认坐标系，避免翻转） // // 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
// this.ctx.save(); // 保存当前变换状态 // this.ctx.save(); // 保存当前变换状态
// this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转） // this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
...@@ -657,55 +756,58 @@ export default { ...@@ -657,55 +756,58 @@ export default {
verticalAlign: "top", // 垂直顶部对齐 verticalAlign: "top", // 垂直顶部对齐
layout: "vertical", // 垂直排列 layout: "vertical", // 垂直排列
x: -20, // 微调水平位置 x: -20, // 微调水平位置
y: 10, // 微调垂直位置 y: 10 // 微调垂直位置
}, },
series: [ series: [
{ name: "水位", data: [...mockData.waterLevel] }, { name: "水位", data: [...mockData.waterLevel] },
{ name: "浸润线埋深", data: [...mockData.infiltration] }, { name: "浸润线埋深", data: [...mockData.infiltration] }
], ]
}); });
}, },
initChart1() { initChart1() {
let params = { let params = {
sort: "date,desc", sort: "date,desc"
} };
if(this.form.query.daterange){ if (this.form.query.daterange) {
params.daterange = this.form.query.daterange.join(',') params.daterange = this.form.query.daterange.join(",");
} }
if(this.form.query.sensorid){ if (this.form.query.sensorid) {
params.code = this.form.query.sensorid params.code = this.form.query.sensorid;
} }
request({ request({
url: "data/st/imghistory", url: "data/st/imghistory",
method: "get", method: "get",
params params
}).then((res) => { }).then(res => {
const data = res.body; const data = res.body;
// const data = this.getChartData().body // const data = this.getChartData().body
console.log("data", data); console.log("data", data);
const chartData = this.seriesDataFormat(data, { datekey: "date" }); const chartData = this.seriesDataFormat(data, { datekey: "date" });
var warningLine = undefined; // this.form.config.warningLine;
var option = {
valEnabled: true,
var warningLine = undefined // this.form.config.warningLine; opacity: 1,
var option = { lineWidth: 3
valEnabled: true, };
opacity:1, var alarmData = this.discernValidAlarmValue(
lineWidth:3, data.alarm,
}; data.lists,
var alarmData = this.discernValidAlarmValue(data.alarm, data.lists, chartData.series, warningLine, option); chartData.series,
warningLine,
option
);
// const chartData = data // const chartData = data
console.log("chartCData", chartData); console.log("chartCData", chartData);
Highcharts.setOptions({ Highcharts.setOptions({
global: { global: {
useUTC: false, useUTC: false
}, },
lang: { lang: {
resetZoom: "重置缩放比例", resetZoom: "重置缩放比例"
}, }
}); });
this.chartInstance = new Highcharts.chart(this.$refs.chartContainer, { this.chartInstance = new Highcharts.chart(this.$refs.chartContainer, {
...@@ -715,20 +817,20 @@ export default { ...@@ -715,20 +817,20 @@ export default {
//marginTop:30, //marginTop:30,
//marginBottom:30, //marginBottom:30,
//marginLeft:30, //marginLeft:30,
zoomType: "x", // xy zoomType: "x" // xy
}, },
valEnabled: true, valEnabled: true,
opacity: 1, opacity: 1,
lineWidth: 3, lineWidth: 3,
title: { title: {
text: "", text: ""
}, },
subtitle: { subtitle: {
text: "", text: ""
}, },
tooltip: { tooltip: {
enabled: false, enabled: false,
borderWidth: 10, borderWidth: 10
}, },
xAxis: { xAxis: {
type: "datetime", type: "datetime",
...@@ -746,28 +848,28 @@ export default { ...@@ -746,28 +848,28 @@ export default {
day: "%m-%d", day: "%m-%d",
week: "%m-%d", week: "%m-%d",
month: "%Y-%m", month: "%Y-%m",
year: "%Y", year: "%Y"
}, }
}, },
yAxis: { yAxis: {
title: { title: {
text: "", text: ""
}, },
labels: { labels: {
x: -6, x: -6
}, },
gridLineColor: "#aaa", gridLineColor: "#aaa",
max: null, max: null
}, },
plotOptions: { plotOptions: {
column: { column: {
borderWidth: 0, borderWidth: 0
//y:50, //y:50,
//itemMarginTop:50, //itemMarginTop:50,
}, },
bar: { bar: {
borderWidth: 0, borderWidth: 0
}, }
}, },
tooltip: { tooltip: {
// {point.y:.4f} // 保留4位小数 // {point.y:.4f} // 保留4位小数
...@@ -788,8 +890,8 @@ export default { ...@@ -788,8 +890,8 @@ export default {
day: "%m-%d %H时", day: "%m-%d %H时",
week: "%m-%d", week: "%m-%d",
month: "%Y-%m", month: "%Y-%m",
year: "%Y", year: "%Y"
}, }
}, },
legend: { legend: {
enabled: chartData.series.length > 1 ? true : false, enabled: chartData.series.length > 1 ? true : false,
...@@ -812,12 +914,12 @@ export default { ...@@ -812,12 +914,12 @@ export default {
y: -10, y: -10,
itemMarginTop: 2, itemMarginTop: 2,
itemStyle: {}, itemStyle: {},
itemHoverStyle: {}, itemHoverStyle: {}
}, },
credits: { credits: {
enabled: false, enabled: false
}, },
series: chartData.series, series: chartData.series
}); });
}); });
}, },
...@@ -842,7 +944,7 @@ export default { ...@@ -842,7 +944,7 @@ export default {
"#00ABBD", "#00ABBD",
"#ffd886", "#ffd886",
"#9F2E61", "#9F2E61",
"#4D670C", "#4D670C"
]; ];
var len = names.length; var len = names.length;
...@@ -853,7 +955,7 @@ export default { ...@@ -853,7 +955,7 @@ export default {
data: [], data: [],
key: item.key, key: item.key,
type: data.chartType, type: data.chartType,
color: colors[i], color: colors[i]
}; };
opts && serie.type && (serie.type = opts.type); opts && serie.type && (serie.type = opts.type);
series.push(serie); series.push(serie);
...@@ -887,10 +989,10 @@ export default { ...@@ -887,10 +989,10 @@ export default {
{ color: "red", name: "红色报警线" }, { color: "red", name: "红色报警线" },
{ color: "orange", name: "橙色报警线" }, { color: "orange", name: "橙色报警线" },
{ color: "yellow", name: "黄色报警线" }, { color: "yellow", name: "黄色报警线" },
{ color: "blue", name: "蓝色报警线" }, { color: "blue", name: "蓝色报警线" }
], ],
alarmLine = {}, alarmLine = {},
setAlarmSerie = function (value, name, color) { setAlarmSerie = function(value, name, color) {
// 修改蓝色色值 // 修改蓝色色值
color === "blue" && (color = "#3BAFFB"); color === "blue" && (color = "#3BAFFB");
var sx = list[0].date, var sx = list[0].date,
...@@ -898,10 +1000,7 @@ export default { ...@@ -898,10 +1000,7 @@ export default {
var serie = { var serie = {
name: name, name: name,
type: "spline", type: "spline",
data: [ data: [{ x: sx, y: value }, { x: ex, y: value }],
{ x: sx, y: value },
{ x: ex, y: value },
],
color: color, color: color,
enableMouseTracking: false, enableMouseTracking: false,
legend: false, legend: false,
...@@ -910,8 +1009,8 @@ export default { ...@@ -910,8 +1009,8 @@ export default {
lineWidth: opts.lineWidth || 1, lineWidth: opts.lineWidth || 1,
states: { states: {
inactive: { inactive: {
opacity: opts.opacity, opacity: opts.opacity
}, }
}, },
dataLabels: { dataLabels: {
enabled: opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭 enabled: opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
...@@ -922,19 +1021,19 @@ export default { ...@@ -922,19 +1021,19 @@ export default {
allowOverlap: true, allowOverlap: true,
color: color, color: color,
style: { style: {
textOutline: "none", textOutline: "none"
}, }
}, },
tooltip: { tooltip: {
//footerFormat:'', //footerFormat:'',
//pointFormat:'', //pointFormat:'',
headerFormat: "", headerFormat: ""
//nullFormat:'', //nullFormat:'',
}, },
marker: { marker: {
enabled: false, enabled: false
}, },
zIndex: -10, zIndex: -10
}; };
series.push(serie); series.push(serie);
}; };
...@@ -967,30 +1066,29 @@ export default { ...@@ -967,30 +1066,29 @@ export default {
} }
return { series, maxAlarm }; return { series, maxAlarm };
}, },
/** 切换图表类型 */ /** 切换图表类型 */
switchChartType(type) { switchChartType(type) {
this.currentChartType = type; this.currentChartType = type;
if (this.chartInstance) { if (this.chartInstance) {
this.chartInstance.series.forEach((series) => { this.chartInstance.series.forEach(series => {
series.update({ type: this.currentChartType }); series.update({ type: this.currentChartType });
}); });
} }
}, },
loadData: function(){ loadData: function() {
console.log(this.form, 'form') console.log(this.form, "form");
this.initChart1() this.initChart1();
return reqApi.common.getRequst return reqApi.common.getRequst;
}, },
cancelForm() { cancelForm() {
this.form.visible = false; this.form.visible = false;
}, },
submitForm(form, item) { submitForm(form, item) {
reqApi.common.submitForm.call(this, form, item); reqApi.common.submitForm.call(this, form, item);
}, }
}, }
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scope> <style rel="stylesheet/scss" lang="scss" scope>
......
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