578 lines
15 KiB
Vue
578 lines
15 KiB
Vue
<template>
|
|
<div class="list-detail" v-if="showDialog">
|
|
<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>工作票数据</i>
|
|
</div>
|
|
</div>
|
|
<div class="dialog-article">
|
|
<div class="dialog-input">
|
|
<el-input v-model="selectTitle" placeholder="请输入工作票编号" size="small" @change="searchChange"> </el-input>
|
|
</div>
|
|
<div class="main-article" v-if="articleNewList.length > 0">
|
|
<el-scrollbar class="left-content">
|
|
<div class="content-tab">
|
|
<div
|
|
class="tab-box"
|
|
:style="boxStyle(item)"
|
|
v-for="(item, index) in articleNewList"
|
|
:key="item.id"
|
|
@click="activeBtn(item)"
|
|
>
|
|
<div class="text" :title="item.title" :style="getStyle(item)">{{ item.workTicketSn || "" }}</div>
|
|
<div class="time">时间: {{ item.createTime || "" }}</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
<div class="center-content">
|
|
<div class="center-content-box">
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>工程名称</span>
|
|
<div class="col-content-item">{{ detailData.projectName || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>工作票编号</span>
|
|
<div class="col-content-item">{{ detailData.workTicketSn || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>开始时间</span>
|
|
<div class="col-content-item">{{ detailData.startTime || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>施工班组</span>
|
|
<div class="col-content-item">{{ detailData.constructionTeam || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>结束时间</span>
|
|
<el-date-picker
|
|
v-if="isEdit"
|
|
v-model="detailData.endTime"
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
:clearable="true"
|
|
/>
|
|
<div class="col-content-item" v-else>{{ detailData.endTime || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>初勘风险等级</span>
|
|
<div class="col-content-item">{{ detailData.initialSurveyRiskLevel || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>执行方案名称</span>
|
|
<div class="col-content-item">{{ detailData.executionPlanName || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>复测后的风险等级</span>
|
|
<div class="col-content-item">{{ detailData.riskLevelAfterRetest || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>施工人数</span>
|
|
<div class="col-content-item">{{ detailData.constructionWorkerNumber || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>作业类型、工序及部位</span>
|
|
<div class="col-content-item">{{ detailData.rtRiskSecurityLibraryTypeStr || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24">
|
|
<div class="col-content">
|
|
<span>作业部位</span>
|
|
<div class="col-content-item" style="height: 60px">{{ detailData.workPart || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24">
|
|
<div class="col-content">
|
|
<span>地理位置</span>
|
|
<div class="col-content-item" style="height: 60px">{{ detailData.geographicalLocation || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>班组负责人</span>
|
|
<div class="col-content-item">{{ detailData.teamLeader || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>一般作业人员</span>
|
|
<div class="col-content-item">{{ detailData.generalOperatePersonnel || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>班组安全员</span>
|
|
<div class="col-content-item">{{ detailData.teamSafetyOfficer || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>班组技术人员</span>
|
|
<div class="col-content-item">{{ detailData.teamTechnicalStaff || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24">
|
|
<div class="col-content">
|
|
<span>主要风险</span>
|
|
<div class="col-content-item" style="height: 60px">{{ detailData.mainRisk || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>作业必备条件</span>
|
|
<div class="col-content-item" style="height: 60px">{{ detailData.jobPrerequisite || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>作业过程风险控制措施</span>
|
|
<div class="col-content-item" style="height: 60px">
|
|
{{ detailData.operationProcessRiskControlMeasure || "" }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24">
|
|
<div class="col-content">
|
|
<span>现场风险复测变化情况及补充控制措施</span>
|
|
<div class="col-content-item" style="height: 60px">
|
|
{{ detailData.riskRetestChangesAndSupplementaryControlMeasure || "" }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<div class="col-content">
|
|
<span>签发日期</span>
|
|
<div class="col-content-item">{{ detailData.issueDate || "" }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="col-content">
|
|
<span>工作票</span>
|
|
<el-button @click="previewFile()">预览</el-button>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="col-content">
|
|
<span>操作</span>
|
|
<el-button @click="editOperate" v-if="!isEdit">编辑</el-button>
|
|
<el-button @click="saveOperate" v-else>保存</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<div class="right-content">
|
|
<el-carousel indicator-position="none" height="450px" v-if="detailData.videoList && detailData.videoList.length > 0">
|
|
<el-carousel-item v-for="(item, index) in detailData.videoList" :key="item.id">
|
|
<div style="width: 100%; height: 100%">
|
|
<ckplayerComp
|
|
:name="index"
|
|
:poster="''"
|
|
:deviceIp="`http://${item.account}:${item.password}`"
|
|
:videoUrls="item.serialNumber"
|
|
:autoPlay="true"
|
|
></ckplayerComp>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<!-- <ckplayerComp
|
|
:name="0"
|
|
:poster="''"
|
|
:deviceIp="`http://${detailData.videoList[0].account}:${detailData.videoList[0].password}`"
|
|
:videoUrls="detailData.videoList[0].serialNumber"
|
|
:autoPlay="true"
|
|
v-if="detailData.videoList && detailData.videoList.length > 0"
|
|
></ckplayerComp> -->
|
|
</div>
|
|
</div>
|
|
<div class="notoDta" v-else>
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="close-icon" @click="closeDialog">
|
|
<el-icon><Close /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, watch, defineEmits } from "vue";
|
|
import { GlobalStore } from "@/stores";
|
|
import { getWorkTicketDetail, editWorkTicketDetail } from "@/api/modules/headNoise";
|
|
import firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";
|
|
import ckplayerComp from "../../videoManagement/ckplayerComp.vue";
|
|
import { ElMessage } from "element-plus";
|
|
const isEdit = ref(false);
|
|
const detailId = ref("" as any);
|
|
const detailData = ref({} as any);
|
|
const articleNewList = ref([] as any);
|
|
const store = GlobalStore();
|
|
const selectTitle = ref("" as any);
|
|
let showDialog = ref(false as any);
|
|
const postData = ref({} as any);
|
|
|
|
const emit = defineEmits(['call-parent-function']);
|
|
// 保存操作
|
|
const saveOperate = async () => {
|
|
const res: any = await editWorkTicketDetail({ ...detailData.value });
|
|
if (res.success) {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: "操作成功",
|
|
type: "success"
|
|
});
|
|
isEdit.value = false;
|
|
emit('call-parent-function')
|
|
}
|
|
};
|
|
// 编辑操作
|
|
const editOperate = () => {
|
|
isEdit.value = true;
|
|
};
|
|
// 预览文件
|
|
const previewFile = () => {
|
|
let data = JSON.parse(detailData.value.workTicket);
|
|
if (data.length != 0) {
|
|
let imageurl = data[0].urlJson;
|
|
window.open("http://jxjzw.zhgdyun.com:8012/onlinePreview?url=" + imageurl);
|
|
}
|
|
};
|
|
const getStyle = (item: any) => {
|
|
if (item.isActive) {
|
|
let choiseStyle = {
|
|
color: "#4AC0F3"
|
|
};
|
|
return choiseStyle;
|
|
}
|
|
return {};
|
|
};
|
|
const activeBtn = (item: any) => {
|
|
let currentState = item.isActive;
|
|
if (!currentState) {
|
|
articleNewList.value.forEach((el: any) => {
|
|
el.isActive = false;
|
|
});
|
|
item.isActive = !currentState;
|
|
detailId.value = item.id;
|
|
detailData.value = item;
|
|
}
|
|
// 取消编辑态
|
|
isEdit.value = false;
|
|
setVideoElement();
|
|
};
|
|
const boxStyle = (item: any) => {
|
|
if (item.isActive) {
|
|
let choiseStyle = {
|
|
background: `url(${firstIcon}) no-repeat`,
|
|
backgroundSize: "100% 100%"
|
|
};
|
|
return choiseStyle;
|
|
}
|
|
return {};
|
|
};
|
|
// 列表查询工作票
|
|
const getDataList = async () => {
|
|
let requestData = {
|
|
projectSn: store.sn,
|
|
type: postData.value.tip,
|
|
workTicketSn: selectTitle.value,
|
|
pageSize: -1
|
|
};
|
|
if (!requestData.type) {
|
|
requestData.type = 2;
|
|
}
|
|
// 当前类型
|
|
const res: any = await getWorkTicketDetail(requestData);
|
|
if (res.success && res.result.records.length !== 0) {
|
|
console.log(res);
|
|
let newArray = res.result.records;
|
|
newArray[0].isActive = true;
|
|
articleNewList.value = newArray;
|
|
detailData.value = newArray[0];
|
|
setVideoElement();
|
|
} else {
|
|
articleNewList.value = [];
|
|
detailData.value = {};
|
|
}
|
|
};
|
|
const setVideoElement = () => {
|
|
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
|
|
setTimeout(() => {
|
|
// 获取所有的 video 元素
|
|
var videos = document.getElementsByTagName("video");
|
|
// 遍历所有的 video 元素
|
|
for (var i = 0; i < videos.length; i++) {
|
|
// 修改视频元素的样式
|
|
videos[i].style.width = "99.9%";
|
|
videos[i].style.height = "99.9%";
|
|
}
|
|
}, 1000);
|
|
}
|
|
const searchChange = (e: any) => {
|
|
getDataList();
|
|
};
|
|
const closeDialog = () => {
|
|
showDialog.value = false;
|
|
postData.value = {};
|
|
};
|
|
function openDialog(obj: any) {
|
|
postData.value = obj;
|
|
showDialog.value = true;
|
|
}
|
|
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
|
defineExpose({
|
|
openDialog
|
|
});
|
|
watch(
|
|
() => showDialog.value,
|
|
newData => {
|
|
if (newData) {
|
|
getDataList();
|
|
}
|
|
}
|
|
);
|
|
// onMounted(async () => {
|
|
// await getDataList();
|
|
// });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-detail {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0%;
|
|
left: 0%;
|
|
background: rgba(7, 28, 49, 0.5);
|
|
z-index: 100;
|
|
.dialog-content {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 1%;
|
|
left: 12%;
|
|
top: 6%;
|
|
width: 80%;
|
|
height: 90%;
|
|
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 21;
|
|
}
|
|
.dialog-content {
|
|
.political-outlook {
|
|
height: 100%;
|
|
}
|
|
.dialog-article {
|
|
width: 100%;
|
|
height: calc(100% - 50px);
|
|
position: relative;
|
|
.notoDta {
|
|
top: 20%;
|
|
width: 30%;
|
|
left: 35%;
|
|
position: absolute;
|
|
text-align: center;
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
.dialog-input {
|
|
width: 15%;
|
|
margin-left: 1%;
|
|
padding: 1% 0;
|
|
}
|
|
.main-article {
|
|
width: 100%;
|
|
height: 95%;
|
|
display: flex;
|
|
.left-content {
|
|
width: 25%;
|
|
height: 100%;
|
|
border-right: 2px solid #405e97;
|
|
.content-tab {
|
|
width: 90%;
|
|
height: 100%;
|
|
.tab-box {
|
|
box-sizing: border-box;
|
|
padding: 5%;
|
|
width: 100%;
|
|
height: 17%;
|
|
margin-top: 5%;
|
|
// background: url("@/assets/images/smartPartyBuilding/contentBox.png") no-repeat;
|
|
// background-size: 100% 100%;
|
|
.text {
|
|
white-space: nowrap; //单行
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
cursor: pointer;
|
|
}
|
|
.time {
|
|
margin-top: 5%;
|
|
color: #a1accb;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.center-content {
|
|
box-sizing: border-box;
|
|
padding: 0 2%;
|
|
width: 50%;
|
|
height: 100%;
|
|
&-box {
|
|
:deep() {
|
|
.el-row:not(:first-child) {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
.col-content {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
width: 100px;
|
|
display: inline-block;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
color: white;
|
|
}
|
|
&-item {
|
|
color: white;
|
|
flex: 1;
|
|
border: 1px solid #2f5db7;
|
|
background-color: #08203a;
|
|
color: white;
|
|
text-indent: 0.5em;
|
|
height: 40px;
|
|
overflow-wrap: anywhere;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-content {
|
|
width: 30%;
|
|
height: 50%;
|
|
}
|
|
}
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
// element 组件样式
|
|
:deep() {
|
|
.el-date-editor .el-range-input,
|
|
.el-range-separator,
|
|
.el-form-item__label {
|
|
color: #fff;
|
|
}
|
|
.el-input__wrapper {
|
|
background: #112d59;
|
|
}
|
|
.el-input__inner {
|
|
color: #fff;
|
|
}
|
|
.el-button {
|
|
background-color: #2758c0;
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
</style>
|