|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: your name
|
|
|
|
|
* @Date: 2021-10-18 16:03:35
|
|
|
|
|
* @LastEditTime: 2021-11-15 19:20:39
|
|
|
|
|
* @LastEditTime: 2021-11-16 18:25:15
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
|
* @FilePath: /data-show/src/views/EventComparison/comparisonOfEventpp/index.vue
|
|
|
|
@ -11,75 +11,122 @@
|
|
|
|
|
<v-label-div title="事件传播历程对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
|
|
|
|
</v-label-div>
|
|
|
|
|
<div class="coe-ts" v-for="(item,index) in list" :key="index">
|
|
|
|
|
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
|
|
|
|
|
<div class="coe-ts-d1" @click="goL('vs'+(index+1))"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
|
|
|
|
|
<span class="coe-ts-s1" :style="{color: colors[index]}">{{item.Name|doStr(10)}}传播历程</span>
|
|
|
|
|
<div class="coe-ts-d2">
|
|
|
|
|
<vue-scroll>
|
|
|
|
|
<vue-scroll :ref="'vs'+(index+1)">
|
|
|
|
|
<div class="dd1-label">
|
|
|
|
|
<div class="d1">{{getEComparison[index].events_type}}</div>
|
|
|
|
|
<div class="d2">状态:事件发生</div>
|
|
|
|
|
<div class="d3">{{getEComparison[index].minSourcetime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<template v-for="(it,n) in item.Data">
|
|
|
|
|
<div class="dd1-item" :key="it._id">
|
|
|
|
|
<img class="m1" :src="n%2 != 0 ? m1 : m2" :style="n%2 != 0 ? 'transform:rotate(180deg);margin-top: 9rem' : 'transform:rotate(180deg)'" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" :style="n%2 != 0 ? 'margin-top: 9.1rem' : ''">
|
|
|
|
|
<div class="d1" :style="n%2 != 0 ? 'color: #CC7733' : 'color: #3373CC'" @click="openUrl(it._source.url)">{{it._source.title|doStr(30)}}</div>
|
|
|
|
|
<div class="d2">{{it._source.firstweb}}</div>
|
|
|
|
|
<div class="d3">{{it._source.firsttime}}</div>
|
|
|
|
|
<div class="dd1-item" :key="it._id">
|
|
|
|
|
<img class="m1" :src="n%2 != 0 ? m1 : m2" :style="n%2 != 0 ? 'transform:rotate(180deg);margin-top: 9rem' : 'transform:rotate(180deg)'" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" :style="n%2 != 0 ? 'margin-top: 9.1rem' : ''">
|
|
|
|
|
<div class="d1" :style="n%2 != 0 ? 'color: #CC7733' : 'color: #3373CC'" @click="openUrl(it._source.url)">{{it._source.title|doStr(30)}}</div>
|
|
|
|
|
<div class="d2">{{it._source.firstweb}}</div>
|
|
|
|
|
<div class="d3">{{it._source.firsttime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
|
|
|
|
|
<div class="coe-ts-d1" @click="goR('vs'+(index+1))"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {getListC} from "@/api/EventComparison"
|
|
|
|
|
import { getListC } from "@/api/EventComparison";
|
|
|
|
|
export default {
|
|
|
|
|
name: "comparisonOfEventpp",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
form: {
|
|
|
|
|
token: "",
|
|
|
|
|
sRele: ""
|
|
|
|
|
},
|
|
|
|
|
colors: ['#3373CC','#54BF93'],
|
|
|
|
|
token: "",
|
|
|
|
|
sRele: "",
|
|
|
|
|
},
|
|
|
|
|
colors: ["#3373CC", "#54BF93"],
|
|
|
|
|
m1: require("../../../assets/images/EventInsight/img_ct.png"),
|
|
|
|
|
m2: require("../../../assets/images/EventInsight/img_lt.png"),
|
|
|
|
|
list: []
|
|
|
|
|
list: [],
|
|
|
|
|
x1: 0,
|
|
|
|
|
x2: 0
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.initData()
|
|
|
|
|
this.initData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initData() {
|
|
|
|
|
this.form.token = this.getToken;
|
|
|
|
|
let arr = [];
|
|
|
|
|
this.getEComparison.forEach(ele => {
|
|
|
|
|
arr.push(ele.events_id);
|
|
|
|
|
})
|
|
|
|
|
this.form.sRele = arr.toString();
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
getData() {
|
|
|
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
|
|
|
getListC(obj).then(res => {
|
|
|
|
|
let data = res.data || [];
|
|
|
|
|
this.list = data;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
openUrl(url) {
|
|
|
|
|
window.open(url);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
initData() {
|
|
|
|
|
this.form.token = this.getToken;
|
|
|
|
|
let arr = [];
|
|
|
|
|
this.getEComparison.forEach((ele) => {
|
|
|
|
|
arr.push(ele.events_id);
|
|
|
|
|
});
|
|
|
|
|
this.form.sRele = arr.toString();
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
getData() {
|
|
|
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
|
|
|
getListC(obj).then((res) => {
|
|
|
|
|
let data = res.data || [];
|
|
|
|
|
this.list = data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
openUrl(url) {
|
|
|
|
|
window.open(url);
|
|
|
|
|
},
|
|
|
|
|
goL(name) {
|
|
|
|
|
let l = 0;
|
|
|
|
|
const { scrollLeft } = this.$refs[name][0].getPosition();
|
|
|
|
|
const {h} = this.$refs[name][0].getScrollProcess();
|
|
|
|
|
if(h === 0) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if(parseInt(name) === 2) {
|
|
|
|
|
this.x2 = scrollLeft;
|
|
|
|
|
this.x2 -= 150
|
|
|
|
|
l = this.x2
|
|
|
|
|
} else {
|
|
|
|
|
this.x1 = scrollLeft;
|
|
|
|
|
this.x1 -= 150
|
|
|
|
|
l = this.x1
|
|
|
|
|
}
|
|
|
|
|
this.$refs[name][0].scrollTo(
|
|
|
|
|
{
|
|
|
|
|
x: l,
|
|
|
|
|
},
|
|
|
|
|
300
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
goR(name) {
|
|
|
|
|
let r = 0;
|
|
|
|
|
const { scrollLeft } = this.$refs[name][0].getPosition();
|
|
|
|
|
const {h} = this.$refs[name][0].getScrollProcess();
|
|
|
|
|
if(h === 1) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if(parseInt(name) === 2) {
|
|
|
|
|
this.x2 = scrollLeft;
|
|
|
|
|
this.x2 += 150
|
|
|
|
|
r = this.x2
|
|
|
|
|
} else {
|
|
|
|
|
this.x1 = scrollLeft;
|
|
|
|
|
this.x1 += 150
|
|
|
|
|
r = this.x1
|
|
|
|
|
}
|
|
|
|
|
this.$refs[name][0].scrollTo(
|
|
|
|
|
{
|
|
|
|
|
x: r,
|
|
|
|
|
},
|
|
|
|
|
300
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|