91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="political-outlook">
|
||
|
|
<el-scrollbar class="scrollbar" ref="refScrollbar">
|
||
|
|
<div class="radar-map_list">
|
||
|
|
<div class="map-list" v-for="item in randerInfo.randerList" :key="item.id">
|
||
|
|
<radarMapOption :randerInfo="item" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
|
||
|
|
import { onMounted, reactive, ref } from "vue";
|
||
|
|
// import { GlobalStore } from "@/stores";
|
||
|
|
// const store = GlobalStore();
|
||
|
|
const props = defineProps(["tip", "randerDetail"]);
|
||
|
|
|
||
|
|
const randerInfo = reactive({
|
||
|
|
randerList: [] as any[],
|
||
|
|
randerTitleList: ["未来三天人员风险概率预测", "未来三天事故风险概率预测", "未来三天安全隐患风险概率预测"],
|
||
|
|
moreScroll: true
|
||
|
|
});
|
||
|
|
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||
|
|
onMounted(async () => {
|
||
|
|
console.log(props.randerDetail);
|
||
|
|
for (let index = 0; index < 4; index++) {
|
||
|
|
randerInfo.randerList.push({
|
||
|
|
id: `list${index}`,
|
||
|
|
radius: "70%",
|
||
|
|
isLegend: "top",
|
||
|
|
radarCenter: ["50%", "60%"],
|
||
|
|
dataList: [
|
||
|
|
{
|
||
|
|
value: [4200, 3000, 20000, 35000, 50000],
|
||
|
|
name: "项目事故风险概率预测"
|
||
|
|
// areaStyle: {}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
indicator: [
|
||
|
|
{ name: "恶劣天气占比", max: 6500 },
|
||
|
|
{ name: "人员风险概率", max: 16000 },
|
||
|
|
{ name: "特殊作业风险概率", max: 30000 },
|
||
|
|
{ name: "月度安全评分", max: 38000 },
|
||
|
|
{ name: "隐患未整改占比", max: 52000 }
|
||
|
|
],
|
||
|
|
titleInfo: {
|
||
|
|
titleLeft: randerInfo.randerTitleList[props.randerDetail.radarType - 1],
|
||
|
|
// titleRight: "查看各企业应急事故风险概率预测",
|
||
|
|
percentage: 80
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||
|
|
const scrollTop = e.target.scrollTop;
|
||
|
|
const scrollHeight = e.target.scrollHeight;
|
||
|
|
const clientHeight = e.target.clientHeight;
|
||
|
|
// 向上加载更多
|
||
|
|
if (scrollTop >= scrollHeight - clientHeight - 1) {
|
||
|
|
if (randerInfo.moreScroll) {
|
||
|
|
// getMemberCountList("more");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.political-outlook {
|
||
|
|
height: 97%;
|
||
|
|
margin: 50px 60px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scrollbar {
|
||
|
|
height: 85%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radar-map_list {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.map-list {
|
||
|
|
width: 33%;
|
||
|
|
height: 290px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|