update ui

src/views/equipment/timing-diagram/status/chart.js

@@ -76,13 +76,18 @@ export default class GanttGraph {
             type: 'none',
         },
         formatter: (params) => {
+            // debugger;
             return `
-                <div style="display: flex; align-items: center; justify-content: space-between">
-                <h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
-                <h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
-                </div>
-                <div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
-                `
+            <div style="display: flex; flex-direction: column;">
+                <span>${new Date(params.value[1]).toLocaleTimeString()} ~ ${new Date(params.value[2]).toLocaleTimeString()}</span>
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <div style="display: flex; align-items: center;">
+                        <span class="icon" style="width: 8px; height: 8px; border-radius: 2px; background: ${params.color}"></span>
+                        <span class="eq-name" style="margin-left: 4px;">${params.seriesName}</span>
+                    </div>
+                    <span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
+            </div>            
+            `
         }
     }
     grid = []
@@ -137,6 +142,11 @@ export default class GanttGraph {
                             .join(':');
                     },
                 },
+                axisLine: {
+                    lineStyle: {
+                        color: '#0005',
+                    },
+                },
                 boundaryGap: false,
                 // data: getXaxisRange(getTodayStart(new Date())),
             },
@@ -166,10 +176,13 @@ export default class GanttGraph {
                 nameRotate: 0,
                 nameTextStyle: {
                     fontSize: 16,
+                    color: '#000A'
                 },
                 axisLine: {
                     show: true,
-                    lineStyle: {},
+                    lineStyle: {
+                        color: '#0005',
+                    },
                 },
                 axisLabel: { show: false },
                 axisTick: { show: false },
@@ -180,6 +193,12 @@ export default class GanttGraph {
                 gridIndex: this.gridIndex,
                 type: 'value',
                 splitLine: { show: false },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#0005',
+                    },
+                },
                 axisLabel: { show: false },
                 axisTick: { show: false },
             },
@@ -213,7 +232,7 @@ export default class GanttGraph {
                         tooltip: { show: false },
                         itemStyle: {
                             color: '#F2F4F9',
-                            // opacity: 0.3,
+                            opacity: 0.3,
                         }
                     },
                 ]