344 lines
7.1 KiB
Vue
344 lines
7.1 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>钦州港金谷港区金鼓江作业区11号...</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-text">
|
||
|
|
<div>试验类型</div>
|
||
|
|
<div>钢筋机械连接接头试验</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-text">
|
||
|
|
<div>试验编号</div>
|
||
|
|
<div>YP-TJ5-20220630-14</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-text">
|
||
|
|
<div>设备名称</div>
|
||
|
|
<div>1#万能机</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-right">
|
||
|
|
<div class="base-text">
|
||
|
|
<div>设备编号</div>
|
||
|
|
<div>AHWKGKE-092</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-text">
|
||
|
|
<div>制件时间</div>
|
||
|
|
<div>2023.07.05 13:36:24</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-text">
|
||
|
|
<div>试验开始时间</div>
|
||
|
|
<div>2023.07.05 13:56:24</div>
|
||
|
|
</div>
|
||
|
|
<div class="base-text">
|
||
|
|
<div>操作员</div>
|
||
|
|
<div>管理员</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 class="universal-block">
|
||
|
|
<tr>
|
||
|
|
<td>钢筋牌号</td>
|
||
|
|
<td style="width: 25%">HEB500</td>
|
||
|
|
<td>公称直径(mm)</td>
|
||
|
|
<td>150mmx150mmx150mm</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>强度代表值(MPa)</td>
|
||
|
|
<td>HEB500</td>
|
||
|
|
<td>公称截面积(mm2)</td>
|
||
|
|
<td>22500.0</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<div class="base-title" style="margin-bottom: 3%">试块测试值</div>
|
||
|
|
<table class="common-block">
|
||
|
|
<tr>
|
||
|
|
<td style="width: 18%">试块编号</td>
|
||
|
|
<td style="width: 18%">屈服点(kN)</td>
|
||
|
|
<td>2屈服点强度(MPa)</td>
|
||
|
|
<td>抗拉强度(MPa)</td>
|
||
|
|
<td>伸长率(%)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>HJJAH-3</td>
|
||
|
|
<td>73090.00</td>
|
||
|
|
<td>417.2963513761281</td>
|
||
|
|
<td>15.2</td>
|
||
|
|
<td>0.259999994188547</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="curve-line" v-if="checked === 2">
|
||
|
|
<div class="line-first">
|
||
|
|
<lineFirst></lineFirst>
|
||
|
|
</div>
|
||
|
|
<div class="line-second">
|
||
|
|
<lineSecond></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 { GlobalStore } from "@/stores";
|
||
|
|
import lineFirst from "@/views/sevenLargeScreen/largeMachinery/universalTestMachine/line-first.vue";
|
||
|
|
import lineSecond from "@/views/sevenLargeScreen/largeMachinery/universalTestMachine/line-second.vue";
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 选中
|
||
|
|
let checked = ref(1);
|
||
|
|
|
||
|
|
function getdayData(type: any) {
|
||
|
|
checked.value = type;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getWeekData(type: any) {
|
||
|
|
checked.value = type;
|
||
|
|
}
|
||
|
|
|
||
|
|
let dialogIndex = ref(null as any);
|
||
|
|
let dialogTitle = ref("" as any);
|
||
|
|
function openDialog(type: any) {
|
||
|
|
// console.log("type", type);
|
||
|
|
// dialogIndex.value = type;
|
||
|
|
showDialog.value = true;
|
||
|
|
dialogTitle.value = "设备详情";
|
||
|
|
}
|
||
|
|
|
||
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
||
|
|
defineExpose({
|
||
|
|
openDialog
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
console.log("Mount_type", dialogIndex.value);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.test-block {
|
||
|
|
width: 94%;
|
||
|
|
height: 380px;
|
||
|
|
padding: 2% 4%;
|
||
|
|
text-align: center;
|
||
|
|
.universal-block {
|
||
|
|
td:nth-child(odd) {
|
||
|
|
background-color: rgba(18, 40, 87, 0.6);
|
||
|
|
color: rgba(255, 255, 255, 0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
td:nth-child(even) {
|
||
|
|
background-color: rgba(12, 33, 73, 0.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.common-block {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid black;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.curve-line {
|
||
|
|
width: 100%;
|
||
|
|
height: 380px;
|
||
|
|
margin-top: 2%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.line-first {
|
||
|
|
width: 48%;
|
||
|
|
}
|
||
|
|
.line-second {
|
||
|
|
width: 48%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
padding: 1%;
|
||
|
|
left: 25%;
|
||
|
|
top: 21%;
|
||
|
|
width: 50%;
|
||
|
|
padding-bottom: 1%;
|
||
|
|
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>
|