diff --git a/src/views/equipment/timing-diagram/status/demo.html b/src/views/equipment/timing-diagram/status/demo.html
index 9c8770a1..466c8865 100644
--- a/src/views/equipment/timing-diagram/status/demo.html
+++ b/src/views/equipment/timing-diagram/status/demo.html
@@ -42,12 +42,14 @@
width: end[0] - start[0],
height: height,
},
+ // {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
// 截取矩形
{
// 截取掉grid以外的部分,实质是计算方块的偏移量
x: params.coordSys.x, // {number} grid rect 的 x
// y: params.coordSys.y, // {number} grid rect 的 y
y: params.coordSys.y - 16, // {number} grid rect 的 y,并多减掉 16 个单位
+ // width: end[0] - start[0],
width: params.coordSys.width, // {number} grid rect 的 width
height: params.coordSys.height, // {number} grid rect 的 height
}
@@ -94,7 +96,7 @@
const option = {
tooltip: {
- trigger: 'axis',
+ trigger: 'item',
axisPointer: {
type: 'none',
// label: {
@@ -110,9 +112,13 @@
// ${params[0].name}
//
// `
+ console.log(params)
return `
-
${params[0].name}
- ${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}
+
+
${params.seriesName}
+ ${params.name}
+
+ ${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}
`
}
},
@@ -129,10 +135,18 @@
// top: 80,
// height: 56,
// },
+ // ***************** 添加第二个grid *****************
+ {
+ id: 1,
+ top: 180,
+ left: 128,
+ right: 64,
+ height: 56
+ }
],
xAxis: [
{
- id: 0,
+ id: 'asdf',
gridIndex: 0,
axisTick: {
alignWithLabel: true,
@@ -157,11 +171,43 @@
// data: getXaxisRange(getTodayStart(new Date())),
},
{
- id: 1,
+ id: 'asdff',
gridIndex: 0,
axisLabel: { show: false },
axisLine: { show: false },
},
+ // ***************** 添加第二个 xAxis *****************
+ {
+ id: 'asdfjk',
+ gridIndex: 1,
+ axisTick: {
+ alignWithLabel: true,
+ inside: true,
+ },
+ type: 'time',
+ min: getTodayStart(new Date()), // <===
+ max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
+ splitNumber: 10,
+ axisLabel: {
+ margin: 12,
+ // rotate: -15,
+ formatter: function (val) {
+ return new Date(val)
+ .toLocaleTimeString()
+ .split(':')
+ .slice(0, 2)
+ .join(':');
+ },
+ },
+ boundaryGap: false,
+ // data: getXaxisRange(getTodayStart(new Date())),
+ },
+ {
+ id: 'fjkd',
+ gridIndex: 1,
+ axisLabel: { show: false },
+ axisLine: { show: false },
+ },
],
yAxis: [
// 主y轴
@@ -193,6 +239,35 @@
axisLabel: { show: false },
axisTick: { show: false },
},
+ // ***************** 添加第二个 yAxis *****************
+ {
+ id: 2,
+ gridIndex: 1,
+ type: 'value',
+ splitLine: { show: false },
+ name: '设备1',
+ nameLocation: 'center',
+ nameGap: 56,
+ nameRotate: 0,
+ nameTextStyle: {
+ fontSize: 18,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {},
+ },
+ axisLabel: { show: false },
+ axisTick: { show: false },
+ },
+ // 辅y轴
+ {
+ id: 3,
+ gridIndex: 1,
+ type: 'value',
+ splitLine: { show: false },
+ axisLabel: { show: false },
+ axisTick: { show: false },
+ },
],
series: [
{
@@ -208,13 +283,87 @@
x: [1, 2],
y: 0,
},
- //function getTimestamp(point) {
- // const t = new Date();
- // const [y,m,d] = [t.getFullYear(),t.getMonth(),t.getDate()]
- // const [h,M] = point.split(':')
- // return new Date(y,m,d,h,M,0,0).getTime()
- //}
data: [
+ {
+ name: '运行',
+ value: [0, 1696694400000, 1696699400000, 0],
+ itemStyle: {
+ normal: {
+ color: types[0].color,
+ },
+ },
+ },
+ {
+ name: '运行',
+ value: [0, 1696730000000, 1696734040450, 0],
+ itemStyle: {
+ normal: {
+ color: types[0].color,
+ },
+ },
+ },
+ {
+ name: '故障',
+ value: [0, 1696737040000, 1696754040450, 0],
+ itemStyle: {
+ normal: {
+ color: types[1].color,
+ },
+ },
+ },
+ {
+ name: '计划停机',
+ value: [0, 1696755000000, 1696759000000, 0],
+ itemStyle: {
+ normal: {
+ color: types[2].color,
+ },
+ },
+ },
+ {
+ name: '运行',
+ value: [0, 1696759000000, 1696769000000, 0],
+ itemStyle: {
+ normal: {
+ color: types[0].color,
+ },
+ },
+ },
+ {
+ name: '计划停机',
+ value: [0, 1696769400000, 1696779000000, 0],
+ itemStyle: {
+ normal: {
+ color: types[2].color,
+ },
+ },
+ },
+ ],
+ },
+ // ***************** 添加第二个设备 *****************
+ {
+ name: '设备2',
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ type: 'custom',
+ renderItem: renderItem,
+ itemStyle: {
+ opacity: 0.8,
+ },
+ encode: {
+ x: [1, 2],
+ y: 0,
+ },
+ data: [
+ {
+ name: '运行',
+ value: [0, 1696694400000, 1696699400000, 0],
+ itemStyle: {
+ normal: {
+ color: types[0].color,
+ },
+ },
+ },
{
name: '运行',
value: [0, 1696730000000, 1696734040450, 0],