|
|
|
@ -7,7 +7,8 @@ |
|
|
|
<span class="posts">{{ data.posts }}</span> |
|
|
|
</div> |
|
|
|
<div class="desc" v-if="data.processId">节点：{{ data.processName }}</div> |
|
|
|
<img |
|
|
|
<el-image |
|
|
|
style="width: 100px; height: 100px" |
|
|
|
v-if=" |
|
|
|
data.type == 'bmp' || |
|
|
|
data.type == 'jpg' || |
|
|
|
@ -15,21 +16,264 @@ |
|
|
|
data.type == 'png' |
|
|
|
" |
|
|
|
:src="data.url" |
|
|
|
/> |
|
|
|
{{ 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; |
|
|
|
" |
|
|
|
> |
|
|
|
<!-- <source :src="data.desc" /> --> |
|
|
|
</video> |
|
|
|
<!-- <div class="desc">{{ data.desc }}</div> --> |
|
|
|
<div v-if="data.type == 'text'" class="desc" v-html="data.desc" /> |
|
|
|
<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: { |
|
|
|
@ -43,7 +287,6 @@ export default { |
|
|
|
handler(newValue, oldValue) { |
|
|
|
if (newValue != "text") { |
|
|
|
this.data.url = process.env.VUE_APP_BASE_API + this.data.desc; |
|
|
|
console.log("this.data.url", this.data.url); |
|
|
|
} |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
@ -52,6 +295,40 @@ export default { |
|
|
|
}, |
|
|
|
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> |
|
|
|
@ -99,4 +376,40 @@ export default { |
|
|
|
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> |
|
|
|
|
