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