<template>
|
<div class="affairsBox">
|
<div v-for="(item, key) in msgList" :key="key">
|
<div v-if="item.type == 'text'">
|
<div class="affairsText">{{ item.val }}</div>
|
</div>
|
<div v-if="item.type == 'title'">
|
<div class="affairsTitle">{{ item.val }}</div>
|
</div>
|
<div v-if="item.type == 'label'">
|
<div class="affairsLabel">{{ item.val }}</div>
|
</div>
|
<div v-if="item.type == 'html'">
|
<div v-html="item.val"></div>
|
</div>
|
<div v-if="item.type == 'downLoad'">
|
<div class="affairsLabel" @click="setDownLoadFile">{{ item.val }}</div>
|
</div>
|
<div v-if="item.type == 'img'">
|
<img :src="item.val">
|
</div>
|
<div v-if="item.type == 'fileSrource'">
|
<el-divider content-position="left">‘‘引用: </el-divider>
|
<div v-for="(res, flag) in item.val" :key="flag">
|
<el-card class="auto-width-card ">{{ res.name }}</el-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import bus from "../../assets/js/bus";
|
export default {
|
|
name: "child",
|
props: {
|
parentdata: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
|
data() {
|
return {
|
msgList: [],
|
msgOption: null,
|
msgLength: 0,
|
msgFlag: 0,
|
}
|
},
|
watch: {
|
parentdata: {
|
handler(newVal, oldVal) {
|
if (newVal) {
|
this.setMsgStart(newVal);
|
}
|
|
},
|
immediate: true, // 组件实例化时立即触发
|
deep: true // 深度监听对象内部属性的变化
|
}
|
},
|
methods: {
|
setDownLoadFile() {
|
const downloadLink = document.createElement('a');
|
downloadLink.href = "http://localhost:12315/Data/台海突防作战想定.docx"
|
document.body.appendChild(downloadLink);
|
downloadLink.click();
|
document.body.removeChild(downloadLink);
|
|
},
|
setMsgStart(res) {
|
this.msgFlag = 0;
|
this.msgOption = { ...res }
|
this.msgLength = this.msgOption.length;
|
this.setMsgListChange();
|
},
|
setMsgListChange() {
|
if (this.msgFlag >= this.msgLength) return
|
const obj = this.msgOption[this.msgFlag];
|
if (!obj) return
|
if (obj.val) {
|
if (obj.type == "fileSrource") {
|
this.msgList.push({
|
type: obj.type,
|
val: obj.val,
|
})
|
this.$nextTick(() => {
|
this.msgFlag += 1;
|
this.setMsgListChange();
|
bus.$emit("setScroll", true);
|
})
|
|
} else if (obj.type != 'html') {
|
this.msgList.push({
|
type: obj.type,
|
val: '',
|
})
|
this.setMsgListInner(obj.val)
|
bus.$emit("setScroll", true);
|
} else if (obj.type == 'img') {
|
|
|
this.msgList.push({
|
type: obj.type,
|
val: obj.val,
|
})
|
console.log(this.msgList);
|
this.msgFlag += 1;
|
this.setMsgListChange();
|
bus.$emit("setScroll", true);
|
} else {
|
this.msgList.push({
|
type: obj.type,
|
val: obj.val,
|
})
|
}
|
}
|
|
|
},
|
setMsgListInner(response) {
|
var obj = { ...response }
|
if (response.indexOf("方案一") > -1) {
|
this.$store.state.showImageUrl = true;
|
this.$store.state.setScreenFlag = true;
|
this.$store.state.ImageUrl = config.imgUrl + "/gif/1.png"
|
} else if (response.indexOf("方案二") > -1) {
|
this.$store.state.showImageUrl = true;
|
this.$store.state.ImageUrl = config.imgUrl + "/gif/2.png"
|
} else if (response.indexOf("方案三") > -1) {
|
this.$store.state.showImageUrl = true;
|
this.$store.state.ImageUrl = config.imgUrl + "/gif/3.png"
|
} else if (response.indexOf("方案四") > -1) {
|
this.$store.state.showImageUrl = true;
|
this.$store.state.ImageUrl = config.imgUrl + "/gif/4.png"
|
}
|
const length = response.length;
|
var index = 0;
|
const interval = setInterval(() => {
|
if (index >= length) {
|
clearInterval(interval);
|
this.msgFlag += 1;
|
this.setMsgListChange();
|
}
|
const msg = obj[index];
|
if (msg) {
|
this.msgList[this.msgList.length - 1].val += msg
|
}
|
bus.$emit("setScroll", true);
|
index += 1;
|
}, 1);
|
|
}
|
}
|
}
|
|
</script>
|
|
<style>
|
.affairsBox .affairsText {
|
line-height: 40px;
|
font-size: 20px;
|
}
|
|
.affairsBox .affairsTitle {
|
font-weight: bolder;
|
font-weight: 400;
|
line-height: 50px;
|
font-size: 22px;
|
font-family: Microsoft Yahei;
|
}
|
|
.affairsBox .affairsLabel {
|
line-height: 40px;
|
font-size: 18px;
|
font-family: Microsoft JhengHei;
|
}
|
|
.auto-width-card {
|
width: max-content;
|
/* 使卡片的宽度根据内容自适应 */
|
margin: auto;
|
/* 使卡片在其父容器中居中 */
|
max-width: 100%;
|
/* 防止卡片宽度超过其父容器的100% */
|
float: left;
|
font-size: 12px;
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
}
|
|
.auto-width-card :hover {
|
color: #409EFF;
|
}
|
|
.auto-width-card .el-card__body {
|
padding: 2px 10px 2px 2px;
|
margin: 5px;
|
}
|
</style>
|
