| | |
| | | <template> |
| | | <div class="charts-container"> |
| | | <div class="table-wrapper"> |
| | | <table class="scrollable-table"> |
| | | <thead> |
| | | <tr> |
| | | <th>排名</th> |
| | | <th>企业名称</th> |
| | | <th>危化品仓库</th> |
| | | <th>预警信息</th> |
| | | </tr> |
| | | </thead> |
| | | </table> |
| | | <div class="scroll-viewport" ref="viewport"> |
| | | <div class="scroll-content" :style="contentStyle"> |
| | | <table class="scrollable-table"> |
| | | <tbody> |
| | | <tr v-for="item in companyData" :key="item.id"> |
| | | <td>{{ item.rank }}</td> |
| | | <td>{{ item.company }}</td> |
| | | <td>{{ item.warehouse }}</td> |
| | | <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td> |
| | | </tr> |
| | | <tr v-for="item in loopData" :key="`loop-${item.id}`"> |
| | | <td>{{ item.rank }}</td> |
| | | <td>{{ item.company }}</td> |
| | | <td>{{ item.warehouse }}</td> |
| | | <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | <div class="container-left"> |
| | | <div class="filter"> |
| | | <el-select |
| | | clearable |
| | | :teleported="false" |
| | | v-model="companyType" |
| | | filterable |
| | | placeholder="请选择企业类型" |
| | | style="width: 100%" |
| | | remote |
| | | remote-show-suffix |
| | | :remote-method="getList" |
| | | > |
| | | <el-option |
| | | v-for="item in typeList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </div> |
| | | <div class="table-wrapper"> |
| | | <table class="scrollable-table"> |
| | | <thead> |
| | | <tr> |
| | | <th>序号</th> |
| | | <th>企业名称</th> |
| | | <th>危化品仓库</th> |
| | | <th>预警信息</th> |
| | | </tr> |
| | | </thead> |
| | | </table> |
| | | <div class="scroll-viewport" ref="viewport"> |
| | | <div class="scroll-content" :style="contentStyle"> |
| | | <table class="scrollable-table"> |
| | | <tbody> |
| | | <tr v-for="(item,index) in companyData" :key="item.id"> |
| | | <td>{{ index + 1 }}</td> |
| | | <td>{{ item.companyName }}</td> |
| | | <td>{{ item.warehouseCount }}</td> |
| | | <td>{{ item.warningCount }}</td> |
| | | </tr> |
| | | <tr v-for="(item,index) in loopData" :key="`loop-${item.id}`"> |
| | | <td>{{ index + 1 }}</td> |
| | | <td>{{ item.companyName }}</td> |
| | | <td>{{ item.warehouseCount }}</td> |
| | | <td>{{ item.warningCount }}</td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import SUZHOU from './map.json' |
| | | import {getAvoidList} from "@/api/hazardousChemicals/avoid"; |
| | | import {ElMessage} from "element-plus"; |
| | | import {getCompanyMessage} from "@/api/monitor/screenCharts"; |
| | | // 表格数据 |
| | | const companyData = [ |
| | | { id: 1, rank: 1, company: '化工企业A', warehouse: '仓库1', warning: '相忌预警' }, |
| | | { id: 2, rank: 2, company: '化工企业B', warehouse: '仓库2', warning: '' }, |
| | | { id: 3, rank: 3, company: '化工企业C', warehouse: '仓库3', warning: '超期预警' }, |
| | | { id: 4, rank: 4, company: '化工企业D', warehouse: '仓库4', warning: '' }, |
| | | { id: 5, rank: 5, company: '化工企业E', warehouse: '仓库5', warning: '' }, |
| | | { id: 6, rank: 6, company: '化工企业F', warehouse: '仓库6', warning: '超期预警' }, |
| | | { id: 7, rank: 7, company: '化工企业G', warehouse: '仓库7', warning: '' }, |
| | | { id: 8, rank: 8, company: '化工企业H', warehouse: '仓库8', warning: '' }, |
| | | { id: 9, rank: 9, company: '化工企业I', warehouse: '仓库9', warning: '' }, |
| | | { id: 10, rank: 10, company: '化工企业J', warehouse: '仓库10', warning: '' }, |
| | | { id: 11, rank: 11, company: '化工企业K', warehouse: '仓库11', warning: '' }, |
| | | { id: 12, rank: 12, company: '化工企业L', warehouse: '仓库12', warning: '' }, |
| | | ] |
| | | // const companyData = ref([]) |
| | | const companyData = ref([]) |
| | | // 配置参数 |
| | | const visibleRows = 8 // 显示的行数 |
| | | const scrollSpeed = 1 // 每次滚动的像素数 |
| | | const scrollSpeed = 0.5 // 每次滚动的像素数 |
| | | const rowHeight = 40 // 行高,与CSS一致 |
| | | const viewport = ref(null) |
| | | const scrollPosition = ref(0) |
| | | let animationFrame = null |
| | | |
| | | onMounted(()=>{ |
| | | // getList() |
| | | getList() |
| | | initChart() |
| | | // 设置视口高度 |
| | | if (viewport.value) { |
| | |
| | | } |
| | | }) |
| | | |
| | | // 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 companyType = ref('') |
| | | const typeList = [ |
| | | { |
| | | id: 0, |
| | | name: '研发类' |
| | | }, |
| | | { |
| | | id: 1, |
| | | name: '生产类' |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: '中试类' |
| | | } |
| | | ] |
| | | |
| | | const getList = async () => { |
| | | const res = await getCompanyMessage(companyType.value) |
| | | if(res.code == 200){ |
| | | companyData.value = res.data |
| | | // console.log(companyData.value,555) |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | // 复制前几行数据用于循环 |
| | | const loopData = computed(() => { |
| | | return companyData.slice(0, visibleRows) |
| | | return companyData.value.slice(0, visibleRows) |
| | | }) |
| | | |
| | | // 内容区域样式 |
| | |
| | | |
| | | // 滚动动画 |
| | | const scrollAnimation = () => { |
| | | const totalHeight = companyData.length * rowHeight |
| | | const totalHeight = companyData.value.length * rowHeight |
| | | const loopHeight = loopData.value.length * rowHeight |
| | | // 更新滚动位置 |
| | | scrollPosition.value += scrollSpeed |
| | |
| | | display: flex; |
| | | align-items: flex-start; |
| | | } |
| | | |
| | | .container-left{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | width: 300px; |
| | | } |
| | | |
| | | .filter{ |
| | | width: 300px; |
| | | } |
| | | :deep(.el-input__wrapper){ |
| | | height: 28px; |
| | | box-shadow: none; |
| | | border: 1px solid #11FEEE; |
| | | background: rgba(6,24,88,.6); |
| | | color: #fff; |
| | | } |
| | | :deep(.el-input__inner){ |
| | | color: #02CDE6; |
| | | } |
| | | :deep(.el-input .el-select__caret){ |
| | | color: #02CDE6 |
| | | } |
| | | :deep(.el-popper.is-light){ |
| | | background: rgb(8,44,97); |
| | | .el-select-dropdown__item{ |
| | | color: #fff; |
| | | &:hover{ |
| | | background: #015fb0; |
| | | } |
| | | } |
| | | } |
| | | .table-wrapper { |
| | | position: relative; |
| | | width: 300px; |
| | | margin-top: 30px; |
| | | margin-top: 10px; |
| | | border: 1px solid rgba(255,255,255,.1); |
| | | border-radius: 2px; |
| | | overflow: hidden; |