vue3+Echarts+ts实现甘特图

王國慶 · 2025-1-4 09:50:13

项目场景：

vue3+Echarts+ts实现甘特图;发布任务

代码实现

封装ganttEcharts.vue

<template>
<div ref="progressChart" class="w100 h100"></div>
</template>
<script lang="ts" name="construction" setup>
import { ElLoading } from 'element-plus';
import { useMessage } from '/@/hooks/message';
import { formatDate } from '/@/utils/formatTime';
import * as echarts from 'echarts';
import { useUserInfo } from '/@/stores/userInfo';
// import ganttData from './airport-schedule.json';
import ganttData from './gantt.json';
import lockUrl from '/@/assets/images/gantt/lock.png';
// import dragUrl from '/@/assets/images/gantt/drag.png';
import { vulcanization, molding, quality } from '/@/api/plan/pre_production_scheduling';
import { cloneDeep } from 'lodash';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const emit = defineEmits(['refresh', 'setDatas']);
const props = defineProps({
shiftList: {
type: Array,
default: () => [],
},
errorEquip: {
type: Array,
default: () => [],
},
pageType: {
type: String,
default: '',
},
});
const progressChart = ref();
// echarts 的实例不应该是‘响应式’的因为它可能会影响对内部模型属性的访问，并带来一些意想不到的问题
let myChart: any = null;
const option: any = ref({});
// 定义常量
const HEIGHT_RATIO = 0.6;
const DIM_TIME = {
DIM_TIME_ARRIVAL: 1, //开始时间
DIM_TIME_DEPARTURE: 2, //结束时间
};
const DIM_CATEGORY = {
DIM_CATEGORY_INDEX: 0, //y轴决定值
};
const DATA_ZOOM = {
DATA_ZOOM_X_INSIDE_INDEX: 1,
DATA_ZOOM_Y_INSIDE_INDEX: 3,
DATA_ZOOM_AUTO_MOVE_SPEED: 0.2,
DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH: 30,
DATA_ZOOM_AUTO_MOVE_THROTTLE: 30,
};
let _draggingEl: any;
let _dropRecord: any;
let _dropShadow: any;
let _draggingTimeLength: any;
const _cartesianXBounds: any = reactive([]);
const _cartesianYBounds: any = reactive([]);
const _autoDataZoomAnimator: any = ref();
const _draggingRecord: any = ref();
const _draggingCursorOffset = ref([0, 0]);
const _draggable = ref(false);
let _rawData = reactive({
parkingApron: {
dimensions: [] as any,
data: [] as any,
},
flight: {
dimensions: [] as any,
data: [] as any,
},
});
// 保存接口返回的甘特图数据
let res_data: any = [];
//临时拖拽的元素
let ganttObj: any = [];
// 保存冲突的图形元素
const conflictingGraphics: any = ref(null);
// 全局变量来跟踪选中的图形元素id
let selectedElementId: any = null;
// x轴y轴视图大小
const _xdata_start = ref(0);
const _xdata_end = ref(60);
const _ydata_start = ref(98);
const _ydata_end = ref(100);
//异常机台
const errorEquipList: any = ref([]);
//锁定的用户
const lockUser = ref('');
onMounted(() => {
// _rawData = { ...ganttData };
lockUser.value = userInfos.value.user.username;
nextTick(() => {
myChart = echarts.init(progressChart.value);
window.addEventListener('resize', resizeChart);
// initChart();
setData(ganttData.data);
});
});
onUnmounted(() => window.removeEventListener('resize', resizeChart));
const initChart = () => {
myChart.setOption((option.value = makeOption()));
initDrag();
};
// 撤回/更新数据操作
const setWithdrawData = (data: any) => {
let resArr = cloneDeep(data);
_rawData.flight.data.forEach((gantt: any, index: any) => {
let newItem = resArr.find((item: any) => item.atrKey === gantt[14].atrKey);
if (newItem) {
let startTime = new Date(newItem['startTime']).getTime();
let endTime = new Date(newItem['endTime']).getTime();
gantt[DIM_TIME.DIM_TIME_ARRIVAL] = startTime;
gantt[DIM_TIME.DIM_TIME_DEPARTURE] = endTime;
gantt[3] = newItem['equipmentName'];
gantt[5] = newItem['type'] === 'Stop' ? '是' : '否';
gantt[6] = newItem['quantity'];
gantt[7] = newItem['partNumber'];
gantt[8] = newItem['partDesc'];
gantt[9] = newItem['poOrderNo'];
gantt[10] = newItem['bizDate'];
gantt[11] = newItem['shiftValue'];
gantt[12] = newItem['lockUser'];
gantt[13] = newItem['color'];
gantt[14] = newItem;
}
});
myChart.setOption({
series: {
id: 'flightData',
data: _rawData.flight.data,
},
});
};
// 生成甘特图
const setData = (dataList: any) => {
console.log('生成甘特图', props.shiftList, props.errorEquip);
if (props.errorEquip.length > 0) {
errorEquipList.value = props.errorEquip.map((item: any) => item['equipmentName']);
} else {
errorEquipList.value = [];
}
res_data = [...dataList];
console.log('甘特图数据', res_data);
if (!res_data.length) return useMessage().error('暂无数据！');
let dateShiftInfo = res_data[0]['dateShiftInfo'];
_xdata_end.value = 1400 / ((dateShiftInfo.length / 3) * 24);
_rawData.parkingApron.dimensions = ['序号', '机台描述', '机台编码', '总规格数', '计划数', '总换料时间', '总停机时长'];
_rawData.parkingApron.data = res_data.map((item: any, index: any) => {
let data = [
index,
item['equipmentDesc'],
item['equipmentName'],
item['equipPartCount'],
item['equipTotalQty'],
item['equipChg'],
item['equipTotalStop'],
];
return data;
});
_rawData.flight.dimensions = [
'序号',
'开始时间',
'结束时间',
'机台编码',
'uid',
'是否停机',
'计划数量',
'物料编码',
'物料描述',
'定制通知单',
'日期',
'班次',
'锁定人',
'color',
'gentt',
];
_rawData.flight.data = [];
res_data.forEach((item: any, index: any) => {
let list: any = [];
if (item.ganttList && item.ganttList.length > 0) {
list = item.ganttList.map((gantt: any) => {
let startTime = new Date(gantt['startTime']).getTime();
let endTime = new Date(gantt['endTime']).getTime();
return [
index,
startTime,
endTime,
gantt['equipmentName'],
gantt['atrKey'],
gantt['type'] === 'Stop' ? '是' : '否',
gantt['quantity'],
gantt['partNumber'],
gantt['partDesc'],
gantt['poOrderNo'],
gantt['bizDate'],
gantt['shiftValue'],
gantt['lockUser'],
gantt['color'],
gantt,
];
});
}
_rawData.flight.data = [..._rawData.flight.data, ...list];
});
// console.log(_rawData.flight.data, '_rawData.flight.data');
let L = _rawData['parkingApron']['data'].length;
if (L < 13) {
_ydata_start.value = 0;
// _height.value = (100 * L) / 13;
} else {
_ydata_start.value = (100 * (L - 13)) / L;
}
initChart();
};
// 浏览器窗口大小变化，图表大小自适应
function resizeChart() {
if (myChart) {
myChart.resize();
}
}
function makeOption() {
return {
tooltip: {},
toolbox: {
right: 10,
top: 0,
itemSize: 20,
feature: {
myDrag: {
show: true,
title: '编辑',
icon: 'path://M990.55 380.08 q11.69 0 19.88 8.19 q7.02 7.01 7.02 18.71 l0 480.65 q-1.17 43.27 -29.83 71.93 q-28.65 28.65 -71.92 29.82 l-813.96 0 q-43.27 -1.17 -72.5 -30.41 q-28.07 -28.07 -29.24 -71.34 l0 -785.89 q1.17 -43.27 29.24 -72.5 q29.23 -29.24 72.5 -29.24 l522.76 0 q11.7 0 18.71 7.02 q8.19 8.18 8.19 18.71 q0 11.69 -7.6 19.29 q-7.6 7.61 -19.3 7.61 l-518.08 0 q-22.22 1.17 -37.42 16.37 q-15.2 15.2 -15.2 37.42 l0 775.37 q0 23.39 15.2 38.59 q15.2 15.2 37.42 15.2 l804.6 0 q22.22 0 37.43 -15.2 q15.2 -15.2 16.37 -38.59 l0 -474.81 q0 -11.7 7.02 -18.71 q8.18 -8.19 18.71 -8.19 l0 0 ZM493.52 723.91 l-170.74 -170.75 l509.89 -509.89 q23.39 -23.39 56.13 -21.05 q32.75 1.17 59.65 26.9 l47.94 47.95 q25.73 26.89 27.49 59.64 q1.75 32.75 -21.64 57.3 l-508.72 509.9 l0 0 ZM870.09 80.69 l-56.13 56.14 l94.72 95.9 l56.14 -57.31 q8.19 -9.35 8.19 -21.05 q-1.17 -12.86 -10.53 -22.22 l-47.95 -49.12 q-10.52 -9.35 -23.39 -9.35 q-11.69 -1.17 -21.05 7.01 l0 0 ZM867.75 272.49 l-93.56 -95.9 l-380.08 380.08 l94.73 94.73 l378.91 -378.91 l0 0 ZM322.78 553.16 l38.59 39.77 l-33.92 125.13 l125.14 -33.92 l38.59 38.6 l-191.79 52.62 q-5.85 1.17 -12.28 0 q-6.44 -1.17 -11.11 -5.84 q-4.68 -4.68 -5.85 -11.7 q-2.34 -5.85 0 -11.69 l52.63 -192.97 l0 0 Z',
onclick: onDragSwitchClick,
},
},
show: _rawData['parkingApron']['data'].length > 0,
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'weakFilter',
height: 15,
bottom: 0,
start: _xdata_start.value,
end: _xdata_end.value,
handleSize: '80%',
showDetail: false,
show: _rawData['parkingApron']['data'].length > 0,
},
{
type: 'inside',
id: 'insideX',
xAxisIndex: 0,
filterMode: 'weakFilter',
start: _xdata_start.value,
end: _xdata_end.value,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
},
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 10,
right: 10,
top: 70,
bottom: 20,
start: _ydata_start.value,
end: _ydata_end.value,
handleSize: 0,
showDetail: false,
show: false,
},
// x = 60H/26
// y = 100 - 8L/195
{
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: _ydata_start.value,
end: _ydata_end.value,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
grid: {
show: true,
top: 70,
bottom: 20,
left: 100,
right: 20,
backgroundColor: '#fff',
borderWidth: 0,
},
legend: {
show: false,
},
xAxis: {
type: 'time',
position: 'top',
axisLabel: {
formatter: function (value: any) {
let date = new Date(value);
let mm = ('0' + (date.getMonth() + 1)).slice(-2);
let dd = ('0' + date.getDate()).slice(-2);
let hh = date.getHours();
let text = '';
let shiftList: any = [
{ name: '早班', startDate: 7, endDate: 15 },
{ name: '中班', startDate: 15, endDate: 23 },
{ name: '夜班', startDate: 23, endDate: 7 },
];
if (props.shiftList.length === 3) {
shiftList = [...props.shiftList];
}
for (let shift of shiftList) {
if (shift.startDate <= shift.endDate) {
if (hh >= shift.startDate && hh < shift.endDate) {
text = shift.name;
break;
}
} else {
// 对于跨越午夜的班次
if ((hh >= shift.startDate && hh < 24) || (hh >= 0 && hh < shift.endDate)) {
text = shift.name;
break;
}
}
}
if (hh >= 0 && hh <= 9) {
return `${text}\n${mm}-${dd}\n0${hh}:00`;
}
return `${text}\n${mm}-${dd}\n${hh}:00`;
},
},
maxInterval: 3600 * 1000,
minInterval: 3600 * 1000,
// axisLabel: {
// formatter: '{MM}-{dd}\n{hh}:00', // 得到的 label 形如：{yyyy}-{MM}-{dd} => '2020-12-02'
// },
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
axisTick: { show: false },
splitLine: { show: false },
axisLine: { show: false },
axisLabel: { show: false },
min: 0,
max: _rawData.parkingApron.data.length,
},
series: [
{
id: 'flightData',
type: 'custom',
renderItem: renderGanttItem,
dimensions: _rawData.flight.dimensions,
encode: {
x: [DIM_TIME.DIM_TIME_ARRIVAL, DIM_TIME.DIM_TIME_DEPARTURE],
y: DIM_CATEGORY.DIM_CATEGORY_INDEX,
tooltip: [3, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2],
},
data: _rawData.flight.data,
// tooltip: {
// formatter: (params: any) => {
// console.log(params, 'params');
// return `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6;"></span>`;
// },
// },
},
{
type: 'custom',
renderItem: renderAxisLabelItem,
dimensions: _rawData.parkingApron.dimensions,
encode: {
x: -1,
y: 0,
tooltip: [4, 3, 5, 6],
},
data: _rawData.parkingApron.data,
// tooltip: {
// trigger: 'none', // 这将禁用 tooltip
// },
},
],
};
}
const renderGanttItem = (params: any, api: any) => {
let categoryIndex = api.value(DIM_CATEGORY.DIM_CATEGORY_INDEX);
let timeArrival = api.coord([api.value(DIM_TIME.DIM_TIME_ARRIVAL), categoryIndex]);
let timeDeparture = api.coord([api.value(DIM_TIME.DIM_TIME_DEPARTURE), categoryIndex]);
let coordSys = params.coordSys;
_cartesianXBounds[0] = coordSys.x;
_cartesianXBounds[1] = coordSys.x + coordSys.width;
_cartesianYBounds[0] = coordSys.y;
_cartesianYBounds[1] = coordSys.y + coordSys.height;
let barLength = timeDeparture[0] - timeArrival[0];
// Get the heigth corresponds to length 1 on y axis.
let barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
let x = timeArrival[0];
let y = timeArrival[1] - barHeight;
let flightNumber = api.value(4) + '';
let textTit = '已选中';
let textTitWidth = echarts.format.getTextRect(textTit).width;
let text = barLength > textTitWidth + 40 && x + barLength >= 120 ? '已选中' : '选中';
let color = '';
if (api.value(13)) {
color = api.value(13).indexOf('#') !== -1 ? api.value(13) : `#${api.value(13)}`;
}
if (api.value(5) === '是') {
color = `rgb(217, 217, 217)`;
}
let rectNormal = clipRectByRect(params, {
x: x,
y: y,
width: barLength,
height: barHeight,
});
let rectVIP = clipRectByRect(params, {
x: x,
y: y,
width: barLength / 2,
height: barHeight,
});
let rectText = clipRectByRect(params, {
x: x,
y: y,
width: barLength,
height: barHeight,
});
return {
type: 'group',
id: 'group_' + flightNumber,
children: [
{
type: 'rect',
id: 'rect_normal_' + flightNumber,
ignore: !rectNormal,
shape: rectNormal,
style: {
fill: selectedElementId !== 'rect_normal_' + flightNumber ? color || '#343F97' : '#aaa',
// stroke: 'transparent', // 无边框
stroke: '#fff',
// shadowBlur: 0.5,
// shadowOffsetX: 0.5,
// shadowOffsetY: 0.5,
// shadowColor: '#999',
},
},
// {
// type: 'rect',
// ignore: !rectVIP && !api.value(4),
// shape: rectVIP,
// style: { fill: '#F6AB41' },
// },
{
type: 'rect',
ignore: !rectText,
shape: rectText,
style: {
fill: 'transparent',
stroke: 'transparent',
text: selectedElementId !== 'rect_normal_' + flightNumber ? '' : text,
textFill: '#fff',
},
},
],
};
};
const renderAxisLabelItem = (params: any, api: any) => {
let y = api.coord([0, api.value(0)])[1];
if (y < params.coordSys.y + 5) {
return;
}
return {
type: 'group',
position: [10, y],
children: [
{
type: 'path',
shape: {
d: 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z',
x: 0,
y: -20,
width: 90,
height: 20,
layout: 'cover',
},
style: {
// 获取异常机台异常的机台背景颜色为#FFC005
fill: errorEquipList.value.includes(api.value(2)) ? '#FFC005' : '#00C488',
},
},
{
type: 'text',
style: {
x: 75,
y: -2,
text: api.value(1),
textVerticalAlign: 'bottom',
textAlign: 'center',
textFill: '#000',
},
},
{
type: 'text',
style: {
x: 24,
y: -3,
textVerticalAlign: 'bottom',
textAlign: 'center',
text: api.value(2),
textFill: '#fff',
},
},
{
type: 'image',
style: {
x: 60,
y: -26,
image: api.value(2) == 'W' ? lockUrl : '',
width: 24,
height: 24,
// opacity: 0.8,
},
},
],
};
};
function clipRectByRect(params: any, rect: any) {
return echarts.graphic.clipRectByRect(rect, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
});
}
// 启用拖动
function onDragSwitchClick(model: any, api: any, type: any) {
_draggable.value = !_draggable.value;
myChart.setOption({
dataZoom: [
{
id: 'insideX',
disabled: _draggable.value,
},
{
id: 'insideY',
disabled: _draggable.value,
},
],
toolbox: {
feature: {
myDrag: {
title: _draggable.value ? '锁定' : '编辑',
},
},
},
});
this.model.setIconStatus(type, _draggable.value ? 'emphasis' : 'normal');
}
const initDrag = () => {
_autoDataZoomAnimator.value = makeAnimator(dispatchDataZoom);
// 添加点击事件监听器
myChart.on('click', function (param: any) {
if (param.seriesId === 'flightData' && param.seriesType === 'custom' && !_draggable.value) {
let elementId = param.data && param.data[4]; // 获取被点击数据点的ID（这里只是一个示例）
selectedElementId = 'rect_normal_' + elementId;
myChart.setOption({
series: {
id: 'flightData',
data: _rawData.flight.data,
},
});
emit('refresh', param.data[14]);
}
});
// 当用户按下鼠标按钮时触发
myChart.on('mousedown', function (param: any) {
if (!_draggable.value || !param || param.seriesIndex == null || !_draggable.value) {
return;
}
if (param.data[14].type === 'Stop') return useMessage().error('该项不允许拖动！');
if (param.data[14].lockUser && param.data[14].lockUser !== lockUser.value) return useMessage().error('该项已被用户锁定，不允许拖动!');
if (param.data[14].dragUser && param.data[14].dragUser !== lockUser.value) return useMessage().error('该项已被用户锁定，不允许拖动!');
// Drag start
ganttObj = cloneDeep(param.data);
_draggingRecord.value = {
dataIndex: param.dataIndex,
categoryIndex: param.value[DIM_CATEGORY.DIM_CATEGORY_INDEX],
timeArrival: param.value[DIM_TIME.DIM_TIME_ARRIVAL],
timeDeparture: param.value[DIM_TIME.DIM_TIME_DEPARTURE],
};
let style = {
lineWidth: 2,
fill: 'rgba(255,0,0,0.1)',
stroke: 'rgba(255,0,0,0.8)',
lineDash: [6, 3],
};
_draggingEl = addOrUpdateBar(_draggingEl, _draggingRecord.value, style, 100);
_draggingCursorOffset.value = [_draggingEl.position[0] - param.event.offsetX, _draggingEl.position[1] - param.event.offsetY];
_draggingTimeLength = _draggingRecord.value.timeDeparture - _draggingRecord.value.timeArrival;
});
// 当鼠标指针在元素上移动时触发
myChart.getZr().on('mousemove', function (event: any) {
if (!_draggingEl) {
return;
}
let cursorX = event.offsetX;
let cursorY = event.offsetY;
// Move _draggingEl.
_draggingEl.attr('position', [_draggingCursorOffset.value[0] + cursorX, _draggingCursorOffset.value[1] + cursorY]);
prepareDrop();
autoDataZoomWhenDraggingOutside(cursorX, cursorY);
});
// 当用户释放鼠标按钮时触发
myChart.getZr().on('mouseup', function () {
// Drop
if (_draggingEl && _dropRecord) {
updateRawData(_dropRecord, _draggingRecord.value.dataIndex);
}
});
// 拖动释放-删除创造元素
function dragRelease() {
_autoDataZoomAnimator.value.stop();
if (_draggingEl) {
myChart.getZr().remove(_draggingEl);
_draggingEl = null;
}
if (_dropShadow) {
myChart.getZr().remove(_dropShadow);
_dropShadow = null;
}
_dropRecord = _draggingRecord.value = null;
}
function addOrUpdateBar(el: any, itemData: any, style: any, z: any) {
let pointArrival = myChart.convertToPixel('grid', [itemData.timeArrival, itemData.categoryIndex]);
let pointDeparture = myChart.convertToPixel('grid', [itemData.timeDeparture, itemData.categoryIndex]);
let barLength = pointDeparture[0] - pointArrival[0];
let barHeight = Math.abs(myChart.convertToPixel('grid', [0, 0])[1] - myChart.convertToPixel('grid', [0, 1])[1]) * HEIGHT_RATIO;
if (!el) {
el = new echarts.graphic.Rect({
shape: { x: 0, y: 0, width: 0, height: 0 },
style: style,
z: z,
});
myChart.getZr().add(el);
}
el.attr({
shape: { x: 0, y: 0, width: barLength, height: barHeight },
position: [pointArrival[0], pointArrival[1] - barHeight],
});
return el;
}
function prepareDrop() {
// Check droppable place.
let xPixel = _draggingEl.shape.x + _draggingEl.position[0];
let yPixel = _draggingEl.shape.y + _draggingEl.position[1];
let cursorData = myChart.convertFromPixel('grid', [xPixel, yPixel]);
if (cursorData) {
// Make drop shadow and _dropRecord
_dropRecord = {
categoryIndex: Math.floor(cursorData[1]),
timeArrival: cursorData[0],
timeDeparture: cursorData[0] + _draggingTimeLength,
};
let style = { fill: 'rgba(0,0,0,0.4)' };
_dropShadow = addOrUpdateBar(_dropShadow, _dropRecord, style, 99);
}
}
// 业务逻辑判断
function updateRawData(dropRecord_: any, index_: number) {
let flight_Data = _rawData.flight.data;
let movingItem: any = flight_Data[index_];
let params: any = {};
// 判断重叠
let hasAnyConflict = flight_Data.some((dataItem: any) =>
hasConflict(dataItem, {
movingItem,
categoryIndex: dropRecord_.categoryIndex,
timeArrival: dropRecord_.timeArrival,
timeDeparture: dropRecord_.timeDeparture,
})
);
// 有重叠下一步
if (hasAnyConflict) {
// console.log(conflictingGraphics.value, '重叠的静态元素');
// useMessage().error('重叠！');
if (conflictingGraphics.value[14].type === 'Stop') {
conflictingGraphics.value = null;
useMessage().error('与停机项冲突，不允许拖动！');
return;
}
// 判断重叠项的时间，拖动的元素是放左面还是右面了
// let timeDifference = dropRecord_.timeArrival - conflictingGraphics.value[DIM_TIME.DIM_TIME_ARRIVAL];
// 需要向右自动移动的距离
// let distanceTheRight: any = _draggingTimeLength;
// timeDifference <= 0 拖动的元素是放右面了
// if (timeDifference >= 0) {
// distanceTheRight = conflictingGraphics.value[DIM_TIME.DIM_TIME_DEPARTURE] - conflictingGraphics.value[DIM_TIME.DIM_TIME_ARRIVAL];
// movingItem[DIM_CATEGORY.DIM_CATEGORY_INDEX] = dropRecord_.categoryIndex;
// movingItem[DIM_TIME.DIM_TIME_ARRIVAL] = conflictingGraphics.value[DIM_TIME.DIM_TIME_DEPARTURE];
// movingItem[DIM_TIME.DIM_TIME_DEPARTURE] = conflictingGraphics.value[DIM_TIME.DIM_TIME_DEPARTURE] + distanceTheRight;
// } else {
// movingItem[DIM_CATEGORY.DIM_CATEGORY_INDEX] = dropRecord_.categoryIndex;
// movingItem[DIM_TIME.DIM_TIME_ARRIVAL] = dropRecord_.timeArrival;
// movingItem[DIM_TIME.DIM_TIME_DEPARTURE] = dropRecord_.timeDeparture;
// }
// 找到重叠的Y轴对应的所有数据
// let y_data: any = flight_Data.filter((item: any) => {
// return item[0] === conflictingGraphics.value[0];
// });
// // 找到与当前拖拽的最终位置不冲突的所有数据
// let no_data: any = [];
// // 找到与当前拖拽的最终位置冲突的所有数据
// let yes_data: any = y_data.filter((dataItem: any) => {
// if (
// dropRecord_.categoryIndex === dataItem[DIM_CATEGORY.DIM_CATEGORY_INDEX] &&
// dropRecord_.timeArrival < dataItem[DIM_TIME.DIM_TIME_DEPARTURE] &&
// dropRecord_.timeDeparture > dataItem[DIM_TIME.DIM_TIME_ARRIVAL]
// ) {
// return true;
// } else {
// no_data.push(dataItem);
// return false;
// }
// });
//
// console.log(y_data, '有重叠！Y轴所有数据');
// console.log(no_data, '不冲突！所有数据');
// console.log(yes_data, '有冲突！所有数据');
// 前端不需要复杂操作，只记录操作后的元素位置即可，以上数据注释同没有重叠操作
}
// 没有重叠的元素只需要修改当前元素
movingItem[DIM_CATEGORY.DIM_CATEGORY_INDEX] = dropRecord_.categoryIndex;
movingItem[DIM_TIME.DIM_TIME_ARRIVAL] = dropRecord_.timeArrival;
movingItem[DIM_TIME.DIM_TIME_DEPARTURE] = dropRecord_.timeDeparture;
let startTime = formatDate(new Date(dropRecord_.timeArrival), 'YYYY-mm-dd HH:MM:SS');
let endTime = formatDate(new Date(dropRecord_.timeDeparture), 'YYYY-mm-dd HH:MM:SS');
// 判断是否是同一个机台
// console.log('更新前的：',ganttObj,'更新后的：', movingItem);
if (ganttObj[0] === movingItem[0]) {
// console.log('是同一个机台', res_data[ganttObj[0]]);
if (res_data[ganttObj[0]].ganttList) {
let ganttList = cloneDeep(res_data[ganttObj[0]].ganttList);
ganttList.forEach((item: any) => {
if (item['atrKey'] === ganttObj[4]) {
item['oldPosition'] = '1';
}
});
ganttList.push({ ...ganttObj[14], startTime, endTime });
params = { ganttList };
} else {
useMessage().error('数据有误！请重新查询');
}
} else {
// console.log('不是同一个机台');
if (res_data[ganttObj[0]].ganttList && res_data[movingItem[0]].ganttList) {
let oldGanttList = cloneDeep(res_data[ganttObj[0]].ganttList);
let ganttList = cloneDeep(res_data[movingItem[0]].ganttList);
oldGanttList.forEach((item: any) => {
if (item['atrKey'] === ganttObj[4]) {
item['oldPosition'] = '1';
}
});
ganttList.push({ ...ganttObj[14], startTime, endTime });
params = { ganttList, oldGanttList };
} else {
useMessage().error('数据有误！请重新查询');
}
}
ganttTests(params);
}
// 拖拽调用后台数据
const ganttTests = async (params: any) => {
console.log(params, '传参');
let pc_loading = ElLoading.service({
lock: true,
text: '提交数据中...',
background: 'rgba(0, 0, 0, 0.7)',
});
try {
let res: any = {};
if (props.pageType === 'C') {
res = await vulcanization.ganttTestAndVerify(params);
} else if (props.pageType === 'B') {
res = await molding.ganttTestAndVerify(params);
} else if (props.pageType === 'A') {
res = await quality.ganttTestAndVerify(params);
}
pc_loading.close();
if (res.data.flag) {
let resArr = res.data.ganttList;
setWithdrawData(resArr);
}
} catch (err: any) {
pc_loading.close();
useMessage().error(err.msg);
myChart.setOption({
series: {
id: 'flightData',
data: _rawData.flight.data,
},
});
}
dragRelease();
};
// 判断是否有重叠元素
function hasConflict(dataItem: any, dropRecord: any) {
if (
dataItem !== dropRecord.movingItem &&
dropRecord.categoryIndex === dataItem[DIM_CATEGORY.DIM_CATEGORY_INDEX] &&
dropRecord.timeArrival < dataItem[DIM_TIME.DIM_TIME_DEPARTURE] &&
dropRecord.timeDeparture > dataItem[DIM_TIME.DIM_TIME_ARRIVAL]
) {
conflictingGraphics.value = { ...dataItem };
return true;
} else {
return false;
}
}
function autoDataZoomWhenDraggingOutside(cursorX: any, cursorY: any) {
// When cursor is outside the cartesian and being dragging,
// auto move the dataZooms.
let cursorDistX = getCursorCartesianDist(cursorX, _cartesianXBounds);
let cursorDistY = getCursorCartesianDist(cursorY, _cartesianYBounds);
if (cursorDistX !== 0 || cursorDistY !== 0) {
_autoDataZoomAnimator.value.start({
cursorDistX: cursorDistX,
cursorDistY: cursorDistY,
});
} else {
_autoDataZoomAnimator.value.stop();
}
}
function dispatchDataZoom(params: any) {
let option = myChart.getOption();
let optionInsideX = option.dataZoom[DATA_ZOOM.DATA_ZOOM_X_INSIDE_INDEX];
let optionInsideY = option.dataZoom[DATA_ZOOM.DATA_ZOOM_Y_INSIDE_INDEX];
let batch: any = [];
prepareBatch(batch, 'insideX', optionInsideX.start, optionInsideX.end, params.cursorDistX);
prepareBatch(batch, 'insideY', optionInsideY.start, optionInsideY.end, -params.cursorDistY);
batch.length &&
myChart.dispatchAction({
type: 'dataZoom',
batch: batch,
});
function prepareBatch(batch: any, id: any, start: any, end: any, cursorDist: any) {
if (cursorDist === 0) {
return;
}
let sign = cursorDist / Math.abs(cursorDist);
let size = end - start;
let delta = DATA_ZOOM.DATA_ZOOM_AUTO_MOVE_SPEED * sign;
start += delta;
end += delta;
if (end > 100) {
end = 100;
start = end - size;
}
if (start < 0) {
start = 0;
end = start + size;
}
batch.push({
dataZoomId: id,
start: start,
end: end,
});
}
}
function getCursorCartesianDist(cursorXY: any, bounds: any) {
let dist0 = cursorXY - (bounds[0] + DATA_ZOOM.DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
let dist1 = cursorXY - (bounds[1] - DATA_ZOOM.DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
return dist0 * dist1 <= 0
? 0 // cursor is in cartesian
: dist0 < 0
? dist0 // cursor is at left/top of cartesian
: dist1; // cursor is at right/bottom of cartesian
}
function makeAnimator(callback: any) {
let requestId: any;
let callbackParams: any;
// Use throttle to prevent from calling dispatchAction frequently.
callback = echarts.throttle(callback, DATA_ZOOM.DATA_ZOOM_AUTO_MOVE_THROTTLE);
function onFrame() {
callback(callbackParams);
requestId = requestAnimationFrame(onFrame);
}
return {
start: function (params: any) {
callbackParams = params;
if (requestId == null) {
onFrame();
}
},
stop: function () {
if (requestId != null) {
cancelAnimationFrame(requestId);
}
requestId = callbackParams = null;
},
};
}
};
watchEffect(() => {
if (_rawData.flight.data) {
let dataList = _rawData.flight.data.map((item: any) => {
return { ...item[14] };
});
emit('setDatas', dataList);
}
});
// 暴露变量
defineExpose({
setData,
setWithdrawData,
});
</script>