vue 堆叠进度条

原创已于 2023-04-06 16:59:03 修改 · 371 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-15 11:07:21 首次发布

vue 同时被 2 个专栏收录

42 篇文章

订阅专栏

css

19 篇文章

订阅专栏

该代码段展示了一个用于显示在线率、报警测站和测站总数的前端组件。使用HTML结构，结合JavaScript的数据绑定和Vue.js的v-for指令动态渲染数据，以及CSS样式定义了进度条和颜色编码，以清晰地呈现不同状态的测站数量。

效果

html

<div class="count">
      <div class="pB_Container_top">
        <div class="item">
          <span style=" color:#23a459" class="data">{{ onlineRateValue }}%</span>
          <span class="title">测点在线率</span>
        </div>
        <div class="item">
          <span style=" color:#ff4d4f" class="data">{{ alarmValue }}个</span>
          <span class="title">报警测站</span>
        </div>

        <div class="item">
          <span style=" color:#1890ff" class="data">{{ totalValue }}个</span>
          <span class="title">测站总数</span>
        </div>
      </div>
      <div id="ProcessBar" class="pB_Container">
        <div v-for="(item, index) in countList" :key="index"
          :style="{ width: item.value + '%', backgroundColor: item.color, paddingLeft: 10 + 'px' }"></div>
      </div>
      <div class="pB_Container_bottom">
        <div class="item" v-for="(item, index) in countList" :key="index">
          <span>
            <span style="display:inline-block;width:6px;height: 6px;border-radius: 50%;"
              :style="{ backgroundColor: item.color }"></span>
            <span :style="{ color: item.color }" class="data">{{ item.value }}</span>
          </span>
          <span class="title">{{ item.title }}</span>
        </div>
      </div>
    </div>

countList: [
        {
          title: "在线测站",
          value: 842,
          color: '#1890ff',
          status: 'inline'
        },
        {
          title: "业务报警",
          value: 21,
          color: '#ff4d4f',
          status: 'businessAlarm'
        },
        {
          title: "工况报警",
          value: 1999,
          color: '#ff4d4f',
          status: 'workingAlarm'
        },
        {
          title: "离线测站",
          value: 67,
          color: '#dbdee4',
          status: 'offline'
        },
       
 ]

css

.pB_Container {
  display: inline-flex;
  line-height: 8px;
  overflow: hidden;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  width: 388px;
  height: 8px;
  background: #dbdee4;
  border: 1px solid #ecf2fe;
  border-radius: 7px;
}

.pB_Container div {
  float: left;
  /*border-radius: 8px;*/
}

.pB_Container_bottom ul {
  list-style: none;
  text-align: left;
}

.pB_Container_bottom ul li {
  float: left;
  display: flex;
  flex-direction: column;
}

.data {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
}

.pB_Container_bottom {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.pB_Container_top {
  display: flex;
  width: 100%;
  justify-content: space-around;

  .data {
    font-size: 26px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
  }

  .title {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #666;
  }
}


.item {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #999999;
}