加载echarts
This commit is contained in:
parent
1507e2b4b4
commit
b36c27f911
BIN
src/assets/images/logo/mainmao.png
Normal file
BIN
src/assets/images/logo/mainmao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
58
src/components/Chart32_Inspection(1).vue
Normal file
58
src/components/Chart32_Inspection(1).vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// --- 原始数据 ---
|
||||
const originalData = {
|
||||
'2024-06-19 15:57': 2280, '2024-06-20 15:57': 612, '2024-06-21 15:57': 261,
|
||||
'2024-06-22 15:57': 258, '2024-06-23 15:57': 110, '2024-06-24 15:57': 80,
|
||||
'2024-06-25 15:57': 51, '2024-06-26 15:57': 18, '2024-06-27 15:57': 10,
|
||||
'2024-06-28 15:57': 10, '2024-06-29 15:57': 2, '2024-06-30 15:57': 2,
|
||||
'2024-07-01 15:57': 2
|
||||
};
|
||||
|
||||
// --- Y轴镜像转换 ---
|
||||
const xAxisData = Object.keys(originalData);
|
||||
// 关键：将Y轴数据数组反转
|
||||
const yAxisMirroredData = Object.values(originalData).reverse();
|
||||
|
||||
// --- ECharts 核心逻辑 ---
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '中国海警首次登检菲律宾运补船只 (Y轴镜像)',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { rotate: 30 }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '热度',
|
||||
data: yAxisMirroredData,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {} // 添加面积图样式
|
||||
}]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
60
src/components/Chart33_WavingBlades(1).vue
Normal file
60
src/components/Chart33_WavingBlades(1).vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// --- 原始数据 ---
|
||||
const originalData = {
|
||||
'2024-06-19 21:36': 416, '2024-06-20 09:36': 796, '2024-06-20 21:36': 403,
|
||||
'2024-06-21 09:36': 236, '2024-06-21 21:36': 33, '2024-06-22 09:36': 29,
|
||||
'2024-06-22 21:36': 11, '2024-06-23 09:36': 10, '2024-06-23 21:36': 5,
|
||||
'2024-06-24 09:36': 10, '2024-06-24 21:36': 7, '2024-06-25 09:36': 1,
|
||||
'2024-06-25 21:36': 4, '2024-06-26 09:36': 6, '2024-06-26 21:36': 5,
|
||||
'2024-06-27 09:36': 5, '2024-06-27 21:36': 2, '2024-06-28 09:36': 1,
|
||||
'2024-06-28 21:36': 0, '2024-06-29 09:36': 1, '2024-06-29 21:36': 1
|
||||
};
|
||||
|
||||
// --- Y轴镜像转换 ---
|
||||
const xAxisData = Object.keys(originalData);
|
||||
const yAxisMirroredData = Object.values(originalData).reverse();
|
||||
|
||||
// --- ECharts 核心逻辑 ---
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '中方回应菲称我海警挥舞刀具 (Y轴镜像)',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { rotate: 30 }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '热度',
|
||||
data: yAxisMirroredData,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: { color: '#5470c6' },
|
||||
areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(84, 112, 198, 0.4)' }, { offset: 1, color: 'rgba(84, 112, 198, 0)' }])}
|
||||
}]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
55
src/components/Chart34_RecoveredGoods(1).vue
Normal file
55
src/components/Chart34_RecoveredGoods(1).vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// --- 原始数据 ---
|
||||
const originalData = {
|
||||
'2024-06-20 13:08': 1711, '2024-06-21 13:08': 294, '2024-06-22 13:08': 49,
|
||||
'2024-06-23 13:08': 19, '2024-06-24 13:08': 6, '2024-06-25 13:08': 5,
|
||||
'2024-06-26 13:08': 1, '2024-06-27 13:08': 0, '2024-06-28 13:08': 0,
|
||||
'2024-06-29 13:08': 0, '2024-06-30 13:08': 1, '2024-07-01 13:08': 1
|
||||
};
|
||||
|
||||
// --- Y轴镜像转换 ---
|
||||
const xAxisData = Object.keys(originalData);
|
||||
const yAxisMirroredData = Object.values(originalData).reverse();
|
||||
|
||||
// --- ECharts 核心逻辑 ---
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '中国海警夺回菲方盗窃赃物 (Y轴镜像)',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { rotate: 30 }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '热度',
|
||||
data: yAxisMirroredData,
|
||||
type: 'bar', // 使用柱状图
|
||||
itemStyle: { color: '#91cc75' }
|
||||
}]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
58
src/components/Chart35_SpecialForces(1).vue
Normal file
58
src/components/Chart35_SpecialForces(1).vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// --- 原始数据 ---
|
||||
const originalData = {
|
||||
'2024-06-22 17:10': 10, '2024-06-23 05:10': 1255, '2024-06-23 17:10': 801,
|
||||
'2024-06-24 05:10': 281, '2024-06-24 17:10': 48, '2024-06-25 05:10': 65,
|
||||
'2024-06-25 17:10': 30, '2024-06-26 05:10': 32, '2024-06-26 17:10': 16,
|
||||
'2024-06-27 05:10': 7, '2024-06-27 17:10': 5, '2024-06-28 05:10': 2,
|
||||
'2024-06-28 17:10': 1, '2024-06-29 05:10': 1, '2024-06-29 17:10': 1,
|
||||
'2024-06-30 05:10': 4, '2024-06-30 17:10': 1, '2024-07-01 05:10': 4
|
||||
};
|
||||
|
||||
// --- Y轴镜像转换 ---
|
||||
const xAxisData = Object.keys(originalData);
|
||||
const yAxisMirroredData = Object.values(originalData).reverse();
|
||||
|
||||
// --- ECharts 核心逻辑 ---
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '菲自曝被缴枪的是顶级特种部队 (Y轴镜像)',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { rotate: 30 }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '热度',
|
||||
data: yAxisMirroredData,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: { color: '#fac858' }
|
||||
}]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
59
src/components/Chart36_Dialogue(1).vue
Normal file
59
src/components/Chart36_Dialogue(1).vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// --- 原始数据 ---
|
||||
const originalData = {
|
||||
'2024-06-25 15:05': 169, '2024-06-25 21:05': 186, '2024-06-26 03:05': 31,
|
||||
'2024-06-26 09:05': 8, '2024-06-26 15:05': 1, '2024-06-26 21:05': 2,
|
||||
'2024-06-27 03:05': 1, '2024-06-27 09:05': 0, '2024-06-27 15:05': 1,
|
||||
'2024-06-27 21:05': 0, '2024-06-28 03:05': 0, '2024-06-28 09:05': 0,
|
||||
'2024-06-28 15:05': 0, '2024-06-28 21:05': 0, '2024-06-29 03:05': 0,
|
||||
'2024-06-29 09:05': 0, '2024-06-29 15:05': 0, '2024-06-29 21:05': 0,
|
||||
'2024-06-30 03:05': 0, '2024-06-30 09:05': 1
|
||||
};
|
||||
|
||||
// --- Y轴镜像转换 ---
|
||||
const xAxisData = Object.keys(originalData);
|
||||
const yAxisMirroredData = Object.values(originalData).reverse();
|
||||
|
||||
// --- ECharts 核心逻辑 ---
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '菲希望与中国就南海问题对话 (Y轴镜像)',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { rotate: 30 }
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '热度',
|
||||
data: yAxisMirroredData,
|
||||
type: 'line',
|
||||
step: 'start', // 使用阶梯线图
|
||||
itemStyle: { color: '#ee6666' }
|
||||
}]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,31 +1,8 @@
|
|||
<<<<<<< HEAD
|
||||
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%;">
|
||||
<div class="graph-box" id="graph-container"></div>
|
||||
<div class="slider-box">
|
||||
=======
|
||||
<!-- <script setup>
|
||||
// import { RouterView } from 'vue-router'
|
||||
// import HelloWorld from './components/HelloWorld.vue'
|
||||
// import Visualize from '../views/visualize/index.vue'
|
||||
// import graphData from "../views/visualize/data/graphData.ts"
|
||||
</script> -->
|
||||
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div class="graph-box" id="graph-container"></div>
|
||||
<div class="slider-box">
|
||||
<button @click="handleCombineAction">定位并高亮</button>
|
||||
<el-button
|
||||
@click="toggleAutoPlay"
|
||||
:loading="state.isProcessingAutoPlay"
|
||||
:disabled="!Object.keys(state.marks).length"
|
||||
:class="{'el-button--danger': state.isAutoPlaying}"
|
||||
>
|
||||
{{ state.isAutoPlaying ? '停止播放' : '开始自动播放' }}
|
||||
</el-button>
|
||||
>>>>>>> main
|
||||
<el-slider v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,63 +10,25 @@
|
|||
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
<<<<<<< HEAD
|
||||
import { onMounted, reactive } from "vue";
|
||||
import { Graph } from "@antv/g6";
|
||||
import { ElLoading } from 'element-plus';
|
||||
|
||||
=======
|
||||
import { onMounted,onUnmounted, reactive, watch } from "vue";
|
||||
import { Graph } from "@antv/g6";
|
||||
import { ElLoading } from 'element-plus';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useActionStore } from '@/store';
|
||||
>>>>>>> main
|
||||
const state = reactive({
|
||||
graph: null,
|
||||
marks: {
|
||||
'0': "2024-01-03",
|
||||
'10': "2024-01-04",
|
||||
'20': "2024-01-05",
|
||||
<<<<<<< HEAD
|
||||
'30': "2024-03-16",
|
||||
'40': "2024-03-17",
|
||||
'50': "2024-04-08",
|
||||
'30': "2024-03-14",
|
||||
'40': "2024-03-16",
|
||||
'60': "2024-05-26",
|
||||
'70': "2024-06-21",
|
||||
'80': "2024-06-24",
|
||||
'90': "2024-06-27",
|
||||
'100': "2024-06-28"
|
||||
},
|
||||
sliderValue: 0,
|
||||
loadingInstance: null
|
||||
})
|
||||
=======
|
||||
'30': "2024-03-14",
|
||||
'40': "2024-03-25",
|
||||
'60': "2024-04-01",
|
||||
'70': "2024-05-12",
|
||||
'90': "2024-06-23",
|
||||
'100': "2024-06-28"
|
||||
},
|
||||
sliderValue: 0,
|
||||
loadingInstance: null,
|
||||
isAutoPlaying: false,
|
||||
isProcessingAutoPlay: false, // 修正：防止重复点击的处理状态
|
||||
remainingTime: 0, // 新增：记录暂停时剩余时间
|
||||
})
|
||||
const actionStore = useActionStore();
|
||||
|
||||
watch(() => actionStore.triggerCombineAction, (value) => {
|
||||
if (value) {
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
setTimeout(() => {
|
||||
highlightNode(actionStore.targetNodeId);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
>>>>>>> main
|
||||
let loadingInstance = null;
|
||||
// 显示 Loading 组件
|
||||
const showLoading = () => {
|
||||
|
|
@ -120,13 +59,7 @@ const sliderChange = (val) => {
|
|||
const getData = async (dataTime) => {
|
||||
showLoading()
|
||||
const res = await axios.get("http://10.7.1.52:1922/demo/edge/getEdgeData", {
|
||||
<<<<<<< HEAD
|
||||
params: { dataTime }
|
||||
=======
|
||||
params:
|
||||
{ dataTime }
|
||||
|
||||
>>>>>>> main
|
||||
});
|
||||
if (res.data.code == 200) {
|
||||
createGraph(res.data.data)
|
||||
|
|
@ -194,84 +127,12 @@ const createGraph = (data) => {
|
|||
});
|
||||
state.graph = graph
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
// 增强按钮点击处理逻辑
|
||||
const toggleAutoPlay = () => {
|
||||
// 防止重复点击
|
||||
if (state.isProcessingAutoPlay) return;
|
||||
state.isProcessingAutoPlay = true;
|
||||
|
||||
try {
|
||||
if (state.isAutoPlaying) {
|
||||
// 停止播放流程
|
||||
if (state.autoPlayTimer) {
|
||||
clearInterval(state.autoPlayTimer);
|
||||
state.autoPlayTimer = null;
|
||||
}
|
||||
state.isAutoPlaying = false;
|
||||
state.isPaused = false;
|
||||
// 停止图形库动画
|
||||
if (state.graph?.stop) state.graph.stop();
|
||||
ElMessage.success('自动播放已停止');
|
||||
} else {
|
||||
// 开始播放流程
|
||||
const markValues = Object.keys(state.marks).map(Number).sort((a, b) => a - b);
|
||||
if (markValues.length <= 1) {
|
||||
ElMessage.warning('标记点不足，无法启动自动播放');
|
||||
return;
|
||||
}
|
||||
|
||||
state.isAutoPlaying = true;
|
||||
state.autoPlayTimer = setInterval(() => {
|
||||
const currentIndex = markValues.indexOf(state.sliderValue);
|
||||
const nextIndex = currentIndex + 1;
|
||||
|
||||
if (nextIndex >= markValues.length) {
|
||||
// 播放完成自动停止
|
||||
clearInterval(state.autoPlayTimer);
|
||||
state.autoPlayTimer = null;
|
||||
state.isAutoPlaying = false;
|
||||
ElMessage.success('所有标记点已播放完成');
|
||||
return;
|
||||
}
|
||||
|
||||
state.sliderValue = markValues[nextIndex];
|
||||
sliderChange(state.sliderValue);
|
||||
}, 12000);
|
||||
ElMessage.success('自动播放已启动');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('自动播放控制错误:', error);
|
||||
ElMessage.error('操作失败，请重试');
|
||||
// 错误恢复
|
||||
if (state.autoPlayTimer) {
|
||||
clearInterval(state.autoPlayTimer);
|
||||
state.autoPlayTimer = null;
|
||||
}
|
||||
state.isAutoPlaying = false;
|
||||
state.isPaused = false;
|
||||
} finally {
|
||||
state.isProcessingAutoPlay = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocationClick = () => {
|
||||
// 根据marks数据，3.14对应的值是30
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
}
|
||||
>>>>>>> main
|
||||
|
||||
/**
|
||||
* 高亮节点
|
||||
* @param id 节点id
|
||||
*/
|
||||
<<<<<<< HEAD
|
||||
const highlightNode = (id) => {
|
||||
=======
|
||||
const highlightNode = (id) => {
|
||||
>>>>>>> main
|
||||
state.graph.getNodes().forEach((node) => {
|
||||
state.graph.clearItemStates(node, "selected");
|
||||
});
|
||||
|
|
@ -290,37 +151,14 @@ const highlightNode = (id) => {
|
|||
}
|
||||
});
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
const handleCombineAction = () => {
|
||||
// 先执行定位操作
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
|
||||
// 延迟执行高亮操作，确保定位完成后再高亮
|
||||
setTimeout(() => {
|
||||
highlightNode('840983');
|
||||
}, 500);
|
||||
}
|
||||
>>>>>>> main
|
||||
|
||||
onMounted(() => {
|
||||
getData('2024-01-03')
|
||||
})
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
onUnmounted(() => {
|
||||
// 组件卸载时清除定时器
|
||||
if (state.autoPlayTimer) {
|
||||
clearInterval(state.autoPlayTimer);
|
||||
}
|
||||
})
|
||||
>>>>>>> main
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-box {
|
||||
<<<<<<< HEAD
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -328,15 +166,4 @@ onUnmounted(() => {
|
|||
.slider-box {
|
||||
margin-top: -230px;
|
||||
}
|
||||
=======
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.slider-box {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
>>>>>>> main
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
|
||||
|
||||
<div class="main">
|
||||
<div v-if="showTooltip" class="tooltip">
|
||||
<div class="tooltip-containner">
|
||||
<img src="../assets/images/mess/key.png" alt="">
|
||||
<div class="tooltip-containner-data">
|
||||
<li><img :src="currentItem.img" alt="" style=""></li>
|
||||
<li><img :src="currentItem.imgdata" alt="" style="width: 500px;height: 400px;margin-left: 20px;"></li>
|
||||
<li><chart32_-inspection /></li>
|
||||
<li style="margin-left: 10px; margin-top: 20px;"><img src="../assets/images/logo/point.png"
|
||||
alt="">最初首发者： {{ currentItem.earler }} </li>
|
||||
<li style="margin-left: 10px;"><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter
|
||||
|
|
@ -104,6 +104,9 @@
|
|||
</div>
|
||||
<div class="suggestion-containner">
|
||||
<ul>
|
||||
<button
|
||||
style="background-image: url('src/assets/images/logo/定位.png'); background-size: cover; background-repeat: no-repeat; background-position: center;width: 20px;height: 20px;margin-left: 370px;margin-bottom: -60px;border-radius: 0px;border: 0;cursor: pointer;"
|
||||
@click.stop="handleCombineAction"></button>
|
||||
<li v-for="item in filteredData" :key="item.id" @click="openDetailModal(item)"
|
||||
@mouseenter="handleMouseEnter(item.id)" @mouseleave="handleMouseLeave()"
|
||||
:class="{ 'hover-item': hoverItemId === item.id }">
|
||||
|
|
@ -113,11 +116,7 @@
|
|||
<span class="span-1">{{ item.name }}</span>
|
||||
<span class="span-2">粉丝数： {{ item.number }}</span>
|
||||
<span class="span-3">推荐监控频率{{ item.transmit }}</span>
|
||||
<button
|
||||
style="background-image: url('src/assets/images/logo/定位.png'); background-size: cover; background-repeat: no-repeat; background-position: center;width: 20px;height: 20px;margin-left: 240px;margin-top:-45px;border-radius: 0px;border: 0;cursor: pointer;"
|
||||
@click.stop="handleCombineAction"></button>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -213,7 +212,8 @@ import ScrollContainer from '@/components/ScrollContainer.vue';
|
|||
import * as echarts from 'echarts';
|
||||
import axios from 'axios';
|
||||
import { useActionStore } from '@/store';
|
||||
// import { positionElement } from 'echarts/types/src/util/layout.js';
|
||||
import Chart32_Inspection from '@/components/Chart32_Inspection(1).vue';
|
||||
|
||||
|
||||
let myChart = null;
|
||||
const router = useRouter();
|
||||
|
|
@ -871,7 +871,7 @@ const startDataSwitchTimer = () => {
|
|||
}, TIMER.DATA_SWITCH_DURATION);
|
||||
timers.push(interval, timeout);
|
||||
};
|
||||
|
||||
|
||||
// 添加组件引用
|
||||
const appRef = ref(null);
|
||||
|
||||
|
|
@ -880,7 +880,7 @@ const handleLocationClick = (itemId) => {
|
|||
// 设置slider值为30并触发定位
|
||||
state.sliderValue = 30;
|
||||
sliderChange(30);
|
||||
|
||||
|
||||
// 使用传入的itemId进行高亮
|
||||
setTimeout(() => {
|
||||
highlightNode(itemId);
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
:class="{ active: route.path === '/Main' }"
|
||||
@click="goToPage('/Main')"
|
||||
>
|
||||
<img src="../assets/images/logo/mao.png" alt="" style="
|
||||
<img src="../assets/images/logo/mainmao.png" alt="" style="
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -352,7 +352,6 @@ margin-top: -148px;
|
|||
/* 添加 z-index 属性 */
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
animation: breathe 2s infinite ease-in-out;
|
||||
|
||||
}
|
||||
/* 定义呼吸效果关键帧 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user