src/views/equipment/timing-diagram/components/gantt.js

@@ -0,0 +1,191 @@
+
+// filename: gantt.vue
+// author: liubin
+// date: 2023 -09 - 25 14: 28: 12
+// description: 甘特图
+
+
+import * as echarts from 'echarts';
+
+/**
+ * 
+ * @param {*} params 
+ * @param {*} api 
+ * 
+ * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
+ */
+function renderItem(params, api) { }
+
+export default class Gantt {
+    constructor(el) {
+        this.chart = echarts.init(el);
+        let options = {
+            series: [
+                {
+                    type: 'custom',
+                    coordinateSystem: 'cartesian2d',
+                    renderItem: renderItem,
+                }
+            ]
+        }
+        this.chart.setOption(options);
+    }
+
+    update(options) {
+        this.chart.setOption(options);
+    }
+
+    resize() {
+        // todo
+    }
+
+    destroy() {
+        this.chart.dispose();
+    }
+}
+
+
+
+var data = [];
+var categories = ['设备1', '设备2', '设备3'];
+var types = [
+    { name: '运行', color: '#7b9ce1' },
+    { name: '故障', color: '#bd6d6c' },
+    { name: '停机', color: '#75d874' },
+];
+//   return new Date(new Date(timestamp).toLocaleDateString()).getTime()
+// })(1691568181000))
+function getStartTime(timestamp) {
+    return new Date(new Date(timestamp).toLocaleDateString()).getTime()
+}
+
+
+data.push({
+    name: 'running',
+    value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
+    itemStyle: {
+        normal: {
+            color: types[0].color
+        }
+    }
+})
+
+
+
+function renderItem(params, api) {
+    var categoryIndex = api.value(0);
+    var start = api.coord([api.value(1), categoryIndex]);
+    var end = api.coord([api.value(2), categoryIndex]);
+    var height = api.size([0, 1])[1] * 0.8;
+    var rectShape = echarts.graphic.clipRectByRect(
+        {
+            x: start[0],
+            y: start[1] - height / 2,
+            width: end[0] - start[0],
+            height: height
+        },
+        {
+            x: params.coordSys.x,
+            y: params.coordSys.y,
+            width: params.coordSys.width,
+            height: params.coordSys.height
+        }
+    );
+    return (
+        rectShape && {
+            type: 'rect',
+            transition: ['shape'],
+            shape: rectShape,
+            style: api.style()
+        }
+    );
+}
+
+option = {
+    tooltip: {
+        // show: false,
+        formatter: function (params) {
+            return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString();
+        }
+    },
+    // title: {
+    //   text: 'Profile',
+    //   left: 'center'
+    // },
+    // dataZoom: [
+    //   {
+    //     type: 'slider',
+    //     filterMode: 'weakFilter',
+    //     showDataShadow: false,
+    //     top: 400,
+    //     labelFormatter: ''
+    //   },
+    //   {
+    //     type: 'inside',
+    //     filterMode: 'weakFilter'
+    //   }
+    // ],
+    grid: {
+        height: 300
+    },
+    xAxis: {
+        type: 'time',
+        min: getStartTime(1691568181000),
+        max: getStartTime(1691568181000 + 3600 * 24 * 1000),
+        splitNumber: 10,
+        // interval: 60*3600*1000,
+        // scale: true,
+        axisLabel: {
+            // rotate: -15,
+            formatter: function (val) {
+                return new Date(val).toLocaleTimeString()
+            }
+        },
+        axisTick: {
+            show: true
+        },
+        splitLine: {
+            show: false,
+        }
+    },
+    yAxis: [{
+        axisLine: {
+            // show: false,
+            lineStyle: {
+                color: ''
+            }
+        },
+        axisLabel: {
+            fontSize: 14,
+        },
+        axisTick: {
+            show: false,
+        },
+        splitLine: {
+            show: true
+        },
+        data: categories
+    }, {
+        axisLine: {
+            // show: false,
+            lineStyle: {
+                color: ''
+            }
+        },
+        data: []
+    }],
+    series: [
+        {
+            type: 'custom',
+            renderItem: renderItem,
+            itemStyle: {
+                opacity: 0.8
+            },
+            encode: {
+                x: [1, 2],
+                y: 0
+            },
+            data: data
+        }
+    ]
+};