ninglu-frontt/src/pages/bigdata/combine/comp/GrowPlants/index.vue

<template>
  <div class="planting-record">
    <p class="title">设备数据统计</p>
    <div class="planting-record__content clearfix">
      <div class="planting-record__left">
        <PieEchart v-show="leftList.length" :leftList="leftList" @changePieIndex="changePieIndex" />
        <no-data v-if="!leftList.length" />
      </div>
      <div class="planting-record__right" ref="scrollContainer">
        <div
          class="record_list"
          :class="activeIndex == index ? 'active' : ''"
          v-for="(i, index) in leftList"
          :key="index"
        >
          <div class="name">
            <div class="empty-circle" :style="circleStyle(index)"></div>
            {{ i.name }}：
          </div>
          <div class="value">{{ i.value }}&nbsp;台</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PieEchart from '../Echarts/PieEcharts.vue'
import noData from '../noData.vue'
import { formatNumber } from '@/util/helpers.js'

export default {
  name: 'PlantRecord',
  props: {
    landSummaryData: {
      type: Array,
      default: () => []
    },
    payAllCount: {
      type: Number,
      default: 0
    }
  },
  watch: {},
  components: {
    PieEchart,
    noData
  },
  data() {
    return {
      colors: [
        '#00A6CA',
        '#00E0B0',
        '#FFC859',
        '#1671F8',
        '#E67B3E',
        '#159AFF',
        '#FF5951',
        '#6B53FF',
        '#FFC97A',
        '#6EE484',
        '#E7EB4B',
        '#1561F3',
        '#FA73F5',
        '#66EDED',
        '#6DE28B',
        '#A2845E',
        '#018B3F',
        '#00C7BE'
      ],
      leftList: [
        {
          name: '农资',
          rate: '35',
          value: 35
        },
        {
          name: '农具',
          rate: '25',
          value: 25
        },
        {
          name: '人工',
          rate: '40',
          value: 40
        }
      ],
      activeIndex: 0,
      residualArea: 0,
      percentAll: 0
    }
  },
  mounted() {
    this.getEchartsData()
  },
  methods: {
    circleStyle(index) {
      return {
        'background-color': this.colors[index % this.colors.length]
      }
    },
    changePieIndex(i) {
      this.activeIndex = i
      const container = this.$refs.scrollContainer
      if (container.scrollTop + container.clientHeight >= container.scrollHeight + 25) {
        container.scrollTop = 0
      } else {
        container.scrollTop += 20 // 每次滚动1px
      }
    },
    handelnumber(val) {
      return formatNumber(val)
    },
    getEchartsData() {
      this.$axios({
        method: 'POST',
        url: '/api/v2/home/device/statistic/'
      }).then((res) => {
        // console.log(res);

        const { result, total_num } = res.data.data.items
        this.$emit('deviceCount', total_num)
        this.leftList = result.map((item) => ({
          name: item.name,
          value: Number(item.value),
          rate: parseFloat(((item.value / total_num) * 100).toFixed(2))
        }))
      })
    }
  }
}
</script>

<style lang="less" scoped>
.planting-record {
  height: 100%;

  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
  .title {
    img {
    }
    padding-left: 60px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    background-image: url('../../assets/title-bg.png');
    font-size: 18px;
    color: #ffffff;
    // margin-bottom: 12px;
  }
  &__content {
    // display: flex;
    padding: 20px 20px 20px 5px;
    box-sizing: border-box;
    height: calc(100% - 40px);
  }
  &__left {
    width: 220px;
    height: 220px;
    // margin-right: 6px;
    float: left;
  }

  &__right {
    // flex: 1;
    float: right;
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
    .record_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 12px;
      height: 20px;
      line-height: 20px;
      color: #ffffff;
      font-family: 'Source Han Sans CN';
      font-size: 14px;

      // .empty-circle0 {
      //   border: 2px solid #00e0b0; /* 边框的样式和宽度 */
      // }
      // .empty-circle1 {
      //   border: 2px solid #ffc859; /* 边框的样式和宽度 */
      // }
      // .empty-circle2 {
      //   border: 2px solid #0184fe; /* 边框的样式和宽度 */
      // }
      .name {
        .empty-circle {
          float: left;
          width: 8px;
          height: 8px;
          margin-right: 8px;
          margin-top: 6px;
          border-radius: 50%;
        }
      }
    }
    .active {
      border-top: 2px solid;
      border-bottom: 2px solid;
      border-image: linear-gradient(to right, #13314400, #5190c9, #13314400) 1;
      background: linear-gradient(90deg, #0a344100 0%, #044a99b3 33.49%, #13314400 100%);
    }
  }
}
</style>