|
|
|
|
@ -7,30 +7,68 @@
|
|
|
|
|
* @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="brw-outter" v-loading="load">
|
|
|
|
|
<v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
|
|
|
|
<div class="brw-inner">
|
|
|
|
|
<v-echarts :opt="opt"></v-echarts>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="brw-outter" v-loading="load">
|
|
|
|
|
<v-label-div
|
|
|
|
|
title="尾翼趋势对比"
|
|
|
|
|
:showLine="false"
|
|
|
|
|
:eStyle="{ 'border-style': 'none' }"
|
|
|
|
|
/>
|
|
|
|
|
<div class="brw-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/BrandWeiyi.js"
|
|
|
|
|
import createOpt from "./opt"
|
|
|
|
|
import { getCountTime0528C } from "@/api/BrandComparison/BrandWeiyi.js";
|
|
|
|
|
import { doStr } from "@/utils/gol/dataTool";
|
|
|
|
|
import createOpt from "./opt";
|
|
|
|
|
export default {
|
|
|
|
|
name: "brandRearWingComparison",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
opt: {},
|
|
|
|
|
load: false,
|
|
|
|
|
form: {
|
|
|
|
|
token: "",
|
|
|
|
|
sBrand: ""
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
name: "brandRearWingComparison",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
//弹出框//
|
|
|
|
|
modelStyle: {
|
|
|
|
|
left: "",
|
|
|
|
|
top: "",
|
|
|
|
|
},
|
|
|
|
|
modelShow: false,
|
|
|
|
|
ecbox: {
|
|
|
|
|
//图表宽高
|
|
|
|
|
width: 1618,
|
|
|
|
|
height: 1490,
|
|
|
|
|
},
|
|
|
|
|
ecmodel: {
|
|
|
|
|
//弹框宽高
|
|
|
|
|
width: 300,
|
|
|
|
|
height: 280,
|
|
|
|
|
},
|
|
|
|
|
activeCol: 0,
|
|
|
|
|
activeIndex: 0,
|
|
|
|
|
//-*-//
|
|
|
|
|
opt: {},
|
|
|
|
|
load: false,
|
|
|
|
|
form: {
|
|
|
|
|
token: "",
|
|
|
|
|
sBrand: "",
|
|
|
|
|
},
|
|
|
|
|
urlArr: [],
|
|
|
|
|
doStr: doStr,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.initData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
@ -47,33 +85,81 @@ export default {
|
|
|
|
|
getData() {
|
|
|
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
|
|
|
this.load = true;
|
|
|
|
|
getCountTime0528C(obj)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
let data = res.data || [];
|
|
|
|
|
let dx = [];
|
|
|
|
|
let ds = [];
|
|
|
|
|
data.forEach((ele) => {
|
|
|
|
|
let key = ele.key;
|
|
|
|
|
let value = ele.value;
|
|
|
|
|
dx.push(key);
|
|
|
|
|
ds.push(value);
|
|
|
|
|
});
|
|
|
|
|
this.opt = createOpt(dx, ds);
|
|
|
|
|
this.load = false;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
|
});
|
|
|
|
|
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>
|
|
|
|
|
.brw-outter {
|
|
|
|
|
width: 1880px;
|
|
|
|
|
height: 412px;
|
|
|
|
|
.brw-inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
}
|
|
|
|
|
width: 1880px;
|
|
|
|
|
height: 412px;
|
|
|
|
|
.brw-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>
|
|
|
|
|
|
