front / ningxia-credit-web · Files

<template>
  <div class="monitor">
    <div class="w80">
      <el-breadcrumb separator="/" style="padding: 12px 0;">
        <el-breadcrumb-item>当前位置</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/monitorReport">监控报告</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>监控日报</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="title">
        <div class="title_left">
          <div class="text">监控日报</div>
          <div>
            <img src="../../assets/images/monitor/frame1.png" alt="">
            共 <span>{{ state.monitorReportDays.countObj?.companyCount }}</span> 家企业发生 <span>{{ state.monitorReportDays.countObj?.monCount }}</span> 条动态
          </div>
        </div>
        <div class="title_right">
          <div class="picker">{{ state.monitorReportDays.executeDate }}</div>
          <el-button icon="Download" @click="download">下载</el-button>
        </div>
      </div>
      <div class="dynamics">
        <div class="label">
          <img src="../../assets/images/monitor/dynamics1.png" alt="">
          <div>动态等级</div>
        </div>
        <div class="dynamics_con">
          <div>
            <div style="color: #ED5D5F;">{{ state.monitorReportDays.highRisk }}</div>
            <span>高风险</span>
          </div>
          <div>
            <div style="color: #FF7D37;">{{ state.monitorReportDays.mediumRisk }}</div>
            <span>中风险</span>
          </div>
          <div>
            <div style="color: #8894AB;">{{ state.monitorReportDays.warning }}</div>
            <span>警示</span>
          </div>
          <div>
            <div style="color: #2969E7;">{{ state.monitorReportDays.reminder }}</div>
            <span>提示</span>
          </div>
        </div>
      </div>
      <div class="dynamics">
        <div class="label">
          <img src="../../assets/images/monitor/dynamics2.png" alt="">
          <div>动态类型</div>
        </div>
        <div class="dynamics_con dynamics_con1">
          <div>
            <div style="color: #ED5D5F;">{{ state.monitorReportDays.typeObj?.工商信息 }}</div>
            <span>工商信息</span>
          </div>
          <div>
            <div style="color: #FF7D37;">{{ state.monitorReportDays.typeObj?.经营信息 }}</div>
            <span>经营信息</span>
          </div>
          <div>
            <div style="color: #8894AB;">{{ state.monitorReportDays.typeObj?.知识产权 }}</div>
            <span>知识产权</span>
          </div>
          <div>
            <div style="color: #2969E7;">{{ state.monitorReportDays.typeObj?.经营风险 }}</div>
            <span>经营风险</span>
          </div>
          <div>
            <div style="color: #2969E7;">{{ state.monitorReportDays.typeObj?.司法风险 }}</div>
            <span>司法风险</span>
          </div>
        </div>
      </div>
      <div v-if="state.gfx.length" class="company">
        <div class="company_title" style="color: #ED5D5F;">
          高风险
        </div>
        <div class="company_con">
          <el-table :data="state.gfx" style="width: 100%">
            <el-table-column label="#" type="index" />
            <el-table-column property="companyName" label="企业名称" />
            <el-table-column property="typeStr" label="风险类型" />
            <el-table-column property="content" label="风险内容" >
              <template #default="scope">
                <template v-if="scope.row.content">
                  <div v-for="item in scope.row.content.split(';')" :key="item.id">{{ item }}</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column property="storageTime" label="更新时间" />
            <el-table-column label="操作" >
              <template #default="scope">
                <el-button v-if="['5029', '5030', '5031', '5032', '5033', '5034', '45'].includes(scope.row.type)" text type="primary" @click="toDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
            
          </el-table>
        </div>
      </div>
      <div v-if="state.zfx.length" class="company">
        <div class="company_title" style="color: #FF7D37;">
          中风险
        </div>
        <div class="company_con">
          <el-table :data="state.zfx" style="width: 100%">
            <el-table-column label="#" type="index" />
            <el-table-column property="companyName" label="企业名称" />
            <el-table-column property="typeStr" label="风险类型" />
            <el-table-column property="content" label="风险内容" >
              <template #default="scope">
                <template v-if="scope.row.content">
                  <div v-for="item in scope.row.content.split(';')" :key="item.id">{{ item }}</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column property="storageTime" label="更新时间" />
            <el-table-column label="操作" >
              <template #default="scope">
                <el-button v-if="['5029', '5030', '5031', '5032', '5033', '5034', '45'].includes(scope.row.type)" text type="primary" @click="toDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
            
          </el-table>
        </div>
      </div>
      <div v-if="state.gz.length" class="company">
        <div class="company_title" style="color: #8894AB;">
          警示
        </div>
        <div class="company_con">
          <el-table :data="state.gz" style="width: 100%">
            <el-table-column label="#" type="index" />
            <el-table-column property="companyName" label="企业名称" />
            <el-table-column property="typeStr" label="风险类型" />
            <el-table-column property="content" label="风险内容" >
              <template #default="scope">
                <template v-if="scope.row.content">
                  <div v-for="item in scope.row.content.split(';')" :key="item.id">{{ item }}</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column property="storageTime" label="更新时间" />
            <el-table-column label="操作" >
              <template #default="scope">
                <el-button v-if="['5029', '5030', '5031', '5032', '5033', '5034', '45'].includes(scope.row.type)" text type="primary" @click="toDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
            
          </el-table>
        </div>
      </div>
      <div v-if="state.ts.length" class="company">
        <div class="company_title" style="color: #8894AB;">
          提示
        </div>
        <div class="company_con">
          <el-table :data="state.ts" style="width: 100%">
            <el-table-column label="#" type="index" />
            <el-table-column property="companyName" label="企业名称" />
            <el-table-column property="typeStr" label="风险类型" />
            <el-table-column property="content" label="风险内容" >
              <template #default="scope">
                <template v-if="scope.row.content">
                  <div v-for="item in scope.row.content.split(';')" :key="item.id">{{ item }}</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column property="storageTime" label="更新时间" />
            <el-table-column label="操作" >
              <template #default="scope">
                <el-button v-if="['5029', '5030', '5031', '5032', '5033', '5034', '45'].includes(scope.row.type)" text type="primary" @click="toDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
            
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="企业详情" width="1200">
    <!-- <div class="dialog_title"><i></i>企业详情</div> -->
    <div class="dialog_con">
      <!-- <template v-for="item in state.detailItem" :key="item.id">
        <div class="item" v-if="item.types === undefined || (item.types && item.types.includes(state.tableLevelIndex))" :style="{width:item.span==2?'100%':'50%'}">
          <div class="label">{{ item.label }}</div>
          <div class="text">{{ JSON.parse(state.typeDataDetail.data)[item.prop] }}</div>
        </div>
      </template> -->
      <el-descriptions border :column="2">
        <template v-for="item in state.detailItem" :key="item.id">
          <el-descriptions-item v-if="item.types === undefined || (item.types && item.types.includes(state.tableLevelIndex))" :label="item.label" :span="item.span" width="500px">{{JSON.parse(state.typeDataDetail.data)[item.prop]}}</el-descriptions-item>
        </template>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import * as api from '../../interface/api.ts'
import {downloadFileGet} from "../../utils/request.ts";
const download = () => {
  downloadFileGet('/web/monitorReportDays/down/'+route.query.id)
}
const route = useRoute()

const state = reactive({
  monitorReportDays: {},
  data: {},
  gfx: [],
  zfx:[],
  gz:[],
  ts:[],
  typeDataDetail: {},
  detailItem: [{
    prop: "c_ah",
    label: "案号",
  }, {
    prop: "n_ssdw",
    label: "诉讼地位",
  }, {
    prop: "d_larq",
    label: "立案时间",
  }, {
    prop: "n_ajjzjd",
    label: "案件进展阶段",
  }, {
    prop: "n_slcx",
    label: "审理程序",
    types: ['5029','5030','5031']
  }, {
    prop: "n_laay",
    label: "立案案由",
    types: ['5029','5030','5031','5032']
  }, {
    prop: "n_sqzxbdje",
    label: "申请执行标的金额",
    types: ['5032']
  }, {
    prop: "n_laay_tree",
    label: "立案案由详细",
    types: ['5029','5030','5031']
  }, {
    prop: "n_laay_tag",
    label: "立案案由标签",
    types: ['5029','5030','5031']
  }, {
    prop: "court",
    label: "经办法院",
    types: ['5029','5030','5031']
  }, {
    prop: "zxfy",
    label: "执行法院",
    types: ['5032', '5033', '5034']
  }, {
    prop: "c_ssdy",
    label: "所属地域",
  }, {
    prop: "n_sqbqse",
    label: "申请保全数额",
    types: ['5034']
  }, {
    prop: "n_sqbqse_level",
    label: "申请保全数额等级",
    types: ['5034']
  }, {
    prop: "c_sqbqbdw",
    label: "申请保全标的物",
    span: "2",
    types: ['5034']
  }, {
    prop: "n_qsbdje",
    label: "起诉标的金额",
    types: ['5029','5031']
  }, {
    prop: "n_qsbdje_level",
    label: "起诉标的金额等级",
    types: ['5029','5031']
  }, {
    prop: "n_fzje",
    label: "犯罪金额",
    types: ['5030']
  }, {
    prop: "n_fzje_level",
    label: "犯罪金额等级",
    types: ['5030']
  }, {
    prop: "n_bqqpcje",
    label: "被请求赔偿金额",
    types: ['5030']
  }, {
    prop: "n_bqqpcje_level",
    label: "被请求赔偿金额等级",
    types: ['5030']
  }, {
    prop: "d_jarq",
    label: "结案时间",
  }, {
    prop: "n_jafs",
    label: "结案方式",
  }, {
    prop: "n_bj_victory",
    label: "是否胜诉",
    types: ['5029','5031']
  }, {
    prop: "n_jaay",
    label: "结案案由",
    types: ['5029','5031','5032']
  }, {
    prop: "n_jaay_tree",
    label: "结案案由详细",
    types: ['5029','5031']
  }, {
    prop: "n_jaay_tag",
    label: "结案案由标签",
    types: ['5029','5031']
  }, {
    prop: "n_jabdje",
    label: "结案标的金额",
    types: ['5029','5031','5032']
  }, {
    prop: "n_jabdje_level",
    label: "结案标的金额等级",
    types: ['5029','5031']
  }, {
    prop: "n_pcjg",
    label: "判处结果",
    types: ['5030']
  }, {
    prop: "n_dzzm",
    label: "定罪罪名",
    types: ['5030']
  }, {
    prop: "n_ccxzxje",
    label: "财产刑执行金额",
    types: ['5030']
  }, {
    prop: "n_pcpcje",
    label: "判处赔偿金额",
    types: ['5030']
  }, {
    prop: "n_dzzm_tree",
    label: "定罪罪名详细",
    span: "2",
    types: ['5030']
  }, {
    prop: "n_sjdwje",
    label: "实际到位金额",
    types: ['5032']
  }, {
    prop: "n_wzxje",
    label: "未执行金额",
    types: ['5032']
  }, {
    prop: "c_gkws_glah",
    label: "公开文书_相关案号",
    span: "2"
  }, {
    prop: "c_gkws_dsr",
    label: "公开文书_当事人",
    span: "2"
  }, {
    prop: "c_gkws_pjjg",
    label: "公开文书_判决结果",
    span: "2"
  }],
})

const dialogTableVisible = ref(false)

const toDetail = (d) => {
  console.log(d)
  state.typeDataDetail = d
  dialogTableVisible.value = true
}

onMounted(() => {
  api.getInfoList({},'/web/monitorReportDays/'+route.query.id).then(res => {
    state.monitorReportDays = res.data.monitorReportDays
    state.gfx = res.data.gfx
    state.zfx = res.data.zfx
    state.gz = res.data.gz
    state.ts = res.data.ts
    state.monitorReportDays.countObj=JSON.parse(state.monitorReportDays.countJson)
    state.monitorReportDays.typeObj=JSON.parse(state.monitorReportDays.typeJson)
    console.log(state.monitorReportDays.typeObj)
  })
})
</script>

<style scoped>
.monitor {
  background: #F5F9FF;
  padding-top: 10px;
  padding-bottom: 80px;
  font-family: 思源黑体 CN, 思源黑体 CN;
  min-height: calc(100vh - 225px);
  color: rgba(0,0,0,0.85);
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    div {
      display: flex;
      align-items: center;
      img {
        width: 24px;
        margin-right: 8px;
      }
      span {
        color: #2969E7;
        margin: 0 8px;
      }
      .el-button {
        margin-left: 8px;
        border-color: #fff;
      }
      .el-button:nth-child(1) {
        margin-right: 8px;
      }
      ::v-deep .el-input__wrapper {
        border-color: #fff;
      }
    }
    .text {
      font-weight: 400;
      font-size: 26px;
      color: #1A2653;
      margin-right: 32px;
    }
    .picker {
      height: 32px;
      padding: 0 12px;
      background: #fff;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .dynamics {
    display: flex;
    margin-bottom: 16px;
    .label {
      width: 223px;
      height: 84px;
      background: linear-gradient( 180deg, #CEDDFA 0%, #F4F8FE 100%);
      box-shadow: 0px 2px 8px 0px rgba(23,63,142,0.1);
      border-radius: 12px 12px 12px 12px;
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      padding-left: 28px;
      box-sizing: border-box;
      margin-right: 16px;
      img {
        width: 60px;
        height: 60px;
        margin-right: 16px;
      }
      div {
        font-weight: 500;
        font-size:18px;
        color: #2969E7;
        line-height: 22px;
      }
    }
    .dynamics_con {
      width: calc(100% - 239px);
      display: flex;
      justify-content: space-between;
      &>div {
        width: calc(25% - 12px);
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(23,63,142,0.1);
        border-radius: 12px 12px 12px 12px;
        padding-top: 16px;
        box-sizing: border-box;
        div {
          font-weight: 500;
          font-size: 24px;
          color: #FF7D37;
          line-height: 24px;
          text-align: center;
        }
        span {
          display: block;
          font-weight: 500;
          font-size: 16px;
          color: #4B5B76;
          text-align: center;
        }
      }
    }
    .dynamics_con1 {
      &>div {
        width: calc(20% - 12.8px);
      }
    }
  }
  .company {
    background: #FFFFFF;
    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));
    padding: 24px;
    margin-bottom: 20px;
    .company_title {
      display: flex;
      margin-bottom: 12px;
      .img {
        width: 48px;
        height: 48px;
        margin-right: 12px;
        box-sizing: border-box;
        padding: 5px;
        background: #94B3EC;
        border-radius: 4px;
        text-align: center;
        line-height: 1.2;
        color: #fff;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div {
          font-weight: 400;
          font-size:18px;
          color: #1A2653;
          line-height: 1.2;
        }
        span {
          font-weight: 400;
          font-size: 14px;
          color: #5F7292;
        }
      }
    }
    .company_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 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)) ;
      }
      ::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); */
      }
    }
  }
}
.dialog_title {
  padding: 12px 0;
  display: flex;
  align-items: center;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #4B5B76;
  i {
    width: 4px;
    height: 18px;
    background: #2969E7;
    border-radius: 2px 2px 2px 2px;
    margin-right: 8px;
  }
}
::v-deep .el-overlay .el-dialog__header {
  border-bottom: 1px solid #000 !important;
}
.dialog_con {
  box-shadow: 0px 4px 16px 0px rgba(23,63,142,0.1);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;
  .item {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 40px;
    div {
      padding-left: 32px;
      box-sizing: border-box;
    }
    .label {
      width: 172px;
      background: #F5F9FF;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 24px;
    }
    .text {
      width: calc(100% - 172px);
      padding-top: 8px;
      padding-bottom: 8px;
      padding-right: 12px;
    }
  }
  /* .item:nth-child(1),.item:nth-child(2),.item:nth-child(5),.item:nth-child(6),
  .item:nth-child(9),.item:nth-child(10),.item:nth-child(13),.item:nth-child(14),
  .item:nth-child(17),.item:nth-child(18),.item:nth-child(21),.item:nth-child(22){
    background: #F5F9FF;
  } */
}
</style>