canvasScreen_admin/src/views/content/publish/urgentMessage/index.vue

<template>
  <div class="list_warp">
    <el-row :gutter="15">
      <el-col>
        <!-- v-loading="crud.loading" -->
        <el-table ref="table" :data="urgentMessage" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <!-- prop="name"  -->
          <el-table-column label="序号" type="index" align="center" width="50" />
          <el-table-column label="发布内容" align="center" prop="context" width="400">
            <template slot-scope="{ row }">
              <div>{{ row.context }}</div>
            </template>
          </el-table-column>
          <el-table-column label="通知时间" align="center" prop="create_time">
            <template slot-scope="{ row }">
              <div>{{ row.create_time | parseTime }}</div>
            </template>
          </el-table-column>

          <el-table-column label="发布人" align="center" prop="creater_name" />
          <el-table-column label="状态" align="center" prop="is_state">
            <template slot-scope="{ row }">
              <div :class="{ stop_txt: row.is_state }">
                {{ row.is_state == 1 ? "发布中" : "停止" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button>
              <el-button type="primary" :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.$index, scope.row)">{{ scope.row.is_state == 1 ? "停止" : "恢复" }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页器 -->
    <el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getUrgentMessage" @size-change="handleSizeChange" />

    <!-- 编辑紧急通知 -->
    <div class="publish_layer">
      <el-dialog :title="form.notice_id==null? '紧急发布':'编辑'" :close-on-click-modal="false" :show-close="false" :visible.sync="messageVisible" width="872px">
        <el-form ref="form" :model="form" size="small" label-width="100px">
          <el-form-item
            label="文本颜色"
            prop="context_color"
            :rules="[
              { required: true, message: '请选择文本颜色', trigger: '' },
            ]"
          >
            <colorPicker v-model="form.context_color" class="txt_color" @change="headleChangeColor" />
            <el-input v-show="false" v-model="form.context_color" />
          </el-form-item>
          <el-form-item
            label="文本内容"
            prop="context"
            :rules="[
              { required: true, message: '请输入文本内容', trigger: 'blur' },
            ]"
          >
            <el-input v-model="form.context" type="textarea" rows="6" style="width: 674px" />
          </el-form-item>
          <el-form-item
            label="文本大小"
            prop="context_size_name"
            :rules="[
              { required: true, message: '请选择文本大小', trigger: 'change' },
            ]"
          >
            <el-select v-model="form.context_size_name" size="small" class="filter-item" @change="selectSize">
              <el-option v-for="item in sizeData" :key="item.key" :label="item.name" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="文本位置"
            prop="context_position_name"
            :rules="[
              { required: true, message: '请选择文本位置', trigger: 'change' },
            ]"
          >
            <el-select v-model="form.context_position_name" size="small" value-key="name" class="filter-item" @change="selectPosition">
              <el-option v-for="item in positionData" :key="item.key" :label="item.name" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="滚动速度"
            prop="context_speed_name"
            :rules="[
              { required: true, message: '请选择滚动速度', trigger: 'change' },
            ]"
          >
            <el-select v-model="form.context_speed_name" size="small" class="filter-item" @change="selectSpeed">
              <el-option v-for="item in speedData" :key="item.key" :label="item.name" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择设备"
            prop="notice_device"
            :rules="[
              { required: true, message: '请选择设备', trigger: 'change' },
            ]"
          >
            <el-radio-group v-model="form.notice_device" @change="clearCheckbox()">
              <el-radio :label="1" value="all">所有设备</el-radio>
              <el-radio :label="2" value="other">部分设备<i v-if="form.notice_device === 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="form.notice_device == 1" class="select_all_tip">
            所有设备都将被发送
          </div>
          <div v-if="deviceTags.length > 0 && form.notice_device == 2" class="select_other">
            <el-row>
              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
              <el-col :span="4">
                <el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
              </el-col>
            </el-row>
            <el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" context_color="#cbe3ff" @close="handleClose(tag)">
              {{ tag.device_name }}
            </el-tag>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- :loading="crud.status.cu === 2"
           @click="crud.submitCU"-->
          <el-button type="primary" round @click="submit">保存</el-button>
          <el-button round @click="closeDialog">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 添加发布的设备 -->
    <div class="add_device_layer">
      <el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px">
        <el-tag v-for="tag in deviceList" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)">
          {{ tag.device_name }}
        </el-tag>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index.js'
import { ReqDeviceList } from '@/api/device/deviceList.js'
import {
  reqUrgentMessage,
  reqQueryMessage,
  reqEditMessage,
  reqChangeMessage
} from '@/api/publish/urgentMessage'
export default {
  name: 'UrgentMessage',
  filters: {
    parseTime(time, cFormat) {
      return parseTime(time, cFormat)
    }
  },
  data() {
    return {
      isAddEdit: false,
      form: {
        context_color: '#ff0000', // 文本的颜色
        context: '', // 文本的内容
        context_position: null, // 文本的位置
        context_position_name: null,
        context_speed_name: null,
        context_speed: null, // 文本的速度
        context_size_name: null,
        context_size: null, // 文字的大小
        // create_by:'', //发布人
        notice_device: null,
        notice_devices: [],
        notice_id: '', // 紧急通知的id
        orga_id: '133221333123111'
      },
      queryInfo: {
        notice_name: '',
        orga_id: '133221333123111',
        page: 1,
        size: 10
      },
      total: 0,
      messageVisible: false,
      selectDeviceVisible: false,
      sizeData: [
        { key: 0, name: 16 },
        { key: 1, name: 22 },
        { key: 2, name: 24 },
        { key: 3, name: 30 }
      ],
      positionData: [
        { key: 1, name: '顶部' },
        { key: 2, name: '中间' },
        { key: 3, name: '底部' }
      ],
      speedData: [
        { key: 0, name: '1s' },
        { key: 1, name: '2s' },
        { key: 2, name: '3s' }
      ],
      selectedList: [],
      // 部分设备列表的数据
      deviceList: [],
      // newArr:[],
      deviceTags: [],
      // 紧急通知列表
      urgentMessage: []
    }
  },
  mounted() {
    this.getUrgentMessage()
    this.getDevice()
  },
  methods: {
    // 获取紧急通知的列表
    getUrgentMessage(pager = 1) {
      this.queryInfo.page = pager
      const params = this.queryInfo
      reqUrgentMessage(params).then((res) => {
        if (res.code == 200) {
          this.urgentMessage = res.data.content
          this.total = res.data.totalElements
          // console.log(this.urgentMessage);
        }
      })
    },
    // 获取设备列表的信息
    getDevice() {
      const params = this.queryInfo
      ReqDeviceList(params).then((res) => {
        if (res.code == 200) {
          this.deviceList = res.data.content
        } else {
          return this.$message.error('获取设备列表失败！')
        }
      })
    },
    // 紧急通知的状态  is_state为1 发布中 2 停止
    // row.is_state == 1 ? "停止" : "恢复"
    isStopHandle(index, row) {
      console.log(row)
      // console.log(index)
      if (row.is_state == 1) {
        row.is_state = 2
      } else {
        row.is_state = 1
      }
      const params = {
        id: row.notice_id,
        state: row.is_state
      }
      reqChangeMessage(params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          if (params.state == 1) {
            this.$message({
              type: 'success',
              message: '已发布成功！'
            })
          } else {
            this.$message({
              type: 'success',
              message: '已停止！'
            })
          }
        } else {
          return this.$message.error('失败了~~~~')
        }
      })
    },
    // 编辑
    editFormData(row) {
      this.messageVisible = true
      // 根据id查询返回的紧急通知的数据
      const params = {
        notice_id: row.notice_id
      }
      reqQueryMessage(params).then((res) => {
        if (res.code == 200) {
          this.form.notice_device = res.data.notice.noticeDevice
          this.deviceTags = res.data.noticeDeviceDetailsVO
          this.form.context_color = res.data.notice.contextColor
          this.form.context = res.data.notice.context
          this.form.context_speed = res.data.notice.contextSpeed
          this.form.context_position = res.data.notice.contextPosition
          this.form.context_size = res.data.notice.contextSize
          this.form.notice_id = row.notice_id
          //  判断文字位置
          if (this.form.context_position == 1) {
            this.form.context_position_name = '顶部'
          } else if (this.form.context_position == 2) {
            this.form.context_position_name = '中部'
          } else {
            this.form.context_position_name = '底部'
          }
          // 判断速度
          if (this.form.context_speed == 0) {
            this.form.context_speed_name = '1s'
          } else if (this.form.context_speed == 1) {
            this.form.context_speed_name = '2s'
          } else {
            this.form.context_speed_name = '3s'
          }
          // 判断文字大小
          if (this.form.context_size == 0) {
            this.form.context_size_name = '16'
          } else if (this.form.context_size == 1) {
            this.form.context_size_name = '22'
          } else if (this.form.context_size == 2) {
            this.form.context_size_name = '24'
          } else {
            this.form.context_size_name = '30'
          }
        }
      })
    },
    // 新增
    addFormData() {
      this.messageVisible = true
      this.$nextTick(() => {
        this.form.notice_id = null
      })
    },
    // 提交
    submit() {
      this.$refs.form.validate((valid) => {
        console.log(this.deviceTags)
        console.log(this.form.notice_devices)
        if (this.form.notice_device == 2) {
          if (this.deviceTags.length != 0) {
            this.deviceTags.forEach(item => {
              this.form.notice_devices.push({ deviceId: item.device_id })
            })
          } else {
            this.$message.error('请添加设备！')
            return
          }
        }
        // 修改
        if (valid) {
          const params = {
            context: this.form.context,
            context_color: this.form.context_color,
            context_position: this.form.context_position,
            context_size: this.form.context_size,
            context_speed: this.form.context_speed,
            notice_device: this.form.notice_device,
            notice_devices: this.form.notice_devices,
            notice_id: this.form.notice_id,
            orga_id: '133221333123111'
          }
          console.log(params)
          reqEditMessage(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: this.form.notice_id
                  ? '修改紧急通知成功'
                  : '添加紧急通知成功'
              })
              this.messageVisible = false
              this.$refs.form.resetFields()
              this.getUrgentMessage(this.queryInfo.page)
            }
          })
        }
      })
    },
    // 所有设备和部分设备的切换数据处理
    clearCheckbox() {
      if (this.form.notice_device == 1) {
        this.form.notice_devices = []
      }
    },
    // 多选框
    handleSelectionChange(val) {
      this.selectedList = val
      // if (val.length > 0) {
      // 	this.clearBtnDisabled = false;
      // } else {
      // 	this.clearBtnDisabled = true;
      // }
    },
    // 改变文字的颜色
    headleChangeColor() {
      this.form.context_size
    },
    // 改变文字的大小
    selectSize(selVal) {
      this.form.context_size = selVal.key
      this.form.context_size_name = selVal.name
    },
    // 改变文字的位置
    selectPosition(selVal) {
      console.log(selVal)
      this.form.context_position = selVal.key
      this.form.context_position_name = selVal.name
    },
    // 速度
    selectSpeed(selVal) {
      this.form.context_speed = selVal.key
      this.form.context_speed_name = selVal.name
    },
    // 添加设备的对话框
    addDeviceTag() {
      this.selectDeviceVisible = true
    },
    // 添加设备
    tagHandle(tag) {
      // 添加设备不能重复 不重复才添加
      if (this.deviceTags.length == 0) {
        this.deviceTags.push(tag)
      } else {
        const current =
          this.deviceTags &&
          this.deviceTags.some((item) => item.device_id == tag.device_id)
        if (!current) {
          this.deviceTags.push(tag)
        } else {
          this.$message('请勿添加重复的设备！')
        }
      }
    },
    // 单独删除某一个设备
    handleClose(tag) {
      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
    },
    // 清空设备
    clearDevice() {
      this.deviceTags = []
      this.form.notice_devices = []
    },
    // 关闭重置表单
    closeDialog() {
      this.messageVisible = false
      this.$refs.form.resetFields()
    },
    // 每条显示数据改变时的事件
    handleSizeChange(size) {
      // 整理参数
      this.queryInfo.size = size
      this.getUrgentMessage()
    }
  }
}
</script>

<style lang="scss" scoped>
.list_warp {
  padding: 0 24px;
  .stop_txt {
    color: #3a8aeb;
  }
}
.txt_color {
  margin-top: 12px;
}
::v-deep .el-radio-group {
  display: block;
  .el-radio {
    position: relative;
    line-height: 40px;
    .radio_tip {
      position: absolute;
      right: -45px;
      top: 0;
      display: block;
      width: 42px;
      height: 21px;
      line-height: 21px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: url(~@/assets/images/an-tj.png) no-repeat;
      background-size: 42px 21px;
    }
  }
}
.select_all_tip {
  width: 336px;
  height: 32px;
  line-height: 32px;
  margin: -20px 0 0 100px;
  padding: 0 14px;
  font-size: 12px;
  color: #999;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
}
.select_other {
  width: 600px;
  margin: -20px 0 0 100px;
  padding: 18px 23px;
  background: #f8f8f8;
  border: 1px solid #dcdde3;
  border-radius: 4px;
  .other_tip {
    line-height: 24px;
    span {
      display: inline-block;
      margin-left: 20px;
    }
  }
  .el-button {
    padding: 5px 8px;
    border: none !important;
  }
  .delt_btn {
    color: #fff;
    background-color: #ee5747 !important;
  }
}
.el-tag--small {
  height: 28px;
  line-height: 26px;
  padding: 0 24px;
  margin: 18px 16px 0 0;
  font-size: 14px;
  // color: #3a8aeb;
  ::v-deep .el-icon-close {
    font-size: 16px;
  }
}
.add_device_layer {
  ::v-deep .el-dialog__body {
    padding: 0 20px 30px 20px;
  }
}
</style>