8 changed files with 275 additions and 163 deletions
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<div class="body"> |
|||
<div class="left"> |
|||
<div class="title">路测广播列表</div> |
|||
<CheckboxGroup class="checkbox-group" gap="9px" :showIcon="true" v-model="checkList" :options="musicList" |
|||
id="otherConfig" label="deviceName"> |
|||
<template #[otherConfig]="{ data }"> |
|||
<span style="color: #6ee5fe"> {{ data.deviceName }}(当前) </span> |
|||
</template> |
|||
</CheckboxGroup> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="top-content"> |
|||
<Video class="item-video" :pileNum="pileNum" /> |
|||
|
|||
<label>发布内容: </label> |
|||
<ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150" |
|||
showWordLimit placeholder="请输入发布内容" /> |
|||
</div> |
|||
|
|||
<div class="footer"> |
|||
<Button style="background-color: rgba(0, 179, 204, 0.3)" |
|||
@click.native="(modelVisible = false), (submitting = false)"> |
|||
取消 |
|||
</Button> |
|||
<Button @click.native="handleSubmit" :loading="submitting"> |
|||
确定 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import Video from "@screen/components/Video"; |
|||
import CheckboxGroup from "@screen/components/FormConfig/components/ElCheckboxGroup.vue"; |
|||
|
|||
import request from "@/utils/request"; |
|||
import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
|||
|
|||
import { Message } from "element-ui"; |
|||
|
|||
export default { |
|||
name: "BroadcastReleases", |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Video, |
|||
CheckboxGroup, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
pileNum: String, |
|||
otherConfig: String, |
|||
}, |
|||
data() { |
|||
return { |
|||
submitting: false, |
|||
checkList: [], |
|||
releaseMessage: null, |
|||
musicList: [], |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
created() { |
|||
getDeviceList(5).then((data) => { |
|||
if (Array.isArray(data)) |
|||
this.musicList = data.map((item) => ({ |
|||
...item, |
|||
disabled: item.deviceState != 1, |
|||
})); |
|||
}); |
|||
}, |
|||
methods: { |
|||
handleSubmit() { |
|||
if (!this.releaseMessage?.trim()) |
|||
return Message.error("发布内容不能为空!"); |
|||
if (!this.checkList.length) |
|||
return Message.error("请至少选择一个广播设备!"); |
|||
|
|||
this.submitting = true; |
|||
|
|||
request({ |
|||
url: `/broadcast/broadcastFunctionCall`, |
|||
method: "post", |
|||
data: { |
|||
name: "task-3", |
|||
outVol: "6", |
|||
priority: "1", |
|||
text: this.releaseMessage.trim(), |
|||
repeatTimes: "3", |
|||
termList: this.checkList.map((str) => JSON.parse(str)), |
|||
functionType: "startPaTts", |
|||
}, |
|||
}) |
|||
.then((data) => { |
|||
// console.log(data); |
|||
if (data.retCode == "0") { |
|||
Message.success("广播设置成功!"); |
|||
this.modelVisible = false; |
|||
} else { |
|||
Message.error("广播设置失败!"); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.body { |
|||
display: flex; |
|||
gap: 9px; |
|||
height: 100%; |
|||
|
|||
.left { |
|||
width: 251px; |
|||
border-radius: 3px 3px 3px 3px; |
|||
border: 1px solid #3de8ff; |
|||
padding: 3px 12px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 9px; |
|||
|
|||
::v-deep .el-checkbox__label { |
|||
display: flex !important; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
|
|||
.title { |
|||
flex: 1; |
|||
width: 0; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: keep-all; |
|||
} |
|||
|
|||
.state { |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
.huiduButton { |
|||
background: transparent; |
|||
border: none; |
|||
height: 18px; |
|||
width: 18px; |
|||
line-height: 20px; |
|||
padding: 0; |
|||
color: #fff; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.huiduButton:hover { |
|||
color: #05afe3 !important; |
|||
} |
|||
} |
|||
|
|||
.checkbox-group { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 6px; |
|||
overflow: auto; |
|||
height: 100%; |
|||
flex: 1; |
|||
flex-wrap: nowrap; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
.top-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 9px; |
|||
|
|||
.item-video { |
|||
width: 545px; |
|||
} |
|||
|
|||
label { |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #3de8ff; |
|||
line-height: 19px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
gap: 9px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue