修改

dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue

@@ -23,21 +23,43 @@
                   @input="searchConsulting"></el-input>
               </el-form-item>
             </td>
+            <td class="table-key">统一社会信用代码</td>
+            <td :class="[comIsModify ? 'td-none-padding' : '']">
+              {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
+            </td>
+          </tr>
+          <tr>
+            <td class="table-key">登记状态</td>
+            <td>
+              {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
+            </td>
             <td class="table-key">法人代表</td>
             <td>
               {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
             </td>
           </tr>
           <tr>
-            <!-- <td class="table-key">法人联系电话</td>
+            <td class="table-key">成立日期</td>
             <td>
-              {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
-            </td> -->
+              {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
+            </td>
+            <td class="table-key">注册资本</td>
+            <td>
+              {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
+            </td>
+          </tr>
+          <tr>
             <td class="table-key">注册地址</td>
             <td colspan="3">
               {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
             </td>
           </tr>
+          <tr>
+            <td class="table-key">经营范围</td>
+            <td colspan="3">
+              {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
+            </td>
+          </tr>
         </table>
       </div>
       <!-- 项目联系人 -->

dsk-operate-ui/src/views/consultingOrgManagement/components/ProjectList/index.vue

@@ -187,6 +187,7 @@ export default {
         { label: '合同金额（元）', prop: 'contractOrigValue', width: "110px", align: "right", uid: v4() },
         // { label: '业主单位', prop: 'ownerName', slot: true, uid: v4(), width: "185px", showOverflowTooltip: true },
         // { label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
+        { label: '信息记录人', prop: 'infoRecorder', width: "120px", uid: v4() },
         { label: '创建时间', prop: 'contractSignDate', width: "172px", uid: v4() },
       ],
       fixedPropsKey: ["staticSerialNumber", "projectName"],

dsk-operate-ui/src/views/owner/EnterpriseMonitoring.vue

+<template>
+  <!--企业监控列表-->
+    <div class="app-container EnterpriseMonitoring">
+      <div class="title_wrap">
+        <div class="enterprise_title">
+          企业监控列表
+        </div>
+      </div>
+      <div class="header">
+        <div class="search">
+          <div class="label">风险动态时间</div>
+          <div class="checkbox">
+            <el-radio-group v-model="radio" @change="radioBtn">
+              <el-radio v-for="item in radioList" :label="item.type">{{item.label}}</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-if="radio==6"
+              v-model="date"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              unlink-panels
+              size="small"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="changePicker">
+            </el-date-picker>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="table-search"  v-if="tableDataTotal > 0  && !isSkeleton">
+          <div class="total">共 {{tableDataTotal}} 条</div>
+          <div class="right">
+            <span class="add" @click="addEnterprise">添加企业</span>
+            <span class="add" @click="addDefault" style="width: 110px;">添加默认监控</span>
+            <span class="add1" @click="handleBatch">批量监控</span>
+          </div>
+        </div>
+        <div class="table-item">
+          <div v-if="tableDataTotal > 0  && !isSkeleton">
+            <el-table
+              element-loading-text="Loading"
+              :data="tableData"
+              border
+              highlight-current-row
+            >
+              <el-table-column label="序号" width="60" align="left" fixed>
+                <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
+              </el-table-column>
+              <el-table-column label="监控对象" align="left" prop="companyName">
+                <template slot-scope="scope">
+                  <div v-if="scope.row.companyId">
+                    <router-link  :to="`/monitoring/MonitoringReportDetails/${scope.row.companyId}`" tag="a" class="a-link companyName">{{scope.row.companyName}}</router-link>
+                  </div>
+                  <div v-else>{{scope.row.companyName}}</div>
+                </template>
+              </el-table-column>
+              <el-table-column label="风险动态" align="left">
+                <template slot-scope="scope">
+                  <span class="color1 span">高风险 {{scope.row.highRiskCount}}</span>
+                  <span class="color2 span">中风险 {{scope.row.middleRiskCount}}</span>
+                  <span class="color3 span">低风险 {{scope.row.lowRiskCount}}</span>
+                  <!--<span class="color4 span">提示 {{scope.row.promptCount}}</span>-->
+                  <!--<span class="color5 span">正向 {{scope.row.positiveCount}}</span>-->
+                </template>
+              </el-table-column>
+              <el-table-column label="监控时间" width="200" align="left" prop="createTime"></el-table-column>
+              <el-table-column
+                label="操作"
+                align="left"
+                width="160"
+              >
+                <template slot-scope="scope">
+                  <span style="color:#0081FF;" @click="handleCancel(scope.row.companyId)">取消监控</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
+            <img class="img" src="@/assets/images/project/empty.png">
+            <div class="p1" v-if="radio === null">您还未添加监控企业</div>
+            <div class="p1" v-else>暂无风险动态</div>
+            <!--<div class="p2">建议调整关键词或筛选条件，重新搜索</div>-->
+            <div class="empty-btn">
+              <span class="add" @click="addEnterprise">添加企业</span>
+              <span class="add" @click="addDefault" style="width: 110px;">添加默认监控</span>
+              <span class="add1" @click="handleBatch">批量监控</span>
+            </div>
+          </div>
+        </div>
+        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
+          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </div>
+      </div>
+
+      <el-dialog :visible.sync="jkVisible" custom-class='dialog-claim' title="提示" width="480px" :close-on-click-modal="false">
+        <div class="dialog-content"><i class="el-icon-warning"></i>取消后将错过企业最新动态</div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="jkVisible=false">我再想想</el-button>
+          <el-button type="primary" @click="handleConfirm">确定取消</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog :visible.sync="qyVisible" custom-class='dialog-claim dialogAdd' title="添加监控企业" width="480px" :close-on-click-modal="false" @close="handleCancel1">
+        <div class="add-content">
+          <div class="enterprise">
+            <div class="label">企业名称</div>
+            <el-input class="name" placeholder="请输入企业名称" v-model="companyName">
+              <span slot="append" @click="handleKeyword()">搜索</span>
+            </el-input>
+          </div>
+          <div class="companyList">
+            <div class="list"  v-loading="loading">
+              <div class="item" v-for="item in dataList">
+                <div class="item-left">
+                  <img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.companyName.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />
+                  <img v-else src="@/assets/images/enterprise.png" :alt="item.companyName.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />
+                </div>
+                <div class="item-right">
+                  <p class="right-title" v-html="item.companyName"></p>
+                  <p class="right-tips">推荐监控</p>
+                </div>
+                <span v-if="item.monitor" style="font-size: 12px;">已监控</span>
+                <el-checkbox v-else @change="changeCheckbox(item)" style="margin-left: 15px;"></el-checkbox>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleCancel1">取消</el-button>
+          <el-button type="primary" @click="handleAdd">确定</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog :visible.sync="pldrVisible" custom-class='dialog-claim' title="批量导入监控企业" width="480px" :close-on-click-modal="false" @close="handleUploadCancel1">
+        <div class="upload-content">
+          <el-upload
+            class="upload-demo"
+            drag
+            :action="action"
+            :file-list="fileList"
+            accept=".excel,.xlsx"
+            :headers="headers"
+            :on-change="handleFileListChange"
+            :on-success="onSuccess"
+            :auto-upload="false"
+            ref="upload"
+            multiple>
+            <i class="el-icon-plus"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <div class="el-upload__tip">仅允许导入xls、xlsx格式文件</div>
+          </el-upload>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button class="download" icon="el-icon-download" @click="downloadClick">下载模版</el-button>
+          <el-button @click="handleUploadCancel1">取消</el-button>
+          <el-button type="primary" @click="submitUpload">确定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  import { companyPage,companyList,companyAdd,companyCancel,queryMonitorCompany,defaultAdd } from '@/api/monitoring/monitoring'
+  import { getToken } from '@/utils/auth'
+  import skeleton from '../component/skeleton'
+  export default {
+    name: 'EnterpriseMonitoring',
+    components: {
+      skeleton
+    },
+    data() {
+      return {
+        radio:null,
+        date:[],
+        isSkeleton:true,
+        radioList:[
+          {
+            type:null,
+            label:'全部'
+          },
+          {
+            type:1,
+            label:'今天'
+          },
+          {
+            type:2,
+            label:'近三天'
+          },
+          {
+            type:3,
+            label:'近一周'
+          },
+          {
+            type:4,
+            label:'近半月'
+          },
+          {
+            type:5,
+            label:'近一个月'
+          },
+          {
+            type:6,
+            label:'自定义日期'
+          },
+        ],
+        tableData:[],
+        tableDataTotal:0,
+        companyName:'',
+        jkVisible:false,
+        qyVisible:false,
+        pldrVisible:false,
+        queryParams:{
+          pageNum:1,
+          pageSize:50,
+          condition:{}
+        },
+        dataList:[],
+        cid:[],
+        //上传
+        action:process.env.VUE_APP_BASE_API + '/monitor/system/import',
+        fileList: [],
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+        companyId:'',
+        downloadhref: '',//样例地址
+        // 加载状态
+        loading: false,
+      }
+    },
+    created() {
+      this.downloadhref = '/file/Template.xlsx';
+      this.querySubmit()
+    },
+    methods: {
+      async querySubmit() {
+        companyPage(this.queryParams).then(res => {
+          this.isSkeleton = false;
+          if(res.code === 200){
+            this.tableData=res.rows
+            this.tableDataTotal=res.total
+          }
+        })
+      },
+      handleKeyword(){
+        this.dataList=[]
+        this.addEnterprise()
+      },
+      changeCheckbox(item){
+        if (this.cid.indexOf(item.id) == -1) {
+          this.cid.push(item.id)
+        } else {
+          this.cid.splice(this.cid.indexOf(item.id), 1)
+        }
+      },
+      handleCancel1(){
+        this.qyVisible=false;
+        this.companyName=''
+        this.dataList=[]
+        this.cid=[]
+      },
+      handleAdd(){
+        let data={
+          cid:this.cid
+        }
+        if(this.cid.length > 0){
+          companyAdd(data).then(res => {
+            this.qyVisible=false;
+            this.companyName=''
+            this.dataList=[]
+            this.cid=[]
+            this.$message.success("新增成功");
+            this.querySubmit()
+          })
+        }else {
+          this.$message.warning("请选择要添加的企业");
+        }
+
+
+      },
+      radioBtn(val){
+        let endTime = new Date()
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=50
+        switch (val) {
+          case 1:
+            this.queryParams.condition.beginTime=this.formatDate(endTime)
+            this.queryParams.condition.endTime=this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 2:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 3))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 3:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 7))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 4:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 15))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 5:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 30))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 6:
+            this.date=[]
+            break;
+          default:
+            this.queryParams.condition.beginTime =''
+            this.queryParams.condition.endTime =''
+            this.querySubmit()
+            break;
+        }
+      },
+      // 重置页数
+      handleSizeChange(val) {
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.querySubmit()
+      },
+      // 跳转指定页数
+      handleCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.querySubmit()
+        window.scrollTo(0, 0);
+      },
+      // 时间选择改变后的回调
+      changePicker(value) {
+        if(value && value.length) {
+          this.queryParams.condition.beginTime = value[0]
+          this.queryParams.condition.endTime = value[1]
+        }else {
+          delete this.queryParams.condition.beginTime
+          delete this.queryParams.condition.endTime
+        }
+        this.querySubmit()
+      },
+      // 时间格式化
+      formatDate(timeStr) {
+        let date = new Date(Number(timeStr));
+        let year = date.getFullYear();
+        let month = String(date.getMonth() + 1).padStart(2, 0);
+        let day = String(date.getDate()).padStart(2, 0);
+        return `${year}-${month}-${day}`;
+      },
+      handleCancel(id){
+        this.jkVisible=true;
+        this.companyId=id
+      },
+      handleConfirm(){
+        companyCancel({cid:[this.companyId]}).then(res => {
+          this.jkVisible=false;
+          this.$message.success("取消成功");
+          this.querySubmit()
+        })
+      },
+      addDefault(){
+        this.$confirm('是否添加所有供应商监控', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          defaultAdd().then(res => {
+            if(res.code === 200){
+              this.$message.success(res.msg);
+            }
+          })
+        }).catch(() => {
+
+        });
+      },
+      addEnterprise(){
+        this.qyVisible=true;
+        this.loading = true
+        let data={
+          pageNum:1,
+          pageSize:10
+        }
+        if (this.companyName){
+          data.companyName=this.companyName;
+        }
+        queryMonitorCompany(data).then(res => {
+          this.loading = false
+          this.dataList=res.rows;
+        })
+      },
+      handleBatch(){
+        this.pldrVisible=true;
+      },
+      handleFileListChange(file, fileList) {
+        if (fileList.length > 0) {
+          this.fileList = [fileList[fileList.length - 1]];
+        }
+      },
+      onSuccess(res, file, fileList) {
+        if(res.code == 200 ){
+          let _this = this
+          _this.querySubmit()
+          _this.$message.success('上传成功！')
+          _this.pldrVisible = false
+        }
+        else
+          this.$message.error({message:res.msg,showClose:true})
+      },
+      handleUploadCancel1(){
+        this.fileList=[]
+        this.pldrVisible=false;
+      },
+      downloadClick() {
+        let a = document.createElement("a");
+        a.setAttribute("href", this.downloadhref);
+        a.setAttribute("download", "批量导入模版.xlsx");
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      },
+      submitUpload() {
+        if(this.fileList.length > 0){
+          this.$refs.upload.submit();
+        }else {
+          this.$message.warning("请选择要上传的内容");
+        }
+
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .EnterpriseMonitoring{
+    .title_wrap{
+      padding: 20px;
+      background-color: #FFFFFF;
+      border-bottom: 1px solid #e0e0e0;
+      .enterprise_title{
+        border-left: 2px solid #445781;
+        padding-left: 8px;
+        font-size: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-weight: 700;
+        color: #232323;
+      }
+    }
+    .header{
+      background: #FFFFFF;
+      padding: 25px 16px;
+      border-radius: 4px;
+      .search{
+        display: -webkit-box;
+        align-items: flex-start;
+        line-height: 16px;
+        .label{
+          margin-right: 24px;
+          color: rgba(35,35,35,0.8);
+          font-size: 14px;
+        }
+      }
+      .checkbox{
+        display: flex;
+        align-items: flex-start;
+        padding-left: 12px;
+        position: relative;
+        ::v-deep .el-radio{
+          margin-right:16px;
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-date-editor{
+          position: absolute;
+          /*left: 602px;*/
+          right: -350px;
+          top: -7px
+        }
+      }
+    }
+    .content{
+      background: #FFFFFF;
+      border-radius: 4px;
+      margin-top: 16px;
+      padding: 16px;
+      .table-search{
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        margin-bottom: 16px;
+        .total{
+          color: rgba(35,35,35,0.8);
+        }
+        .right{
+          span{
+            width: 88px;
+            height: 32px;
+            border-radius: 4px 4px 4px 4px;
+            line-height: 32px;
+            text-align: center;
+            display: inline-block;
+            font-size: 14px;
+            cursor: pointer;
+          }
+          .add{
+            color: #0081FF;
+            border: 1px solid #0081FF;
+            margin-right: 16px;
+          }
+          .add1{
+            color: #FFFFFF;
+            background: #0081FF;
+            border: 1px solid #0081FF;
+          }
+        }
+      }
+      .table-item{
+        .span{
+          height: 22px;
+          line-height: 22px;
+          padding: 0 8px;
+          border-radius: 2px 2px 2px 2px;
+          font-size: 12px;
+          margin-right: 10px;
+          display: inline-block;
+        }
+        .color1{
+          background: #FFECE8;
+          color: #FF3C3C;
+        }
+        .color2{
+          background: #FFF3E8;
+          color: #F77234;
+        }
+        .color3{
+          background: #FFF8E8;
+          color: #FFAB44;
+        }
+        .color4{
+          background: #E8F7FF;
+          color: #0081FF;
+        }
+        .color5{
+          background: #E8FFF1;
+          color: #0CBC6D;
+        }
+      }
+      .empty{
+        margin: 0 auto;
+        height: 550px;
+        text-align: center;
+        .img{
+          width: 108px;
+          height: 108px;
+          margin-bottom: 24px;
+          margin-top: 150px;
+        }
+        .p1{
+          color: #333333;
+          font-size: 16px;
+        }
+        .p2{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+        .empty-btn{
+          margin-top: 24px;
+          span{
+            width: 88px;
+            height: 32px;
+            border-radius: 4px 4px 4px 4px;
+            line-height: 32px;
+            text-align: center;
+            display: inline-block;
+            font-size: 14px;
+            cursor: pointer;
+          }
+          .add{
+            color: #0081FF;
+            border: 1px solid #0081FF;
+            margin-right: 16px;
+          }
+          .add1{
+            color: #FFFFFF;
+            background: #0081FF;
+            border: 1px solid #0081FF;
+          }
+        }
+      }
+    }
+    ::v-deep .dialogAdd{
+      .el-dialog__body{
+        padding: 24px 0 !important;
+        .companyList{
+          width: 100%;
+          margin-top: 5px;
+          background: #FFFFFF;
+          .list{
+            max-height:280px;
+            overflow: auto;
+            border-top: 1px solid #EEEEEE;
+          }
+          .item{
+            display: flex;
+            padding: 10px 16px 6px 16px;
+            position: relative;
+            border-bottom: 1px solid #EEEEEE;
+            .item-left{
+              margin-right: 12px;
+              img{
+                width: 40px;
+                height: 40px;
+              }
+            }
+            .item-right{
+              width: 344px;
+              margin-right: 10px;
+              p{
+                margin: 0;
+                padding: 0;
+
+              }
+              .right-title{
+                font-size: 14px;
+                color: #232323;
+              }
+              .right-tips{
+                color: rgba(35,35,35,0.4);
+                font-size: 12px;
+              }
+            }
+          }
+          .item:last-child{
+            border-bottom:0;
+          }
+          .tips{
+            border-top: 1px solid #EEEEEE;
+            border-bottom: 1px solid #EEEEEE;
+            height: 40px;
+            line-height: 40px;
+            color: #0081FF;
+            font-size: 12px;
+            padding: 0 0 0 12px;
+            margin: 0;
+          }
+
+        }
+      }
+      .el-dialog__footer{
+        border-top: 1px solid #EEEEEE;
+      }
+    }
+    ::v-deep .dialog-claim{
+      margin:0 !important;
+      position:absolute;
+      top:50%;
+      left:50%;
+      transform:translate(-50%,-50%);
+      .el-dialog__header{
+        display: block;
+        padding:16px 20px;
+        border-bottom: 1px solid #EEEEEE;
+        font-size: 16px;
+        font-weight: 700;
+        color: #232323;
+      }
+      .el-dialog__body{
+        padding: 24px 20px;
+        font-size: 14px;
+        .dialog-content{
+          i{
+            margin-right: 10px;
+            font-size: 16px;
+            color:#FFAB44;
+          }
+        }
+        .upload-content{
+          .el-upload{
+            width: 100%;
+          }
+          .el-upload-dragger{
+            width: 100%;
+            padding-top: 50px;
+            .el-upload__text{
+              margin-top: 24px;
+              font-size: 14px;
+            }
+            .el-upload__tip{
+              font-size: 12px;
+              color: rgba(35,35,35,0.4);
+            }
+          }
+        }
+        .add-content{
+          height: 300px;
+          .enterprise{
+            margin: 0 20px 10px;
+            display: -webkit-box;
+            align-items: flex-start;
+            line-height: 32px;
+            .name{
+              width: 372px;
+              height: 32px;
+              margin-left: 12px;
+              border-radius: 2px;
+              border: 1px solid #DCDFE6;
+            }
+            .el-input__inner{
+              border: 0;
+              height: 32px;
+            }
+            .el-input-group__append{
+              border: 0;
+              background: #F5F5F5;
+              width: 60px;
+              color: #0081FF;
+              padding: 0;
+              text-align: center;
+              cursor: pointer;
+            }
+            .el-input-group__append:hover{
+              background: #F5F5F5 !important;
+              color: #0081FF;
+            }
+          }
+        }
+      }
+      .dialog-footer{
+        .download{
+          float: left;
+        }
+      }
+    }
+  }
+</style>

dsk-operate-ui/src/views/owner/MonitoringDynamics.vue

+<template>
+  <!--监控动态-->
+    <div class="app-container MonitoringDynamics">
+      <div class="title_wrap">
+        <div class="enterprise_title">
+          司法风险监控动态
+        </div>
+      </div>
+      <div class="search">
+        <div class="search-item" style="line-height: 32px;margin-top: 0;padding-bottom: 8px;">
+          <div class="label">监控对象</div>
+          <el-input class="name" placeholder="请输入监控对象名称" v-model="companyName">
+            <el-button slot="append" @click="handleKeyword()">搜索</el-button>
+          </el-input>
+        </div>
+        <div class="search-item" style="margin-bottom: 25px">
+          <div class="label">更新时间</div>
+          <div class="checkbox">
+            <el-radio-group v-model="radio">
+              <el-radio v-for="item in radioList" @change="radioBtn" :label="item.type">{{item.label}}</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-if="radio==6"
+              v-model="date"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              unlink-panels
+              size="small"
+              @change="changePicker"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="search-item">
+          <div class="label">司法风险</div>
+          <div class="main-right">
+            <div class="select-popper">
+              <!--<span :class="{ color_text: sffx.length }">司法风险{{sffx.length > 0 ? sffx.length:''}}<i class="el-icon-caret-bottom"></i></span>-->
+
+              <el-checkbox-group v-model="sffx">
+                <el-checkbox label="不限" @change="changeSffx('不限')">不限</el-checkbox>
+                <el-checkbox v-for="(i,index) in selectList" :key="index" :label="i.dimensionName" @change="changeSffx(i)">{{i.dimensionName}}</el-checkbox>
+              </el-checkbox-group>
+              <!--<el-select ref="tenderTypeSelect" v-model="sffx" class="select-multiple" collapse-tags multiple placeholder="请选择">-->
+                <!--<el-option v-for="(i,index) in selectList" :key="index" :label="i.dimensionName" :value="i.dimensionName">-->
+                  <!--<el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeSffx(i)">{{i.dimensionName}}</el-checkbox>-->
+                <!--</el-option>-->
+              <!--</el-select>-->
+            </div>
+          </div>
+        </div>
+        <div class="search-item">
+          <div class="label">风险级别</div>
+          <div class="main-right">
+            <div class="checkbox">
+              <div class="checkbox-content-qx">
+                <el-checkbox v-model="checkFx" @change="checkFxjbBtn">全部</el-checkbox>
+              </div>
+              <el-checkbox-group v-model="fxjbType" class="keyword_checkbox" @change="checkFxjb1Btn">
+                <el-checkbox v-for="item in fxjb" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="content">
+        <div class="total" v-if="tableDataTotal > 0  && !isSkeleton">共 {{tableDataTotal}} 条</div>
+        <div class="table-item">
+          <div v-if="tableDataTotal > 0  && !isSkeleton">
+            <el-table
+              :data="tableData"
+              element-loading-text="Loading"
+              border
+              highlight-current-row
+            >
+              <el-table-column label="序号" width="60" align="left" fixed>
+                <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
+              </el-table-column>
+              <el-table-column label="监控对象" prop="companyName" align="left" width="250"></el-table-column>
+              <el-table-column label="风险级别" prop="riskLevel" align="left" width="120"></el-table-column>
+              <el-table-column label="监控类型" prop="dimensionName" align="left" width="150"></el-table-column>
+              <el-table-column label="动态内容" prop="details" align="left">
+                <template slot-scope="scope">
+                  <div v-for="(item,index) in scope.row.Array" :key="index">
+                    <div>
+                      <span style="color: #999;">{{item.key}}：</span>
+                      <span>{{item.value}}</span>
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="更新时间" prop="createTime" align="left" width="150"></el-table-column>
+              <el-table-column
+                label="操作"
+                align="center"
+                width="150"
+              >
+                <template slot-scope="scope">
+                  <!---->
+                  <span v-if="scope.row.hasdetail" style="cursor: pointer;color:#0081FF;" @click="handleDetail(scope.row)">查看详情</span>
+                  <span v-else="scope.row.hasdetail" @click="handleDetail(scope.row)">查看详情</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
+            <img class="img" src="@/assets/images/project/empty.png">
+            <div class="p1">暂未发现企业风险动态信息</div>
+            <!--<div class="p2">建议调整关键词或筛选条件，重新搜索</div>-->
+          </div>
+        </div>
+        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
+          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </div>
+      </div>
+      <el-dialog :visible.sync="dialogVisible" custom-class='dialog-claim' :title="title" width="720px" :close-on-click-modal="false">
+        <div class="dialog-content">
+          <template v-if="title=='开庭公告详情'">
+            <info-table class="info-tab" :list="defaultList0" :obj="detail" :labelWidth="labelWidth">
+              <template v-slot:relatedCompanies="row">
+                <p v-for="i in row.data.relatedCompanies">
+                  {{i.role}}:<br/>
+                  {{i.name}}
+                </p>
+              </template>
+            </info-table>
+          </template>
+          <template v-if="title=='失信被执行人详情'">
+            <info-table class="info-tab" :list="defaultList1" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='法院公告详情'">
+            <info-table class="info-tab" :list="defaultList2" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='经营异常详情'">
+            <info-table class="info-tab" :list="defaultList3" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='股权冻结详情'">
+            <info-table class="info-tab" :list="defaultList4" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='裁判文书详情'">
+            <info-table class="info-tab" :list="defaultList5" :obj="detail" :labelWidth="labelWidth">
+              <template v-slot:relatedCompanies="row">
+                <p v-for="i in row.data.relatedCompanies">
+                  {{i.role}}:<br/>
+                  {{i.name}}
+                </p>
+              </template>
+            </info-table>
+          </template>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  import { v4 } from "uuid";
+  import {changeTime} from "@/assets/js/common.js"
+  import { dynamicPage,companyDetail,rulesSelect } from '@/api/monitoring/monitoring'
+  import InfoTable from '../detail/party-a/component/infoTable';
+  import skeleton from '../component/skeleton'
+  export default {
+    name: 'MonitoringDynamics',
+    components: {
+      InfoTable,skeleton
+    },
+    data() {
+      return {
+        isSkeleton:true,
+        radio:null,
+        date:'',
+        radioList:[
+          {
+            type:null,
+            label:'全部'
+          },
+          {
+            type:1,
+            label:'今天'
+          },
+          {
+            type:2,
+            label:'近三天'
+          },
+          {
+            type:3,
+            label:'近一周'
+          },
+          {
+            type:4,
+            label:'近半月'
+          },
+          {
+            type:5,
+            label:'近一个月'
+          },
+          {
+            type:6,
+            label:'自定义日期'
+          },
+        ],
+        fxjb:[
+          {
+            value:'低风险',
+            label:'低风险'
+          },
+          {
+            value:'中风险',
+            label:'中风险'
+          },
+          {
+            value:'高风险',
+            label:'高风险'
+          },
+        ],
+        checkFx: true,
+        fxlxType:[],
+        jkType:[
+          {
+            value:'1',
+            label:'司法风险'
+          },
+          {
+            value:'2',
+            label:'工商变更'
+          },
+        ],
+        selectList:[],
+        selectList1:[],
+        sffx:[],
+        queryParams:{
+          pageNum:1,
+          pageSize:50,
+          condition:{}
+        },
+        type:[],
+        gsbgType:[],
+        companyName:'',
+        fxjbType:[],
+        inputID1: this.getUid(),
+        inputID2: this.getUid(),
+        tableData:[],
+        tableDataTotal:0,
+        dialogVisible:false,
+        labelWidth: 140,
+        //开庭公告详情
+        defaultList0:[
+          { name: '案由', prop: 'causeAction' },
+          { name: '案号', prop: 'caseNo' },
+          { name: '开庭时间', prop: 'hearingDate' },
+          { name: '承办部门', prop: 'department' },
+          { name: '审判长/主判人', prop: 'judge'},
+          { name: '当事人', prop: 'relatedCompanies',slot: true},
+          { name: '法院', prop: 'court'},
+          { name: '法庭', prop: 'tribunal'},
+          { name: '公告内容', prop: 'content', style: true },
+        ],
+        //失信被执行人详情
+        defaultList1:[
+          { name: '失信被执行人行为具体情形', prop: 'executionDesc', style: true  },
+          { name: '履行情况', prop: 'finalDuty' },
+          { name: '立案文号', prop: 'caseNumber' },
+          { name: '立案日期', prop: 'date' },
+          { name: '执行依据文号', prop: 'docNumber'},
+          { name: '执行法院', prop: 'court'},
+        ],
+        //法院公告详情
+        defaultList2:[
+          { name: '当事人', prop: 'people',style: true  },
+          { name: '身份', prop: 'role' },
+          { name: '公共类型', prop: 'type' },
+          { name: '公告日期', prop: 'date' },
+          { name: '公告法院', prop: 'court',style: true},
+          { name: '案由', prop: 'caseReason',style: true},
+        ],
+        //经营异常详情
+        defaultList3:[
+          { name: '列入日期', prop: 'inDate'},
+          { name: '移出日期', prop: 'outDate' },
+          { name: '列入经营异常原因', prop: 'outReason',style: true },
+          { name: '做出决定机关（移入）', prop: 'department' },
+          { name: '做出决定机关（移出）', prop: 'outDepartment'},
+          { name: '移出经营移除名录原因', prop: 'outReason',style: true},
+        ],
+        //股权冻结详情
+        defaultList4:[
+          { name: '执行法院', prop: 'executiveCourt'},
+          { name: '执行事项', prop: 'assistItem' },
+          { name: '执行裁定文书号', prop: 'adjudicateNo'},
+          { name: '执行通知文号', prop: 'number' },
+          { name: '被执行人', prop: 'beExecutedPerson'},
+          { name: '被执行人持有股权、其他投资权益数额', prop: 'amount'},
+          { name: '冻结期限自', prop: 'freezeStartDate'},
+          { name: '冻结期限至', prop: 'freezeEndDate'},
+          { name: '冻结期限', prop: 'freezeYearMonth'},
+          { name: '公示日期', prop: 'publicDate'},
+        ],
+        //裁判文书详情
+        defaultList5:[
+          { name: '案由', prop: 'causeAction'},
+          { name: '执行案号', prop: 'causeNo' },
+          { name: '身份', prop: 'role'},
+          { name: '当事人', prop: 'relatedCompanies',slot: true },
+          { name: '案件金额', prop: 'subAmount'},
+          { name: '判决日期', prop: 'date'},
+          { name: '判决结果', prop: 'judgeresult',style: true},
+        ],
+        title:'法院公告详情',
+        detail:{}
+      }
+    },
+    created() {
+      this.getPlaceholder()
+      this.querySubmit()
+      rulesSelect().then(res => {
+        this.selectList=res.data;
+        for(let i in res.data){
+          if(res.data[i].dimensionName === '司法风险'){
+            this.selectList=res.data[i].children
+          }
+          if(res.data[i].dimensionName === '工商风险'){
+            this.selectList1=res.data[i].children
+          }
+        }
+      })
+    },
+    methods: {
+      async querySubmit() {
+        let endTime = new Date()
+        let params={
+          pageNum:this.queryParams.pageNum,
+          pageSize:this.queryParams.pageSize,
+          condition:this.queryParams.condition
+        }
+        if(this.radio ===  1){
+          params.condition.beginTime=this.formatDate(endTime)
+          params.condition.endTime=this.formatDate(endTime)
+        }
+        if(this.companyName){
+          params.condition.companyName=this.companyName
+        }
+        if(this.fxjbType.length > 0){
+          params.condition.riskLevel=this.fxjbType
+        }else {
+          delete params.condition.riskLevel
+        }
+        let sffx = this.sffx;
+        if(sffx.indexOf('不限')>-1){
+          sffx = []
+        }
+        if(sffx.length > 0){
+          params.condition.parentDimension=['司法风险']
+          params.condition.dimension=this.sffx;
+        }else {
+          params.condition.parentDimension=['司法风险']
+          delete params.condition.dimension
+        }
+        dynamicPage(params).then(res => {
+          this.isSkeleton = false;
+          this.tableData=res.rows;
+          this.tableDataTotal=res.total;
+          this.tableData.forEach(el => {
+            el.createTime = changeTime(el.createTime)
+            // 把动态内容从json字符串改为对象
+            el.details = JSON.parse(el.details)
+            // 对象转为键值对数组
+            let arr = Object.entries(el.details)
+            // 新建一个属性数组
+            el.Array = []
+            for(let [i,j] of arr){
+              el.Array.push({key:i,value:j})
+            }
+
+            let types = ['新增开庭公告','新增法院公告','新增裁判文书','新增经营异常','新增失信被执行人','新增股权冻结']
+            if(types.indexOf(el.dimensionName)>-1){
+              el.hasdetail = true
+            }else{
+              el.hasdetail = false
+            }
+
+          })
+        })
+      },
+      getDetail(name,id) {
+        companyDetail({dimensionName:name,sourceId:id}).then(res => {
+          console.log(res)
+          this.dialogVisible=true;
+          this.detail=res.data;
+        })
+      },
+      changeSffx(val) {
+        if(val == '不限')
+          this.sffx = ['不限']
+        else if(this.sffx.indexOf('不限')>-1){
+          this.sffx.splice(this.sffx.indexOf('不限'),1)
+        }
+        // if (this.sffx.indexOf(val.dimensionName) == -1) {
+        //   this.sffx.push(val.dimensionName)
+        // } else {
+        //   this.sffx.splice(this.sffx.indexOf(val.dimensionName), 1)
+        // }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      checkFxjbBtn(val) {
+        this.fxjbType = [];
+        this.checkFx = true;
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      checkFxjb1Btn(val){
+        if (val.length > 0) {
+          this.checkFx = false;
+        } else if (val.length == 0) {
+          this.checkFx = true;
+          this.fxjbType = [];
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      handleDetail(item){
+        switch (item.dimensionName) {
+          case '新增开庭公告':
+            this.title='开庭公告详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增法院公告':
+            this.title='法院公告详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增裁判文书':
+            this.title='裁判文书详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增经营异常':
+            this.title='经营异常详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增失信被执行人':
+            this.title='失信被执行人详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增股权冻结':
+            this.title='股权冻结详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          default:
+            this.$message.success("暂无详情");
+            break;
+        }
+      },
+      handleKeyword(){
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      radioBtn(val){
+        let endTime = new Date()
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        switch (val) {
+          case 1:
+            this.queryParams.condition.beginTime=this.formatDate(endTime)
+            this.queryParams.condition.endTime=this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 2:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 3))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 3:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 7))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 4:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 15))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 5:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 30))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 6:
+            this.date=[]
+            break;
+          default:
+            this.queryParams.condition.beginTime=''
+            this.queryParams.condition.endTime=''
+            this.querySubmit()
+            break;
+        }
+      },
+      // 重置页数
+      handleSizeChange(val) {
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.querySubmit()
+      },
+      // 跳转指定页数
+      handleCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.querySubmit()
+        window.scrollTo(0, 0);
+      },
+      // 时间选择改变后的回调
+      changePicker(value) {
+        if(value && value.length) {
+          this.queryParams.condition.beginTime = value[0]
+          this.queryParams.condition.endTime = value[1]
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      // 时间格式化
+      formatDate(timeStr) {
+        let date = new Date(Number(timeStr));
+        let year = date.getFullYear();
+        let month = String(date.getMonth() + 1).padStart(2, 0);
+        let day = String(date.getDate()).padStart(2, 0);
+        return `${year}-${month}-${day}`;
+      },
+      async getPlaceholder() {
+        try {
+          await this.$nextTick();
+          const doms = document.querySelectorAll("[class*='select-adaptive-']");
+          if (doms?.length) {
+            doms.forEach(dom => {
+              const realStyles = window.getComputedStyle(dom);
+              const ipt = dom.querySelector("input");
+              const text = ipt.getAttribute("placeholder");
+              const textContainer = document.createElement("span");
+              textContainer.style.setProperty("visibility", "hidden");
+              textContainer.style.setProperty("display", "inline-block");
+              textContainer.style.setProperty("font-size", "14px");
+              const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
+              hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
+              textContainer.style.setProperty("box-sizing", "border-box");
+              textContainer.textContent = text;
+              document.body.append(textContainer);
+              // 加上按钮宽度 以及按钮左外边距
+              let containerWidth = textContainer.offsetWidth + 30;
+              textContainer.remove();
+              dom.style.setProperty("width", `${containerWidth}px`);
+            });
+          }
+        } catch (error) {
+
+        }
+      },
+      iptAdaptive(uid, multiple = false, name) {
+        multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
+      },
+      getUid() {
+        return v4();
+      },
+      // 多选处理
+      async multipleAdaptiveHandle(uid, name) {
+        try {
+          await this.$nextTick();
+          const dom = document.querySelector(`.select-adaptive-${uid}`);
+          const iptChild = dom.querySelector(".el-input__inner");
+          if (dom) {
+            const textContainer = document.createElement("span");
+            const textName = `text-${uid}`;
+            textContainer.classList.add(textName);
+            const selectChildren = dom.querySelectorAll(".el-tag");
+            if (selectChildren.length) {
+              let width = 0;
+              selectChildren.forEach(item => {
+                const text = item.textContent;
+                const itemInfo = window.getComputedStyle(item);
+                textContainer.style.setProperty("visibility", "hidden");
+                textContainer.style.setProperty("display", "inline-block");
+                textContainer.style.setProperty("font-size", "14px");
+                textContainer.style.setProperty("padding", itemInfo.padding);
+                textContainer.style.setProperty("box-sizing", "border-box");
+                textContainer.textContent = text;
+                document.body.append(textContainer);
+                width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
+                textContainer.remove();
+              });
+              dom.style.setProperty("width", `${width + 50}px`);
+              // this.handleSearch(name);
+              return;
+            }
+            textContainer.style.setProperty("visibility", "hidden");
+            textContainer.style.setProperty("display", "inline-block");
+            textContainer.style.setProperty("font-size", "14px");
+            textContainer.style.setProperty("padding", "0px 8px");
+            textContainer.style.setProperty("box-sizing", "border-box");
+            textContainer.textContent = iptChild.getAttribute("placeholder");
+            document.body.append(textContainer);
+            let containerWidth = textContainer.offsetWidth + 12 + 8;
+            // let containerWidth = 130;
+            textContainer.remove();
+            dom.style.setProperty("width", `${containerWidth}px`);
+            // this.handleSearch(name);
+          }
+
+        } catch (error) {
+          console.log(error);
+        }
+      },
+      // 单选处理
+      async iptAdaptiveHandle(uid, name) {
+        try {
+          await this.$nextTick();
+          const dom = document.querySelector(`.select-adaptive-${uid}`);
+          const realStyles = window.getComputedStyle(dom);
+          if (dom) {
+            const iptChild = dom.querySelector(".el-input__inner");
+            const textContainer = document.createElement("span");
+            const textName = `text-${uid}`;
+            textContainer.classList.add(textName);
+            textContainer.style.setProperty("visibility", "hidden");
+            textContainer.style.setProperty("display", "inline-block");
+            textContainer.style.setProperty("font-size", "14px");
+            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
+            hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
+            textContainer.style.setProperty("box-sizing", "border-box");
+            textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
+            document.body.append(textContainer);
+            let containerWidth = textContainer.offsetWidth + 50;
+
+            textContainer.remove();
+            dom.style.setProperty("width", `${containerWidth}px`);
+          }
+          // this.handleSearch(name);
+        } catch (error) {
+
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss">
+  .el-select-dropdown__item.selected,
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
+    color: #3181fa;
+    font-size: 0;
+  }
+</style>
+<style lang="scss" scoped>
+  .MonitoringDynamics{
+    .search{
+      background: #FFFFFF;
+      padding: 25px 16px;
+      border-radius: 4px;
+      .search-item{
+        display: -webkit-box;
+        align-items: flex-start;
+        line-height: 20px;
+        margin-top: 8px;
+      }
+      .label{
+        margin-right: 12px;
+        font-size: 14px;
+        color: rgba(35,35,35,0.8);
+      }
+      .color_text {
+        color: #0081ff;
+      }
+      ::v-deep .name{
+        width: 405px;
+        height: 32px;
+        margin-left: 12px;
+        border-radius: 2px;
+        border: 1px solid #DCDFE6;
+        .el-input__inner{
+          border: 0;
+          height: 32px;
+        }
+        .el-input-group__append{
+          border: 0;
+          background: #F5F5F5;
+          width: 60px;
+          color: #0081FF;
+          text-align: center;
+        }
+        .el-input-group__append:hover{
+          background:#F5F5F5 !important;
+        }
+      }
+      .main-right {
+        width: calc(100% - 112px);
+        .select-popper {
+          text-align: left;
+          display: inline-block;
+          position: relative;
+          color: #333333;
+          font-size: 14px;
+          cursor: pointer;
+          margin: 0px 12px;
+          margin-bottom: 16px;
+        }
+
+        .select-popper .select-popper-img {
+          width: 24px;
+          height: 12px;
+          position: absolute;
+          top: -10px;
+          right: 2px;
+        }
+        .select-multiple {
+          position: absolute;
+          left: 0;
+          top: -6px;
+          opacity: 0;
+          line-height: 22px;
+          ::v-deep .el-input {
+            width: 100%;
+            line-height: 22px;
+            .el-input__inner {
+              color: rgba(35,35,35,0.8);
+              width: 100%;
+              height: 22px !important;
+            }
+          }
+          .el-tag__close.el-icon-close {
+            display: none;
+          }
+        }
+      }
+      .checkbox{
+        display: flex;
+        align-items: flex-start;
+        padding-left: 12px;
+        position: relative;
+        .checkbox-content-qx{
+          margin-right: 24px;
+        }
+        .keyword_checkbox{
+          ::v-deep .el-checkbox{
+            margin-right: 24px;
+          }
+        }
+        ::v-deep .el-radio{
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-checkbox__label{
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-checkbox{
+          margin-right: 10px;
+        }
+        ::v-deep .el-date-editor{
+          position: absolute;
+          /*left: 602px;*/
+          right: -368px;
+          top: -7px
+        }
+        ::v-deep .el-select{
+          .el-input{
+            .el-input__inner{
+              height: 32px;
+              line-height: 32px;
+              border-radius: 4px;
+              border: 0;
+              padding-left: 0px;
+              padding-right: 8px;
+              &::placeholder{
+                color: rgba(35,35,35,0.8) !important;
+              }
+            }
+            .el-input__suffix{
+              top:2px;
+            }
+          }
+
+        }
+      }
+    }
+    .content{
+      background: #FFFFFF;
+      border-radius: 4px;
+      margin-top: 16px;
+      padding: 16px;
+      .total{
+        color: rgba(35,35,35,0.8);
+        font-size: 12px;
+        padding-bottom: 16px;
+        display: flex;
+        align-items: center;
+        &:before {
+          content: "";
+          display: inline-block;
+          width: 2px;
+          height: 2px;
+          background: rgba(35,35,35,.4);
+          margin-right: 4px;
+        }
+      }
+      .empty{
+        margin: 0 auto;
+        height: 550px;
+        text-align: center;
+        .img{
+          width: 108px;
+          height: 108px;
+          margin-bottom: 24px;
+          margin-top: 150px;
+        }
+        .p1{
+          color: #333333;
+          font-size: 16px;
+        }
+        .p2{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+      }
+    }
+    ::v-deep .dialog-claim{
+      .el-dialog__header{
+        display: block;
+        padding:16px 20px;
+        border-bottom: 1px solid #EEEEEE;
+        font-size: 16px;
+        font-weight: 700;
+        color: #232323;
+      }
+      .el-dialog__body {
+        padding: 24px 20px;
+      }
+    }
+    .title_wrap{
+        padding: 20px;
+        background-color: #FFFFFF;
+        border-bottom: 1px solid #e0e0e0;
+        .enterprise_title{
+          border-left: 2px solid #445781;
+          padding-left: 8px;
+          font-size: 16px;
+          height: 16px;
+          line-height: 16px;
+          font-weight: 700;
+          color: #232323;
+        }
+    }
+  }
+</style>

dsk-operate-ui/src/views/owner/MonitoringDynamicsgs.vue

+<template>
+  <!--监控动态-->
+    <div class="app-container MonitoringDynamics">
+      <div class="title_wrap">
+        <div class="enterprise_title">
+          工商风险监控动态
+        </div>
+      </div>
+      <div class="search">
+        <div class="search-item" style="line-height: 32px;margin-top: 0;padding-bottom: 8px;">
+          <div class="label">监控对象</div>
+          <el-input class="name" placeholder="请输入监控对象名称" v-model="companyName">
+            <el-button slot="append" @click="handleKeyword()">搜索</el-button>
+          </el-input>
+        </div>
+        <div class="search-item" style="margin-bottom: 25px">
+          <div class="label">更新时间</div>
+          <div class="checkbox">
+            <el-radio-group v-model="radio">
+              <el-radio v-for="item in radioList" @change="radioBtn" :label="item.type">{{item.label}}</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-if="radio==6"
+              v-model="date"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              unlink-panels
+              size="small"
+              @change="changePicker"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="search-item">
+          <div class="label">工商风险</div>
+          <div class="main-right">
+            <div class="select-popper">
+              <el-checkbox-group v-model="gsfx">
+                <el-checkbox label="不限" @change="changeGsfx('不限')">不限</el-checkbox>
+                <el-checkbox v-for="(i,index) in selectList1" :key="index" :label="i.dimensionName" @change="changeGsfx(i)">{{i.dimensionName}}</el-checkbox>
+              </el-checkbox-group>
+              <!--<span :class="{ color_text: gsfx.length }">工商风险{{gsfx.length > 0 ? gsfx.length:''}}<i class="el-icon-caret-bottom"></i></span>-->
+              <!--<el-select ref="tenderTypeSelect" v-model="gsfx" class="select-multiple" collapse-tags multiple placeholder="请选择">-->
+                <!--<el-option v-for="(i,index) in selectList1" :key="index" :label="i.dimensionName" :value="i.dimensionName">-->
+                  <!--<el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeGsfx(i)">{{i.dimensionName}}</el-checkbox>-->
+                <!--</el-option>-->
+              <!--</el-select>-->
+            </div>
+          </div>
+        </div>
+        <div class="search-item">
+          <div class="label">风险级别</div>
+          <div class="main-right">
+            <div class="checkbox">
+              <div class="checkbox-content-qx">
+                <el-checkbox v-model="checkFx" @change="checkFxjbBtn">全部</el-checkbox>
+              </div>
+              <el-checkbox-group v-model="fxjbType" class="keyword_checkbox" @change="checkFxjb1Btn">
+                <el-checkbox v-for="item in fxjb" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="content">
+        <div class="total" v-if="tableDataTotal > 0  && !isSkeleton">共 {{tableDataTotal}} 条</div>
+        <div class="table-item">
+          <div v-if="tableDataTotal > 0  && !isSkeleton">
+            <el-table
+              :data="tableData"
+              element-loading-text="Loading"
+              border
+              highlight-current-row
+            >
+              <el-table-column label="序号" width="60" align="left" fixed>
+                <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
+              </el-table-column>
+              <el-table-column label="监控对象" prop="companyName" align="left" width="250"></el-table-column>
+              <el-table-column label="风险级别" prop="riskLevel" align="left" width="120"></el-table-column>
+              <el-table-column label="监控类型" prop="dimensionName" align="left" width="150"></el-table-column>
+              <el-table-column label="动态内容" prop="details" align="left">
+                <template slot-scope="scope">
+                  <div v-for="(item,index) in scope.row.Array" :key="index">
+                    <div>
+                      <span style="color: #999;">{{item.key}}：</span>
+                      <span>{{item.value}}</span>
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="更新时间" prop="createTime" align="left" width="150"></el-table-column>
+              <el-table-column
+                label="操作"
+                align="center"
+                width="150"
+              >
+                <template slot-scope="scope">
+                  <!---->
+                  <span v-if="scope.row.hasdetail" style="cursor: pointer;color:#0081FF;" @click="handleDetail(scope.row)">查看详情</span>
+                  <span v-else="scope.row.hasdetail" @click="handleDetail(scope.row)">查看详情</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
+            <img class="img" src="@/assets/images/project/empty.png">
+            <div class="p1">暂未发现企业风险动态信息</div>
+            <!--<div class="p2">建议调整关键词或筛选条件，重新搜索</div>-->
+          </div>
+        </div>
+        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
+          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </div>
+      </div>
+      <el-dialog :visible.sync="dialogVisible" custom-class='dialog-claim' :title="title" width="720px" :close-on-click-modal="false">
+        <div class="dialog-content">
+          <template v-if="title=='开庭公告详情'">
+            <info-table class="info-tab" :list="defaultList0" :obj="detail" :labelWidth="labelWidth">
+              <template v-slot:relatedCompanies="row">
+                <p v-for="i in row.data.relatedCompanies">
+                  {{i.role}}:<br/>
+                  {{i.name}}
+                </p>
+              </template>
+            </info-table>
+          </template>
+          <template v-if="title=='失信被执行人详情'">
+            <info-table class="info-tab" :list="defaultList1" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='法院公告详情'">
+            <info-table class="info-tab" :list="defaultList2" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='经营异常详情'">
+            <info-table class="info-tab" :list="defaultList3" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='股权冻结详情'">
+            <info-table class="info-tab" :list="defaultList4" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='裁判文书详情'">
+            <info-table class="info-tab" :list="defaultList5" :obj="detail" :labelWidth="labelWidth">
+              <template v-slot:relatedCompanies="row">
+                <p v-for="i in row.data.relatedCompanies">
+                  {{i.role}}:<br/>
+                  {{i.name}}
+                </p>
+              </template>
+            </info-table>
+          </template>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  import { v4 } from "uuid";
+  import {changeTime} from "@/assets/js/common.js"
+  import { dynamicPage,companyDetail,rulesSelect } from '@/api/monitoring/monitoring'
+  import InfoTable from '../detail/party-a/component/infoTable';
+  import skeleton from '../component/skeleton'
+  export default {
+    name: 'MonitoringDynamicsgs',
+    components: {
+      InfoTable,skeleton
+    },
+    data() {
+      return {
+        isSkeleton:true,
+        radio:null,
+        date:'',
+        radioList:[
+          {
+            type:null,
+            label:'全部'
+          },
+          {
+            type:1,
+            label:'今天'
+          },
+          {
+            type:2,
+            label:'近三天'
+          },
+          {
+            type:3,
+            label:'近一周'
+          },
+          {
+            type:4,
+            label:'近半月'
+          },
+          {
+            type:5,
+            label:'近一个月'
+          },
+          {
+            type:6,
+            label:'自定义日期'
+          },
+        ],
+        fxjb:[
+          {
+            value:'低风险',
+            label:'低风险'
+          },
+          {
+            value:'中风险',
+            label:'中风险'
+          },
+          {
+            value:'高风险',
+            label:'高风险'
+          },
+        ],
+        checkFx: true,
+        fxlxType:[],
+        jkType:[
+          {
+            value:'1',
+            label:'司法风险'
+          },
+          {
+            value:'2',
+            label:'工商变更'
+          },
+        ],
+        selectList:[],
+        selectList1:[],
+        gsfx:[],
+        queryParams:{
+          pageNum:1,
+          pageSize:50,
+          condition:{}
+        },
+        type:[],
+        gsbgType:[],
+        companyName:'',
+        fxjbType:[],
+        inputID1: this.getUid(),
+        inputID2: this.getUid(),
+        tableData:[],
+        tableDataTotal:0,
+        dialogVisible:false,
+        labelWidth: 140,
+        //开庭公告详情
+        defaultList0:[
+          { name: '案由', prop: 'causeAction' },
+          { name: '案号', prop: 'caseNo' },
+          { name: '开庭时间', prop: 'hearingDate' },
+          { name: '承办部门', prop: 'department' },
+          { name: '审判长/主判人', prop: 'judge'},
+          { name: '当事人', prop: 'relatedCompanies',slot: true},
+          { name: '法院', prop: 'court'},
+          { name: '法庭', prop: 'tribunal'},
+          { name: '公告内容', prop: 'content', style: true },
+        ],
+        //失信被执行人详情
+        defaultList1:[
+          { name: '失信被执行人行为具体情形', prop: 'executionDesc', style: true  },
+          { name: '履行情况', prop: 'finalDuty' },
+          { name: '立案文号', prop: 'caseNumber' },
+          { name: '立案日期', prop: 'date' },
+          { name: '执行依据文号', prop: 'docNumber'},
+          { name: '执行法院', prop: 'court'},
+        ],
+        //法院公告详情
+        defaultList2:[
+          { name: '当事人', prop: 'people',style: true  },
+          { name: '身份', prop: 'role' },
+          { name: '公共类型', prop: 'type' },
+          { name: '公告日期', prop: 'date' },
+          { name: '公告法院', prop: 'court',style: true},
+          { name: '案由', prop: 'caseReason',style: true},
+        ],
+        //经营异常详情
+        defaultList3:[
+          { name: '列入日期', prop: 'inDate'},
+          { name: '移出日期', prop: 'outDate' },
+          { name: '列入经营异常原因', prop: 'outReason',style: true },
+          { name: '做出决定机关（移入）', prop: 'department' },
+          { name: '做出决定机关（移出）', prop: 'outDepartment'},
+          { name: '移出经营移除名录原因', prop: 'outReason',style: true},
+        ],
+        //股权冻结详情
+        defaultList4:[
+          { name: '执行法院', prop: 'executiveCourt'},
+          { name: '执行事项', prop: 'assistItem' },
+          { name: '执行裁定文书号', prop: 'adjudicateNo'},
+          { name: '执行通知文号', prop: 'number' },
+          { name: '被执行人', prop: 'beExecutedPerson'},
+          { name: '被执行人持有股权、其他投资权益数额', prop: 'amount'},
+          { name: '冻结期限自', prop: 'freezeStartDate'},
+          { name: '冻结期限至', prop: 'freezeEndDate'},
+          { name: '冻结期限', prop: 'freezeYearMonth'},
+          { name: '公示日期', prop: 'publicDate'},
+        ],
+        //裁判文书详情
+        defaultList5:[
+          { name: '案由', prop: 'causeAction'},
+          { name: '执行案号', prop: 'causeNo' },
+          { name: '身份', prop: 'role'},
+          { name: '当事人', prop: 'relatedCompanies',slot: true },
+          { name: '案件金额', prop: 'subAmount'},
+          { name: '判决日期', prop: 'date'},
+          { name: '判决结果', prop: 'judgeresult',style: true},
+        ],
+        title:'法院公告详情',
+        detail:{}
+      }
+    },
+    created() {
+      this.getPlaceholder()
+      this.querySubmit()
+      rulesSelect().then(res => {
+        this.selectList=res.data;
+        for(let i in res.data){
+          if(res.data[i].dimensionName === '司法风险'){
+            this.selectList=res.data[i].children
+          }
+          if(res.data[i].dimensionName === '工商风险'){
+            this.selectList1=res.data[i].children
+          }
+        }
+      })
+    },
+    methods: {
+      async querySubmit() {
+        let endTime = new Date()
+        let params={
+          pageNum:this.queryParams.pageNum,
+          pageSize:this.queryParams.pageSize,
+          condition:this.queryParams.condition
+        }
+        if(this.radio ===  1){
+          params.condition.beginTime=this.formatDate(endTime)
+          params.condition.endTime=this.formatDate(endTime)
+        }
+        if(this.companyName){
+          params.condition.companyName=this.companyName
+        }
+        if(this.fxjbType.length > 0){
+          params.condition.riskLevel=this.fxjbType
+        }else {
+          delete params.condition.riskLevel
+        }
+        let gsfx = this.gsfx
+        if(gsfx.indexOf('不限')>-1){
+          gsfx = []
+        }
+        if(gsfx.length > 0){
+          params.condition.parentDimension=['工商风险']
+          params.condition.dimension=this.gsfx;
+        }else {
+          params.condition.parentDimension=['工商风险']
+          delete params.condition.dimension
+        }
+        dynamicPage(params).then(res => {
+          this.isSkeleton = false;
+          this.tableData=res.rows;
+          this.tableDataTotal=res.total;
+          this.tableData.forEach(el => {
+            el.createTime = changeTime(el.createTime)
+            // 把动态内容从json字符串改为对象
+            el.details = JSON.parse(el.details)
+            // 对象转为键值对数组
+            let arr = Object.entries(el.details)
+            // 新建一个属性数组
+            el.Array = []
+            for(let [i,j] of arr){
+              el.Array.push({key:i,value:j})
+            }
+
+            let types = ['新增开庭公告','新增法院公告','新增裁判文书','新增经营异常','新增失信被执行人','新增股权冻结']
+            if(types.indexOf(el.dimensionName)>-1){
+              el.hasdetail = true
+            }else{
+              el.hasdetail = false
+            }
+
+          })
+        })
+      },
+      getDetail(name,id) {
+        companyDetail({dimensionName:name,sourceId:id}).then(res => {
+          console.log(res)
+          this.dialogVisible=true;
+          this.detail=res.data;
+        })
+      },
+      changeGsfx(val) {
+        if(val == '不限')
+          this.gsfx = ['不限']
+        else if(this.gsfx.indexOf('不限')>-1){
+          this.gsfx.splice(this.gsfx.indexOf('不限'),1)
+        }
+        // if (this.gsfx.indexOf(val.dimensionName) == -1) {
+        //   this.gsfx.push(val.dimensionName)
+        // } else {
+        //   this.gsfx.splice(this.gsfx.indexOf(val.dimensionName), 1)
+        // }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      checkFxjbBtn(val) {
+        this.fxjbType = [];
+        this.checkFx = true;
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      checkFxjb1Btn(val){
+        if (val.length > 0) {
+          this.checkFx = false;
+        } else if (val.length == 0) {
+          this.checkFx = true;
+          this.fxjbType = [];
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      handleDetail(item){
+        switch (item.dimensionName) {
+          case '新增开庭公告':
+            this.title='开庭公告详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增法院公告':
+            this.title='法院公告详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增裁判文书':
+            this.title='裁判文书详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增经营异常':
+            this.title='经营异常详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增失信被执行人':
+            this.title='失信被执行人详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增股权冻结':
+            this.title='股权冻结详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          default:
+            this.$message.success("暂无详情");
+            break;
+        }
+      },
+      handleKeyword(){
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      radioBtn(val){
+        let endTime = new Date()
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        switch (val) {
+          case 1:
+            this.queryParams.condition.beginTime=this.formatDate(endTime)
+            this.queryParams.condition.endTime=this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 2:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 3))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 3:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 7))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 4:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 15))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 5:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 30))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 6:
+            this.date=[]
+            break;
+          default:
+            this.queryParams.condition.beginTime=''
+            this.queryParams.condition.endTime=''
+            this.querySubmit()
+            break;
+        }
+      },
+      // 重置页数
+      handleSizeChange(val) {
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.querySubmit()
+      },
+      // 跳转指定页数
+      handleCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.querySubmit()
+        window.scrollTo(0, 0);
+      },
+      // 时间选择改变后的回调
+      changePicker(value) {
+        if(value && value.length) {
+          this.queryParams.condition.beginTime = value[0]
+          this.queryParams.condition.endTime = value[1]
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      // 时间格式化
+      formatDate(timeStr) {
+        let date = new Date(Number(timeStr));
+        let year = date.getFullYear();
+        let month = String(date.getMonth() + 1).padStart(2, 0);
+        let day = String(date.getDate()).padStart(2, 0);
+        return `${year}-${month}-${day}`;
+      },
+      async getPlaceholder() {
+        try {
+          await this.$nextTick();
+          const doms = document.querySelectorAll("[class*='select-adaptive-']");
+          if (doms?.length) {
+            doms.forEach(dom => {
+              const realStyles = window.getComputedStyle(dom);
+              const ipt = dom.querySelector("input");
+              const text = ipt.getAttribute("placeholder");
+              const textContainer = document.createElement("span");
+              textContainer.style.setProperty("visibility", "hidden");
+              textContainer.style.setProperty("display", "inline-block");
+              textContainer.style.setProperty("font-size", "14px");
+              const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
+              hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
+              textContainer.style.setProperty("box-sizing", "border-box");
+              textContainer.textContent = text;
+              document.body.append(textContainer);
+              // 加上按钮宽度 以及按钮左外边距
+              let containerWidth = textContainer.offsetWidth + 30;
+              textContainer.remove();
+              dom.style.setProperty("width", `${containerWidth}px`);
+            });
+          }
+        } catch (error) {
+
+        }
+      },
+      iptAdaptive(uid, multiple = false, name) {
+        multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
+      },
+      getUid() {
+        return v4();
+      },
+      // 多选处理
+      async multipleAdaptiveHandle(uid, name) {
+        try {
+          await this.$nextTick();
+          const dom = document.querySelector(`.select-adaptive-${uid}`);
+          const iptChild = dom.querySelector(".el-input__inner");
+          if (dom) {
+            const textContainer = document.createElement("span");
+            const textName = `text-${uid}`;
+            textContainer.classList.add(textName);
+            const selectChildren = dom.querySelectorAll(".el-tag");
+            if (selectChildren.length) {
+              let width = 0;
+              selectChildren.forEach(item => {
+                const text = item.textContent;
+                const itemInfo = window.getComputedStyle(item);
+                textContainer.style.setProperty("visibility", "hidden");
+                textContainer.style.setProperty("display", "inline-block");
+                textContainer.style.setProperty("font-size", "14px");
+                textContainer.style.setProperty("padding", itemInfo.padding);
+                textContainer.style.setProperty("box-sizing", "border-box");
+                textContainer.textContent = text;
+                document.body.append(textContainer);
+                width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
+                textContainer.remove();
+              });
+              dom.style.setProperty("width", `${width + 50}px`);
+              // this.handleSearch(name);
+              return;
+            }
+            textContainer.style.setProperty("visibility", "hidden");
+            textContainer.style.setProperty("display", "inline-block");
+            textContainer.style.setProperty("font-size", "14px");
+            textContainer.style.setProperty("padding", "0px 8px");
+            textContainer.style.setProperty("box-sizing", "border-box");
+            textContainer.textContent = iptChild.getAttribute("placeholder");
+            document.body.append(textContainer);
+            let containerWidth = textContainer.offsetWidth + 12 + 8;
+            // let containerWidth = 130;
+            textContainer.remove();
+            dom.style.setProperty("width", `${containerWidth}px`);
+            // this.handleSearch(name);
+          }
+
+        } catch (error) {
+          console.log(error);
+        }
+      },
+      // 单选处理
+      async iptAdaptiveHandle(uid, name) {
+        try {
+          await this.$nextTick();
+          const dom = document.querySelector(`.select-adaptive-${uid}`);
+          const realStyles = window.getComputedStyle(dom);
+          if (dom) {
+            const iptChild = dom.querySelector(".el-input__inner");
+            const textContainer = document.createElement("span");
+            const textName = `text-${uid}`;
+            textContainer.classList.add(textName);
+            textContainer.style.setProperty("visibility", "hidden");
+            textContainer.style.setProperty("display", "inline-block");
+            textContainer.style.setProperty("font-size", "14px");
+            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
+            hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
+            textContainer.style.setProperty("box-sizing", "border-box");
+            textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
+            document.body.append(textContainer);
+            let containerWidth = textContainer.offsetWidth + 50;
+
+            textContainer.remove();
+            dom.style.setProperty("width", `${containerWidth}px`);
+          }
+          // this.handleSearch(name);
+        } catch (error) {
+
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss">
+  .el-select-dropdown__item.selected,
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
+    color: #3181fa;
+    font-size: 0;
+  }
+</style>
+<style lang="scss" scoped>
+  .MonitoringDynamics{
+    .search{
+      background: #FFFFFF;
+      padding: 25px 16px;
+      border-radius: 4px;
+      .search-item{
+        display: -webkit-box;
+        align-items: flex-start;
+        line-height: 20px;
+        margin-top: 8px;
+      }
+      .label{
+        margin-right: 12px;
+        font-size: 14px;
+        color: rgba(35,35,35,0.8);
+      }
+      .color_text {
+        color: #0081ff;
+      }
+      ::v-deep .name{
+        width: 405px;
+        height: 32px;
+        margin-left: 12px;
+        border-radius: 2px;
+        border: 1px solid #DCDFE6;
+        .el-input__inner{
+          border: 0;
+          height: 32px;
+        }
+        .el-input-group__append{
+          border: 0;
+          background: #F5F5F5;
+          width: 60px;
+          color: #0081FF;
+          text-align: center;
+        }
+        .el-input-group__append:hover{
+          background:#F5F5F5 !important;
+        }
+      }
+      .main-right {
+        width: calc(100% - 112px);
+        .select-popper {
+          text-align: left;
+          display: inline-block;
+          position: relative;
+          color: #333333;
+          font-size: 14px;
+          cursor: pointer;
+          margin: 0px 12px;
+          margin-bottom: 16px;
+        }
+
+        .select-popper .select-popper-img {
+          width: 24px;
+          height: 12px;
+          position: absolute;
+          top: -10px;
+          right: 2px;
+        }
+        .select-multiple {
+          position: absolute;
+          left: 0;
+          top: -6px;
+          opacity: 0;
+          line-height: 22px;
+          ::v-deep .el-input {
+            width: 100%;
+            line-height: 22px;
+            .el-input__inner {
+              color: rgba(35,35,35,0.8);
+              width: 100%;
+              height: 22px !important;
+            }
+          }
+          .el-tag__close.el-icon-close {
+            display: none;
+          }
+        }
+      }
+      .checkbox{
+        display: flex;
+        align-items: flex-start;
+        padding-left: 12px;
+        position: relative;
+        .checkbox-content-qx{
+          margin-right: 24px;
+        }
+        .keyword_checkbox{
+          ::v-deep .el-checkbox{
+            margin-right: 24px;
+          }
+        }
+        ::v-deep .el-radio{
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-checkbox__label{
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-checkbox{
+          margin-right: 10px;
+        }
+        ::v-deep .el-date-editor{
+          position: absolute;
+          right: -368px;
+          top: -7px
+        }
+        ::v-deep .el-select{
+          .el-input{
+            .el-input__inner{
+              height: 32px;
+              line-height: 32px;
+              border-radius: 4px;
+              border: 0;
+              padding-left: 0px;
+              padding-right: 8px;
+              &::placeholder{
+                color: rgba(35,35,35,0.8) !important;
+              }
+            }
+            .el-input__suffix{
+              top:2px;
+            }
+          }
+
+        }
+      }
+    }
+    .content{
+      background: #FFFFFF;
+      border-radius: 4px;
+      margin-top: 16px;
+      padding: 16px;
+      .total{
+        color: rgba(35,35,35,0.8);
+        font-size: 12px;
+        padding-bottom: 16px;
+        display: flex;
+        align-items: center;
+        &:before {
+          content: "";
+          display: inline-block;
+          width: 2px;
+          height: 2px;
+          background: rgba(35,35,35,.4);
+          margin-right: 4px;
+        }
+      }
+      .empty{
+        margin: 0 auto;
+        height: 550px;
+        text-align: center;
+        .img{
+          width: 108px;
+          height: 108px;
+          margin-bottom: 24px;
+          margin-top: 150px;
+        }
+        .p1{
+          color: #333333;
+          font-size: 16px;
+        }
+        .p2{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+      }
+    }
+    ::v-deep .dialog-claim{
+      .el-dialog__header{
+        display: block;
+        padding:16px 20px;
+        border-bottom: 1px solid #EEEEEE;
+        font-size: 16px;
+        font-weight: 700;
+        color: #232323;
+      }
+      .el-dialog__body {
+        padding: 24px 20px;
+      }
+    }
+    .title_wrap{
+        padding: 20px;
+        background-color: #FFFFFF;
+        border-bottom: 1px solid #e0e0e0;
+        .enterprise_title{
+          border-left: 2px solid #445781;
+          padding-left: 8px;
+          font-size: 16px;
+          height: 16px;
+          line-height: 16px;
+          font-weight: 700;
+          color: #232323;
+        }
+    }
+  }
+</style>

dsk-operate-ui/src/views/owner/MonitoringDynamicsjy.vue

+<template>
+  <!--经营风险动态-->
+    <div class="app-container MonitoringDynamics">
+      <div class="title_wrap">
+        <div class="enterprise_title">
+          经营风险动态
+        </div>
+      </div>
+      <div class="search">
+        <div class="search-item" style="line-height: 32px;margin-top: 0;padding-bottom: 8px;">
+          <div class="label">监控对象</div>
+          <el-input class="name" placeholder="请输入监控对象名称" v-model="companyName">
+            <el-button slot="append" @click="handleKeyword()">搜索</el-button>
+          </el-input>
+        </div>
+        <div class="search-item" style="margin-bottom: 25px">
+          <div class="label">更新时间</div>
+          <div class="checkbox">
+            <el-radio-group v-model="radio">
+              <el-radio v-for="item in radioList" @change="radioBtn" :label="item.type">{{item.label}}</el-radio>
+            </el-radio-group>
+            <el-date-picker
+              v-if="radio==6"
+              v-model="date"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              unlink-panels
+              size="small"
+              @change="changePicker"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="search-item">
+          <div class="label">经营风险</div>
+          <div class="main-right">
+            <div class="select-popper">
+              <el-checkbox-group v-model="jyfx">
+                <el-checkbox label="不限" @change="changeGsfx('不限')">不限</el-checkbox>
+                <el-checkbox v-for="(i,index) in selectList1" :key="index" :label="i.dimensionName" @change="changeGsfx(i)">{{i.dimensionName}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </div>
+        <div class="search-item">
+          <div class="label">风险级别</div>
+          <div class="main-right">
+            <div class="checkbox">
+              <div class="checkbox-content-qx">
+                <el-checkbox v-model="checkFx" @change="checkFxjbBtn">全部</el-checkbox>
+              </div>
+              <el-checkbox-group v-model="fxjbType" class="keyword_checkbox" @change="checkFxjb1Btn">
+                <el-checkbox v-for="item in fxjb" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="content">
+        <div class="total" v-if="tableDataTotal > 0  && !isSkeleton">共 {{tableDataTotal}} 条</div>
+        <div class="table-item">
+          <div v-if="tableDataTotal > 0  && !isSkeleton">
+            <el-table
+              :data="tableData"
+              element-loading-text="Loading"
+              border
+              highlight-current-row
+            >
+              <el-table-column label="序号" width="60" align="left" fixed>
+                <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
+              </el-table-column>
+              <el-table-column label="监控对象" prop="companyName" align="left" width="250"></el-table-column>
+              <el-table-column label="风险级别" prop="riskLevel" align="left" width="120"></el-table-column>
+              <el-table-column label="监控类型" prop="dimensionName" align="left" width="150"></el-table-column>
+              <el-table-column label="动态内容" prop="details" align="left">
+                <template slot-scope="scope">
+                  <div v-for="(item,index) in scope.row.Array" :key="index">
+                    <div>
+                      <span style="color: #999;">{{item.key}}：</span>
+                      <span>{{item.value}}</span>
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="更新时间" prop="createTime" align="left" width="150"></el-table-column>
+              <el-table-column
+                label="操作"
+                align="center"
+                width="150"
+              >
+                <template slot-scope="scope">
+                  <!---->
+                  <span v-if="scope.row.hasdetail" style="cursor: pointer;color:#0081FF;" @click="handleDetail(scope.row)">查看详情</span>
+                  <span v-else="scope.row.hasdetail" @click="handleDetail(scope.row)">查看详情</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
+            <img class="img" src="@/assets/images/project/empty.png">
+            <div class="p1">暂未发现企业风险动态信息</div>
+            <!--<div class="p2">建议调整关键词或筛选条件，重新搜索</div>-->
+          </div>
+        </div>
+        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
+          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </div>
+      </div>
+      <el-dialog :visible.sync="dialogVisible" custom-class='dialog-claim' :title="title" width="720px" :close-on-click-modal="false">
+        <div class="dialog-content">
+          <template v-if="title=='开庭公告详情'">
+            <info-table class="info-tab" :list="defaultList0" :obj="detail" :labelWidth="labelWidth">
+              <template v-slot:relatedCompanies="row">
+                <p v-for="i in row.data.relatedCompanies">
+                  {{i.role}}:<br/>
+                  {{i.name}}
+                </p>
+              </template>
+            </info-table>
+          </template>
+          <template v-if="title=='失信被执行人详情'">
+            <info-table class="info-tab" :list="defaultList1" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='法院公告详情'">
+            <info-table class="info-tab" :list="defaultList2" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='经营异常详情'">
+            <info-table class="info-tab" :list="defaultList3" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='股权冻结详情'">
+            <info-table class="info-tab" :list="defaultList4" :obj="detail" :labelWidth="labelWidth"></info-table>
+          </template>
+          <template v-if="title=='裁判文书详情'">
+            <info-table class="info-tab" :list="defaultList5" :obj="detail" :labelWidth="labelWidth">
+              <template v-slot:relatedCompanies="row">
+                <p v-for="i in row.data.relatedCompanies">
+                  {{i.role}}:<br/>
+                  {{i.name}}
+                </p>
+              </template>
+            </info-table>
+          </template>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  import { v4 } from "uuid";
+  import {changeTime} from "@/assets/js/common.js"
+  import { dynamicPage,companyDetail,rulesSelect } from '@/api/monitoring/monitoring'
+  import InfoTable from '../detail/party-a/component/infoTable';
+  import skeleton from '../component/skeleton'
+  export default {
+    name: 'MonitoringDynamicsgs',
+    components: {
+      InfoTable,skeleton
+    },
+    data() {
+      return {
+        isSkeleton:true,
+        radio:null,
+        date:'',
+        radioList:[
+          {
+            type:null,
+            label:'全部'
+          },
+          {
+            type:1,
+            label:'今天'
+          },
+          {
+            type:2,
+            label:'近三天'
+          },
+          {
+            type:3,
+            label:'近一周'
+          },
+          {
+            type:4,
+            label:'近半月'
+          },
+          {
+            type:5,
+            label:'近一个月'
+          },
+          {
+            type:6,
+            label:'自定义日期'
+          },
+        ],
+        fxjb:[
+          {
+            value:'低风险',
+            label:'低风险'
+          },
+          {
+            value:'中风险',
+            label:'中风险'
+          },
+          {
+            value:'高风险',
+            label:'高风险'
+          },
+        ],
+        checkFx: true,
+        fxlxType:[],
+        jkType:[
+          {
+            value:'1',
+            label:'司法风险'
+          },
+          {
+            value:'2',
+            label:'工商变更'
+          },
+        ],
+        selectList:[],
+        selectList1:[],
+        jyfx:[],
+        queryParams:{
+          pageNum:1,
+          pageSize:50,
+          condition:{}
+        },
+        type:[],
+        gsbgType:[],
+        companyName:'',
+        fxjbType:[],
+        inputID1: this.getUid(),
+        inputID2: this.getUid(),
+        tableData:[],
+        tableDataTotal:0,
+        dialogVisible:false,
+        labelWidth: 140,
+        //开庭公告详情
+        defaultList0:[
+          { name: '案由', prop: 'causeAction' },
+          { name: '案号', prop: 'caseNo' },
+          { name: '开庭时间', prop: 'hearingDate' },
+          { name: '承办部门', prop: 'department' },
+          { name: '审判长/主判人', prop: 'judge'},
+          { name: '当事人', prop: 'relatedCompanies',slot: true},
+          { name: '法院', prop: 'court'},
+          { name: '法庭', prop: 'tribunal'},
+          { name: '公告内容', prop: 'content', style: true },
+        ],
+        //失信被执行人详情
+        defaultList1:[
+          { name: '失信被执行人行为具体情形', prop: 'executionDesc', style: true  },
+          { name: '履行情况', prop: 'finalDuty' },
+          { name: '立案文号', prop: 'caseNumber' },
+          { name: '立案日期', prop: 'date' },
+          { name: '执行依据文号', prop: 'docNumber'},
+          { name: '执行法院', prop: 'court'},
+        ],
+        //法院公告详情
+        defaultList2:[
+          { name: '当事人', prop: 'people',style: true  },
+          { name: '身份', prop: 'role' },
+          { name: '公共类型', prop: 'type' },
+          { name: '公告日期', prop: 'date' },
+          { name: '公告法院', prop: 'court',style: true},
+          { name: '案由', prop: 'caseReason',style: true},
+        ],
+        //经营异常详情
+        defaultList3:[
+          { name: '列入日期', prop: 'inDate'},
+          { name: '移出日期', prop: 'outDate' },
+          { name: '列入经营异常原因', prop: 'outReason',style: true },
+          { name: '做出决定机关（移入）', prop: 'department' },
+          { name: '做出决定机关（移出）', prop: 'outDepartment'},
+          { name: '移出经营移除名录原因', prop: 'outReason',style: true},
+        ],
+        //股权冻结详情
+        defaultList4:[
+          { name: '执行法院', prop: 'executiveCourt'},
+          { name: '执行事项', prop: 'assistItem' },
+          { name: '执行裁定文书号', prop: 'adjudicateNo'},
+          { name: '执行通知文号', prop: 'number' },
+          { name: '被执行人', prop: 'beExecutedPerson'},
+          { name: '被执行人持有股权、其他投资权益数额', prop: 'amount'},
+          { name: '冻结期限自', prop: 'freezeStartDate'},
+          { name: '冻结期限至', prop: 'freezeEndDate'},
+          { name: '冻结期限', prop: 'freezeYearMonth'},
+          { name: '公示日期', prop: 'publicDate'},
+        ],
+        //裁判文书详情
+        defaultList5:[
+          { name: '案由', prop: 'causeAction'},
+          { name: '执行案号', prop: 'causeNo' },
+          { name: '身份', prop: 'role'},
+          { name: '当事人', prop: 'relatedCompanies',slot: true },
+          { name: '案件金额', prop: 'subAmount'},
+          { name: '判决日期', prop: 'date'},
+          { name: '判决结果', prop: 'judgeresult',style: true},
+        ],
+        title:'法院公告详情',
+        detail:{}
+      }
+    },
+    created() {
+      this.getPlaceholder()
+      this.querySubmit()
+      rulesSelect().then(res => {
+        this.selectList=res.data;
+        for(let i in res.data){
+          if(res.data[i].dimensionName === '经营风险'){
+            this.selectList1=res.data[i].children
+          }
+        }
+      })
+    },
+    methods: {
+      async querySubmit() {
+        let endTime = new Date()
+        let params={
+          pageNum:this.queryParams.pageNum,
+          pageSize:this.queryParams.pageSize,
+          condition:this.queryParams.condition
+        }
+        if(this.radio ===  1){
+          params.condition.beginTime=this.formatDate(endTime)
+          params.condition.endTime=this.formatDate(endTime)
+        }
+        if(this.companyName){
+          params.condition.companyName=this.companyName
+        }
+        if(this.fxjbType.length > 0){
+          params.condition.riskLevel=this.fxjbType
+        }else {
+          delete params.condition.riskLevel
+        }
+        let jyfx = this.jyfx
+        if(jyfx.indexOf('不限')>-1){
+          jyfx = []
+        }
+        if(jyfx.length > 0){
+          params.condition.parentDimension=['经营风险']
+          params.condition.dimension=this.jyfx;
+        }else {
+          params.condition.parentDimension=['经营风险']
+          delete params.condition.dimension
+        }
+        dynamicPage(params).then(res => {
+          this.isSkeleton = false;
+          this.tableData=res.rows;
+          this.tableDataTotal=res.total;
+          this.tableData.forEach(el => {
+            el.createTime = changeTime(el.createTime)
+            // 把动态内容从json字符串改为对象
+            el.details = JSON.parse(el.details)
+            // 对象转为键值对数组
+            let arr = Object.entries(el.details)
+            // 新建一个属性数组
+            el.Array = []
+            for(let [i,j] of arr){
+              el.Array.push({key:i,value:j})
+            }
+
+            let types = ['新增开庭公告','新增法院公告','新增裁判文书','新增经营异常','新增失信被执行人','新增股权冻结']
+            if(types.indexOf(el.dimensionName)>-1){
+              el.hasdetail = true
+            }else{
+              el.hasdetail = false
+            }
+
+          })
+        })
+      },
+      getDetail(name,id) {
+        companyDetail({dimensionName:name,sourceId:id}).then(res => {
+          console.log(res)
+          this.dialogVisible=true;
+          this.detail=res.data;
+        })
+      },
+      changeGsfx(val) {
+        if(val == '不限')
+          this.jyfx = ['不限']
+        else if(this.jyfx.indexOf('不限')>-1){
+          this.jyfx.splice(this.jyfx.indexOf('不限'),1)
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      checkFxjbBtn(val) {
+        this.fxjbType = [];
+        this.checkFx = true;
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      checkFxjb1Btn(val){
+        if (val.length > 0) {
+          this.checkFx = false;
+        } else if (val.length == 0) {
+          this.checkFx = true;
+          this.fxjbType = [];
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      handleDetail(item){
+        switch (item.dimensionName) {
+          case '新增开庭公告':
+            this.title='开庭公告详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增法院公告':
+            this.title='法院公告详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增裁判文书':
+            this.title='裁判文书详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增经营异常':
+            this.title='经营异常详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增失信被执行人':
+            this.title='失信被执行人详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          case '新增股权冻结':
+            this.title='股权冻结详情'
+            this.getDetail(item.dimensionName,item.sourceId)
+            break;
+          default:
+            this.$message.success("暂无详情");
+            break;
+        }
+      },
+      handleKeyword(){
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      radioBtn(val){
+        let endTime = new Date()
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        switch (val) {
+          case 1:
+            this.queryParams.condition.beginTime=this.formatDate(endTime)
+            this.queryParams.condition.endTime=this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 2:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 3))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 3:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 7))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 4:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 15))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 5:
+            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 30))
+            this.queryParams.condition.endTime = this.formatDate(endTime)
+            this.querySubmit()
+            break;
+          case 6:
+            this.date=[]
+            break;
+          default:
+            this.queryParams.condition.beginTime=''
+            this.queryParams.condition.endTime=''
+            this.querySubmit()
+            break;
+        }
+      },
+      // 重置页数
+      handleSizeChange(val) {
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.querySubmit()
+      },
+      // 跳转指定页数
+      handleCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.querySubmit()
+        window.scrollTo(0, 0);
+      },
+      // 时间选择改变后的回调
+      changePicker(value) {
+        if(value && value.length) {
+          this.queryParams.condition.beginTime = value[0]
+          this.queryParams.condition.endTime = value[1]
+        }
+        this.queryParams.pageNum=1
+        this.queryParams.pageSize=10
+        this.querySubmit()
+      },
+      // 时间格式化
+      formatDate(timeStr) {
+        let date = new Date(Number(timeStr));
+        let year = date.getFullYear();
+        let month = String(date.getMonth() + 1).padStart(2, 0);
+        let day = String(date.getDate()).padStart(2, 0);
+        return `${year}-${month}-${day}`;
+      },
+      async getPlaceholder() {
+        try {
+          await this.$nextTick();
+          const doms = document.querySelectorAll("[class*='select-adaptive-']");
+          if (doms?.length) {
+            doms.forEach(dom => {
+              const realStyles = window.getComputedStyle(dom);
+              const ipt = dom.querySelector("input");
+              const text = ipt.getAttribute("placeholder");
+              const textContainer = document.createElement("span");
+              textContainer.style.setProperty("visibility", "hidden");
+              textContainer.style.setProperty("display", "inline-block");
+              textContainer.style.setProperty("font-size", "14px");
+              const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
+              hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
+              textContainer.style.setProperty("box-sizing", "border-box");
+              textContainer.textContent = text;
+              document.body.append(textContainer);
+              // 加上按钮宽度 以及按钮左外边距
+              let containerWidth = textContainer.offsetWidth + 30;
+              textContainer.remove();
+              dom.style.setProperty("width", `${containerWidth}px`);
+            });
+          }
+        } catch (error) {
+
+        }
+      },
+      iptAdaptive(uid, multiple = false, name) {
+        multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
+      },
+      getUid() {
+        return v4();
+      },
+      // 多选处理
+      async multipleAdaptiveHandle(uid, name) {
+        try {
+          await this.$nextTick();
+          const dom = document.querySelector(`.select-adaptive-${uid}`);
+          const iptChild = dom.querySelector(".el-input__inner");
+          if (dom) {
+            const textContainer = document.createElement("span");
+            const textName = `text-${uid}`;
+            textContainer.classList.add(textName);
+            const selectChildren = dom.querySelectorAll(".el-tag");
+            if (selectChildren.length) {
+              let width = 0;
+              selectChildren.forEach(item => {
+                const text = item.textContent;
+                const itemInfo = window.getComputedStyle(item);
+                textContainer.style.setProperty("visibility", "hidden");
+                textContainer.style.setProperty("display", "inline-block");
+                textContainer.style.setProperty("font-size", "14px");
+                textContainer.style.setProperty("padding", itemInfo.padding);
+                textContainer.style.setProperty("box-sizing", "border-box");
+                textContainer.textContent = text;
+                document.body.append(textContainer);
+                width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
+                textContainer.remove();
+              });
+              dom.style.setProperty("width", `${width + 50}px`);
+              // this.handleSearch(name);
+              return;
+            }
+            textContainer.style.setProperty("visibility", "hidden");
+            textContainer.style.setProperty("display", "inline-block");
+            textContainer.style.setProperty("font-size", "14px");
+            textContainer.style.setProperty("padding", "0px 8px");
+            textContainer.style.setProperty("box-sizing", "border-box");
+            textContainer.textContent = iptChild.getAttribute("placeholder");
+            document.body.append(textContainer);
+            let containerWidth = textContainer.offsetWidth + 12 + 8;
+            // let containerWidth = 130;
+            textContainer.remove();
+            dom.style.setProperty("width", `${containerWidth}px`);
+            // this.handleSearch(name);
+          }
+
+        } catch (error) {
+          console.log(error);
+        }
+      },
+      // 单选处理
+      async iptAdaptiveHandle(uid, name) {
+        try {
+          await this.$nextTick();
+          const dom = document.querySelector(`.select-adaptive-${uid}`);
+          const realStyles = window.getComputedStyle(dom);
+          if (dom) {
+            const iptChild = dom.querySelector(".el-input__inner");
+            const textContainer = document.createElement("span");
+            const textName = `text-${uid}`;
+            textContainer.classList.add(textName);
+            textContainer.style.setProperty("visibility", "hidden");
+            textContainer.style.setProperty("display", "inline-block");
+            textContainer.style.setProperty("font-size", "14px");
+            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
+            hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
+            textContainer.style.setProperty("box-sizing", "border-box");
+            textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
+            document.body.append(textContainer);
+            let containerWidth = textContainer.offsetWidth + 50;
+
+            textContainer.remove();
+            dom.style.setProperty("width", `${containerWidth}px`);
+          }
+          // this.handleSearch(name);
+        } catch (error) {
+
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss">
+  .el-select-dropdown__item.selected,
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
+    color: #3181fa;
+    font-size: 0;
+  }
+</style>
+<style lang="scss" scoped>
+  .MonitoringDynamics{
+    .search{
+      background: #FFFFFF;
+      padding: 25px 16px;
+      border-radius: 4px;
+      .search-item{
+        display: -webkit-box;
+        align-items: flex-start;
+        line-height: 20px;
+        margin-top: 8px;
+      }
+      .label{
+        margin-right: 12px;
+        font-size: 14px;
+        color: rgba(35,35,35,0.8);
+      }
+      .color_text {
+        color: #0081ff;
+      }
+      ::v-deep .name{
+        width: 405px;
+        height: 32px;
+        margin-left: 12px;
+        border-radius: 2px;
+        border: 1px solid #DCDFE6;
+        .el-input__inner{
+          border: 0;
+          height: 32px;
+        }
+        .el-input-group__append{
+          border: 0;
+          background: #F5F5F5;
+          width: 60px;
+          color: #0081FF;
+          text-align: center;
+        }
+        .el-input-group__append:hover{
+          background:#F5F5F5 !important;
+        }
+      }
+      .main-right {
+        width: calc(100% - 112px);
+        .select-popper {
+          text-align: left;
+          display: inline-block;
+          position: relative;
+          color: #333333;
+          font-size: 14px;
+          cursor: pointer;
+          margin: 0px 12px;
+          margin-bottom: 16px;
+        }
+
+        .select-popper .select-popper-img {
+          width: 24px;
+          height: 12px;
+          position: absolute;
+          top: -10px;
+          right: 2px;
+        }
+        .select-multiple {
+          position: absolute;
+          left: 0;
+          top: -6px;
+          opacity: 0;
+          line-height: 22px;
+          ::v-deep .el-input {
+            width: 100%;
+            line-height: 22px;
+            .el-input__inner {
+              color: rgba(35,35,35,0.8);
+              width: 100%;
+              height: 22px !important;
+            }
+          }
+          .el-tag__close.el-icon-close {
+            display: none;
+          }
+        }
+      }
+      .checkbox{
+        display: flex;
+        align-items: flex-start;
+        padding-left: 12px;
+        position: relative;
+        .checkbox-content-qx{
+          margin-right: 24px;
+        }
+        .keyword_checkbox{
+          ::v-deep .el-checkbox{
+            margin-right: 24px;
+          }
+        }
+        ::v-deep .el-radio{
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-checkbox__label{
+          color: rgba(35,35,35,0.8);
+        }
+        ::v-deep .el-checkbox{
+          margin-right: 10px;
+        }
+        ::v-deep .el-date-editor{
+          position: absolute;
+          right: -368px;
+          top: -7px
+        }
+        ::v-deep .el-select{
+          .el-input{
+            .el-input__inner{
+              height: 32px;
+              line-height: 32px;
+              border-radius: 4px;
+              border: 0;
+              padding-left: 0px;
+              padding-right: 8px;
+              &::placeholder{
+                color: rgba(35,35,35,0.8) !important;
+              }
+            }
+            .el-input__suffix{
+              top:2px;
+            }
+          }
+
+        }
+      }
+    }
+    .content{
+      background: #FFFFFF;
+      border-radius: 4px;
+      margin-top: 16px;
+      padding: 16px;
+      .total{
+        color: rgba(35,35,35,0.8);
+        font-size: 12px;
+        padding-bottom: 16px;
+        display: flex;
+        align-items: center;
+        &:before {
+          content: "";
+          display: inline-block;
+          width: 2px;
+          height: 2px;
+          background: rgba(35,35,35,.4);
+          margin-right: 4px;
+        }
+      }
+      .empty{
+        margin: 0 auto;
+        height: 550px;
+        text-align: center;
+        .img{
+          width: 108px;
+          height: 108px;
+          margin-bottom: 24px;
+          margin-top: 150px;
+        }
+        .p1{
+          color: #333333;
+          font-size: 16px;
+        }
+        .p2{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+      }
+    }
+    ::v-deep .dialog-claim{
+      .el-dialog__header{
+        display: block;
+        padding:16px 20px;
+        border-bottom: 1px solid #EEEEEE;
+        font-size: 16px;
+        font-weight: 700;
+        color: #232323;
+      }
+      .el-dialog__body {
+        padding: 24px 20px;
+      }
+    }
+    .title_wrap{
+        padding: 20px;
+        background-color: #FFFFFF;
+        border-bottom: 1px solid #e0e0e0;
+        .enterprise_title{
+          border-left: 2px solid #445781;
+          padding-left: 8px;
+          font-size: 16px;
+          height: 16px;
+          line-height: 16px;
+          font-weight: 700;
+          color: #232323;
+        }
+    }
+  }
+</style>