|
|
@@ -1,391 +0,0 @@
|
|
|
-<template>
|
|
|
- <wrapper
|
|
|
- :vertical="false"
|
|
|
- fill
|
|
|
- margin
|
|
|
- background
|
|
|
- >
|
|
|
- <device-tree
|
|
|
- class="l-flex__none c-sidebar has-padding"
|
|
|
- @change="onChange"
|
|
|
- />
|
|
|
- <div class="l-flex__auto l-flex--col has-padding">
|
|
|
- <div class="l-flex__none l-flex--row has-bottom-padding">
|
|
|
- <div class="l-flex__auto" />
|
|
|
- <button
|
|
|
- class="l-flex__none c-sibling-item o-button"
|
|
|
- @click="onResolvePublish"
|
|
|
- >
|
|
|
- 审核
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="l-flex__none c-sibling-item o-button"
|
|
|
- @click="onPublish"
|
|
|
- >
|
|
|
- 发布
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="l-flex__none has-bottom-padding">
|
|
|
- <div
|
|
|
- class="o-choose-button"
|
|
|
- :class="{ ready: isReady }"
|
|
|
- @click="onChoose"
|
|
|
- >
|
|
|
- {{ tip }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template v-if="canPublish">
|
|
|
- <div
|
|
|
- v-if="isRecurSchedule"
|
|
|
- class="l-flex__none l-flex--row has-bottom-padding"
|
|
|
- >
|
|
|
- <el-date-picker
|
|
|
- v-model="startDateTime"
|
|
|
- type="datetime"
|
|
|
- placeholder="选择开始日期时间"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- :picker-options="pickerOptions"
|
|
|
- :editable="false"
|
|
|
- @change="onDateTimeChange('startDateTime')"
|
|
|
- />
|
|
|
- <span class="o-separator">至</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="endDateTime"
|
|
|
- type="datetime"
|
|
|
- popper-class="o-date-picker hide-footer"
|
|
|
- placeholder="选择结束日期时间"
|
|
|
- default-time="23:59:59"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- :picker-options="endDateTimePickerOptions"
|
|
|
- :editable="false"
|
|
|
- @change="onDateTimeChange('endDateTime')"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <schedule
|
|
|
- :schedule="scheduleId"
|
|
|
- hide-header
|
|
|
- />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <table-dialog
|
|
|
- ref="tableDialog"
|
|
|
- title="内容选择"
|
|
|
- :schema="schema"
|
|
|
- @choosen="onChoosen"
|
|
|
- />
|
|
|
- <table-dialog
|
|
|
- ref="publishTableDialog"
|
|
|
- title="发布审核"
|
|
|
- :schema="publishSchema"
|
|
|
- />
|
|
|
- </wrapper>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getSchedules } from '@/api/calendar'
|
|
|
-import { messageSend } from '@/api/base'
|
|
|
-import {
|
|
|
- State,
|
|
|
- ScheduleType
|
|
|
-} from '@/constant'
|
|
|
-import request from '@/utils/request'
|
|
|
-import { parseTime } from '@/utils'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'ScheduleDeploy',
|
|
|
- data () {
|
|
|
- return {
|
|
|
- selectedDevices: [],
|
|
|
- schedule: null,
|
|
|
- startDateTime: null,
|
|
|
- endDateTime: null,
|
|
|
- publishSchema: {
|
|
|
- condition: { status: State.SUBMITTED },
|
|
|
- list: this.getPublishesApi,
|
|
|
- cols: [
|
|
|
- { prop: 'programCalendarName', label: '名称' },
|
|
|
- { prop: 'createTime', label: '创建时间' },
|
|
|
- {
|
|
|
- type: 'invoke', render: [
|
|
|
- { label: '通过', on: this.onResolve }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- schema: {
|
|
|
- condition: { filterResolutionRatio: true, type: ScheduleType.RECUR },
|
|
|
- list: this.getSchedules,
|
|
|
- filters: [
|
|
|
- { key: 'filterResolutionRatio', type: 'switch', placeholder: '分辨率过滤' },
|
|
|
- { key: 'type', type: 'select', options: [
|
|
|
- { value: ScheduleType.CALENDAR, label: '日程' },
|
|
|
- { value: ScheduleType.RECUR, label: '轮播' }
|
|
|
- ] }
|
|
|
- ],
|
|
|
- cols: [
|
|
|
- { prop: 'name', label: '名称' },
|
|
|
- { prop: 'resolutionRatio', label: '分辨率' }
|
|
|
- ],
|
|
|
- props: {
|
|
|
- 'row-class-name': this.getRowClassName
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- status () {
|
|
|
- const devices = this.selectedDevices
|
|
|
- const length = devices.length
|
|
|
- if (length) {
|
|
|
- if (length > 1) {
|
|
|
- const resolutionRatio = this.resolutionRatio
|
|
|
- if (devices.some(device => device.resolutionRatio !== resolutionRatio)) {
|
|
|
- return -2
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (!this.schedule || this.schedule.resolutionRatio !== this.resolutionRatio) {
|
|
|
- return 0
|
|
|
- }
|
|
|
-
|
|
|
- return 1
|
|
|
- }
|
|
|
- return -1
|
|
|
- },
|
|
|
- isReady () {
|
|
|
- return this.status > -1
|
|
|
- },
|
|
|
- resolutionRatio () {
|
|
|
- return this.selectedDevices[0]?.resolutionRatio
|
|
|
- },
|
|
|
- canPublish () {
|
|
|
- return this.status === 1
|
|
|
- },
|
|
|
- tip () {
|
|
|
- switch (this.status) {
|
|
|
- case -2:
|
|
|
- return '选择的设备分辨率不一致'
|
|
|
- case -1:
|
|
|
- return '请先选择目标设备'
|
|
|
- case 0:
|
|
|
- return '点击选择需发布的内容'
|
|
|
- case 1:
|
|
|
- return this.schedule.name
|
|
|
- default:
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- scheduleId () {
|
|
|
- return this.schedule?.id
|
|
|
- },
|
|
|
- isRecurSchedule () {
|
|
|
- return this.schedule?.type === ScheduleType.RECUR
|
|
|
- },
|
|
|
- pickerOptions () {
|
|
|
- return {
|
|
|
- disabledDate: this.isDisableDate
|
|
|
- }
|
|
|
- },
|
|
|
- endDateTimePickerOptions () {
|
|
|
- return {
|
|
|
- disabledDate: this.isDisabledEndDate
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onChange (devices) {
|
|
|
- this.selectedDevices = devices
|
|
|
- },
|
|
|
- getRowClassName ({ row }) {
|
|
|
- if (row.resolutionRatio !== this.resolutionRatio) {
|
|
|
- return 'disabled'
|
|
|
- }
|
|
|
- return ''
|
|
|
- },
|
|
|
- transform (schedule) {
|
|
|
- let typeName
|
|
|
- switch (schedule.type) {
|
|
|
- case ScheduleType.RECUR:
|
|
|
- typeName = '轮播'
|
|
|
- break
|
|
|
- default:
|
|
|
- typeName = '日程'
|
|
|
- break
|
|
|
- }
|
|
|
- schedule.typeName = typeName
|
|
|
- return schedule
|
|
|
- },
|
|
|
- getSchedules (params) {
|
|
|
- return getSchedules({
|
|
|
- ...params,
|
|
|
- status: State.RESOLVED,
|
|
|
- resolutionRatio: params.filterResolutionRatio ? void 0 : this.resolutionRatio
|
|
|
- })
|
|
|
- },
|
|
|
- onChoose () {
|
|
|
- if (!this.isReady) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.$refs.tableDialog.show()
|
|
|
- },
|
|
|
- onChoosen ({ value: { id, type, name, resolutionRatio }, done }) {
|
|
|
- done()
|
|
|
- this.schedule = { id, type, name, resolutionRatio }
|
|
|
- if (type === ScheduleType.RECUR) {
|
|
|
- const now = new Date()
|
|
|
- this.$min = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
|
|
- this.$max = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 30)
|
|
|
- this.startDateTime = ''
|
|
|
- this.endDateTime = ''
|
|
|
- }
|
|
|
- },
|
|
|
- onPublish () {
|
|
|
- switch (this.status) {
|
|
|
- case -3:
|
|
|
- case -2:
|
|
|
- case -1:
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: this.tip
|
|
|
- })
|
|
|
- return
|
|
|
- case 0:
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '请选择需要发布的排期'
|
|
|
- })
|
|
|
- return
|
|
|
- default:
|
|
|
- break
|
|
|
- }
|
|
|
- if (this.isRecurSchedule) {
|
|
|
- if (!this.startDateTime) {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '请选择排期的开始时间'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- if (this.endDateTime && this.startDateTime === this.endDateTime) {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '开始时间与结束时间不能一样,请重新选择'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- this.publishSchedule(this.schedule, this.selectedDevices, {
|
|
|
- startDateTime: this.startDateTime,
|
|
|
- endDateTime: this.endDateTime ? parseTime(new Date(this.endDateTime).getTime() + 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
|
|
|
- }).then(() => {
|
|
|
- this.schedule = null
|
|
|
- })
|
|
|
- },
|
|
|
- publishSchedule ({ id, type, name }, devices, options) {
|
|
|
- return this.$confirm(
|
|
|
- `对设备 ${devices.map(device => device.name)}`,
|
|
|
- `发布排期 ${name}`
|
|
|
- ).then(() => {
|
|
|
- const data = {
|
|
|
- programCalendarId: id,
|
|
|
- deviceIds: devices.map(device => device.id)
|
|
|
- }
|
|
|
- if (type === ScheduleType.RECUR) {
|
|
|
- Object.assign(data, options)
|
|
|
- }
|
|
|
- return messageSend({
|
|
|
- url: '/orchestration/calendarRelease',
|
|
|
- method: 'POST',
|
|
|
- data
|
|
|
- }, '发布')
|
|
|
- })
|
|
|
- },
|
|
|
- isDisableDate (date) {
|
|
|
- return date < this.$min || date > this.$max
|
|
|
- },
|
|
|
- isDisabledEndDate (date) {
|
|
|
- if (this.startDateTime && date < this.startDateTime) {
|
|
|
- return date < new Date(this.startDateTime.getFullYear(), this.startDateTime.getMonth(), this.startDateTime.getDate())
|
|
|
- }
|
|
|
- return date < this.$min
|
|
|
- },
|
|
|
- onDateTimeChange (type) {
|
|
|
- if (this.startDateTime && this.endDateTime && this.startDateTime > this.endDateTime) {
|
|
|
- if (type === 'endDateTime') {
|
|
|
- this.startDateTime = this.endDateTime
|
|
|
- } else {
|
|
|
- this.endDateTime = this.startDateTime
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onResolvePublish () {
|
|
|
- this.$refs.publishTableDialog.show()
|
|
|
- },
|
|
|
- getPublishesApi (query) {
|
|
|
- const { pageNum: pageIndex, pageSize, ...params } = query
|
|
|
- return request({
|
|
|
- url: '/orchestration/calendarRelease/page',
|
|
|
- method: 'GET',
|
|
|
- params: {
|
|
|
- pageIndex, pageSize,
|
|
|
- ...params
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- onResolve ({ id }) {
|
|
|
- const loading = this.$showLoading()
|
|
|
- return request({
|
|
|
- url: `/orchestration/calendarRelease/${id}/approval`,
|
|
|
- method: 'POST',
|
|
|
- data: { remark: '' }
|
|
|
- }).then(() => {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '审核通过成功'
|
|
|
- })
|
|
|
- this.$refs.publishTableDialog.getTable().decrease(1)
|
|
|
- }).finally(() => {
|
|
|
- this.$closeLoading(loading)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.c-sidebar {
|
|
|
- width: 307px;
|
|
|
- border-right: 1px solid $gray--light;
|
|
|
-}
|
|
|
-
|
|
|
-.o-separator {
|
|
|
- padding: 0 10px;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.o-choose-button {
|
|
|
- padding: 20px 0;
|
|
|
- color: $gray;
|
|
|
- font-size: 20px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid $gray--light;
|
|
|
- cursor: not-allowed;
|
|
|
-
|
|
|
- &.ready {
|
|
|
- color: $black;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #409eff;
|
|
|
- border-color: #c6e2ff;
|
|
|
- background-color: $blue--light;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- color: #3a8ee6;
|
|
|
- border-color: #3a8ee6;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|