carInsightSystem/src/views/BrandComparison/informationTrend/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-15 11:40:55
 * @LastEditTime: 2021-10-15 11:53:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
-->
<template>
  <div class="it-outter" v-loading="load">
    <v-label-div title="信息量趋势"></v-label-div>
    <div class="it-inner">
      <v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
    </div>
    <div class="vshow" v-if="modelShow" :style="modelStyle">
      <vLabel-div title="实时热点事件">
        <a-button @click="closeBox">关闭</a-button>
      </vLabel-div>
      <div class="vshow-item" v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop" :key="index">
        <a :href="item.url" target="tar">{{doStr(item.title, 28)}}</a>
      </div>
    </div>
  </div>
</template>

<script>
import { getCountTime0528C } from "@/api/BrandComparison";
import {doStr} from "@/utils/gol/dataTool"
import createOpt from "./opt";
export default {
  name: "informationTrend",
  data() {
    return {
      //弹出框//
      modelStyle: {
        left: "",
        top: "",
      },
      modelShow: false,
      ecbox: {
        //图表宽高
        width: 618,
        height: 490,
      },
      ecmodel: {
        //弹框宽高
        width: 300,
        height: 280,
      },
      activeCol: 0,
      activeIndex: 0,
      //-*-//
      load: false,
      form: {
        token: "",
        sBrand: "",
      },
      opt: {},
      urlArr: [],
      doStr: doStr
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.form.token = this.getToken;
      let arr = this.getBComparison;
      let brands = [];
      arr.forEach((ele) => {
        brands.push(ele.name);
      });
      this.form.sBrand = brands.toString();
      this.getData();
    },
    getData() {
      let obj = Object.assign({}, this.getCtime2, this.form);
      this.load = true;
      getCountTime0528C(obj).then((res) => {
        let data = res.data || [];
        let dx = [];
        let ds = [];
        this.urlArr = data;
        let markData = [[], [], [], [], [], []];
        let dataI = 0;
        data.forEach((ele) => {
          let key = ele.key;
          let value = ele.value;
          dx.push(key);
          ds.push(value);
          for (let i = 0; i < ele.value.length; i++) {
            if (ele.value[i].hotTop[0]) {
              let obj = {
                timeIndex: dataI,
                yVal: data[dataI].value[i].value,
                url: ele.value[i].hotTop,
              };
              markData[i].push(obj);
              //  console.log(i)//车型的索引
              //  console.log(dataI)//时间的索引
              //  console.log(ele.value[i].hotTop)//事件列表[{},{}]
            }
          }
          dataI = dataI + 1;
        });
        console.log(dx);
        console.log(ds)
        this.opt = createOpt(dx, ds, markData);
        this.load = false;
      });
    },
    // 弹出框
    clickMark(data) {
      this.activeCol = data.index;
      this.activeIndex = data.seriesIndex;
      this.modelShow = true;
      let mw = window.event;
      if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
        this.modelStyle.left = mw.offsetX + 20 + "px";
      } else {
        this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
      }
      if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
        this.modelStyle.top = mw.offsetY + "px";
      } else {
        this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
      }
    },
    closeBox() {
      this.modelShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.it-outter {
  width: 618px;
  height: 460px;
  border: 2px solid #0f2a4d;
  .it-inner {
    width: 100%;
    height: calc(100% - 48px);
  }
}
.vshow{
  position: absolute;
    width: 300px;
    background: rgb(3, 18, 36);
    border: 4px solid #0f2a4d;
    .vshow-item {
        padding: 11px;
        width: 100%;
        font-size: 15px;
        color: rgb(54, 189, 239);
    }
}
</style>