kd-aiot-frontend-mes/src/views/produceOrder/components/progressBox.vue

<template>
  <el-card>
    <div class="progress-container">
      <ul>
        <li
          v-for="(item, index) in stepList"
          :key="index"
          :class="{ active: active >= index }"
        >
		   <el-tooltip class="item" effect="dark" :content="item.taskTypeName" placement="top">
			  <p>{{ item.taskTypeName }}</p>
		   </el-tooltip>
          <div
            class="progress-box"
            :style="`backgroundImage:linear-gradient(to top, var(--color-primary), var(--color-primary) ${item.percent},#fff ${item.percent}, #fff);`"
          ></div>
          <p class="num">{{ item.number }}</p>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
  export default {
    props: {
      // active: {
      //   type: [Number, String],
      //   default: 3
      // },
		list:{
			type: Array,
			default: []
		},
		total:{
			type:Number,
			default:1
		}
    },
    data () {
      return {
        stepList: [],
		active:-1
      };
    },
	watch: {
	  list: {
	    handler () {
	      if (this.list.length) {
	        this.stepList = this.list
	        this.stepList.map((item,index)=>{
				item.percent = ( item.number / this.total)*100  + '%'
			})
			const active = this.stepList.findIndex((item) => item.number === 0)
			if(active==-1){
				this.active = this.stepList.length-1
			}
	      }
	    },
	    immediate: true
	  }
	},
	methods:{
		
	}
  };
</script>

<style lang="scss" scoped>
  .progress-container {
	  width: 100%;
	  overflow-x: auto;
    ul {
      list-style: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex: 1;
        position: relative;
		min-width: 110px;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 1px;
          background-color: #ccc;
        }
        &:first-of-type::after {
          left: 50%;
        }
        &:last-of-type::after {
          right: 50%;
        }
        &.active {
          &::after {
            background-color: var(--color-primary);
          }
          .progress-box {
            border-color: var(--color-primary);
          }
        }
		.el-tooltip{
		  width: 100%;
		  text-align: center;
		  white-space: nowrap; /* 不换行 */
		  overflow: hidden; /* 超出部分隐藏 */
		  text-overflow: ellipsis; /* 显示省略号 */
		}
        .num,
        .text {
          width: 100%;
          text-align: center;
        }
        .progress-box {
          position: relative;
          z-index: 1;
          width: 32px;
          height: 32px;
          margin: 10px 0;
          border-radius: 50%;
          // background-color: #fff;
          border: 1px solid #ccc;
        }
      }
    }
  }
</style>