<template>
<div class="DescCard">
<span class="time">{{ data.time }}</span>
<div class="info">
<img src="./images/avatar.svg" />
<span class="name">{{ data.name }}</span>
<span class="posts">{{ data.posts }}</span>
</div>
<div class="node" v-if="data.processType===1 && data.processId">节点：{{ data.processName }}</div>
<el-image
style="width: 100px; height: 100px"
v-if="
data.type == 'bmp' ||
data.type == 'jpg' ||
data.type == 'jpeg' ||
data.type == 'png'
"
:src="data.url"
>
</el-image>
<video
v-if="data.type == 'mp4' || data.type == 'avi' || data.type == 'xmvb'"
class="videoClass"
:src="data.url"
:poster="data.url"
muted
controls
></video>
<div v-if="data.type == 'text'">
<div class="desc" v-html="data.desc" />
</div>
<el-popover
trigger="click"
placement="right"
v-if="data.processType == '3'"
style="color: red; cursor: pointer"
>
<span slot="reference" @click="handleDetails(data)">详情</span>
<div class="detailsBox" v-if="data.processType == '3'">
<div class="item" v-for="item in controlResult" :key="item.deviceName">
<span class="label"> {{ item.deviceName }}：</span>
<span class="value"> {{ item.content }}</span>
</div>
</div>
</el-popover>
<div
v-if="data.processType == '4'"
style="color: red; cursor: pointer"
@click="openDetailsDialog(data)"
>
详情
</div>
<Dialog style="" v-model="detailsDialog" width="1085px" top="60px">
<div v-if="data.processType == '4'" class="docx-wrapper">
<section
ref="initFile"
class="docx"
style="
padding: 72pt 90.15pt;
width: 595.3pt;
min-height: 741.9pt;
column-count: 1;
column-gap: 36pt;
"
>
<article>
<p
style="
line-height: 1;
text-align: center;
vertical-align: baseline;
margin-bottom: 10px;
"
>
<span
lang="en-US"
style="
font-family: 方正小标宋简体;
color: rgb(255, 0, 0);
min-height: 46pt;
font-size: 46pt;
font-weight: 700;
"
>重要事件</span
>
</p>
<p
style="
margin-bottom: 2pt;
min-height: 15pt;
line-height: 15pt;
text-align: center;
vertical-align: baseline;
"
>
<span
lang="null"
style="
font-family: 仿宋_GB2312;
font-weight: normal;
min-height: 10.5pt;
font-size: 10.5pt;
"
>报送单位：</span
><span
lang="en-US"
style="
font-family: 仿宋_GB2312;
font-weight: normal;
min-height: 10.5pt;
font-size: 10.5pt;
"
>
{{ formFileData.fromDept }}</span
><span
lang="null"
style="
font-family: 仿宋_GB2312;
font-weight: normal;
min-height: 10.5pt;
font-size: 10.5pt;
"
>报送时间：</span
><span
lang="en-US"
style="
font-family: 仿宋_GB2312;
font-weight: normal;
min-height: 10.5pt;
font-size: 10.5pt;
"
>{{ formFileData.createTime }}</span
>
</p>
<p
style="
margin-bottom: 1pt;
min-height: 10pt;
line-height: 10pt;
text-align: center;
vertical-align: baseline;
"
>
<span
style="
font-family: 'Times New Roman';
font-weight: bold;
color: rgb(255, 0, 0);
min-height: 22pt;
font-size: 22pt;
"
>——————————————————</span
>
</p>
<p
style="
margin-bottom: 6pt;
min-height: 25pt;
line-height: 25pt;
text-align: center;
vertical-align: baseline;
"
>
<span
lang="en-US"
style="
font-family: 方正小标宋简体;
min-height: 22pt;
font-size: 22pt;
font-weight: bold;
"
>{{ formFileData.title }}</span
>
</p>
<p
style="
text-indent: 0pt;
text-align: left;
vertical-align: baseline;
"
>
<span
lang="en-US"
style="
font-family: 仿宋_GB2312;
font-weight: normal;
color: black;
min-height: 16pt;
font-size: 16pt;
"
>智慧管理中心：</span
>
</p>
<textarea
v-model="formFileData.content"
disabled
style="
width: 100%;
height: 40vh;
line-height: 1.5;
text-indent: 0pt;
vertical-align: baseline;
font-family: 仿宋_GB2312;
font-weight: normal;
color: black;
min-height: 16pt;
font-size: 16pt;
background: #fff;
border: none;
"
>
{{ formFileData.content }}
</textarea
>
<p
style="line-height: 1; text-indent: 0pt; vertical-align: baseline"
></p>
<p style="vertical-align: baseline"></p>
<p
style="
margin-bottom: 1pt;
min-height: 10pt;
line-height: 10pt;
text-align: center;
vertical-align: baseline;
"
>
<span
style="
font-family: 'Times New Roman';
font-weight: bold;
color: rgb(255, 0, 0);
min-height: 22pt;
font-size: 22pt;
"
>——————————————————</span
>
</p>
<p
class="docx-num-0-0"
style="
display: flex;
justify-content: space-between;
margin-top: 0pt;
text-align: center;
vertical-align: baseline;
font-family: 仿宋_GB2312;
font-weight: normal;
min-height: 14pt;
font-size: 14pt;
"
>
<span lang="en-US">填报人:{{ formFileData.createName }} </span>
<span>联系电话:{{ formFileData.phoneNumber }}</span>
<span> 签发人：{{ formFileData.issued }}</span>
</p>
</article>
</section>
<!-- <button @click="handleDownload">下载</button> -->
</div>
<div></div>
</Dialog>
</div>
</template>
<script>
import Video from "@screen/components/VideoMulti";
import Dialog from "@screen/components/Dialog/index";
import {
eventDetails,
getEventImportantFileDetails,
} from "@/api/commandDispatch";
export default {
name: "DescCard",
props: {
data: {
type: Object,
default: () => ({}),
},
},
watch: {
"data.type": {
handler(newValue, oldValue) {
if (newValue != "text") {
this.data.url = process.env.VUE_APP_BASE_API + this.data.desc;
}
},
deep: true,
immediate: true,
},
},
components: {
Video,
Dialog,
},
data() {
return {
detailsDialog: false,
controlResult: [],
formFileData: {
fromDept: "齐鲁高速股份有限公司",
createTime: "2024年04月24日17时22分",
title: "关于G20青银高速K305+208交通事故的续报1",
toDept: "智慧管理中心",
content: "路管等单位及清障救援车辆已到达现场。预计结束时间为12时44分。",
createName: "张三",
phoneNumber: "18678866677",
issued: "康传刚",
status: 0,
id: null,
},
};
},
methods: {
handleDetails(data) {
eventDetails(data.id).then((res) => {
if (res.data?.controlResult) {
this.controlResult = JSON.parse(res.data.controlResult);
}
});
},
openDetailsDialog(data) {
this.detailsDialog = true;
getEventImportantFileDetails(data.id).then((res) => {
this.formFileData = res.data;
});
},
},
};
</script>
<style lang="scss" scoped>
.DescCard {
font-size: 14px;
// font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 16px;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
display: flex;
flex-direction: column;
gap: 6px;
background: #0d5f79;
border-radius: 6px 6px 6px 6px;
opacity: 1;
border: 1px solid #00b3cc;
padding: 9px 15px;
.time {
}
.info {
display: flex;
gap: 9px;
align-items: center;
.name {
font-size: 16px;
font-weight: 500;
line-height: 19px;
}
.posts {
}
}
.node {
color: #ffbf00;
font-size: 16px;
line-height: 19px;
}
.desc {
font-size: 16px;
line-height: 19px;
}
}
.videoClass {
width: 300px;
height: 180px;
}
.docx-wrapper {
background: #fff;
padding: 30px;
display: flex;
flex-flow: column;
align-items: center;
> section.docx {
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-bottom: 30px;
}
.docx p,
p.docx_1 span {
font-family: var(--docx-minorHAnsi-font);
color: #00000a;
min-height: 11pt;
font-size: 11pt;
}
button {
cursor: pointer;
width: 100px;
height: 35px;
line-height: 35px;
color: #fff;
background: #00b3cc;
border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
border: none;
}
}
</style>