代码更新

surprise

2024-02-05 fb98e10c76d7e6c2d01f3a9f8c1b727f905cbdca

 src/components/chart/DataStorage.vue

@@ -2,12 +2,7 @@
  <div class="data-storage">
    <div class="data-storage__header">
      <div class="text">
        <img
          class="img"
          src="@/assets/img/Screen/cunchu.png"
          alt=""
          srcset=""
        />
        <img class="img" src="@/assets/img/Screen/cunchu.png" alt="" srcset="" />
        <div class="title">共存储文件数量</div>
      </div>
      <div class="num">
@@ -16,8 +11,30 @@
      </div>
    </div>
    <div class="data-storage__content">
      <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
      <el-scrollbar class="scrollbar">
      <ul class="contentTitle">
        <li class="title">编号</li>
        <li class="name">名称</li>
        <li class="num">文件数</li>
      </ul>
      <div class="scroolData">
        <vue-seamless-scroll :data="tableData" class="ClassScroll" :class-option="defaultOption">

<ul class="item">
  <li v-for="(item, index) in tableData" :key="index">
    <span class="title">
      <div>{{ item.index }}</div></span>
    <span class="name"  :title="item.name">{{ item.name.substring(0, 15) }}</span>
    <span class="num">{{ item.num }}</span>
  </li>
</ul>
</vue-seamless-scroll>
      </div>
      
    </div>
  </div>

  <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
  <!-- <el-scrollbar class="scrollbar">
        <el-table
          :data="tableData"
          :row-style="{ background: 'rgba(135,180,248,0.10)' }"
@@ -60,51 +77,25 @@
          <el-table-column prop="num" label="文件数" width="70">
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
      </el-scrollbar> -->
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { countDataStorage } from "@/api/screen.js"
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 号",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        
      ],
      config: {
        header: ["编号", "名称", "文件数"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
         
        ],
        columnWidth: [40, 300, 50],
        align: ["center"],
@@ -120,6 +111,22 @@
      },
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },


  created() {
    this.initTable()
  },
@@ -148,79 +155,239 @@

<style lang="scss" scoped>
.data-storage {
  margin: 10px;
  width: 377px;
  &__header {
    margin-bottom: 10px;

  height: calc(100% - 30px);
  width: 100%;
}

.data-storage__header {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    width: 340px;
    box-sizing: border-box;
    .text {
  }

  .title {
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    color: #ffffff;
  }

  .img {
    margin-right: 4px;
    width: 16px;
    height: 16px;
  }

  .num {
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

.data-storage__content {
  height: calc(100% - 40px);
  width: 100%;

  .contentTitle {
    height: 40px;
    width: 100%;
    display: flex;
    background-color: rgba(52,78,147,.5);
    flex-direction: row;
   

    li {

      align-items: center;
      justify-content: space-around;
      color: #FFFFFF;
    }

    .title {
      width: 15%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title {
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      color: #ffffff;
    }
    .img {
      margin-right: 4px;

      width: 16px;
      height: 16px;
    .name {
      width: 60%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .value {
      text-align: center;
      color: #ffffff;
      width: 16px;
      height: 20px;
      background: url("~@/assets/img/Screen/numBg.png");
      background-size: 100% 100%;

    .num {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }


  }
  &__content {
    width: 95%;
    height: 220px;
  }


}
</style>

.scroolData{
  height: calc(100% - 40px);
  width: 100%;
  overflow: hidden;
}
.ClassScroll {
  height:100%;
  width: 100%;



  .item {
    width: 100%;
    height: 100%;
    color: #ffffff;

    li {
      height: 40px;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;

      .title {
        width: 15%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          height: 20px;
          width: 20px;
          background-color: #495477;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .name {
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .num {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

  }

}

// .data-storage {
//   margin: 10px;
//   width: 377px;

//   &__header {
//     margin-bottom: 10px;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     height: 20px;
//     width: 340px;
//     box-sizing: border-box;

//     .text {
//       display: flex;
//       align-items: center;
//     }

//     .title {
//       font-family: Source Han Sans CN, Source Han Sans CN-Regular;
//       color: #ffffff;
//     }

//     .img {
//       margin-right: 4px;

//       width: 16px;
//       height: 16px;
//     }

//     .value {
//       text-align: center;
//       color: #ffffff;
//       width: 16px;
//       height: 20px;
//       background: url("~@/assets/img/Screen/numBg.png");
//       background-size: 100% 100%;
//     }
//   }

//   &__content {
//     width: 95%;
//     height: 220px;
//   }
// }
// </style>

<style lang="scss">
.data-storage {
  .index-wrap {
    margin: 0 auto;
    width: 14px;
    height: 14px;
    background: rgba(180, 188, 235, 0.25);
  }
  .scrollbar {
    width: 100%;
    overflow-x: hidden;
    height: 200px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-table {
      height: 100%;
      width: 100%;
      background-color: transparent;
      color: #fff;
    }
    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell {
      border: none;
    }
    .el-table--group::after,
    .el-table--border::after,
    .el-table::before {
      border: none;
    }
    .el-table::before {
      height: 0;
    }
  }
}
</style>
// .data-storage {
//   .index-wrap {
//     margin: 0 auto;
//     width: 14px;
//     height: 14px;
//     background: rgba(180, 188, 235, 0.25);
//   }

//   .scrollbar {
//     width: 100%;
//     overflow-x: hidden;
//     height: 200px;

//     .el-scrollbar__wrap {
//       overflow-x: hidden;
//     }

//     .el-table {
//       height: 100%;
//       width: 100%;
//       background-color: transparent;
//       color: #fff;
//     }

//     .el-table th.el-table__cell.is-leaf,
//     .el-table td.el-table__cell {
//       border: none;
//     }

//     .el-table--group::after,
//     .el-table--border::after,
//     .el-table::before {
//       border: none;
//     }

//     .el-table::before {
//       height: 0;
//     }
//   }
// }</style>