luohe_operation/src/pages/index/components/message_management.vue

<template>
  <div class="body-wrapper">
    <el-tabs v-model="activeName">
      <el-tab-pane label="配置消息" name="配置消息">
        <div class="form-div">
          <el-form label-position="left" label-width="100px" :model="formLabelAlign">
            <el-form-item label="标题：">
              <el-input v-model="formLabelAlign.messageTitle"></el-input>
            </el-form-item>
            <el-form-item label="内容：">
              <el-input type="textarea"
                        :rows="4"
                        v-model="formLabelAlign.messageArea"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleConfirm">推送消息</el-button>
          </span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="通知消息" name="通知消息">
        <el-form class="form-wrapper" :inline="true" :model="formInline2" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="报警信息:">
                <el-input v-model="formInline2.alarmMessage" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData2">
          <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <div slot-scope="scope">
              <el-button @click="handleDetail2(scope.row)" type="primary" size="mini">查看详情</el-button>
            </div>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="total2" @current-change="handlePageChange2"
                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
          </el-pagination>
        </div>
        <el-dialog
          :title="title2"
          :visible.sync="dialogVisible2"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form disabled label-position="left" label-width="110px" :model="formLabelAlign2">
              <el-form-item label="报警信息">
                <el-input v-model="formLabelAlign2.alarmMessage"></el-input>
              </el-form-item>
              <el-form-item label="车牌号">
                <el-input v-model="formLabelAlign2.plateNo"></el-input>
              </el-form-item>
              <el-form-item label="报警时间">
                <el-input v-model="formLabelAlign2.alarmTime"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="设备报警消息" name="设备报警消息">
        <el-form class="form-wrapper" :inline="true" :model="formInline3" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备报警:">
                <el-input v-model="formInline3.alertInfo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit3">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData3">
          <el-table-column v-for="(item, index) in columns3" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
          <el-table-column
            label="详情"
            width="200">
            <div slot-scope="scope">
              <el-button @click="handleDetail3(scope.row)" type="primary" size="mini">查看详情</el-button>
            </div>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope" style="display: inline-block">
              <el-popconfirm title="确定删除吗？" @confirm="deleteRow3(scope.row)">
                <el-button type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="total3" @current-change="handlePageChange3"
                         :current-page.sync="pageNum3" :page-size.sync="pageSize3">
          </el-pagination>
        </div>

        <el-dialog
          :title="title3"
          :visible.sync="dialogVisible3"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form disabled label-position="left" label-width="100px" :model="formLabelAlign3">
              <el-form-item label="设备报警">
                <el-input v-model="formLabelAlign3.alertInfo"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-input v-model="formLabelAlign3.readFlag"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="监控车辆报警消息" name="监控车辆报警消息">
        <el-form class="form-wrapper" :inline="true" :model="formInline4" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备报警:">
                <el-input v-model="formInline4.equipmentAlarm" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备ID:">
                <el-input v-model="formInline4.equipmentID" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit4">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData4">
          <el-table-column v-for="(item, index) in columns4" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <div slot-scope="scope">
              <el-button @click="handleDetail4(scope.row)" type="primary" size="mini">查看详情</el-button>
            </div>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="total4" @current-change="handlePageChange4"
                         :current-page.sync="pageNum4" :page-size.sync="pageSize4">
          </el-pagination>
        </div>

        <el-dialog
          :title="title4"
          :visible.sync="dialogVisible4"
          width="45%"
          custom-class="audit-dialog">
          <div class="form-div">
            <el-form disabled label-position="left" label-width="100px" :model="formLabelAlign4">
              <el-form-item label="设备报警">
                <el-input v-model="formLabelAlign4.alertInfo"></el-input>
              </el-form-item>
              <el-form-item label="设备ID">
                <el-input v-model="formLabelAlign4.deviceId"></el-input>
              </el-form-item>
              <el-form-item label="报警时间">
                <el-date-picker
                  v-model="formLabelAlign4.createTime"
                  type="date">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/audit.js";
import api_l from "@/api/article_liao.js";

export default {
  components: {},
  data() {
    return {
      activeName: '配置消息',
      formLabelAlign: {
        id: '',
        messageTitle: '',
        messageArea: '',
      },
      columns2: [
        {
          label: '报警信息',
          key: 'alarmMessage'
        },
        {
          label: '车牌号',
          key: 'plateNo'
        },
        {
          label: '报警时间',
          key: 'alarmTime'
        },
      ],
      tableData2: [{alarmMessage: 'sasa1'}],
      total2: 0,
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        alarmMessage: '',
      },
      title2: '',
      dialogVisible2: false,
      formLabelAlign2: {
        id: '',
        alarmMessage: '',
        plateNo: '',
        alarmTime: '',
      },
      columns3: [
        {
          label: '设备报警',
          key: 'alertInfo'
        },
        {
          label: '详情',
          key: 'alertDetail'
        },
        {
          label: '状态',
          key: 'readFlag'
        },
      ],
      tableData3: [],
      total3: 0,
      pageSize3: 10,
      pageNum3: 1,
      formInline3: {
        alertInfo: '',
      },
      title3: '',
      dialogVisible3: false,
      formLabelAlign3: {
        id: '',
        readFlag: '',
        alertInfo:'',

      },
      columns4: [
        {
          label: '设备报警',
          key: 'alertInfo'
        },
        {
          label: '设备ID',
          key: 'deviceId'
        },
        {
          label: '报警时间',
          key: 'createTime'
        },
      ],
      tableData4: [{equipmentAlarm: 'sasa1111',alarmTime:'2023'}],
      total4: 0,
      pageSize4: 10,
      pageNum4: 1,
      formInline4: {
        plateNo: '',
        deviceId: '',
      },
      title4: '',
      dialogVisible4: false,
      formLabelAlign4: {
        id: '',
        equipmentAlarm: '',
        equipmentID: '',
        alarmTime: '',
      },
    }
  },
  mounted() {
    // this.getTableData1()
    // this.getTableData2()
    this.getTableData3()
    this.getTableData4()
  },
  watch: {},
  methods: {
    handleConfirm() {
      api_l.optMessageManagementPushAdd({msgTitle: this.formLabelAlign.msgTitle,msgContent:this.formLabelAlign.messageArea}).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '添加成功!',
            type: 'success'
          })
          this.formLabelAlign.messageTitle=''
          this.formLabelAlign.messageArea=''
        }
      })
    },
    onSubmit2() {
      this.pageNum2 = 1
      this.getTableData2()
    },
    handleDetail2(row) {
      this.formLabelAlign2 = {...row}
      this.dialogVisible2 = true
    },
    handleDetail3(row) {
      this.formLabelAlign3 = {...row}
      this.dialogVisible3 = true
    },
    handleDetail4(row) {
      this.formLabelAlign4 = {...row}
      this.dialogVisible4 = true
    },
    onSubmit3() {
      this.pageNum3 = 1
      api_l.optMessageManagementDevicePage({searchKey: this.formLabelAlign3.equipmentAlarm}).then(res => {
        this.tableData3 = res.data.records
      })

    },
    handleAdd3() {
      this.title3 = '添加'
      this.formLabelAlign3.tollCollector = ''
      this.formLabelAlign3.workingDate = ''
      this.formLabelAlign3.inCarNumber = ''
      this.formLabelAlign3.outCarNumber = ''
      this.dialogVisible3 = true
    },

    handleEdit3(row) {
      this.title3 = '修改'
      this.formLabelAlign3 = {...row}
      this.dialogVisible3 = true
    },
    deleteRow3(record) {
      api_l.optMessageManagementDeviceDelete([{id: record.id}]).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData3()
        }
      })
    },
    handleConfirm3() {
      if (this.title3 === '修改') {
        api.addWhiteIp({ipAddr: this.formLabelAlign3.ipAddr, id: this.formLabelAlign3.id}).then(res => {
          if (res.code === 200) {
            this.dialogVisible3 = false
            this.$message({
              message: '修改成功!',
              type: 'success'
            })
            this.getTableData3()
          }
        })
      } else {
        api.addWhiteIp({ipAddr: this.formLabelAlign3.ipAddr}).then(res => {
          if (res.code === 200) {
            this.dialogVisible3 = false
            this.$message({
              message: '添加成功!',
              type: 'success'
            })
            this.getTableData3()
          }
        })
      }
    },
    onSubmit4() {
      this.pageNum4 = 1
      this.getTableData4()
    },
    handleAdd4() {
      this.title4 = '添加'
      this.formLabelAlign4.tollCollector = ''
      this.formLabelAlign4.plateNo = ''
      this.formLabelAlign4.releaseTime = ''
      this.formLabelAlign4.releaseReason = ''
      this.dialogVisible4 = true
    },

    handleEdit4(row) {
      this.title4 = '修改'
      this.formLabelAlign4 = {...row}
      this.dialogVisible4 = true
    },
    deleteRow4(record) {
      api.deleteWhiteIp({id: record.id}).then(res => {
        if (res.code === 200) {
          this.$message({type: 'success', message: '删除成功!'})
          this.getTableData4()
        }
      })
    },
    handleConfirm4() {
      if (this.title4 === '修改') {
        api.addWhiteIp({ipAddr: this.formLabelAlign4.ipAddr, id: this.formLabelAlign4.id}).then(res => {
          if (res.code === 200) {
            this.dialogVisible4 = false
            this.$message({
              message: '修改成功!',
              type: 'success'
            })
            this.getTableData4()
          }
        })
      } else {
        api.addWhiteIp({ipAddr: this.formLabelAlign4.ipAddr}).then(res => {
          if (res.code === 200) {
            this.dialogVisible4 = false
            this.$message({
              message: '添加成功!',
              type: 'success'
            })
            this.getTableData4()
          }
        })
      }
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData2() {
      const {pageNum2, pageSize2} = this
      api.gjListByPage({current: pageNum2, size: pageSize2, ...this.formInline2}).then(res => {
        this.tableData2 = res.data.records || []
        this.total2 = res.data.total
      })
    },
    handlePageChange3() {
      this.getTableData3()
    },
    getTableData3() {
      const {pageNum3, pageSize3} = this
      api_l.optMessageManagementDevicePage({current: pageNum3, size: pageSize3}).then(res => {
        this.tableData3 = res.data.records
        this.total3 = res.data.total
      })
    },
    handlePageChange4() {
      this.getTableData4()
    },
    getTableData4() {
      const {pageNum4, pageSize4} = this
      api_l.optMessageManagementVehiclePage({current: pageNum4, size: pageSize4, ...this.formInline4}).then(res => {
        this.tableData4 = res.data.records
        this.total4 = res.data.total
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.body-wrapper {
  padding: 20px;

  .button-block {
    text-align: right;
    margin-bottom: 20px;
  }

  .table-pagination {
    text-align: right;
  }

  .search-card {
    margin-bottom: 20px;
    text-align: center;

    .input-wrapper {
      width: 36%;
    }
  }

  .audit-dialog {
    .mg-bt {
      margin-bottom: 24px;
    }

    .label {
      text-align: right;
    }

    .form-div {
      /deep/ .el-input__inner {
        height: 35px;
        width: 90%;
        border: 1px solid #a6a5a5;
      }
    }
  }
}
</style>