feat: 新增右侧项目进度组件

apps/bigmember_pc/src/views/article-content/components/ContentRightTimeLine.vue

@@ -0,0 +1,234 @@
+<script setup>
+import DownProjectReport from '@/composables/down-project-report/component/DownProjectReport.vue'
+import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
+import { ContentModel } from '@/views/article-content/composables/useContentStore'
+import { useRouter } from 'vue-router/composables'
+const props = defineProps({
+  contentId: {
+    type: String,
+    default: ''
+  },
+  timeLineList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const router = useRouter()
+
+function doOpen(item) {
+  if (item.isActive) {
+    return
+  } else {
+    // 获取当前路由信息
+    const currentRoute = router.currentRoute
+    // 构建新的路由对象，复用除了ID以外的其他参数
+    const newRoute = {
+      name: currentRoute.name,
+      params: {
+        content: currentRoute.params.content,
+        id: item.id + '.html'
+      }
+    }
+    router.push(newRoute)
+  }
+}
+</script>
+<template>
+  <div class="right-time-line-container">
+    <div class="flex flex-col right-time-line-header-container">
+      <div class="content-block-header">招标/采购进度</div>
+      <div class="report-actions flex flex-(row items-center)">
+        <down-project-report
+          v-if="ContentModel.projectName"
+          :id="contentId"
+          :name="ContentModel.projectName"
+        ></down-project-report>
+        <quick-monitor
+          class="m-l-16px"
+          :cache="true"
+          :auto="false"
+          type="project"
+          :params="contentId"
+        />
+      </div>
+    </div>
+    <div class="right-style-time-line-container">
+      <div
+        class="right-style-time-item flex flex-(row justify-between)"
+        :class="{ 'is-active': item.isActive }"
+        v-for="(item, index) in timeLineList"
+        :key="index"
+        @click="doOpen(item)"
+      >
+        <div class="item-container flex flex-col flex-items-start">
+          <span class="item-time-label" v-if="item.time">{{ item.time }}</span>
+          <div
+            class="item-type-label flex flex-row flex-items-center"
+            v-if="item.contentType.length"
+          >
+            <span>{{ item.contentType[0] }}</span>
+            <span
+              class="item-type-label--line"
+              v-if="item.contentType[1]"
+            ></span>
+            <span v-if="item.contentType[1]">
+              {{ item.contentType[1] }}
+            </span>
+          </div>
+          <div class="item-money-label" v-if="item.money">{{ item.money }}</div>
+        </div>
+        <div class="item-after">
+          <div
+            class="item-after-line item-after-line--fill"
+            :class="{ 'empty-line': index === 0 }"
+          ></div>
+          <div class="item-after-tag" v-if="index === 0">最新</div>
+          <div class="item-after-circle" v-else></div>
+          <div
+            class="item-after-line"
+            :class="{ 'gray-line': index !== 0 }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.right-time-line-container {
+  border-radius: 8px;
+  background: #fff;
+  margin-bottom: 20px;
+  .report-actions {
+    font-size: 13px;
+    color: #686868;
+    ::v-deep {
+      .down-project-report {
+        font-size: inherit;
+      }
+    }
+  }
+  .right-time-line-header-container {
+    padding: 16px;
+    padding-right: 0;
+    padding-bottom: 8px;
+    .content-block-header {
+      font-size: 16px;
+      font-weight: bold;
+      color: #1d1d1d;
+      margin-bottom: 8px;
+    }
+  }
+
+  .right-style-time-item {
+    cursor: pointer;
+    padding: 0 16px;
+    &.is-active,
+    &:hover {
+      background: rgba(42, 190, 209, 0.08);
+      .item-time-label,
+      .item-type-label {
+        color: #2abed1;
+      }
+      .item-type-label--line {
+        background-color: #2abed1;
+      }
+    }
+    &:last-child .item-container {
+      border-color: transparent;
+    }
+    .item-container {
+      flex: 1;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px dashed #ececec;
+    }
+    .item-time-label {
+      color: #999;
+      font-size: 13px;
+      line-height: 20px;
+    }
+    .item-type-label {
+      margin-top: 8px;
+      font-size: 14px;
+      color: #1d1d1d;
+      line-height: 22px;
+      &--line {
+        width: 1px;
+        height: 12px;
+        background: #999;
+        margin: 0 8px;
+      }
+    }
+    .item-money-label {
+      margin-top: 6px;
+      display: inline-block;
+      padding: 1px 8px;
+      border-radius: 4px;
+      border: 1px solid #2abed1;
+      color: #2abed1;
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    .item-after {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 32px;
+      margin-left: 8px;
+      &-tag {
+        margin-top: 10px;
+        padding: 1px 4px;
+        border-radius: 4px;
+        background: #2cb7ca;
+        color: #fff;
+        text-align: center;
+        font-size: 12px;
+        line-height: 18px;
+      }
+      &-circle {
+        flex-shrink: 0;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: $color-text--highlight;
+        border: 3px solid #d2f6fc;
+        margin: 2px 0;
+      }
+      &-line {
+        width: 1px;
+        height: 100%;
+        background-color: #2cb7ca;
+        &--fill {
+          width: 1px;
+          height: 10px;
+          background-color: #ececec;
+        }
+        &.gray-line {
+          background-color: #ececec;
+        }
+        &.empty-line {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .right-style-time-line {
+    ::v-deep {
+      .j-step .step-items {
+        flex-direction: row-reverse;
+      }
+      .step-item.cursor {
+        display: none;
+      }
+      .step-circle[data-tip='']::before {
+        transform: translate(0, -50%) scale(1.6);
+      }
+    }
+  }
+}
+</style>