插肩修改

src/components/common/timeLine.vue

@@ -7,11 +7,24 @@
         :class="['xiaoshikd', 'xiaoshikd' + index]"
         :ref="'xiaoshikd' + index"
       >
-        <div class="shifenkd"></div>
-        <div class="shifenkd"></div>
-        <div class="shifenkd"></div>
-        <div class="shifenkd"></div>
-        <div class="shifenkd"></div>
+        <div class="kedu shifenStart"></div>
+        <div class="kedu shifen"></div>
+        <div class="kedu shifen"></div>
+        <div class="kedu shifen"></div>
+        <div class="kedu shifen"></div>
+        <div class="kedu shifen"></div>
+        <div class="kedu shifenEnd" v-if="index == timekedu.length - 1"></div>
+      </div>
+      <div class="hysj_content">
+        <div class="clearposi" ref="hysj">
+          <div
+            v-for="(item, index) in huiyiInfoRender"
+            :key="index"
+            :class="['timeDuan', 'timeDuan' + index]"
+            :ref="'timeDuan' + index"
+            :style="{ width: item.width + 'px', left: item.positionX + 'px' }"
+          ></div>
+        </div>
       </div>
     </div>
     <div class="timepoint_content">
@@ -31,12 +44,14 @@ export default {
   props: {
     startTime: Number,
     endTime: Number,
+    huiyiInfo: Array,
   },
   data() {
     return {
       timePointWidth: 30,
       timePointDataArr: [],
       timekedu: [],
+      huiyiInfoRender: [],
     };
   },
   mounted() {
@@ -59,24 +74,56 @@ export default {
         if (i != 0) this.timekedu.push({});
       }
 
-      // let totalTimeMinute = totalTimeHour * 60;
-      // debugger;
-      // this.$refs.timeLine.clientWidth;
-      // this.$refs.timeLine.clientHeight;
-
       setTimeout(() => {
         let positionPY = (that.$refs.timeLine.clientWidth - 50) / totalTimeHour;
         for (let i = 0; i <= totalTimeHour; i++) {
           // 时间点 left 偏移
           that.$refs["timepoint" + i][0].style.left = positionPY * i + "px";
         }
-        for (let i = 0; i <= that.timekedu.length; i++) {
+        for (let i = 0; i <= that.timekedu.length - 1; i++) {
           // 时间刻度 宽度
           that.$refs["xiaoshikd" + i][0].style.width =
             (that.$refs.timeLine.clientWidth - 50) / totalTimeHour + "px";
         }
+        that.setHuiYi();
       }, 100);
     },
+
+    setHuiYi() {
+      let that = this;
+      let shijianStart = "";
+
+      let totalTimeHour = this.endTime - this.startTime; // 9个小时，10个时间刻度
+      let totalTimeMinute = (this.endTime - this.startTime) * 60; // 9个小时，10个时间刻度
+      let everyMinuteWidth =
+        (this.$refs.timeLine.clientWidth - 25) / totalTimeMinute;
+
+      this.huiyiInfoRender = this.huiyiInfo.map(function (item) {
+        // item.name;
+        let minute =
+          (new Date(item.endTime) - new Date(item.startTime)) / 1000 / 60;
+        // 当前0点
+        let zero =
+          that.$moment(new Date(item.startTime)).format("YYYY-MM-DD") +
+          " 00:00:00";
+        let keduStartTime = that
+          .$moment(zero)
+          .add(that.startTime, "h")
+          .format("YYYY-MM-DD HH:mm:ss");
+
+        let minute_py =
+          (new Date(item.startTime) - new Date(keduStartTime)) / 1000 / 60;
+
+        // 宽度
+        let width = minute * everyMinuteWidth;
+        // 偏移量
+        let positionX = minute_py * everyMinuteWidth;
+
+        item.width = width;
+        item.positionX = positionX;
+        return item;
+      });
+    },
   },
 };
 </script>
@@ -89,39 +136,64 @@ export default {
     height: calc(100% - 24px);
     margin-left: 25px;
     margin-right: 25px;
+    position: relative;
     .xiaoshikd {
       height: 100%;
       display: inline-block;
       box-sizing: border-box;
-      border-right: 2px solid #eeeeee;
-      border-bottom: 2px solid #eeeeee;
       position: relative;
-      &:first-child {
-        border-left: 2px solid #eeeeee;
-      }
-      .shifenkd {
+      border-bottom: 2px solid #eeeeee;
+      .kedu {
         position: absolute;
-        margin-top: 8px;
         width: 2px;
-        height: calc(100% - 8px);
         background: #eeeeee;
-        &:nth-child(1) {
+      }
+      .shifenStart {
+        height: 100%;
+        left: -1px;
+      }
+      .shifenEnd {
+        height: 100%;
+        left: calc(100% - 1px);
+      }
+      .shifen {
+        height: calc(100% - 8px);
+        margin-top: 8px;
+        &:nth-child(2) {
           left: calc(100% / 6 * 1 - 1px);
         }
-        &:nth-child(2) {
+        &:nth-child(3) {
           left: calc(100% / 6 * 2 - 1px);
         }
-        &:nth-child(3) {
+        &:nth-child(4) {
           left: calc(100% / 6 * 3 - 1px);
         }
-        &:nth-child(4) {
+        &:nth-child(5) {
           left: calc(100% / 6 * 4 - 1px);
         }
-        &:nth-child(5) {
+        &:nth-child(6) {
           left: calc(100% / 6 * 5 - 1px);
         }
       }
     }
+
+    .hysj_content {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0px;
+      left: 0px;
+      .clearposi {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      .timeDuan {
+        height: 100%;
+        position: absolute;
+        background: #000;
+      }
+    }
   }
   .timepoint_content {
     height: 24px;

src/components/work/meeting/workMeeting.vue

@@ -15,6 +15,42 @@
               v-bind="{
                 startTime: 8,
                 endTime: 17,
+                huiyiInfo: huiyiInfo,
+              }"
+            ></timeline>
+            <timeline
+              v-bind="{
+                startTime: 8,
+                endTime: 17,
+                huiyiInfo: huiyiInfo,
+              }"
+            ></timeline>
+            <timeline
+              v-bind="{
+                startTime: 8,
+                endTime: 17,
+                huiyiInfo: huiyiInfo,
+              }"
+            ></timeline>
+            <timeline
+              v-bind="{
+                startTime: 8,
+                endTime: 17,
+                huiyiInfo: huiyiInfo,
+              }"
+            ></timeline>
+            <timeline
+              v-bind="{
+                startTime: 8,
+                endTime: 17,
+                huiyiInfo: huiyiInfo,
+              }"
+            ></timeline>
+            <timeline
+              v-bind="{
+                startTime: 8,
+                endTime: 17,
+                huiyiInfo: huiyiInfo,
               }"
             ></timeline>
           </div>
@@ -121,6 +157,23 @@ export default {
           content: "增加会议室",
         },
       ],
+      huiyiInfo: [
+        {
+          name: "1",
+          startTime: "2023.08.01 08:40:00",
+          endTime: "2023.08.01 10:40:00",
+        },
+        {
+          name: "2",
+          startTime: "2023.08.01 12:25:00",
+          endTime: "2023.08.01 13:42:00",
+        },
+        {
+          name: "3",
+          startTime: "2023.08.01 15:21:00",
+          endTime: "2023.08.01 16:22:00",
+        },
+      ],
     };
   },
   mounted() {

src/views/HomeView.vue

@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      collapse: true, // 侧边栏是否收起
+      collapse: false, // 侧边栏是否收起
       asideWidth: "16%",
       contentWidth: "84%",
       contentHeight: 450,