zfire-newmall-admin/src/views/bigViews/dataView1/components/badRatingRanking.vue

<template>
  <moduleEnclosure title="差评排名">
    <div class="dvScrollBoardView">
      <dv-scroll-board
        :config="config"
        :ref="`scrollBoard_1`"
        style="width: 100%; height: 100%"
      />
    </div>
  </moduleEnclosure>
</template>

<script>
import moduleEnclosure from '@/components/moduleEnclosure.vue';
import img0 from '@/assets/xia.png';
import img1 from '@/assets/shang.png';
import img2 from '@/assets/y1.png';
import img3 from '@/assets/y2.png';
import img4 from '@/assets/y3.png';
import { getQuery13, getQuery14 } from '@/api/bigView.js';
var timeling = 5000;
export default {
  components: {
    moduleEnclosure,
  },
  data() {
    return {
      config: {
        headerBGC: '#0B1C55',
        oddRowBGC: '#0B1C55',
        evenRowBGC: '#0B1C55',
        header: ['排名', '网点', '差评数', '同比'],
        data: [],
        waitTime: timeling,
      },
    };
  },
  mounted() {
    this.timeId = getQuery13((res) => {
      let list = res.data.map((item, index) => {
        return this.tmp(item, index, true);
      });
      this.config.data = list;
      this.$refs['scrollBoard_1'][0].updateRows(list);
    }, 60000 * 60 * 12);
  },
  beforeUnmount() {
    this.timeId();
    if (this.timed) {
      clearTimeout(this.timed);
    }
  },
  methods: {
    tmp(item, index, bool) {
      return [
        `<div class="aitem0"><img src="${
          index == 0 ? img2 : index == 1 ? img3 : img4
        }"/><span>${index + 1}</span></div>`,
        `<div class="aitem1"><div class="${
          bool ? 'slide' : 'juzhongxianshi'
        }" style="width:${item.name.length * 13}px!important;"><span>${
          item.name
        }</span>${
          bool ? `  <span>${item.name}</span>  <span>${item.name}</span>` : ''
        }</div></div>`,
        `<div class="aitem2">${item.cut}</div>`,
        `<div class="aitem3">
              <div class="zhanbijs">
                <span class="${
                  item.rate > 0 ? 'c3' : item.rate < 0 ? 'c2' : ''
                }">${item.rate}%</span>
                ${
                  item.rate > 0 || item.rate < 0
                    ? `<img
                  src="${item.rate > 0 ? img1 : item.rate < 0 ? img0 : ''}"
                />`
                    : ''
                }
              </div>
            </div>`,
      ];
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .dv-scroll-board {
  .header-item {
    color: #699be3 !important;
    font-size: 18px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: center;
  }

  .header,
  .row-item {
    cursor: pointer;
    height: 42px !important;

    &:hover {
      background: linear-gradient(to right, #156ccf, #082570) !important;
    }

    div:nth-child(1) {
      width: 60px !important;

      div {
        width: 100% !important;
      }
    }

    div:nth-child(2) {
      width: 52% !important;
      overflow: hidden;
      white-space: nowrap;

      div {
        min-width: 100% !important;
      }
      .juzhongxianshi {
        text-align: center;
      }
    }

    div:nth-child(3) {
      width: 16% !important;

      div {
        width: 100% !important;
      }
    }

    div:nth-child(4) {
      width: auto !important;
    }

    .slide {
      animation: slide 5s linear infinite;
    }

    @keyframes slide {
      0% {
        transform: translateX(0);
      }
      20% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    // }
  }
}

::v-deep .aitem0 {
  width: 38px;
  height: 38px;
  position: relative;

  img {
    margin: 0;
    padding: 0;
    width: 35px;
    height: 35px;
  }

  img,
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

::v-deep .aitem1,
::v-deep .aitem2 {
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #c8ebff;
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
}

::v-deep .aitem3 {
  .zhanbijs {
    width: 100%;
    height: 38px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    & > span:nth-child(1) {
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: left;
    }

    img {
      width: 16px;
      height: 16px;
      margin-left: 6px;
    }
  }
}

.dvScrollBoardView {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 16px;
}

.classbtns {
  width: 160px;
  height: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 2px solid #0e72e6;
  cursor: pointer;

  div {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 28px;
  }

  div:nth-child(1) {
    border-right: 2px solid #0e72e6;
  }
  .select {
    background: #0e72e6;
    color: #bbd4ff;
  }
}

::v-deep .el-carousel__arrow,
::v-deep .el-carousel__indicators {
  display: none;
}

::v-deep .c2 {
  color: #3ce783;
}

::v-deep .c3 {
  color: #e15960;
}
</style>