cnhis-design-vue 2.1.118 → 2.1.120

package/packages/fabric-chart/src/mixins/drawExtracorporealCirculation.js

@@ -0,0 +1,196 @@
+import cloneDeep from 'lodash/cloneDeep';
+
+export default {
+  name: 'drawExtracorporealCirculation',
+  data() {
+    this.extracorporealCirculation = cloneDeep(this.templateData.bottom?.extracorporealCirculation);
+    this.extracorporealCirculationObjs = [];
+    return {};
+  },
+  components: {},
+  methods: {
+    drawExtracorporealCirculation(extracorporealCirculation) {
+      const { endX, originX, endY, markHeight, canvasWidth } = this.propItems;
+      if (!markHeight || !extracorporealCirculation || !extracorporealCirculation.list?.length) {
+        return;
+      }
+      if (this.extracorporealCirculationObjs.length) {
+        [...this.extracorporealCirculationObjs].forEach(obj => this.canvas.remove(obj));
+        this.extracorporealCirculationObjs = [];
+      }
+
+      const { height = 20, extracorporealCirculationStyle, ascendAortaStyle, list = [] } = extracorporealCirculation;
+      const y2 = endY + height;
+
+      let prevEndX;
+      let prevLine;
+
+      list.forEach((item, index) => {
+        const xList = this.getExtracorporealCirculationX(item);
+        const idx = xList.findIndex(x => x > 0 && x < canvasWidth);
+        if (idx === -1) return;
+
+        let prevShadowBox;
+        xList.forEach((x, i) => {
+          const nextX = xList[i + 1];
+          const prevX = xList[i - 1];
+          if (isValid(x) || isValid(nextX)) {
+            const x1 = isValid(x) ? x : originX;
+            const x2 = isValid(nextX) ? nextX : endX;
+            const prevX1 = isValid(prevX) ? prevX : originX;
+            const shadowBox = {};
+            if (i < xList.length - 1) {
+              shadowBox.params = [x1, x2, y2, [0, 2].includes(i) ? extracorporealCirculationStyle : ascendAortaStyle];
+              shadowBox.shadowObjs = this.drawShadowBox(...shadowBox.params);
+            }
+            if (isValid(x)) {
+              const key = getKey(i);
+              const optLine = this.drawOptLine([x, endY, x, y2], {
+                origin: {
+                  index,
+                  key,
+                  data: item[key]
+                },
+                limitX: {
+                  x1: i === 0 ? prevEndX ?? originX : prevX1,
+                  x2
+                },
+                ...([1, 2, 3].includes(i) ? { leftShadowBox: prevShadowBox } : {}),
+                ...([0, 1, 2].includes(i) ? { rightShadowBox: shadowBox } : {})
+              });
+              if (i === xList.length - 1) {
+                prevEndX = x;
+                prevLine = optLine;
+              }
+              if (i === 0 && prevLine) {
+                prevLine.limitX.x2 = shadowBox.params[0];
+              }
+            }
+            prevShadowBox = shadowBox;
+          }
+        });
+      });
+
+      function isValid(x) {
+        return x && x > 0 && x < canvasWidth;
+      }
+      function getKey(i) {
+        switch (i) {
+          case 0:
+            return 'extracorporealCirculationStart';
+          case 1:
+            return 'closeAscendAorta';
+          case 2:
+            return 'openAscendAorta';
+          case 3:
+            return 'extracorporealCirculationEnd';
+        }
+      }
+    },
+    drawOptLine(coordinate, props) {
+      const optLine = new this.fabric.Line(coordinate, {
+        ...props,
+        stroke: 'transparent',
+        strokeWidth: 5,
+        hasControls: false,
+        hasBorders: false,
+        hoverCursor: 'e-resize',
+        lockMovementY: true,
+        originX: 'center'
+      });
+      this.setExtracorporealCirculationEvent(optLine);
+      this.canvas.add(optLine);
+      this.extracorporealCirculationObjs.push(optLine);
+      return optLine;
+    },
+    setExtracorporealCirculationEvent(optLine) {
+      this.setPopup(optLine);
+      if (this.eventStyle.evented) {
+        optLine.on('moving', () => {
+          const { left, limitX } = optLine;
+          if (left < limitX.x1) {
+            optLine.setCoords().set({ x1: limitX.x1, x2: limitX.x1 });
+          }
+          if (left > limitX.x2) {
+            optLine.setCoords().set({ x1: limitX.x2, x2: limitX.x2 });
+          }
+          this.updateShadowBox(optLine, 'left');
+          this.updateShadowBox(optLine, 'right');
+          this.showDrapPopup(optLine);
+        });
+        optLine.on('moved', () => {
+          this.isDropVisible = false;
+          const params = optLine.origin;
+          params.data.time = this.getXValue(optLine.left);
+          this.$emit('extracorporealCirculationChange', params);
+          const { index, key, data } = params;
+          this.extracorporealCirculation.list[index][key] = data;
+          this.drawExtracorporealCirculation(this.extracorporealCirculation);
+          this.canvas.discardActiveObject();
+          this.canvas.forEachObject(obj => {
+            if (obj.type && obj.type === 'mark') {
+              obj.bringForward();
+            }
+          });
+        });
+      }
+    },
+    updateShadowBox(optLine, direction) {
+      const { shadowObjs, params } = optLine[`${direction}ShadowBox`] || {};
+      if (!shadowObjs || !params) return;
+      shadowObjs.forEach(obj => this.canvas.remove(obj));
+      const idx = direction === 'left' ? 1 : 0;
+      params[idx] = optLine.left;
+      const _shadowObjs = this.drawShadowBox(...params);
+      optLine[`${direction}ShadowBox`] = {
+        shadowObjs: _shadowObjs,
+        params
+      };
+    },
+    drawShadowBox(x1, x2, y2, { mode, style }) {
+      const { endY } = this.propItems;
+      const _style = { ...style };
+      if (_style.angle) delete _style.angle;
+      const points = [
+        [x1, endY],
+        [x2, endY],
+        [x2, y2],
+        [x1, y2]
+      ];
+      const polygon = new this.fabric.Polygon(
+        points.map(v => ({ x: v[0], y: v[1] })),
+        {
+          ...this.defaultLineStyle,
+          ..._style,
+          stroke: 'transparent',
+          ...(['slash'].includes(mode) ? { fill: 'transparent' } : {})
+        }
+      );
+      const shadowLines = [];
+      if (['slash'].includes(mode)) {
+        // 斜线阴影模式
+        shadowLines.push(...this.drawShadow(points, style.angle, _style.space, _style));
+      }
+      this.canvas.add(polygon, ...shadowLines);
+      this.extracorporealCirculationObjs.push(...[polygon, ...shadowLines]);
+      return [polygon, ...shadowLines];
+    },
+    getExtracorporealCirculationX(item) {
+      const { extracorporealCirculationStart, closeAscendAorta, openAscendAorta, extracorporealCirculationEnd } = item;
+      let x1, x2, x3, x4;
+      if (extracorporealCirculationStart) {
+        x1 = this.computedX(extracorporealCirculationStart.time);
+      }
+      if (closeAscendAorta) {
+        x2 = this.computedX(closeAscendAorta.time);
+      }
+      if (openAscendAorta) {
+        x3 = this.computedX(openAscendAorta.time);
+      }
+      if (extracorporealCirculationEnd) {
+        x4 = this.computedX(extracorporealCirculationEnd.time);
+      }
+      return [x1, x2, x3, x4];
+    }
+  }
+};

package/packages/fabric-chart/src/mixins/fabricCommon.js

@@ -52,7 +52,7 @@ export default {
       return `${d.getFullYear()}-${month}-${day} ${hours}:${minute}`;
     },
     // 根据时间戳计算x轴坐标
-    cumputedX(value) {
+    computedX(value) {
       if (!value) {
         return '';
       }

package/packages/fabric-chart/src/utils/index.js

@@ -0,0 +1,81 @@
+export const isNumber = num => {
+  return typeof num === 'number' && Number.isFinite(num);
+};
+export const isObject = obj => {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+};
+
+export function getTangent(angle) {
+  return +Math.tan((angle * Math.PI) / 180);
+}
+
+function nearlyEqual(v1, v2) {
+  return Math.abs(v1 - v2) <= 0.0001;
+}
+
+export function sortPoints(points) {
+  return points.sort((a, b) => a[1] - b[1]);
+}
+
+export function uniquePoints(points) {
+  return points.reduce((fin, point) => {
+    if (!hasPoint(fin, point)) fin.push(point);
+    return fin;
+  }, []);
+
+  function hasPoint(points, point) {
+    return points.some(p => nearlyEqual(p[0], point[0]) && nearlyEqual(p[1], point[1]));
+  }
+}
+
+export function isInPolygon(checkPoint, polygonPoints) {
+  let counter = 0;
+  let xinters;
+  let p1, p2;
+  const pointCount = polygonPoints.length;
+  p1 = polygonPoints[0];
+
+  for (let i = 1; i <= pointCount; i++) {
+    p2 = polygonPoints[i % pointCount];
+    if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {
+      if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
+        if (p1[0] != p2[0]) {
+          xinters = ((checkPoint[0] - p1[0]) * (p2[1] - p1[1])) / (p2[0] - p1[0]) + p1[1];
+          if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
+            counter++;
+          }
+        }
+      }
+    }
+    p1 = p2;
+  }
+  return counter % 2 !== 0;
+}
+
+export function getIntersectionPoint(a, b, c, d) {
+  /** 1 解线性方程组, 求线段交点. **/
+  // 如果分母为0 则平行或共线, 不相交
+  const denominator = (b[1] - a[1]) * (d[0] - c[0]) - (a[0] - b[0]) * (c[1] - d[1]);
+  if (denominator === 0) {
+    return false;
+  }
+
+  // 线段所在直线的交点坐标 (x , y)
+  const x = ((b[0] - a[0]) * (d[0] - c[0]) * (c[1] - a[1]) + (b[1] - a[1]) * (d[0] - c[0]) * a[0] - (d[1] - c[1]) * (b[0] - a[0]) * c[0]) / denominator;
+  const y = -((b[1] - a[1]) * (d[1] - c[1]) * (c[0] - a[0]) + (b[0] - a[0]) * (d[1] - c[1]) * a[1] - (d[0] - c[0]) * (b[1] - a[1]) * c[1]) / denominator;
+
+  /** 2 判断交点是否在两条线段上 **/
+  if (
+    // 交点在线段1上
+    ((x - a[0]) * (x - b[0]) < 0 || nearlyEqual(x, a[0]) || nearlyEqual(x, b[0])) &&
+    ((y - a[1]) * (y - b[1]) < 0 || nearlyEqual(y, a[1]) || nearlyEqual(y, b[1])) &&
+    // 且交点也在线段2上
+    ((x - c[0]) * (x - d[0]) < 0 || nearlyEqual(x, c[0]) || nearlyEqual(x, d[0])) &&
+    ((y - c[1]) * (y - d[1]) < 0 || nearlyEqual(y, c[1]) || nearlyEqual(y, d[1]))
+  ) {
+    // 返回交点p
+    return [x, y];
+  }
+  // 否则不相交
+  return false;
+}

package/packages/full-calendar/src/FullCalendar.vue

@@ -40,6 +40,8 @@
     </div>
 
     <TagDetail v-on="$listeners" ref="tagDetailRef"></TagDetail>
+
+    <div class="c-full-calendar__mask" v-if="!editable"></div>
   </div>
 </template>
 
@@ -55,11 +57,8 @@ import Tag from './components/Tag.vue';
 import ListTag from './components/ListTag.vue';
 import TagDetail from './components/TagDetail.vue';
 // import SvgIcon from '@/component/svg/index.vue';
-import { axiosInstance, getScheduleListApi, getScheduleSettingApi, getScheduleDataApi, queryScheduleListApi, saveOrUpdateScheduleApi, delScheduleApi } from './api';
 import vexutils, { moment } from '@/utils/vexutils';
-import { isAllDay, isAllDayWeek, getWeekEnd, isAllDayMonth, formatDate, weekIsMonth, hanldeDateListArr, handleListRows, viewMap } from './utils';
-
-window.moment = moment;
+import { formatDate, weekIsMonth, viewMap, getAddTime } from './utils';
 
 export default create({
   name: 'full-calendar',
@@ -77,13 +76,26 @@ export default create({
     [Icon.name]: Icon
   },
   props: {
-    serverPrefix: { type: String, default: 'inbox' },
+    // serverPrefix: { type: String, default: 'inbox' },
     // userInfo: { type: Object, default: () => {} },
-    orgId: { type: String },
-    userId: { type: String },
-    token: { type: String },
+    // orgId: { type: String },
+    // userId: { type: String },
+    // token: { type: String },
+    editable: { type: Boolean, default: true },
     showSearchHeader: { type: Boolean },
-    showSidebar: { type: Boolean }
+    showSidebar: { type: Boolean },
+    queryScheduleList: {
+      type: Function,
+      default: () => Promise.resolve([])
+    },
+    saveOrUpdateSchedule: {
+      type: Function,
+      default: () => Promise.resolve(true)
+    },
+    delSchedule: {
+      type: Function,
+      default: () => Promise.resolve(true)
+    }
   },
   computed: {
     disabledToday() {
@@ -137,6 +149,10 @@ export default create({
   data() {
     this.tippyInstance = null;
     const { startTime, endTime } = formatDate();
+    this.resizeObserver = null;
+    this.updateSize = vexutils.throttle(() => {
+      this.calendar.updateSize();
+    }, 300);
     return {
       calendar: null,
       viewShows: ['list', 'day', 'week', 'month'].map((value, idx) => ({
@@ -224,73 +240,76 @@ export default create({
     };
   },
   beforeCreate() {
-    axiosInstance.interceptors.request.use(config => {
-      config.headers['Authorization'] = 'bearer ' + this.token;
-      config.baseURL = '/' + this.serverPrefix;
-      return config;
-    });
-  },
-  async created() {
-    // await this.queryScheduleList();
-    // await this.getSchedulerList();
-    // await this.getSchedulerData();
+    // axiosInstance.interceptors.request.use(config => {
+    //   config.headers['Authorization'] = 'bearer ' + this.token;
+    //   config.baseURL = '/' + this.serverPrefix;
+    //   return config;
+    // });
   },
+  async created() {},
   async mounted() {
     this.calendar = this.$refs.fullCalendar.calendar;
-    await this.queryScheduleList();
-    // try {
-    //   this.loading = true;
-    //   this.calendar = this.$refs.fullCalendar.calendar;
-    //   // await this.getScheduleSettingt();
-    //   // await this.getSchedulerList();
-    //   // await this.getSchedulerData();
-    // } catch (err) {
-    //   this.loading = false;
-    // } finally {
-    //   this.loading = false;
-    // }
+    this.setViewTime();
+    await this._queryScheduleList();
+    this.handleResizeObserver();
   },
   methods: {
-    async queryScheduleList() {
+    handleResizeObserver() {
+      // 创建 ResizeObserver 实例
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          // // 获取div新的大小
+          // const newWidth = entry.contentRect.width;
+          // const newHeight = entry.contentRect.height;
+
+          this.updateSize();
+        }
+      });
+
+      // 监听可调整大小的div
+      this.resizeObserver.observe(this.$el.parentNode);
+    },
+    async _queryScheduleList() {
       this.loading = true;
       try {
-        const data = await queryScheduleListApi({
-          ...this.currentDate,
-          userId: this.userId,
-          orgId: this.orgId
+        const res = await this.queryScheduleList({
+          ...this.currentDate
+          // userId: this.userId,
+          // orgId: this.orgId
         });
-        if (!data.success) return;
+        // if (!data.success) return;
 
-        if (vexutils.isArray(data.data)) {
-          this.calendarOptions.events = data.data.map(item => ({ ...item, start: item.startTime, end: item.endTime }));
+        if (vexutils.isArray(res)) {
+          this.calendarOptions.events = res.map(item => ({ ...item, start: item.startTime, end: item.endTime }));
         } else {
           this.calendarOptions.events = [];
         }
-        // this.dateValue && this.calendar.gotoDate(this.dateValue._d);
       } catch (error) {
         console.log(error);
       } finally {
         this.loading = false;
       }
     },
-    async saveOrUpdateSchedule(params) {
+    async _saveOrUpdateSchedule(params) {
+      this.loading = true;
       try {
-        const data = await saveOrUpdateScheduleApi(params);
-        if (data.success) this.$message.success('保存成功');
-        await this.queryScheduleList();
+        await this.saveOrUpdateSchedule(params);
+        // if (data.success) this.$message.success('保存成功');
+        await this._queryScheduleList();
       } catch (error) {
         console.log(error);
       } finally {
         this.loading = false;
       }
     },
-    async delSchedule(params) {
+    async _delSchedule(params) {
+      this.loading = true;
       try {
-        const data = await delScheduleApi({ ...params, userId: this.userId });
-        if (data.success) {
-          this.$message.success('删除成功');
+        const data = await this.delSchedule(params);
+        if (data) {
+          // this.$message.success('删除成功');
           // this.calendarOptions.events = this.calendarOptions.events.filter(item => item.scheduleId === params.scheduleId);
-          await this.queryScheduleList();
+          await this._queryScheduleList();
         }
       } catch (error) {
         console.log(error);
@@ -328,7 +347,7 @@ export default create({
     },
     handleDate(changeType) {
       if (this.loading) return;
-      const dateValue = changeType ? this.dateValue.clone()[changeType](1, this.viewType) : moment();
+      const dateValue = changeType ? this.dateValue.clone()[changeType](1, this.viewType === 'list' ? 'month' : this.viewType) : moment();
       this.dateValue = dateValue;
       switch (changeType) {
         case 'subtract':
@@ -349,45 +368,81 @@ export default create({
     handleCurrentDateChange() {
       const date = moment(this.dateValue).format('YYYY-MM-DD');
       let currentDate = {};
+
       switch (this.viewType) {
         case 'day':
           currentDate = formatDate(date, 'day');
           break;
-        case 'week':
-          currentDate = formatDate(date, 'week');
+        case 'list':
+          currentDate = formatDate(date, 'month');
           break;
         default:
-          currentDate = formatDate(date, 'month');
+          this.setViewTime();
           break;
       }
       Object.assign(this.currentDate, currentDate);
-      this.queryScheduleList();
+      this._queryScheduleList();
+    },
+    setViewTime() {
+      const currentDate = {};
+      const { activeStart, activeEnd } = this.calendar.view;
+      currentDate.startTime = moment(activeStart)
+        .clone()
+        .startOf('day')
+        .format('YYYY-MM-DD HH:mm:ss');
+      currentDate.endTime = moment(activeEnd)
+        .clone()
+        .subtract(1, 'day')
+        .endOf('day')
+        .format('YYYY-MM-DD HH:mm:ss');
+
+      Object.assign(this.currentDate, currentDate);
     },
     handleAdd() {
-      this.$emit('add', {});
+      this.$emit('add', getAddTime(this.dateValue));
     },
     handleSelect(event, type = 'add') {
       const { start, end, extendedProps, title } = event;
-      const startTime = moment(start).format('YYYY-MM-DD HH:mm:ss');
-      const endTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
+      const { startTime, endTime } = getAddTime(start, end);
       const params = { ...extendedProps, startTime, endTime, title };
-      if (moment(start).valueOf() < moment().valueOf()) {
+      if (type === 'edit' || ['day', 'week'].includes(this.viewType)) {
+        params.startTime = moment(start).format('YYYY-MM-DD HH:mm:ss');
+        params.endTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
+      }
+      const that = this;
+      if (
+        moment(start)
+          .clone()
+          .valueOf() <
+        moment()
+          .clone()
+          .startOf('day')
+          .valueOf()
+      ) {
         this.$confirm({
           title: '提示',
           content: '日程开始时间小于当前时间,是否继续?',
           okText: '确定',
           cancelText: '取消',
           onOk: () => {
-            this.$emit(type, params);
+            setEmit();
           },
           onCancel: () => {
             if (type === 'edit') {
-              this.queryScheduleList();
+              this._queryScheduleList();
             }
           }
         });
       } else {
-        this.$emit(type, params);
+        setEmit();
+      }
+
+      function setEmit() {
+        if (type === 'add') {
+          that.$emit('add', params);
+        } else {
+          that._saveOrUpdateSchedule(params);
+        }
       }
     },
     handleDrop({ event, oldEvent }) {
@@ -412,17 +467,27 @@ export default create({
       this.handleCurrentDateChange();
     }
   },
-  beforeDestroy() {}
+  beforeDestroy() {
+    this.resizeObserver = null;
+  }
 });
 </script>
 <style lang="less" scoped>
 @primary-color: #2d7aff;
 
 .c-full-calendar {
+  position: relative;
   display: flex;
   flex-flow: column nowrap;
   width: 100%;
   height: 100%;
+  &__mask {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0);
+  }
   /deep/ .tag-detail-wrpper {
     display: none;
   }
@@ -452,7 +517,7 @@ export default create({
   .main-wrapper {
     display: flex;
     width: 100%;
-    flex: 1;
+    height: 100%;
     .full-calendar {
       display: flex;
       flex-flow: column nowrap;
@@ -561,6 +626,7 @@ export default create({
       /deep/ .full-calendar__body {
         width: 100%;
         flex: 1;
+        overflow-y: scroll;
         box-sizing: border-box;
 
         .fc-header-toolbar {

package/packages/full-calendar/src/components/ListTag.vue

@@ -33,6 +33,10 @@ export default {
     listData: {
       type: Array,
       default: () => []
+    },
+    dateValue: {
+      type: Object,
+      default: moment()
     }
   },
   data() {
@@ -53,18 +57,21 @@ export default {
           .clone()
           .startOf('day')
           .valueOf();
-        if (obj[day]) {
-          obj[day].list.push({ ...item });
-        } else {
-          obj[day] = {
-            _d: date,
-            day,
-            week: date.format('ddd'),
-            month: date.format('MMM'),
-            list: [{ ...item }],
-            state: startTime < curValue ? 0 : 1
-          };
+        if (date.month() === this.dateValue.clone().month()) {
+          if (obj[day]) {
+            obj[day].list.push({ ...item });
+          } else {
+            obj[day] = {
+              _d: date,
+              day,
+              week: date.format('ddd'),
+              month: date.format('MMM'),
+              list: [{ ...item }],
+              state: startTime < curValue ? 0 : 1
+            };
+          }
         }
+
         return obj;
       }, {});
 

package/packages/full-calendar/src/components/Tag.vue

@@ -21,6 +21,7 @@ import { Tooltip, Icon } from 'ant-design-vue';
 import { moment } from '@/utils/vexutils';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
+import { getAddTime } from '../utils';
 
 export default {
   name: 'tag',
@@ -90,7 +91,7 @@ export default {
       const { startTime, endTime, scheduleId } = this.item;
       switch (btn.type) {
         case 'plus-square':
-          this.$emit('add', { startTime, endTime });
+          this.$emit('add', getAddTime(startTime));
           break;
         case 'form':
           this.$emit('edit', this.item);
@@ -102,8 +103,7 @@ export default {
             okText: '确定',
             cancelText: '取消',
             onOk: () => {
-              this.$emit('delete', { id: scheduleId });
-              this.tagDetailRef.$parent.delSchedule({ id: scheduleId });
+              this.tagDetailRef.$parent._delSchedule({ id: scheduleId });
             },
             onCancel() {}
           });