You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
439 lines
12 KiB
439 lines
12 KiB
<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"
|
|
:previewSrcList="[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>
|
|
<div class="detailsBox" v-if="data.processType == '3'">
|
|
<div class="item" v-for="item in data.controlResult" :key="item.deviceName">
|
|
<span class="label"> {{ item.deviceName }}：</span>
|
|
<span class="value"> {{ item.content+(item.result.code===200? ' ✅':' ❌️')+item.result.msg }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- <el-popover
|
|
trigger="click"
|
|
placement="right"
|
|
v-if="data.processType == '3'"
|
|
style="color: red; cursor: pointer;"
|
|
>
|
|
<span slot="reference">详情</span>
|
|
<div class="detailsBox" v-if="data.processType == '3'">
|
|
<div class="item" v-for="item in data.controlResult" :key="item.deviceName">
|
|
<span class="label"> {{ item.deviceName }}：</span>
|
|
<span class="value"> {{ item.content+(item.result.code===200? ' ✅':' ❌️')+item.result.msg }}</span>
|
|
</div>
|
|
</div>
|
|
</el-popover> -->
|
|
<div
|
|
v-if="data.processType == '4'"
|
|
style="color: red; cursor: pointer"
|
|
@click="openDetailsDialog(data)"
|
|
>
|
|
详情
|
|
</div>
|
|
<Dialog v-model="detailsDialog" width="1085px" top="20px" style="z-index: 9999;">
|
|
<div v-if="data.processType == '4'" class="docx-wrapper" style="height:800px;overflow-y: auto;overflow-x: hidden;">
|
|
<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 { delay, exportFile2, confirm } from "@screen/utils/common";
|
|
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: {
|
|
openDetailsDialog(data) {
|
|
this.detailsDialog = true;
|
|
getEventImportantFileDetails(data.id).then((res) => {
|
|
this.formFileData = res.data;
|
|
});
|
|
},
|
|
// 下载
|
|
handleDownload() {
|
|
exportFile2({
|
|
url: "/business/eventImportantFile/download",
|
|
filename: this.data.desc,
|
|
data: this.formFileData,
|
|
ext: "docx",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detailsBox{
|
|
max-height:160px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-color: #123742;
|
|
padding: 3px 8px;
|
|
}
|
|
.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;
|
|
word-wrap: break-word; /* 允许在边界内断词 */
|
|
word-break: break-all; /* 如果需要，还可以设置此属性来允许任意位置断词 */
|
|
}
|
|
}
|
|
.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>
|
|
|