|
|
|
|
@ -1,22 +1,138 @@
|
|
|
|
|
<!-- 三级指标详细信息展示 -->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="massage_body">
|
|
|
|
|
<div class="note_text"></div>
|
|
|
|
|
<div class="massage_body">
|
|
|
|
|
<div class="note_text">{{ this.note.titleNote }}</div>
|
|
|
|
|
<div class="three_table">
|
|
|
|
|
<div class="three_table_top">
|
|
|
|
|
<div class="title_btn">
|
|
|
|
|
<div class="title">指数归一化设置:</div>
|
|
|
|
|
<el-button icon="el-icon-plus">增加数量分级</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table></el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: "indexmassageThree",
|
|
|
|
|
data() {
|
|
|
|
|
return {};
|
|
|
|
|
},
|
|
|
|
|
import bus from "@/assets/js/eventBus.js";
|
|
|
|
|
import { getIndexTable } from "@/api/systemManagement/safeIndex";
|
|
|
|
|
export default {
|
|
|
|
|
name: "indexmassageThree",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
note_arr: [], // 树形总数据，以用于按照id查询三级数据
|
|
|
|
|
two_level_arr: [], // 遍及出来的二级数据
|
|
|
|
|
three_level_arr: [], // 遍及出来的三级数据
|
|
|
|
|
three_level_id: "",
|
|
|
|
|
note: "", // 三级指标点击展示字段
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
bus.$on("send_three", (data) => {
|
|
|
|
|
console.log("data", data);
|
|
|
|
|
this.three_level_id = data.safeRuleId; // 根据传来的id找对应的三级数据
|
|
|
|
|
const new_arr = this.three_level_arr.filter(
|
|
|
|
|
(item) => item.id == this.three_level_id
|
|
|
|
|
);
|
|
|
|
|
console.log("new_arr", new_arr);
|
|
|
|
|
this.note = JSON.parse(new_arr[0].note);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
// 先获取到整体的数据，然后再逐层遍历，最终获得全部的三级数据的集合
|
|
|
|
|
getIndexTable().then((res) => {
|
|
|
|
|
console.log("res", res.data);
|
|
|
|
|
this.note_arr = res.data;
|
|
|
|
|
for (let i = 0; i < this.note_arr.length; i++) {
|
|
|
|
|
console.log("1", this.note_arr[i].tbSafeRuleTwoVoList);
|
|
|
|
|
// 拿到所有的二级指标数据数组
|
|
|
|
|
this.two_level_arr = this.two_level_arr.concat(
|
|
|
|
|
this.note_arr[i].tbSafeRuleTwoVoList
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < this.two_level_arr.length; i++) {
|
|
|
|
|
// 拿到所有的三级指标数据数组
|
|
|
|
|
this.three_level_arr = this.three_level_arr.concat(
|
|
|
|
|
this.two_level_arr[i].tbSafeRuleThreeVoList
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
console.log("this.three_level_arr", this.three_level_arr);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.massage_body {
|
|
|
|
|
margin-top: 2vh;
|
|
|
|
|
width: 52.5vw;
|
|
|
|
|
height: 52vh;
|
|
|
|
|
border: 0.1px solid #4d8f89;
|
|
|
|
|
.massage_body {
|
|
|
|
|
margin-top: 2vh;
|
|
|
|
|
width: 52.5vw;
|
|
|
|
|
height: 52vh;
|
|
|
|
|
border: 0.1px solid #4d8f89;
|
|
|
|
|
.note_text {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
margin-left: 0.4vw;
|
|
|
|
|
width: 51.5vw;
|
|
|
|
|
height: 4.5vh;
|
|
|
|
|
border-bottom: 0.1px solid #4d8f89;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
line-height: 4.5vh;
|
|
|
|
|
}
|
|
|
|
|
.three_table {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
margin-left: 0.4vw;
|
|
|
|
|
width: 51.5vw;
|
|
|
|
|
height: 44.5vh;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
border: 0.1px solid #4d8f89;
|
|
|
|
|
.three_table_top {
|
|
|
|
|
margin-left: 0.2vw;
|
|
|
|
|
margin-top: 0.5vh;
|
|
|
|
|
width: 51vw;
|
|
|
|
|
border: 0.1px solid #4d8f89;
|
|
|
|
|
.title_btn {
|
|
|
|
|
margin-left: 0.5vw;
|
|
|
|
|
margin-top: 0.5vh;
|
|
|
|
|
width: 50vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
}
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 7vw;
|
|
|
|
|
border: 1px solid #4a6072;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 0px !important;
|
|
|
|
|
background: #323f43;
|
|
|
|
|
}
|
|
|
|
|
.el-button:focus,
|
|
|
|
|
.el-button:hover {
|
|
|
|
|
color: #34e1b3;
|
|
|
|
|
filter: brightness(150%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.three_table::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
background-color: #5e666a;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.three_table::-webkit-scrollbar-thumb {
|
|
|
|
|
width: 5px;
|
|
|
|
|
background-color: #3c4b4a;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
