| | |
|---|
| | | </template> |
|---|
| | | <script setup> |
|---|
| | | import * as echarts from 'echarts'; |
|---|
| | | import {onMounted,onBeforeUnmount,ref,computed} from "vue"; |
|---|
| | | import {onMounted, onBeforeUnmount, ref, computed, reactive} from "vue"; |
|---|
| | | import SUZHOU from './map.json' |
|---|
| | | import {getAvoidList} from "@/api/hazardousChemicals/avoid"; |
|---|
| | | import {ElMessage} from "element-plus"; |
|---|
| | | // 表格数据 |
|---|
| | | const companyData = [ |
|---|
| | | { id: 1, rank: 1, company: '化工企业A', warehouse: '仓库1', warning: '相忌预警' }, |
|---|
| | |
|---|
| | | { id: 11, rank: 11, company: '化工企业K', warehouse: '仓库11', warning: '' }, |
|---|
| | | { id: 12, rank: 12, company: '化工企业L', warehouse: '仓库12', warning: '' }, |
|---|
| | | ] |
|---|
| | | |
|---|
| | | // const companyData = ref([]) |
|---|
| | | // 配置参数 |
|---|
| | | const visibleRows = 8 // 显示的行数 |
|---|
| | | const scrollSpeed = 1 // 每次滚动的像素数 |
|---|
| | |
|---|
| | | let animationFrame = null |
|---|
| | | |
|---|
| | | onMounted(()=>{ |
|---|
| | | // getList() |
|---|
| | | initChart() |
|---|
| | | // 设置视口高度 |
|---|
| | | if (viewport.value) { |
|---|
| | |
|---|
| | | cancelAnimationFrame(animationFrame) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // const getList = async () => { |
|---|
| | | // const res = await getAvoidList({warningType: '', companyId: null}) |
|---|
| | | // if(res.code == 200){ |
|---|
| | | // companyData.value = res.data |
|---|
| | | // console.log(companyData.value,555) |
|---|
| | | // }else{ |
|---|
| | | // ElMessage.warning(res.message) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // 复制前几行数据用于循环 |
|---|
| | | const loopData = computed(() => { |
|---|
| | |
|---|
| | | .scroll-content { |
|---|
| | | will-change: transform; /* 优化性能 */ |
|---|
| | | } |
|---|
| | | .danger { |
|---|
| | | color: #ff2f2f; |
|---|
| | | animation: blink 1s infinite; |
|---|
| | | } |
|---|
| | | .warning { |
|---|
| | | color: #ff0000; |
|---|
| | | color: yellow; |
|---|
| | | animation: blink 1s infinite; |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | @keyframes blink { |
|---|
| | | 0% { opacity: 1; } |
|---|
| | | 50% { opacity: 0.7; } |
|---|
| | | 50% { opacity: 0.8; } |
|---|
| | | 100% { opacity: 1; } |
|---|
| | | } |
|---|
| | | |
|---|
