543 lines
13 KiB
Vue
543 lines
13 KiB
Vue
<template>
|
|
<div class="list-detail" v-if="showDialog" @click="handleClick">
|
|
<div class="dialog-content">
|
|
<div class="dialog-title">
|
|
<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
|
|
<div class="title-text">
|
|
<i>{{ dialogTitle }}</i>
|
|
</div>
|
|
</div>
|
|
<div class="base-info">
|
|
<div class="base-title" style="margin-left: 3%">基本信息</div>
|
|
<div class="base-content">
|
|
<div class="base-left">
|
|
<div class="base-text">
|
|
<div>工程名称</div>
|
|
<div>{{ projectTimeInfo.name || "" }}</div>
|
|
</div>
|
|
<div class="base-text">
|
|
<div>试验类型</div>
|
|
<div v-if="detailData.testType > 0 && detailData.testType < 17">{{ warnType[detailData.testType - 1].label }}</div>
|
|
<div v-else>-</div>
|
|
</div>
|
|
<div class="base-text">
|
|
<div>试验编号</div>
|
|
<div>{{ detailData.testNumber || "" }}</div>
|
|
</div>
|
|
<div class="base-text">
|
|
<div>设备名称</div>
|
|
<div>{{ detailData.deviceName || "" }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="base-right">
|
|
<div class="base-text">
|
|
<div>设备编号</div>
|
|
<div>{{ detailData.devSn || "" }}</div>
|
|
</div>
|
|
<div class="base-text">
|
|
<div>制件时间</div>
|
|
<div>{{ detailData.productionTime || "" }}</div>
|
|
</div>
|
|
<div class="base-text">
|
|
<div>试验开始时间</div>
|
|
<div>{{ detailData.testTime || "" }}</div>
|
|
</div>
|
|
<div class="base-text">
|
|
<div>试验员</div>
|
|
<div>{{ detailData.operator || "" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="select-left">
|
|
<div class="week selected" @click="getdayData(1)" :class="checked == 1 ? 'active' : ''">试块信息</div>
|
|
<div class="month selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">曲线信息</div>
|
|
</div>
|
|
</div>
|
|
<div class="test-block" v-if="checked === 1">
|
|
<table>
|
|
<tr>
|
|
<td>钢筋牌号</td>
|
|
<td>{{ detailData.steelBarGrade || "" }}</td>
|
|
<td>强度代表值(Mpa)</td>
|
|
<td>{{ detailData.intensityRepresentativeValue || "" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>公称直径(mm)</td>
|
|
<td>{{ detailData.nominalDiameter || "" }}</td>
|
|
<td>公称截面面积(mm2)</td>
|
|
<td>{{ detailData.nominalCrossSectionalArea || "" }}</td>
|
|
</tr>
|
|
<!-- <tr>
|
|
<td>试件面积</td>
|
|
<td>{{ detailData.specimenArea || '' }}</td>
|
|
<td>公称直径(mm)</td>
|
|
<td>{{ detailData.nominalDiameter || '' }}</td>
|
|
</tr> -->
|
|
</table>
|
|
<div class="base-title" style="margin-bottom: 3%">试块测试值</div>
|
|
<div style="width: 100%">
|
|
<el-scrollbar style="height: 200px">
|
|
<div class="list-table">
|
|
<div class="list-tr">
|
|
<div class="list-td">试块编号</div>
|
|
<div class="list-td">拉断最大力值(KN)</div>
|
|
<div class="list-td">屈服点(KN)</div>
|
|
<div class="list-td">屈服点强度(Mpa)</div>
|
|
<div class="list-td">坑拉强度(Mpa)</div>
|
|
<div class="list-td">伸长率(%)</div>
|
|
</div>
|
|
|
|
<div class="list-thread" v-for="item in steelBeamList" :key="item.id">
|
|
<div class="list-td">{{ item.devSn || "" }}</div>
|
|
<div class="list-td">{{ item.maximumBreakingForce || 0 }}</div>
|
|
<div class="list-td">{{ item.yieldPoint || 0 }}</div>
|
|
<div class="list-td">{{ item.yieldPointStrength || 0 }}</div>
|
|
<div class="list-td">{{ item.pitTensileStrength || 0 }}</div>
|
|
<div class="list-td">{{ item.elongation || 0 }}</div>
|
|
</div>
|
|
|
|
<!-- <div class="list-tr">
|
|
<div class="list-td">抗折/抗压强度</div>
|
|
<div class="list-td">72</div>
|
|
<div class="list-td">72</div>
|
|
<div class="list-td">72</div>
|
|
</div> -->
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
<div class="curve-line" v-if="checked === 2">
|
|
<div class="line-first">
|
|
<lineFirst :lineConfig="steelLineList"></lineFirst>
|
|
</div>
|
|
<div class="line-second">
|
|
<lineSecond :lineConfig="steelSecondLineList"></lineSecond>
|
|
</div>
|
|
</div>
|
|
<div class="close-icon" @click="closeDialog">
|
|
<el-icon><Close /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, onMounted } from "vue";
|
|
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
|
|
import { GlobalStore } from "@/stores";
|
|
import lineFirst from "@/views/sevenLargeScreen/largeMachinery/universalTestMachine/line-first.vue";
|
|
import lineSecond from "@/views/sevenLargeScreen/largeMachinery/universalTestMachine/line-second.vue";
|
|
import mitts from "@/utils/bus"; //兄弟组件传值
|
|
import { pressureBlockNumberList3, pressureBlockDataList3 } from "@/api/modules/largeMachinery";
|
|
|
|
const store = GlobalStore();
|
|
let showDialog = ref(false as any);
|
|
|
|
function handleClick(event: any) {
|
|
// console.log("点击", event.target.className);
|
|
if (event.target.className == "list-detail") {
|
|
closeDialog();
|
|
}
|
|
}
|
|
|
|
function closeDialog() {
|
|
showDialog.value = false;
|
|
checked.value = 1;
|
|
finishLine.value = false;
|
|
steelLineList.value = [];
|
|
steelSecondLineList.value = [];
|
|
}
|
|
|
|
// 选中
|
|
let checked = ref(1);
|
|
|
|
function getdayData(type: any) {
|
|
checked.value = type;
|
|
}
|
|
|
|
function getWeekData(type: any) {
|
|
checked.value = type;
|
|
mitts.emit("pressureLineDraw", true);
|
|
}
|
|
let detailData = ref({} as any);
|
|
// let dialogIndex = ref(null as any);
|
|
let dialogTitle = ref("" as any);
|
|
function openDialog(item: any) {
|
|
console.log("item", item);
|
|
detailData.value = item;
|
|
// dialogIndex.value = type;
|
|
dialogTitle.value = "设备详情";
|
|
getDetailList(item.id);
|
|
setTimeout(() => {
|
|
showDialog.value = true;
|
|
}, 500);
|
|
}
|
|
|
|
let steelBeamList = ref([] as any);
|
|
let steelLineList = ref([] as any);
|
|
let steelSecondLineList = ref([] as any);
|
|
let finishLine = ref(false as any);
|
|
const getDetailList = async (detailId: any) => {
|
|
const res: any = await pressureBlockNumberList3({ projectSn: store.sn, universalTestManageId: detailId });
|
|
if (res.result.length > 0) {
|
|
// console.log("试块列表", res.result);
|
|
steelBeamList.value = res.result;
|
|
for (let index = 0; index < res.result.length; index++) {
|
|
if (index === res.result.length - 1) {
|
|
console.log("最后一次循环");
|
|
finishLine.value = true;
|
|
}
|
|
const element = res.result[index];
|
|
getLineList(element);
|
|
}
|
|
// dialogShow = true
|
|
}
|
|
};
|
|
|
|
const getLineList = async (item: any) => {
|
|
console.log("曲线数据处理", item);
|
|
const res: any = await pressureBlockDataList3({ projectSn: store.sn, universalTestManageBlockNumberId: item.id });
|
|
if (res.result.length > 0) {
|
|
const filteredData = res.result.filter(item => item.type === 1);
|
|
const filteredSecondData = res.result.filter(item => item.type === 2);
|
|
|
|
// x y轴
|
|
const arr1 = filteredData.map(item => item.code);
|
|
const arr2 = filteredData.map(item => item.value);
|
|
|
|
const arr3 = filteredSecondData.map(item => item.code);
|
|
const arr4 = filteredSecondData.map(item => item.value);
|
|
|
|
const combinedArray = arr1.map((value, index) => [value, arr2[index]]);
|
|
const combinedSecondArray = arr3.map((value, index) => [value, arr4[index]]);
|
|
|
|
console.log(combinedArray,"力曲线"); // [[1, 4], [2, 5], [3, 6]]
|
|
console.log(combinedSecondArray, "位移曲线"); // [[1, 4], [2, 5], [3, 6]]
|
|
// console.log('试块曲线数据', res.result)
|
|
let currentData = {
|
|
name: item.devSn,
|
|
data: combinedArray,
|
|
type: "line",
|
|
smooth: true
|
|
};
|
|
let currentSecondData = {
|
|
name: item.devSn,
|
|
data: combinedSecondArray,
|
|
type: "line",
|
|
smooth: true
|
|
};
|
|
if (combinedArray.length > 0) {
|
|
steelLineList.value.push(currentData);
|
|
}
|
|
if (combinedSecondArray.length > 0) {
|
|
steelSecondLineList.value.push(currentSecondData);
|
|
}
|
|
}
|
|
// if (finishLine.value) {
|
|
// setTimeout(() => {
|
|
// showDialog.value = true;
|
|
// console.log("发送万能试验机曲线", steelLineList.value);
|
|
// mitts.emit("pressureLine", steelLineList.value);
|
|
// mitts.emit("pressureScondLine", steelSecondLineList.value);
|
|
// }, 1000);
|
|
// // console.log("曲线数据", steelLineList.value, "试块列表", steelBeamList.value);
|
|
// }
|
|
};
|
|
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
|
defineExpose({
|
|
openDialog
|
|
});
|
|
|
|
const warnType = ref([
|
|
{
|
|
label: "混凝土试件抗压强度试验",
|
|
value: 1
|
|
},
|
|
{
|
|
label: "钢筋试验",
|
|
value: 2
|
|
},
|
|
{
|
|
label: "钢筋焊接接头试验",
|
|
value: 3
|
|
},
|
|
{
|
|
label: "钢筋机械连接接头试验",
|
|
value: 4
|
|
},
|
|
{
|
|
label: "水泥砂浆立方体抗压强度试验",
|
|
value: 5
|
|
},
|
|
{
|
|
label: "水泥砂浆立方体抗压强度试验(建筑)",
|
|
value: 6
|
|
},
|
|
{
|
|
label: "水泥净浆物理性能试验",
|
|
value: 7
|
|
},
|
|
{
|
|
label: "水泥胶砂强度试验",
|
|
value: 8
|
|
},
|
|
{
|
|
label: "水泥胶砂抗折试验",
|
|
value: 9
|
|
},
|
|
{
|
|
label: "水泥净浆抗折试验",
|
|
value: 10
|
|
},
|
|
{
|
|
label: "水泥混凝土圆柱体轴心抗压强度试验",
|
|
value: 11
|
|
},
|
|
{
|
|
label: "后张预应力孔道压浆抗压强度试验",
|
|
value: 12
|
|
},
|
|
{
|
|
label: "后张预应力孔道压浆抗折强度试验",
|
|
value: 13
|
|
},
|
|
{
|
|
label: "无机结合料稳定材料无侧限抗压强度试验",
|
|
value: 14
|
|
},
|
|
{
|
|
label: "复检钢筋焊接接头试验",
|
|
value: 15
|
|
},
|
|
{
|
|
label: "复检钢筋机械连接接头试验",
|
|
value: 16
|
|
}
|
|
]);
|
|
|
|
let projectTimeInfo = ref({});
|
|
const getProjectInfo = async () => {
|
|
const res: any = await getTaskTimeDetail({ projectSn: store.sn });
|
|
console.log("获取项目信息", res);
|
|
projectTimeInfo.value = res.result;
|
|
};
|
|
|
|
onMounted(async () => {
|
|
getProjectInfo();
|
|
// console.log("Mount_type", dialogIndex.value);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.test-block {
|
|
width: 94%;
|
|
padding: 2% 4%;
|
|
text-align: center;
|
|
table {
|
|
width: 98%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td {
|
|
width: 50px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
tr:nth-child(odd) {
|
|
background-color: rgba(18, 40, 87, 0.6);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: rgba(12, 33, 73, 0.2);
|
|
}
|
|
|
|
.list-table {
|
|
width: 98%;
|
|
border-collapse: collapse;
|
|
}
|
|
.list-tr {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.list-td {
|
|
width: 100%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.list-tr {
|
|
background-color: rgba(18, 40, 87, 0.6);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.list-thread {
|
|
display: flex;
|
|
background-color: rgba(12, 33, 73, 0.2);
|
|
}
|
|
}
|
|
.curve-line {
|
|
width: 100%;
|
|
height: 49%;
|
|
margin-top: 5%;
|
|
overflow-y: scroll;
|
|
.line-first {
|
|
width: 100%;
|
|
height: 350px;
|
|
margin-top: 2%;
|
|
}
|
|
.line-second {
|
|
width: 100%;
|
|
height: 350px;
|
|
margin-top: 2%;
|
|
}
|
|
}
|
|
|
|
.base-title {
|
|
margin-top: 3%;
|
|
text-align: start;
|
|
}
|
|
.base-title::before {
|
|
content: "•"; /* 使用 content 属性添加小圆点 */
|
|
margin-right: 0.5em; /* 调整小圆点与文字之间的间距 */
|
|
width: 4px;
|
|
height: 4px;
|
|
color: #65d7f9;
|
|
}
|
|
|
|
.select-left {
|
|
width: 35%;
|
|
display: flex;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-left: 4%;
|
|
margin-top: 4%;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
.selected {
|
|
height: 6%;
|
|
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
.week {
|
|
width: 25%;
|
|
padding: 1%;
|
|
margin-right: 5%;
|
|
}
|
|
.month {
|
|
width: 25%;
|
|
padding: 1%;
|
|
}
|
|
.active {
|
|
color: #fff;
|
|
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.list-detail {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0%;
|
|
left: 0%;
|
|
background: rgba(7, 28, 49, 0.5);
|
|
z-index: 20;
|
|
.dialog-content {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 50%;
|
|
padding: 1%;
|
|
left: 26%;
|
|
top: 15%;
|
|
height: 80%;
|
|
padding-bottom: 3%;
|
|
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 21;
|
|
color: #ffffff;
|
|
.base-info {
|
|
width: 100%;
|
|
color: #ffffff;
|
|
.base-content {
|
|
width: 100%;
|
|
margin-left: 4%;
|
|
margin-top: 1%;
|
|
display: flex;
|
|
color: #fff;
|
|
.base-left {
|
|
width: 40%;
|
|
margin-right: 10%;
|
|
}
|
|
.base-right {
|
|
width: 40%;
|
|
}
|
|
.base-text {
|
|
width: 100%;
|
|
margin-top: 5%;
|
|
display: flex;
|
|
div:first-of-type {
|
|
width: 45%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.political-outlook {
|
|
height: 95%;
|
|
}
|
|
.dialog-article {
|
|
height: 95%;
|
|
}
|
|
.close-icon {
|
|
position: absolute;
|
|
right: 3%;
|
|
top: 3%;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
}
|
|
.dialog-title {
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
font-family: "OPPOSans-Bold";
|
|
display: flex;
|
|
align-items: center;
|
|
.title-img {
|
|
width: 3%;
|
|
height: 3%;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.title-text {
|
|
margin-left: 1%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.notoDta {
|
|
top: 73%;
|
|
width: 12%;
|
|
left: 44%;
|
|
position: absolute;
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
</style>
|