|
|
@ -1,23 +1,33 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class='Card'> |
|
|
<div class="Card"> |
|
|
<div class="header"> |
|
|
<div class="header"> |
|
|
<BackgroundClip class="left" clipPath="inset(0 0 0 0 round 24px)" |
|
|
<BackgroundClip |
|
|
|
|
|
class="left" |
|
|
|
|
|
clipPath="inset(0 0 0 0 round 24px)" |
|
|
borderColor="linear-gradient(90deg, rgba(251, 19, 19, 1), rgba(214, 0, 0, 0))" |
|
|
borderColor="linear-gradient(90deg, rgba(251, 19, 19, 1), rgba(214, 0, 0, 0))" |
|
|
bgColor="linear-gradient(270deg, rgba(243, 0, 0, 0) 0%, #6B0000 100%)"> |
|
|
bgColor="linear-gradient(270deg, rgba(243, 0, 0, 0) 0%, #6B0000 100%)" |
|
|
|
|
|
> |
|
|
<img src="@screen/images/TrafficAccidents.svg" /> |
|
|
<img src="@screen/images/TrafficAccidents.svg" /> |
|
|
交通事故 |
|
|
{{ typeText }} |
|
|
</BackgroundClip> |
|
|
</BackgroundClip> |
|
|
<div class="right"> |
|
|
<div class="right"> |
|
|
<Switcher /> |
|
|
<Switcher |
|
|
|
|
|
:value="enabled" |
|
|
|
|
|
@change="(val) => handleChangeSwitcher(val)" |
|
|
|
|
|
/> |
|
|
<!-- <ElSwitch active-color="#fff" inactive-color="#48B0CB" /> --> |
|
|
<!-- <ElSwitch active-color="#fff" inactive-color="#48B0CB" /> --> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<Descriptions :list="list" style="gap: 15px; flex: 1; margin-top: 9px;" column="1" /> |
|
|
<Descriptions |
|
|
|
|
|
:list="list" |
|
|
|
|
|
style="gap: 15px; flex: 1; margin-top: 9px" |
|
|
|
|
|
column="1" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<div class="footer"> |
|
|
<div class="footer"> |
|
|
<Button @click.native="() => handleOpenDialogAddEdit(item)">修改</Button> |
|
|
<Button @click.native="() => handleOpenDialogEdit()">修改</Button> |
|
|
<Button style="background-color: #FF5F5F;" @click.native="handleDelete(item)"> |
|
|
<Button style="background-color: #ff5f5f" @click.native="handleDelete()"> |
|
|
删除 |
|
|
删除 |
|
|
</Button> |
|
|
</Button> |
|
|
</div> |
|
|
</div> |
|
|
@ -25,53 +35,163 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import Button from '@screen/components/Buttons/Button.vue'; |
|
|
import Button from "@screen/components/Buttons/Button.vue"; |
|
|
import BackgroundClip from '@screen/components/Decorations/BackgroundClip.vue'; |
|
|
import BackgroundClip from "@screen/components/Decorations/BackgroundClip.vue"; |
|
|
import Descriptions from '@screen/components/Descriptions.vue'; |
|
|
import Descriptions from "@screen/components/Descriptions.vue"; |
|
|
import Switcher from './Switcher.vue'; |
|
|
import Switcher from "./Switcher.vue"; |
|
|
|
|
|
import { |
|
|
|
|
|
delChannels, |
|
|
|
|
|
updateEnabledChannels, |
|
|
|
|
|
} from "@/api/service/PublishingChannelManagement.js"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'Card', |
|
|
name: "Card", |
|
|
components: { |
|
|
components: { |
|
|
Button, |
|
|
Button, |
|
|
BackgroundClip, |
|
|
BackgroundClip, |
|
|
Descriptions, |
|
|
Descriptions, |
|
|
Switcher |
|
|
Switcher, |
|
|
|
|
|
}, |
|
|
|
|
|
props: { |
|
|
|
|
|
data: { |
|
|
|
|
|
type: Object, |
|
|
|
|
|
default: () => ({}), |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
handleOpenDialogEdit() { |
|
|
|
|
|
this.$parent.handleOpenDialogAddEdit(this.data); |
|
|
|
|
|
}, |
|
|
|
|
|
handleDelete(item) { |
|
|
|
|
|
this.$confirm("确定要删除该任务么？", "操作确认", { |
|
|
|
|
|
confirmButtonText: "确定", |
|
|
|
|
|
cancelButtonText: "取消", |
|
|
|
|
|
type: "warning", |
|
|
|
|
|
}) |
|
|
|
|
|
.then(() => { |
|
|
|
|
|
delChannels(this.data.id).then((res) => { |
|
|
|
|
|
this.$message.success("删除成功"); |
|
|
|
|
|
this.$parent.handleSearch(); |
|
|
|
|
|
}); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => { |
|
|
|
|
|
// Message.error("删除失败"); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// this.$emit("handleDelete", item); |
|
|
|
|
|
}, |
|
|
|
|
|
initData() { |
|
|
|
|
|
console.log("初始化数据", this.data); |
|
|
|
|
|
}, |
|
|
|
|
|
handleChangeSwitcher(val) { |
|
|
|
|
|
let data = { |
|
|
|
|
|
id: this.data.id, |
|
|
|
|
|
enabled: val ? 2 : 0, |
|
|
|
|
|
}; |
|
|
|
|
|
updateEnabledChannels(data).then(() => { |
|
|
|
|
|
this.$parent.handleSearch(); |
|
|
|
|
|
}); |
|
|
|
|
|
console.log(88888, val); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
mounted() { |
|
|
|
|
|
this.initData(); |
|
|
|
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
data: { |
|
|
|
|
|
handler(val) { |
|
|
|
|
|
let publishChannels = val.publishChannels.toString().split(","); |
|
|
|
|
|
let newPublishChannels = []; |
|
|
|
|
|
publishChannels.forEach((item) => { |
|
|
|
|
|
newPublishChannels.push( |
|
|
|
|
|
item == 1 |
|
|
|
|
|
? "手机短信" |
|
|
|
|
|
: item == 2 |
|
|
|
|
|
? "微信公众号" |
|
|
|
|
|
: item == 3 |
|
|
|
|
|
? "微博" |
|
|
|
|
|
: item == 4 |
|
|
|
|
|
? "情报板" |
|
|
|
|
|
: item == 5 |
|
|
|
|
|
? "服务网站" |
|
|
|
|
|
: "微信小程序" |
|
|
|
|
|
); |
|
|
|
|
|
}); |
|
|
|
|
|
this.list[0].text = val.infoLevel == "1" ? "影响交通" : "不影响交通"; |
|
|
|
|
|
this.list[1].text = newPublishChannels.toString(); |
|
|
|
|
|
// this.list[2].text = val.auditMethod == "1" ? "单人审核" : "双人审核"; |
|
|
|
|
|
this.list[2].text = val.enableDate; |
|
|
|
|
|
this.enabled = val.enabled == "2" ? true : false; |
|
|
|
|
|
|
|
|
|
|
|
this.typeText = |
|
|
|
|
|
val.dataCategory == "1" |
|
|
|
|
|
? "交通事故" |
|
|
|
|
|
: val.dataCategory == "2" |
|
|
|
|
|
? "车辆故障" |
|
|
|
|
|
: val.dataCategory == "3" |
|
|
|
|
|
? "交通管制" |
|
|
|
|
|
: val.dataCategory == "4" |
|
|
|
|
|
? "交通拥堵" |
|
|
|
|
|
: val.dataCategory == "5" |
|
|
|
|
|
? "非法上路" |
|
|
|
|
|
: val.dataCategory == "6" |
|
|
|
|
|
? "路障清除" |
|
|
|
|
|
: val.dataCategory == "7" |
|
|
|
|
|
? "施工建设" |
|
|
|
|
|
: val.dataCategory == "8" |
|
|
|
|
|
? "服务区异常" |
|
|
|
|
|
: val.dataCategory == "9" |
|
|
|
|
|
? "设施设备隐患" |
|
|
|
|
|
: val.dataCategory == "10" |
|
|
|
|
|
? "异常天气" |
|
|
|
|
|
: val.dataCategory == "11" |
|
|
|
|
|
? "其他事件" |
|
|
|
|
|
: "-"; |
|
|
|
|
|
}, |
|
|
|
|
|
immediate: true, |
|
|
|
|
|
deep: true, |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
typeText: "", |
|
|
|
|
|
enabled: false, |
|
|
list: [ |
|
|
list: [ |
|
|
{ |
|
|
{ |
|
|
label: '信息级别', |
|
|
label: "信息级别", |
|
|
text: '影响通行', |
|
|
text: "", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '发布渠道', |
|
|
label: "发布渠道", |
|
|
text: '情报板、微博', |
|
|
text: "", |
|
|
}, |
|
|
}, |
|
|
|
|
|
// { |
|
|
|
|
|
// label: "审核方式", |
|
|
|
|
|
// text: "", |
|
|
|
|
|
// }, |
|
|
{ |
|
|
{ |
|
|
label: '审核方式', |
|
|
label: "启用日期", |
|
|
text: '双人审核', |
|
|
text: "", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
], |
|
|
label: '启用日期', |
|
|
}; |
|
|
text: '2023.12.22 13:00:00', |
|
|
}, |
|
|
} |
|
|
}; |
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
<style lang="scss" scoped> |
|
|
.Card { |
|
|
.Card { |
|
|
height: 226px; |
|
|
height: 226px; |
|
|
background: #133242; |
|
|
background: #133242; |
|
|
border-radius: 2px; |
|
|
border-radius: 2px; |
|
|
border: 1px solid; |
|
|
border: 1px solid; |
|
|
padding: 15px 21px; |
|
|
padding: 15px 21px; |
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, .42), rgba(55, 231, 255, 0)) 1 1; |
|
|
border-image: linear-gradient( |
|
|
|
|
|
360deg, |
|
|
|
|
|
rgba(55, 231, 255, 0.42), |
|
|
|
|
|
rgba(55, 231, 255, 0) |
|
|
|
|
|
) |
|
|
|
|
|
1 1; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
|
