front / ningxia-credit-web · Files

<template>
  <div class="monitor">
    <div class="w80">
      <div class="monitor_num">
        <div class="item">
          <img src="../../assets/images/monitor/modelIcon1.png" alt="">
          <div>
            <div>
              {{ state.count.templateCount }}
              <span>个</span>
            </div>
            <div class="text">预警模版</div>
          </div>
        </div>
        <div class="item">
          <img src="../../assets/images/monitor/modelIcon3.png" alt="">
          <div>
            <div>
              {{ state.count.companyCount }}
              <span>家</span>
            </div>
            <div class="text">监控企业数</div>
          </div>
        </div>
        <div class="item">
          <img src="../../assets/images/monitor/modelIcon4.png" alt="">
          <div>
            <div>
              {{ state.count.warningCount }}
              <span>条</span>
            </div>
            <div class="text">已触发预警数</div>
          </div>
        </div>
      </div>
      <div class="title">
        <div>
          <el-input v-model="state.searchInfo.templateName" style="width: 240px;margin-right: 16px;" placeholder="模板名称" />
          <el-select v-model="state.searchInfo.enableStatus" style="width: 240px;margin-right: 16px;" placeholder="启用状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="state.searchInfo.groupName" style="width: 240px;margin-right: 16px;" placeholder="监控对象">
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.groupName"
              :value="item.groupName"
            />
          </el-select>
          <el-button type="primary" icon="Search" @click="getList">查询</el-button>
          <el-button style="border-color: #fff;" icon="Refresh" @click="setRemove">重置</el-button>
        </div>
        <div class="right">
          <el-button text icon="Plus" style="color: #1A2653;" @click="toAdd">新增</el-button>
          <el-button text icon="Setting" style="color: #1A2653;" @click="monitorMessage=true">监控通知设置</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="state.list" style="width: 100%">
          <el-table-column type="index" label="#"/>
          <el-table-column property="templateName" label="模板名称" />
          <el-table-column property="groupName" label="监控对象"/>
          <el-table-column property="effectiveDate" label="生效时间" />
          <!-- <el-table-column property="name" label="高风险预警指标" /> -->
          <el-table-column label="启用状态">
            <template #default="scope">
              <el-switch v-model="scope.row.enableStatus" active-value="0" inactive-value="1" @change="(e)=>setSwitch(e,scope.row)" />
            </template>
          </el-table-column>
          <el-table-column
            property="address"
            label="操作"
            show-overflow-tooltip
            width="280"
          >
            <template #default="scope">
              <el-button text @click="setSelect(scope.row)">选择分组</el-button>
              <el-button text @click="setEdit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.templateName!='默认模板'" text @click="setDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="select_pagination">
        <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="state.total" @change="getList" />
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisibles" title="选择分组" width="500" class="select_dialog">
    <div class="select_con">
      <el-table :data="optionsList" style="width: 100%" @selection-change="handleRowClick">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column property="groupName" label="对象分组" />
      </el-table>
    </div>
    <!-- <div class="select_pagination">
      <el-pagination background layout="prev, pager, next" :total="state.total" />
    </div> -->
    <div class="select_button">
      <el-button @click="dialogTableVisibles=false">取消</el-button>
      <el-button type="primary" @click="setgroupName">确定</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="monitorMessage" title="监控通知设置" width="1200" class="select_dialog">
    <div class="message_con">
      <el-form ref="ruleFormRef" :model="state.rulesForm" :rules="rules">
        <el-row>
          <el-col :span="18">
            <el-form-item label="监控动态发送邮箱：" prop="source">
              <el-radio-group v-model="state.rulesForm.source">
                <el-radio value="0">当前登录邮箱：
                  <span style="display:inline-block; width: 180px">{{state.userInfo.email}}</span>
                </el-radio>
                <el-radio value="1">其他指定邮箱：
                  <el-input style="width: 180px;" v-model="state.rulesForm.otherEmail" placeholder="请输入邮箱地址" size="small"></el-input>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="监控动态发送频率：" prop="sendFrequency">
          <el-radio-group v-model="state.rulesForm.sendFrequency">
            <el-radio value="0">天</el-radio>
            <el-radio value="1">周</el-radio>
            <el-radio value="2">月</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="select_button">
      <el-button @click="monitorMessage=false">取消</el-button>
      <el-button type="primary" @click="handleSetSend">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import * as api from '../../interface/api.ts'

const currentPage = ref(1)
const dialogTableVisibles = ref(false)
const monitorMessage = ref(false)
let validatorEmail = (rule, value, callback)=> {
  if (value === '1') {
    if (state.rulesForm.otherEmail === "") {
      callback(new Error("请输入其他指定邮箱"))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
let ruleFormRef = ref<FormInstance>()
let handleSetSend = () => {
  let tempJson = {source: state.rulesForm.source, email: undefined, sendFrequency: state.rulesForm.sendFrequency}
  if (tempJson.source === '0') {
    tempJson.email = state.userInfo.mail
  } else {
    tempJson.email = state.rulesForm.otherEmail
  }
  ruleFormRef.value.validate((valid: boolean, fields: Object)=> {
    if (valid) {
      api.addOrUpdate(tempJson).then((res: any)=> {
        ElMessage.success("提交成功")
        monitorMessage.value = false
        getSendSetting()
      })
    }
  })
}
let getSendSetting = () => {
  api.getJob().then((res: any)=> {
    if (res.data.id) {
      state.rulesForm = res.data
      if (state.rulesForm.source === '1') {
        state.rulesForm.otherEmail = res.data.email
      } else {
        state.rulesForm.otherEmail = ""
      }
    }
  })
}
const state = reactive({
  rulesForm: {
    source: "0",
    otherEmail: "",
    sendFrequency: "0"
  },
  userInfo: {
    backOrderDeptId: 
    null,
    backOrderUserId
    : 
    null,
    bizTypes
    : 
    "-3,-10,60,-2,-6",
    code
    : 
    null,
    contractId
    : 
    6236,
    createBy
    : 
    null,
    createTime
    : 
    null,
    dataStatus
    : 
    "0",
    deleteStatus
    : 
    "0",
    deptType
    : 
    "0",
    frontMenu
    : 
    [{pageNum: null, pageSize: null, searchValue: null, createBy: "admin"}],
    frontRoles
    : 
    null,
    headId
    : 
    "101",
    id
    : 
    226,
    lastUpdataTime
    : 
    null,
    loginName
    : 
    "18769751808",
    loginTimes
    : 
    null,
    mail
    : 
    "kouxinyu_bjzx@lhcis.com",
    modifyPsdPage
    : 
    null,
    needaudit
    : 
    "Y",
    operator
    : 
    null,
    orderNo
    : 
    null,
    orderOrgName
    : 
    "联合信用征信股份有限公司",
    orgId
    : 
    101,
    pageNum
    : 
    null,
    pageSize
    : 
    null,
    params
    : 
    {},
    parentId
    : 
    null,
    parentOrgName
    : 
    "联合信用征信股份有限公司",
    password
    : 
    null,
    phone
    : 
    "18769751808",
    remark
    : 
    null,
    reports
    : '',
    searchValue
    : 
    null,
    storageTime
    : 
    null,
    tempConfList
    : 
    [{orgId: 101, name: "标准版企业信用报告（基础额度行业版）", num: "-1", value: "-4", tempType: 1}]
    ,token
    : 
    "2746bfbfaed14570bb808f1aa58eb4ee"
    ,updateBy
    : 
    null
    ,updateTime
    : 
    null
    ,userName
    : 
    "新宇1"
    ,userType
    : 
    null
  },
  list: [],
  total: 0,
  searchInfo: {
    templateName: '',
    enableStatus: '',
    groupName: ''
  },
  count: {}
})
let rules = reactive({
  source: [
    { validator: validatorEmail, trigger: ["blur",'change'] },
    // { validator: valid.formValidationForm.checkPost_N, trigger: ["blur",'change'] }
  ]
})


const setpage = (d) => {
  console.log(d)
}

const setEdit = (d) => {
  router.push('/monitorModelAdd?id='+d.id)
}

const singleSelectData = ref([])
const handleRowClick = (val) => {
  singleSelectData.value = val
}
const setgroupName = () => {
  if(singleSelectData.value.length>1) {
    ElMessage({
      type: 'warning',
      message: '只能选择一个对象分组',
    })
    return
  }
  api.submitData({...dataInfo.value,beforeGroupId:dataInfo.value?.groupId,groupId:singleSelectData.value[0].id,groupName:singleSelectData.value[0].groupName},'business/monitorTemplate/editTemplate').then(res=> {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    dialogTableVisibles.value = false
    getList()
  })
}

const setDelete = (d) => {
  ElMessageBox.confirm(
    `是否删除${d.templateName}`,
    '删除模板',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    api.submitData({...d,deflag:'1'},'business/monitorTemplate/editTemplate').then((res:any) => {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      getList()
    })
  })
  
}

const options = [{
  value: '0',
  label: '启用'
},{
  value: '1',
  label: '禁用'
}]

const setRemove = () => {
  state.searchInfo = {
    templateName: '',
    enableStatus: '',
    groupName: ''
  }
  getList()
}

const router = useRouter();
const toAdd = () => {
  router.push('/monitorModelAdd')
}

const getList = () => {
  api.submitData({...state.searchInfo,deflag:0,pageNum: currentPage.value,pageSize:10},'business/monitorTemplate/list').then((res:any) => {
    state.list = res.data.rows
    state.total = res.data.total
  })
}

const dataInfo = ref({})
const setSelect = (d) => {
  dataInfo.value = d
  dialogTableVisibles.value = true
}

const setSwitch = (e,d) => {
  api.submitData(d,'business/monitorTemplate/editTemplate').then(res=> {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    getList()
  })
}

const optionsList:any = ref([])
onMounted(() => {
  getList()
  getSendSetting()
  api.submitData({deflag:0},'/business/monitorGroup/list').then(res=> {
    optionsList.value = res.data
  })
  api.submitData({},'/business/monitorTemplate/getCount').then((res:any) => {
    state.count = res.data
  })
  state.userInfo = JSON.parse(localStorage.getItem('userInfo'))
})
</script>

<style scoped>
.monitor {
  background: #F5F9FF;
  padding-top: 10px;
  padding-bottom: 80px;
  font-family: 思源黑体 CN, 思源黑体 CN;
  min-height: calc(100vh - 225px);
  .monitor_num {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    .item {
      box-sizing: border-box;
      display: flex;
      padding: 14px 24px;
      width: calc(33.3% - 12px);
      background: linear-gradient( 180deg, #F1F4FF 0%, #FFFFFF 100%);
      box-shadow: 0px 4px 16px 0px rgba(23,63,142,0.1);
      border-radius: 12px 12px 12px 12px;
      border: 2px solid;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
      img {
        width: 100px;
        height: 100px;
        margin-right: 32px;
      }
      &>div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 5px;
        div {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 40px;
          color: #2969E7;
          span {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 16px;
            color: #8894AB;
          }
        }
        .text {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #1A2653;
          letter-spacing: 1px;
          font-weight: bold;
        }
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-content: inherit;
    margin-bottom: 24px;
    img {
      width: 24px;
    }
    &>div {
      display: flex;
      align-items: center;
      ::v-deep .el-input__wrapper {
        border-color: #fff;
      }
    }
    .right {
      display: flex;
      .el-button {
        height: 40px;
      }
      img {
        width: 20px;
        margin-right: 10px;
      }
      &>.el-button {
        height: 40px;
        margin-left: 10px;
      }
    }
  }
  .search {
    background: #FFFFFF;
    box-shadow: 0px 4px 16px 0px rgba(23,63,142,0.1);
    border-radius: 12px 12px 12px 12px;
    padding: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    margin-bottom: 24px;
    .item {
      display: flex;
      margin-bottom: 12px;
      .label {
        font-weight: 500;
        font-size: 16px;
        color: #1A2653;
        line-height: 30px;
        font-weight: bold;
        margin-right: 20px;
      }
      .select {
        display: flex;
        align-items: center;
        div {
          padding: 3px 23px 3px 23px;
          background: #F5F9FF;
          border-radius: 4px 4px 4px 4px;
          margin-right: 8px;
          color: #1A2653;
          cursor: pointer;
        }
        img {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
        .active {
          background: #2969E7;
          color: #fff;
        }
        .el-select {
          width: 120px;
        }
        ::v-deep .el-select__wrapper {
          background: #F5F9FF;
        }
      }
    }
  }
  .table {
    .table_title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      span {
        color: #2969E7;
      }
      .el-button {
        border-color: #fff;
        background: #fff;
        color: #1A2653;
        img {
          width: 18px;
          margin-right: 10px;
        }
      }
    }
    ::v-deep .el-table__header {
      border-radius: 12px 12px 12px 12px;
      overflow: hidden;
      border: 1px solid #fff;
      margin-bottom: 8px;
    }
    ::v-deep .el-table__header-wrapper {
      background: #F5F9FF;
    }
    ::v-deep .el-table__header thead {
      background: linear-gradient( 180deg, #CEDDFA 0%, #F4F8FE 100%);
      box-shadow: 0px 4px 16px 1px rgba(23,63,142,0.1);
      border-radius: 12px 12px 12px 12px;
      overflow: hidden;
      /* border: 2px solid #fff; */
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
    }
    ::v-deep .el-table__header th.el-table__cell {
      background: transparent;
      border-bottom-color: #fff;
    }
    ::v-deep .el-table__header tr {
      background: transparent;
      border-radius: 12px 12px 12px 12px;
      overflow: hidden;
    }
  }
  .select_pagination {
    display: flex;
    justify-content: center;
    margin: 24px 0 32px;
  }
}
.select_con {
  ::v-deep .el-table__header {
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    border: 1px solid #fff;
    margin-bottom: 8px;
  }
  ::v-deep .el-table__header-wrapper {
  }
  ::v-deep .el-table__header thead {
    background: linear-gradient( 180deg, #CEDDFA 0%, #F4F8FE 100%);
    box-shadow: 0px 4px 16px 1px rgba(23,63,142,0.1);
    box-shadow: 0px 4px 16px 0px rgba(23,63,142,0.1);
    border-radius: 12px 12px 12px 12px;
    /* overflow: hidden; */
    /* border: 2px solid #fff; */
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
  }
  ::v-deep .el-table__header th.el-table__cell {
    background: transparent;
    border-bottom-color: #fff;
  }
  ::v-deep .el-table__header tr {
    background: transparent;
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
  }
  .el-table {
    /* box-shadow: 0px 4px 16px 0px rgba(23,63,142,0.1); */
  }
  .box {
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
  }
  .active {
    
  }
}
.select_pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0 32px;
}
.select_button {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>