92 lines
2.4 KiB
Vue
92 lines
2.4 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 randerDetail.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, 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>
|