leftTop.vue

<template>
  <div class="live_item acea-row acea-column" style="height:100%">
    <div class="ctit">
      <p class="tit">出入口客流-TOP5</p>
      <div class="line"></div>
    </div>
    <div class="last">
      <div class="left_right">
        <div class="left">
          <img src="./imgs/keliurenci.png" alt="">
          <div class="left_keliurenci">
            <span>客流人次</span>
            <span>{{total}}<small>人次</small></span>
          </div>
        </div>
        <div class="right">
          <div class="right_circle">
            <el-progress type="circle" :percentage="percent" :stroke-width='10' :show-text='false' color="#18D2DA" />
          </div>
          <div class="right_title">
            <span>占广场客流</span>
            <span>{{percent}}%</span>
          </div>
        </div>
      </div>
      <div class="live_charts">
        <div class="live_charts_div" v-for="item in dataList" :key="item.id">
          <div class="live_charts_color" :style="{width:(item.count/maxValue*100)+'%'}">
          </div>
          <div class="text">
            <span style="fontSize:12px;marginLeft:5px">
              {{item.name}}
            </span>
            <span style="color:#041926;fontSize:12px;marginRight:5px">{{item.count}}人次</span>
          </div>
        </div>
        <!-- <div class="chart" :id="chartId"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
// import { optionFormatter } from "@/utils/dealChart";
// import echarts from "@/third-party/echart_lib";
export default {
  inject: ["addModule"],
  props: {
    mallId: Number,
  },
  data() {
    return {
      chartId: "chart_" + Math.random().toString(16).substr(2, 5),
      percent: 0,
      total: 0,
      maxValue: 1,
      dataList: [],
    };
  },
  components: {},
  watch: {
    mallId: {
      handler(newVal) {
        if (newVal) {
          this.loadData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // initChart() {
    //   this.chart =
    //     echarts.getInstanceByDom(document.getElementById(this.chartId)) ||
    //     echarts.init(document.getElementById(this.chartId));
    //   window.chart = this;
    // },
    // resizeChart() {
    //   this.chart.resize();
    // },
    // drawChart(options) {
    //   this.chart.setOption(options);
    //   window.addEventListener("resize", this.resizeChart);
    // },
    // dealData(data) {
    //   this.percent = data.percent;
    //   this.total = data.total;
    //   let options = {
    //     // tooltip: {
    //     //   trigger: "axis",
    //     // },
    //     grid: {
    //       left: 150,
    //       right: 80,
    //       bottom: 0,
    //       top: 5,
    //     },
    //     xAxis: {
    //       show: false,
    //       type: "value",
    //     },
    //     yAxis: {
    //       type: "category",
    //       data: data.data.map((item) => item.name),
    //       show: true,
    //       axisLabel: {
    //         show: true,
    //         // formatter: function (params) {
    //         //   console.log(params, "00000");
    //         //   if (params.length > 3) {
    //         //     return params.slice(0, 5) + "...";
    //         //   }
    //         // },
    //       },
    //       axisLine: {
    //         show: false,
    //         lineStyle: {
    //           color: "#F9F9F9",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //     },
    //     series: [
    //       {
    //         name: "客流人次",
    //         type: "bar",
    //         itemStyle: {
    //           normal: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
    //               { offset: 0, color: "#095C6D" }, //柱图渐变色
    //               { offset: 1, color: "#01CDEB" }, //柱图渐变色
    //             ]),
    //           },
    //         },
    //         barWidth: 28,
    //         label: {
    //           show: true,
    //           position: "right",
    //           formatter: function (params) {
    //             return "{b|" + params.value + "人次}";
    //           },
    //           rich: {
    //             a: {
    //               color: "#fff",
    //             },
    //             b: {
    //               color: "#fff",
    //               fontWeight: "normal",
    //               fontSize: 12,
    //             },
    //           },
    //         },
    //         emphasis: {
    //           focus: "series",
    //         },
    //         data: data.data.map((item) => item.count),
    //       },
    //     ],
    //   };
    //   this.drawChart(options);
    // },
    loadData() {
      let dateStr = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
      let params = {
        mallId: this.mallId,
        countDate: dateStr,
      };

      this.$api.bigScreen
        .getGatePassengerFlowTop5(params)
        .then((res) => {
          this.maxValue = Math.max(
            ...res.data.data.data.map((item) => item.count)
          );
          this.dataList = res.data.data.data;
          this.percent = res.data.data.percent;
          this.total = res.data.data.total;
        })
        .catch((err) => {});
    },
  },
  created() {
    this.addModule(this);
  },

  mounted() {
    // this.initChart();
  },
};
</script>

<style lang="less" scoped>
.left_right {
  // width: 100%;
  // height: 40px;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  margin-bottom: 10px;
  .left {
    height: 100%;
    display: flex;
    align-items: center;
    > img {
      width: 40px;
      // height: 34px;
    }
    .left_keliurenci {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      span {
        &:first-child {
          color: #fff;
          font-size: 15px;
        }
        &:last-child {
          color: #faec32;
          font-size: 18px;
        }
      }
    }
  }
  .right {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-progress /deep/ path:first-child {
      stroke: #334162;
    }
    .right_circle {
      /deep/.el-progress-circle {
        width: 38px !important;
        height: 20px !important;
      }
    }
    .right_title {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      span {
        &:first-child {
          color: #fff;
          font-size: 15px;
        }
        &:last-child {
          color: #18d2da;
          font-size: 18px;
        }
      }
    }
  }
}
.live_charts {
  height: calc(100% - 62px) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // background-color: red;
  .live_charts_div {
    color: #fff;
    width: 100%;
    // height: 16%;
    height: 30px;
    // background-color: #353f5c;
    background-color: #5f6883;
    position: relative;
    .live_charts_color {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 100%;
      background-image: linear-gradient(to right, #095c6d, #01cdeb);
    }
    .text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.last {
  height: calc(100% - 30px);
  width: 100%;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
}
</style>