cnhis-design-vue 2.1.66 → 2.1.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +51 -2
- package/es/affix/index.js +8 -8
- package/es/age/index.js +10 -10
- package/es/alert/index.js +8 -8
- package/es/anchor/index.js +8 -8
- package/es/auto-complete/index.js +8 -8
- package/es/avatar/index.js +8 -8
- package/es/back-top/index.js +8 -8
- package/es/badge/index.js +8 -8
- package/es/base/index.js +8 -8
- package/es/big-table/index.js +244 -164
- package/es/big-table/style.css +1 -1
- package/es/breadcrumb/index.js +8 -8
- package/es/button/index.js +22 -22
- package/es/calendar/index.js +8 -8
- package/es/captcha/index.js +3 -3
- package/es/card/index.js +8 -8
- package/es/carousel/index.js +8 -8
- package/es/cascader/index.js +8 -8
- package/es/checkbox/index.js +9 -9
- package/es/col/index.js +8 -8
- package/es/collapse/index.js +8 -8
- package/es/color-picker/index.js +1 -1
- package/es/comment/index.js +8 -8
- package/es/config-provider/index.js +8 -8
- package/es/date-picker/index.js +8 -8
- package/es/descriptions/index.js +8 -8
- package/es/divider/index.js +8 -8
- package/es/drag-layout/index.js +3 -3
- package/es/drawer/index.js +8 -8
- package/es/dropdown/index.js +8 -8
- package/es/editor/index.js +1 -1
- package/es/ellipsis/index.js +1 -1
- package/es/empty/index.js +8 -8
- package/es/fabric-chart/index.js +368 -353
- package/es/form/index.js +8 -8
- package/es/form-model/index.js +8 -8
- package/es/form-table/index.js +66 -66
- package/es/index/index.js +2195 -1114
- package/es/index/style.css +1 -1
- package/es/input/index.js +9 -9
- package/es/input-number/index.js +8 -8
- package/es/layout/index.js +8 -8
- package/es/list/index.js +8 -8
- package/es/locale-provider/index.js +8 -8
- package/es/map/index.js +9 -9
- package/es/mentions/index.js +8 -8
- package/es/menu/index.js +8 -8
- package/es/message/index.js +8 -8
- package/es/multi-chat/index.js +76 -76
- package/es/multi-chat-client/index.js +70 -70
- package/es/multi-chat-history/index.js +4 -4
- package/es/multi-chat-record/index.js +14 -14
- package/es/multi-chat-setting/index.js +22 -22
- package/es/multi-chat-sip/index.js +1 -1
- package/es/notification/index.js +8 -8
- package/es/page-header/index.js +8 -8
- package/es/pagination/index.js +8 -8
- package/es/popconfirm/index.js +8 -8
- package/es/popover/index.js +8 -8
- package/es/progress/index.js +8 -8
- package/es/radio/index.js +9 -9
- package/es/rate/index.js +8 -8
- package/es/result/index.js +8 -8
- package/es/row/index.js +8 -8
- package/es/scale-container/index.js +1 -1
- package/es/scale-view/index.js +53 -53
- package/es/scale-view/style.css +1 -1
- package/es/select/index.js +12 -12
- package/es/select-label/index.js +11 -11
- package/es/select-person/index.js +2 -2
- package/es/shortcut-setter/index.js +10 -10
- package/es/skeleton/index.js +8 -8
- package/es/slider/index.js +8 -8
- package/es/space/index.js +8 -8
- package/es/spin/index.js +8 -8
- package/es/statistic/index.js +8 -8
- package/es/steps/index.js +8 -8
- package/es/switch/index.js +8 -8
- package/es/table-filter/index.js +1293 -293
- package/es/table-filter/style.css +1 -1
- package/es/tabs/index.js +8 -8
- package/es/tag/index.js +9 -9
- package/es/time-picker/index.js +8 -8
- package/es/timeline/index.js +8 -8
- package/es/tooltip/index.js +8 -8
- package/es/transfer/index.js +8 -8
- package/es/tree/index.js +8 -8
- package/es/tree-select/index.js +8 -8
- package/es/upload/index.js +8 -8
- package/es/verification-code/index.js +2 -2
- package/lib/cui.common.js +2286 -1215
- package/lib/cui.umd.js +2286 -1215
- package/lib/cui.umd.min.js +45 -45
- package/package.json +1 -1
- package/packages/big-table/src/BigTable.vue +23 -4
- package/packages/big-table/src/assets/style/table-base.less +2 -1
- package/packages/big-table/src/components/AutoLayoutButton.vue +59 -31
- package/packages/big-table/src/utils/eventBroadcast.js +24 -0
- package/packages/fabric-chart/src/fabric-chart/FabricLines.vue +128 -110
- package/packages/fabric-chart/src/fabric-chart/FabricPolylines.vue +27 -20
- package/packages/fabric-chart/src/fabric-chart/FabricTextGroup.vue +9 -8
- package/packages/fabric-chart/src/mixins/eventCommon.js +4 -4
- package/packages/fabric-chart/src/mixins/fabricCommon.js +8 -22
- package/packages/scale-view/formitem/r-choice.vue +29 -14
- package/packages/table-filter/src/base-search-com/BaseSearch.vue +54 -6
- package/packages/table-filter/src/classification/Classification-com.vue +5 -1
- package/packages/table-filter/src/components/c-tree-select/tree-select.vue +1 -1
- package/packages/table-filter/src/components/multi-select/multi-select.vue +1 -1
- package/packages/table-filter/src/components/out-quick-search/out-quick-search.vue +2 -2
- package/packages/table-filter/src/components/render-widget/components/CheckboxGroup.vue +52 -0
- package/packages/table-filter/src/components/render-widget/components/Select.vue +51 -0
- package/packages/table-filter/src/components/render-widget/components/index.js +7 -0
- package/packages/table-filter/src/components/render-widget/enums.js +29 -0
- package/packages/table-filter/src/components/render-widget/helpers/presetValToTimestamp.js +68 -0
- package/packages/table-filter/src/components/render-widget/index.vue +92 -0
- package/packages/table-filter/src/components/render-widget/widgetCfgMaps.js +140 -0
- package/packages/table-filter/src/components/search-modal/set-classification.vue +48 -22
- package/packages/table-filter/src/components/table-modal/TableModal.vue +6 -2
- package/packages/table-filter/src/const/dataOptions.js +8 -8
- package/packages/table-filter/src/mixins/mixins.js +24 -4
- package/packages/table-filter/src/mixins/renderWidget.js +89 -0
- package/packages/table-filter/src/mixins/tableSearchCon.js +4 -4
- package/packages/table-filter/src/quick-search/QuickSearch.vue +46 -14
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
'table-editing': isTableEdit
|
|
8
8
|
}"
|
|
9
9
|
:style="{ height: tableHeight }"
|
|
10
|
+
v-resize="onResize"
|
|
10
11
|
>
|
|
11
12
|
<div class="check-wrap" v-if="hasRefresh && !isNestTable">
|
|
12
13
|
<p class="check-wrap-title">
|
|
@@ -70,6 +71,7 @@
|
|
|
70
71
|
@sort-change="sortChange"
|
|
71
72
|
@scroll="handlerScroll"
|
|
72
73
|
@cell-mouseenter="handleCellMouseenter"
|
|
74
|
+
@resizable-change="resizableChange"
|
|
73
75
|
:tooltip-config="{ enterable: false }"
|
|
74
76
|
:checkbox-config="{
|
|
75
77
|
checkField: 'checked',
|
|
@@ -163,9 +165,10 @@ import batchEditing from './utils/batchEditing';
|
|
|
163
165
|
import EditForm from './components/edit-form/EditForm.vue';
|
|
164
166
|
|
|
165
167
|
import nestTable from './utils/nestTable';
|
|
168
|
+
import eventBroadcast from './utils/eventBroadcast';
|
|
166
169
|
import bigTableProps from './utils/bigTableProps';
|
|
167
170
|
import SvgIcon from '@/component/svg/index.vue';
|
|
168
|
-
|
|
171
|
+
import resize from 'vue-resize-directive';
|
|
169
172
|
let addInlineEditPrimaryKey = '';
|
|
170
173
|
export default create({
|
|
171
174
|
name: 'big-table',
|
|
@@ -187,7 +190,7 @@ export default create({
|
|
|
187
190
|
SvgIcon,
|
|
188
191
|
AutoLayoutButton
|
|
189
192
|
},
|
|
190
|
-
mixins: [format, batchEditing, nestTable],
|
|
193
|
+
mixins: [format, batchEditing, nestTable, eventBroadcast],
|
|
191
194
|
props: Object.assign({}, bigTableProps),
|
|
192
195
|
beforeCreate() {
|
|
193
196
|
Vue.use(Button)
|
|
@@ -210,6 +213,10 @@ export default create({
|
|
|
210
213
|
// this.removeInsert();
|
|
211
214
|
// },
|
|
212
215
|
beforeRouteLeave() {},
|
|
216
|
+
beforeDestroy(){
|
|
217
|
+
// 移除事件监听
|
|
218
|
+
this.$off();
|
|
219
|
+
},
|
|
213
220
|
destroyed() {
|
|
214
221
|
this.unBindDocumentClick();
|
|
215
222
|
},
|
|
@@ -2118,7 +2125,7 @@ export default create({
|
|
|
2118
2125
|
if (this.rowBtnAutoLayout && !this.isRowEditing) {
|
|
2119
2126
|
// 行内列表按钮改为自适应。
|
|
2120
2127
|
let filterList = Array.isArray(row.btnList) ? row.btnList.filter(btn => btn.isShow == '1' && btn.type != 'LINK') : [];
|
|
2121
|
-
return [<AutoLayoutButton btnList={filterList} row={row} index={rowIndex} on-clickBtn={(...arg) => this.clickBtn(...arg)} />];
|
|
2128
|
+
return [<AutoLayoutButton key={row.theUniqueKey + rowIndex} btnList={filterList} row={row} index={rowIndex} on-clickBtn={(...arg) => this.clickBtn(...arg)} />];
|
|
2122
2129
|
}
|
|
2123
2130
|
// 行编辑
|
|
2124
2131
|
const inlineBtnList = this.generateInlineBtnList(row, rowIndex);
|
|
@@ -3151,8 +3158,20 @@ export default create({
|
|
|
3151
3158
|
}
|
|
3152
3159
|
}
|
|
3153
3160
|
return cValue;
|
|
3161
|
+
},
|
|
3162
|
+
|
|
3163
|
+
resizableChange({column }) {
|
|
3164
|
+
let { property } =column || {}
|
|
3165
|
+
if (property == "operatorColumn") {
|
|
3166
|
+
this.broadcastEvent('operatorColumn-resize');
|
|
3167
|
+
}
|
|
3168
|
+
},
|
|
3169
|
+
|
|
3170
|
+
onResize(){
|
|
3171
|
+
this.broadcastEvent('operatorColumn-resize');
|
|
3154
3172
|
}
|
|
3155
|
-
}
|
|
3173
|
+
},
|
|
3174
|
+
directives: { resize }
|
|
3156
3175
|
});
|
|
3157
3176
|
</script>
|
|
3158
3177
|
<style lang="less" scoped>
|
|
@@ -7,6 +7,7 @@ import utils from '@/utils/utils-map';
|
|
|
7
7
|
import preventReClick from '@/directive/preventReClick';
|
|
8
8
|
export default {
|
|
9
9
|
name: 'AutoLayoutButton',
|
|
10
|
+
inject: ['registerEvent', 'unregisterEvent', 'dispatchEvent'],
|
|
10
11
|
data() {
|
|
11
12
|
return {
|
|
12
13
|
showList: [],
|
|
@@ -45,25 +46,25 @@ export default {
|
|
|
45
46
|
return item.alias || item[key];
|
|
46
47
|
};
|
|
47
48
|
},
|
|
48
|
-
showBtnList() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
49
|
+
// showBtnList() {
|
|
50
|
+
// if (!Array.isArray(this.btnList)) return [];
|
|
51
|
+
// let res = this.btnList
|
|
52
|
+
// .map(btn => {
|
|
53
|
+
// if (btn.isShow == '1' && btn.type != 'LINK') {
|
|
54
|
+
// let config = {
|
|
55
|
+
// btnStyle: vexutils.getBtnStyle(btn),
|
|
56
|
+
// btnType: btn.showStyle == 'none_bg' || btn.showStyle === 'only_icon' ? 'link' : 'primary',
|
|
57
|
+
// btnGhost: btn.showStyle == 'white_bg',
|
|
58
|
+
// btnTitle: this.handleName(btn)
|
|
59
|
+
// };
|
|
60
|
+
// return Object.assign(btn, config);
|
|
61
|
+
// } else {
|
|
62
|
+
// return null;
|
|
63
|
+
// }
|
|
64
|
+
// })
|
|
65
|
+
// .filter(Boolean);
|
|
66
|
+
// return res;
|
|
67
|
+
// }
|
|
67
68
|
},
|
|
68
69
|
render() {
|
|
69
70
|
const row = this.row;
|
|
@@ -73,7 +74,7 @@ export default {
|
|
|
73
74
|
console.log(this.hideList,'----------------hideList')
|
|
74
75
|
}
|
|
75
76
|
return (
|
|
76
|
-
<div class="c_auto-layout-wrap" ref="layoutWrap"
|
|
77
|
+
<div class="c_auto-layout-wrap" ref="layoutWrap">
|
|
77
78
|
{this.showList.length === 0 && this.hideList.length === 0 ? (
|
|
78
79
|
this.renderAllBtn(this.btnList)
|
|
79
80
|
) : (
|
|
@@ -88,16 +89,20 @@ export default {
|
|
|
88
89
|
watch: {
|
|
89
90
|
btnList:{
|
|
90
91
|
handler(){
|
|
91
|
-
this.
|
|
92
|
+
this.reset();
|
|
93
|
+
this.onResize();
|
|
92
94
|
}
|
|
93
95
|
}
|
|
94
96
|
},
|
|
95
97
|
beforeCreate() {},
|
|
96
98
|
created() {
|
|
97
|
-
this.debouncePageResize = utils.debounce(this.handlePageResize, 300)
|
|
99
|
+
this.debouncePageResize = utils.debounce(this.handlePageResize, 300);
|
|
100
|
+
this.attachEvent();
|
|
98
101
|
},
|
|
99
102
|
beforeMount() {},
|
|
100
|
-
mounted() {
|
|
103
|
+
mounted() {
|
|
104
|
+
this.onResize();
|
|
105
|
+
},
|
|
101
106
|
beforeUpdate() {},
|
|
102
107
|
updated() {},
|
|
103
108
|
beforeDestroy() {},
|
|
@@ -145,7 +150,7 @@ export default {
|
|
|
145
150
|
<a-button
|
|
146
151
|
v-preventReClick={1000}
|
|
147
152
|
ref={`rowBtnItem${btn.sid}`}
|
|
148
|
-
key={btn.sid}
|
|
153
|
+
key={btn.sid + j}
|
|
149
154
|
data-key={btn.sid}
|
|
150
155
|
on-click={e => this.clickBtn(row, btn, index, e, j)}
|
|
151
156
|
class="btn-custom-class row-btn"
|
|
@@ -178,7 +183,7 @@ export default {
|
|
|
178
183
|
<a-menu slot="overlay">
|
|
179
184
|
{this.hideList.map((b, j) => {
|
|
180
185
|
return b ? (
|
|
181
|
-
<a-menu-item key={b.sid} class="c_dropdown-btn" on-click={e => this.clickBtn(row, b, index, e.domEvent, j)}>
|
|
186
|
+
<a-menu-item key={b.sid + j} class="c_dropdown-btn" on-click={e => this.clickBtn(row, b, index, e.domEvent, j)}>
|
|
182
187
|
{this.getBtnIcon(b)}
|
|
183
188
|
{b.showStyle === 'only_icon' ? '' : this.handleName(b)}
|
|
184
189
|
</a-menu-item>
|
|
@@ -189,9 +194,11 @@ export default {
|
|
|
189
194
|
);
|
|
190
195
|
},
|
|
191
196
|
|
|
192
|
-
|
|
197
|
+
async onResize() {
|
|
193
198
|
// utils.debounce(this.handlePageResize(), 300);
|
|
194
|
-
|
|
199
|
+
this.$nextTick(()=>{
|
|
200
|
+
this.debouncePageResize();
|
|
201
|
+
});
|
|
195
202
|
},
|
|
196
203
|
|
|
197
204
|
handlePageResize() {
|
|
@@ -204,6 +211,8 @@ export default {
|
|
|
204
211
|
let btnTotalWidth = 0;
|
|
205
212
|
let showBtnListWidth = 0;
|
|
206
213
|
let hideIndex = -1;
|
|
214
|
+
let len = this?.btnList?.length || 0;
|
|
215
|
+
let last = len -1 > 0 ? len -1 : 0;
|
|
207
216
|
this.btnList.forEach((btn, i) => {
|
|
208
217
|
// 记录宽度
|
|
209
218
|
let btnDom = this.$refs[`rowBtnItem${btn.sid}`];
|
|
@@ -215,7 +224,9 @@ export default {
|
|
|
215
224
|
btn.showType = '_hide';
|
|
216
225
|
return;
|
|
217
226
|
}
|
|
218
|
-
|
|
227
|
+
// 最后一个不用加
|
|
228
|
+
let mg = last == i ? 0: 10;
|
|
229
|
+
btnTotalWidth += (this.btnShowWidthObj[btn.id] || 0) + mg;
|
|
219
230
|
if (btnTotalWidth < (wrapWidth)) {
|
|
220
231
|
btn.showType = '_show';
|
|
221
232
|
showBtnListWidth = btnTotalWidth
|
|
@@ -236,7 +247,7 @@ export default {
|
|
|
236
247
|
// 边界处理
|
|
237
248
|
// 如果有 hideList 有数据
|
|
238
249
|
// 展示的按钮宽度和加上“更多按钮”的宽度大于容器的宽度,showList 最后一个按钮移动到 hideList
|
|
239
|
-
if(this.hideList.length > 0 && (showBtnListWidth + 15 > wrapWidth)){
|
|
250
|
+
if(this.hideList.length > 0 && (showBtnListWidth + 15 + 10 > wrapWidth)){
|
|
240
251
|
let t = this.showList.pop();
|
|
241
252
|
t && this.hideList.unshift(t);
|
|
242
253
|
}
|
|
@@ -244,6 +255,20 @@ export default {
|
|
|
244
255
|
|
|
245
256
|
clickBtn(row, btn, index, e, j) {
|
|
246
257
|
this.$emit('clickBtn', row, btn, index, e, j);
|
|
258
|
+
},
|
|
259
|
+
|
|
260
|
+
attachEvent() {
|
|
261
|
+
this.registerEvent('operatorColumn-resize', this.onResize);
|
|
262
|
+
// this.$on('hook:beforeDestroy', () => {
|
|
263
|
+
// console.log(('unregisterEvent-----'))
|
|
264
|
+
// this.unregisterEvent('operatorColumn-resize', this.onResize);
|
|
265
|
+
// });
|
|
266
|
+
},
|
|
267
|
+
|
|
268
|
+
reset(){
|
|
269
|
+
// 重置
|
|
270
|
+
this.hideList = [];
|
|
271
|
+
this.showList = [];
|
|
247
272
|
}
|
|
248
273
|
},
|
|
249
274
|
components: {
|
|
@@ -269,8 +294,11 @@ export default {
|
|
|
269
294
|
width: 100%;
|
|
270
295
|
height: 100%;
|
|
271
296
|
overflow: hidden;
|
|
272
|
-
.row-btn {
|
|
273
|
-
margin-
|
|
297
|
+
.row-btn + .row-btn {
|
|
298
|
+
margin-left: 10px;
|
|
299
|
+
}
|
|
300
|
+
.row-btn + .ant-dropdown-trigger {
|
|
301
|
+
margin-left: 10px;
|
|
274
302
|
}
|
|
275
303
|
}
|
|
276
304
|
.ant-dropdown-menu-item.c_dropdown-btn{
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
provide() {
|
|
3
|
+
return {
|
|
4
|
+
dispatchEvent: this.dispatchEvent,
|
|
5
|
+
registerEvent: this.registerEvent,
|
|
6
|
+
unregisterEvent: this.unregisterEvent,
|
|
7
|
+
};
|
|
8
|
+
},
|
|
9
|
+
methods: {
|
|
10
|
+
dispatchEvent(name, args) {
|
|
11
|
+
this.$emit('event', name, args);
|
|
12
|
+
},
|
|
13
|
+
broadcastEvent(name, data) {
|
|
14
|
+
this.$emit(`table-broadcast-${name}`, data);
|
|
15
|
+
},
|
|
16
|
+
registerEvent(name, callback) {
|
|
17
|
+
this.$on(`table-broadcast-${name}`, callback);
|
|
18
|
+
},
|
|
19
|
+
unregisterEvent(name) {
|
|
20
|
+
this.$off(`table-broadcast-${name}`);
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
}
|
|
24
|
+
};
|
|
@@ -62,10 +62,10 @@ export default {
|
|
|
62
62
|
this.canvas.on('mouse:up', event => {
|
|
63
63
|
if (event.button === 3) {
|
|
64
64
|
const { x, y } = event.pointer;
|
|
65
|
-
|
|
66
|
-
if (!(x < 0 || x > endX || y < originYTop || y > endYTop)) {
|
|
65
|
+
if (this.isTopTreeAndGridLimit(x, y)) {
|
|
67
66
|
this.activeEvent = event;
|
|
68
|
-
document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
|
|
67
|
+
!this.isAddEventListenerContextmenu && document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
|
|
68
|
+
this.isAddEventListenerContextmenu = true;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
});
|
|
@@ -82,30 +82,29 @@ export default {
|
|
|
82
82
|
*/
|
|
83
83
|
addEventListenerContextmenu(event) {
|
|
84
84
|
event.preventDefault();
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (!(x < 0 || x > endX || y < originYTop || y > endYTop)) {
|
|
89
|
-
this.openRightModal(this.activeEvent);
|
|
85
|
+
const { offsetX, offsetY } = event;
|
|
86
|
+
if (this.isTopTreeAndGridLimit(offsetX, offsetY)) {
|
|
87
|
+
this.openRightModal();
|
|
90
88
|
}
|
|
91
89
|
return false;
|
|
92
90
|
},
|
|
93
91
|
// 打开右键菜单
|
|
94
|
-
openRightModal(
|
|
92
|
+
openRightModal() {
|
|
93
|
+
const { clientX, pageX, clientY, pageY } = this.activeEvent.e;
|
|
95
94
|
this.rightPos = {
|
|
96
|
-
clientX:
|
|
97
|
-
clientY:
|
|
95
|
+
clientX: clientX ?? pageX,
|
|
96
|
+
clientY: clientY ?? pageY
|
|
98
97
|
};
|
|
99
98
|
this.isRightVisible = false;
|
|
100
|
-
const target =
|
|
101
|
-
const id = target
|
|
99
|
+
const target = this.activeEvent.target;
|
|
100
|
+
const id = target?.id || '';
|
|
102
101
|
this.$nextTick(() => {
|
|
103
102
|
if (id && id.includes('_lineGroup_')) {
|
|
104
103
|
this._currentPoint = target || '';
|
|
105
104
|
this.rightClickNode = Object.freeze(rightClickNode.slice());
|
|
106
105
|
this.isRightVisible = true;
|
|
107
106
|
} else {
|
|
108
|
-
this.doContextmenuEvent(
|
|
107
|
+
this.doContextmenuEvent(this.activeEvent.pointer);
|
|
109
108
|
}
|
|
110
109
|
});
|
|
111
110
|
},
|
|
@@ -237,75 +236,75 @@ export default {
|
|
|
237
236
|
lineItemList.push(rightLine);
|
|
238
237
|
}
|
|
239
238
|
|
|
240
|
-
// 文字内容
|
|
241
|
-
const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
|
|
242
|
-
let textLimitRight;
|
|
243
|
-
let text =
|
|
244
|
-
(endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
|
|
245
|
-
? this.drawLineText(textArr.concat([textContent]), textTop, i, j, centerLine, leftLine, x1, x2)
|
|
246
|
-
: null;
|
|
247
|
-
// 文字内容居右侧竖线且超出当前线段右边界则移除
|
|
248
|
-
if (text) {
|
|
249
|
-
textLimitRight = lineList[j + 1]?.[0] && this.cumputedX(lineList[j + 1][0]) <= endX ? this.cumputedX(lineList[j + 1][0]) : endX;
|
|
250
|
-
if (text.originX === 'left' && text.left + text.width + 2 >= textLimitRight) {
|
|
251
|
-
textLimitRight !== endX && textArr.push(textContent);
|
|
252
|
-
this.canvas.remove(text);
|
|
253
|
-
text = null;
|
|
254
|
-
} else {
|
|
255
|
-
textArr = [];
|
|
256
|
-
this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
|
|
257
|
-
textList.push(text);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
239
|
// 设置拖动限制值
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
240
|
+
const leftLimit = {
|
|
241
|
+
x1: originX,
|
|
242
|
+
x2: x2 ? x2 : endX
|
|
243
|
+
};
|
|
244
|
+
const rightLimit = {
|
|
245
|
+
x1: x2 ? x1 : originX,
|
|
246
|
+
x2: endX
|
|
247
|
+
};
|
|
265
248
|
if (lineList[j - 1]) {
|
|
266
249
|
const [preItem0, preItem1] = lineList[j - 1];
|
|
267
250
|
if (preItem1) {
|
|
268
251
|
const preEndMinute = new Date(preItem1).getTime();
|
|
269
|
-
if (preEndMinute >= minMinute && preEndMinute < maxMinute)
|
|
252
|
+
if (preEndMinute >= minMinute && preEndMinute < maxMinute) {
|
|
253
|
+
leftLimit.x1 = this.cumputedX(preItem1);
|
|
254
|
+
if (!x2) rightLimit.x1 = leftLimit.x1;
|
|
255
|
+
}
|
|
270
256
|
} else {
|
|
271
257
|
const preStartMinute = new Date(preItem0).getTime();
|
|
272
|
-
if (preStartMinute >= minMinute && preStartMinute < maxMinute)
|
|
258
|
+
if (preStartMinute >= minMinute && preStartMinute < maxMinute) {
|
|
259
|
+
leftLimit.x1 = this.cumputedX(preItem0);
|
|
260
|
+
if (!x2) rightLimit.x1 = leftLimit.x1;
|
|
261
|
+
}
|
|
273
262
|
}
|
|
274
263
|
}
|
|
275
|
-
let rightLimt = {};
|
|
276
|
-
rightLimt.x1 = x2 ? x1 : originX;
|
|
277
|
-
rightLimt.x2 = endX;
|
|
278
264
|
if (lineList[j + 1]) {
|
|
279
265
|
const [preItem0] = lineList[j + 1];
|
|
280
266
|
if (preItem0) {
|
|
281
267
|
const preStartMinute = new Date(preItem0).getTime();
|
|
282
|
-
if (preStartMinute > minMinute && preStartMinute <= maxMinute)
|
|
268
|
+
if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimit.x2 = this.cumputedX(preItem0);
|
|
283
269
|
}
|
|
284
270
|
}
|
|
285
271
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
272
|
+
// 文字内容
|
|
273
|
+
const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
|
|
274
|
+
let text =
|
|
275
|
+
(endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
|
|
276
|
+
? this.drawLineText(textArr.concat([textContent]), textTop, i, j, x1, x2, { leftLimit, rightLimit, y2 })
|
|
277
|
+
: null;
|
|
278
|
+
// 文字内容居右侧竖线且超出当前线段右边界则移除
|
|
279
|
+
if (text) {
|
|
280
|
+
textArr = [];
|
|
281
|
+
this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
|
|
282
|
+
textList.push(text);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
const commonOptions = {
|
|
286
|
+
__range: [x1, x2],
|
|
287
|
+
__baseY: y2,
|
|
288
|
+
centerLine,
|
|
289
289
|
text,
|
|
290
290
|
textObj,
|
|
291
|
-
|
|
291
|
+
leftLimit,
|
|
292
|
+
rightLimit,
|
|
292
293
|
startTime: item[0],
|
|
293
|
-
endTime: item[1]
|
|
294
|
+
endTime: item[1]
|
|
295
|
+
};
|
|
296
|
+
this.lineEvent({
|
|
297
|
+
__position: 'left',
|
|
298
|
+
line: leftLine,
|
|
299
|
+
limitX: leftLimit,
|
|
294
300
|
preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
|
|
295
|
-
|
|
301
|
+
...commonOptions
|
|
296
302
|
});
|
|
297
|
-
this.lineEvent({
|
|
303
|
+
this.lineEvent({ __position: 'right', line: rightLine, limitX: rightLimit, preText: null, ...commonOptions });
|
|
298
304
|
}
|
|
299
305
|
this.canvas.add(...lineItemList, ...textList);
|
|
300
|
-
// this.canvas.requestRenderAll();
|
|
301
306
|
},
|
|
302
|
-
drawLineText(textArr, top, i, j,
|
|
303
|
-
// const value = textArr.map(v => {
|
|
304
|
-
// const channel = v.channel ? `(${v.channel})` : '';
|
|
305
|
-
// const consistence = v.consistence ? `(${v.consistence})` : '';
|
|
306
|
-
// const total = v.total ? `(${v.total})` : '';
|
|
307
|
-
// return `${v.currentSpeed || ''}${channel}${consistence}${total}`
|
|
308
|
-
// }).join('—');
|
|
307
|
+
drawLineText(textArr, top, i, j, x1, x2, { leftLimit, rightLimit, y2 }) {
|
|
309
308
|
const value = textArr.filter(v => v !== '').join('—');
|
|
310
309
|
|
|
311
310
|
if (value === '') return null;
|
|
@@ -322,16 +321,58 @@ export default {
|
|
|
322
321
|
colIndex: j,
|
|
323
322
|
...(this.linesObj.dataTextStyle || {})
|
|
324
323
|
});
|
|
325
|
-
|
|
326
|
-
const originX = !centerLine || (x2 && x2 - x1 <= limitWidth) ? 'left' : 'center';
|
|
327
|
-
const left = x2 && x2 - x1 > limitWidth ? (x1 + x2) / 2 : this.textMarginLeft + (x2 && x2 - x1 <= limitWidth ? x2 : x1 + (leftLine?.width ?? 0) / 3);
|
|
328
|
-
text.set({
|
|
329
|
-
originX,
|
|
330
|
-
left
|
|
331
|
-
});
|
|
324
|
+
this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, y2);
|
|
332
325
|
text.hasControls = text.hasBorders = false;
|
|
333
326
|
return text;
|
|
334
327
|
},
|
|
328
|
+
setTextPosition(text, top, x1, x2, leftLimit, rightLimit, baseY) {
|
|
329
|
+
const textWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
|
|
330
|
+
const centerLineWidth = (x2 || x1) - x1 ?? 0;
|
|
331
|
+
const rightWidth = rightLimit.x2 - leftLimit.x2 || rightLimit.x2 - x1 || 0;
|
|
332
|
+
const leftWidth = rightLimit.x1 - leftLimit.x1 || x1 - leftLimit.x1 || 0;
|
|
333
|
+
const changeOptions = {
|
|
334
|
+
originX: 'center',
|
|
335
|
+
left: x1 + centerLineWidth / 2,
|
|
336
|
+
top,
|
|
337
|
+
scaleX: 1,
|
|
338
|
+
scaleY: 1,
|
|
339
|
+
originY: 'center',
|
|
340
|
+
backgroundColor: '#fff',
|
|
341
|
+
textLimit: {
|
|
342
|
+
x1,
|
|
343
|
+
x2: x2 || x1
|
|
344
|
+
}
|
|
345
|
+
};
|
|
346
|
+
|
|
347
|
+
if (centerLineWidth >= textWidth) {
|
|
348
|
+
// console.log('正常显示的文本')
|
|
349
|
+
} else if (textWidth <= rightWidth) {
|
|
350
|
+
changeOptions.originX = 'left';
|
|
351
|
+
changeOptions.left = (x2 ? x2 : x1 + 3) + this.textMarginLeft;
|
|
352
|
+
changeOptions.backgroundColor = 'transparent';
|
|
353
|
+
changeOptions.textLimit.x2 = changeOptions.left + text.width;
|
|
354
|
+
} else if (textWidth <= leftWidth) {
|
|
355
|
+
changeOptions.originX = 'right';
|
|
356
|
+
changeOptions.left = x1 - 3 - this.textMarginLeft;
|
|
357
|
+
changeOptions.backgroundColor = 'transparent';
|
|
358
|
+
changeOptions.textLimit.x1 = changeOptions.left - text.width;
|
|
359
|
+
} else {
|
|
360
|
+
changeOptions.scaleX = 0.75;
|
|
361
|
+
changeOptions.scaleY = 0.75;
|
|
362
|
+
changeOptions.originY = 'bottom';
|
|
363
|
+
changeOptions.top = baseY + 1.5;
|
|
364
|
+
changeOptions.backgroundColor = 'transparent';
|
|
365
|
+
if (leftLimit.x1 == this.propItems.originX) {
|
|
366
|
+
changeOptions.originX = 'left';
|
|
367
|
+
changeOptions.left = leftLimit.x1 + this.textMarginLeft;
|
|
368
|
+
}
|
|
369
|
+
if (rightLimit.x2 == this.propItems.endX) {
|
|
370
|
+
changeOptions.originX = 'right';
|
|
371
|
+
changeOptions.left = rightLimit.x2 - this.textMarginLeft;
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
text.setCoords().set(changeOptions);
|
|
375
|
+
},
|
|
335
376
|
/**
|
|
336
377
|
* @description: 画-|-样式的组
|
|
337
378
|
* @param {*} x1 // |-|中左侧线的x轴坐标
|
|
@@ -347,11 +388,12 @@ export default {
|
|
|
347
388
|
let point;
|
|
348
389
|
let left;
|
|
349
390
|
const { position, customIcon, isContinue } = others;
|
|
391
|
+
const halfH = (y2 - y1) / 2;
|
|
350
392
|
if (position === 'left') {
|
|
351
|
-
point = [x1, y1, x1, y2];
|
|
393
|
+
point = [x1, y1, x1, y2 - halfH + 1];
|
|
352
394
|
left = x1 - this.propItems.xCellWidth / 2;
|
|
353
395
|
} else {
|
|
354
|
-
point = [x2, y1, x2, y2];
|
|
396
|
+
point = [x2, y1, x2, y2 - halfH + 1];
|
|
355
397
|
left = x2 - this.propItems.xCellWidth / 2;
|
|
356
398
|
}
|
|
357
399
|
let line;
|
|
@@ -367,7 +409,7 @@ export default {
|
|
|
367
409
|
|
|
368
410
|
line = await this.createPoint(_customIcon.type, {
|
|
369
411
|
left: x1,
|
|
370
|
-
top: y1 +
|
|
412
|
+
top: y1 + halfH,
|
|
371
413
|
originY: 'center',
|
|
372
414
|
...dataLineStyle,
|
|
373
415
|
...(dataLineStyle.stroke
|
|
@@ -382,7 +424,7 @@ export default {
|
|
|
382
424
|
line = isContinue
|
|
383
425
|
? await this.createArrow({
|
|
384
426
|
left: x2,
|
|
385
|
-
top: y1 +
|
|
427
|
+
top: y1 + halfH - 3.5,
|
|
386
428
|
originY: 'bottom',
|
|
387
429
|
originX: 'right',
|
|
388
430
|
fill: 'transparent',
|
|
@@ -434,20 +476,23 @@ export default {
|
|
|
434
476
|
});
|
|
435
477
|
},
|
|
436
478
|
lineEvent(attr) {
|
|
437
|
-
const { line,
|
|
479
|
+
const { line, centerLine, text, textObj, leftLimit, rightLimit, limitX, startTime, endTime, preText, __position, __range, __baseY } = attr;
|
|
438
480
|
if (line) {
|
|
439
481
|
line.hasControls = line.hasBorders = false;
|
|
440
|
-
|
|
441
|
-
line2 && (line.line2 = line2);
|
|
482
|
+
centerLine && (line.centerLine = centerLine);
|
|
442
483
|
text && (line.text = text);
|
|
443
484
|
line.limitX = limitX;
|
|
444
485
|
preText && (line.preText = preText);
|
|
445
|
-
|
|
486
|
+
line.leftLimit = leftLimit;
|
|
487
|
+
line.rightLimit = rightLimit;
|
|
488
|
+
line.__position = __position;
|
|
489
|
+
line.__range = __range;
|
|
490
|
+
line.__baseY = __baseY;
|
|
491
|
+
|
|
446
492
|
this.hoverEvent(line, { textObj, startTime, endTime });
|
|
447
493
|
// 移动中 实时更新相关联的线的坐标
|
|
448
494
|
line.on('moving', () => {
|
|
449
495
|
this.lineMoveLimit(line);
|
|
450
|
-
this.lineMoveUpdateLine(line);
|
|
451
496
|
this.textUpdatePositionX(line);
|
|
452
497
|
// this.canvas.renderAll();
|
|
453
498
|
this.showDrapPopup(line);
|
|
@@ -544,46 +589,19 @@ export default {
|
|
|
544
589
|
if (line.left > line.limitX.x2) {
|
|
545
590
|
line.set('left', line.limitX.x2);
|
|
546
591
|
}
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
line.line1.setCoords().set({ x1: line.left });
|
|
551
|
-
}
|
|
552
|
-
if (line.line2) {
|
|
553
|
-
line.line2.setCoords().set({ x2: line.left });
|
|
592
|
+
if (line.centerLine) {
|
|
593
|
+
const options = line.__position === 'left' ? { x1: line.left } : { x2: line.left };
|
|
594
|
+
line.centerLine.setCoords().set(options);
|
|
554
595
|
}
|
|
555
596
|
},
|
|
556
597
|
textUpdatePositionX(line) {
|
|
557
598
|
const text = line.text || null;
|
|
558
599
|
if (text) {
|
|
559
|
-
|
|
560
|
-
const
|
|
561
|
-
const
|
|
562
|
-
const
|
|
563
|
-
|
|
564
|
-
let v;
|
|
565
|
-
if (centerLine?.x2 - centerLine?.x1 > limitWidth) {
|
|
566
|
-
v = left + (centerLine.width / 2) * (line.line2 ? -1 : 1);
|
|
567
|
-
originX = 'center';
|
|
568
|
-
} else {
|
|
569
|
-
v = this.textMarginLeft + (centerLine ? centerLine.x2 : left + 3);
|
|
570
|
-
originX = 'left';
|
|
571
|
-
// 移动到最右边界时候文字超出当前线段可拖动的右边界的情况
|
|
572
|
-
if (line.textLimitRight && v + limitWidth > line.textLimitRight) {
|
|
573
|
-
v = this.propItems.endX + 100; // 此值随便设置,只要达到隐藏效果即可
|
|
574
|
-
}
|
|
575
|
-
}
|
|
576
|
-
text.setCoords();
|
|
577
|
-
text.set({ left: v, originX });
|
|
578
|
-
}
|
|
579
|
-
// 拖动左侧竖线时需要更改上一线段文字的位置,以防止文字被遮挡
|
|
580
|
-
const preText = line.preText || null;
|
|
581
|
-
if (!preText) return;
|
|
582
|
-
const limitWidth = preText.width + 2;
|
|
583
|
-
if (preText.originX === 'left' && preText.left + limitWidth > line.left) {
|
|
584
|
-
const v = this.propItems.endX + 100; // 此值随便设置,只要达到隐藏效果即可
|
|
585
|
-
preText.setCoords();
|
|
586
|
-
preText.set({ left: v });
|
|
600
|
+
const { __baseY, __range, leftLimit, rightLimit, __position } = line;
|
|
601
|
+
const x1 = __position === 'left' ? line.left : __range[0];
|
|
602
|
+
const x2 = __position === 'right' ? line.left : __range[1];
|
|
603
|
+
const top = __baseY - this.propItems.yCellHeightTop / 2;
|
|
604
|
+
this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, __baseY);
|
|
587
605
|
}
|
|
588
606
|
},
|
|
589
607
|
repaintLine() {
|