Skip to content

D
dsk-operate-sys-cscec
Commit 526d18f5 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent 4931acd8
Hide whitespace changes
Inline Side-by-side
Showing with 921 additions and 1 deletion
dsk-operate-ui/src/views/owner/EnterpriseMonitoring.vue
View file @ 526d18f5
......@@ -51,7 +51,7 @@
<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>
<router-link :to="`/owner/MonitoringReportDetails/${scope.row.companyId}`" tag="a" class="a-link companyName">{{scope.row.companyName}}</router-link>
</div>
<div v-else>{{scope.row.companyName}}</div>
</template>
......
dsk-operate-ui/src/views/owner/MonitoringReportDetails.vue 0 → 100644
View file @ 526d18f5
<template>
<!--监控报告详情-->
<div class="app-container MonitoringReportDetails">
<div class="search">
<div class="enterprise">
<div class="name">
<img src="@/assets/images/enterprise.png"/>
<span>{{object.companyName}}</span>
</div>
<p style="margin: 12px 0;">
<span class="label">法定代表人：</span>
<span class="val">{{object.corporatePerson}}</span>
<span class="label">注册资本：</span>
<span class="val">{{object.regCapital}}</span>
<span class="label">成立日期：</span>
<span class="val">{{object.registeredDate}}</span>
</p>
</div>
<div class="search-item" style="margin-bottom: 25px">
<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.label" :key="item.label">{{item.label}}</el-checkbox>
</el-checkbox-group>
</div>
</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="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="select-popper">
<el-checkbox-group v-model="jyfx">
<el-checkbox label="不限" @change="changeJyfx('不限')">不限</el-checkbox>
<el-checkbox v-for="(i,index) in selectList2" :key="index" :label="i.dimensionName" @change="changeJyfx(i)">{{i.dimensionName}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div class="search-item" style="line-height: 16px;">
<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==4"
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>
<div class="content">
<div class="total">共 {{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="center" 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 style="cursor: pointer;color:#0081FF;" @click="handleDetail(scope.row)">查看详情</span>-->
<span v-if="scope.row.details" style="cursor: pointer;color:#0081FF;" @click="handleDetail(scope.row)">查看详情</span>
<span v-else="scope.row.details" @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>
<template v-if="title=='行政处罚详情'">
<info-table class="info-tab" :list="defaultList6" :obj="detail" :labelWidth="labelWidth">
<template v-slot:dataSource="row">
<span v-for="i in row.data.dataSource">{{i.web}}</span>
</template>
</info-table>
</template>
</div>
</el-dialog>
</div>
</template>
<script>
import { v4 } from "uuid";
import { dynamicPage,rulesSelect,companyDetail } from '@/api/monitoring/owner'
import InfoTable from '../detail/party-a/component/infoTable';
import {changeTime} from "@/assets/js/common.js"
import skeleton from '../component/skeleton'
export default {
name: 'MonitoringDynamics',
components: {
InfoTable,skeleton
},
data() {
return {
changeTime,
isSkeleton:true,
radio:null,
date:'',
radioList:[
{
type:null,
label:'全部'
},
{
type:1,
label:'今天'
},
{
type:2,
label:'近七天'
},
{
type:3,
label:'近30天'
},
{
type:4,
label:'自定义'
},
],
fxjb:[
{
value:'低风险',
label:'低风险'
},
{
value:'中风险',
label:'中风险'
},
{
value:'高风险',
label:'高风险'
},
],
checkFx: true,
fxlxType:[],
selectList:[],
selectList1:[],
selectList2:[],
sffx:[],
gsfx:[],
jyfx:[],
dimension:[],
queryParams:{
pageNum:1,
pageSize:10,
condition:{
companyId:this.$route.params.id,
// companyId:285,
}
},
type:[],
gsbgType:[],
companyName:'',
fxjbType:[],
inputID1: this.getUid(),
inputID2: this.getUid(),
object:{},
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},
],
//行政处罚详情
defaultList6:[
{ name: '企业名称', prop: 'companyName'},
{ name: '相关人员', prop: 'personName' },
{ name: '决定文书号', prop: 'fileNum'},
{ name: '处罚类型', prop: 'punishType'},
{ name: '处罚开始日期', prop: 'punishBegin'},
{ name: '处罚结束日期', prop: 'punishEnd'},
{ name: '处罚机关', prop: 'office',style: true},
{ name: '处罚内容（原因）', prop: 'punishReason',style: true},
{ name: '处罚结果', prop: 'punishResult',style: true},
{ name: '来源', prop: 'dataSource',style: true,slot: 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
}
if(res.data[i].dimensionName === '经营风险'){
this.selectList2=res.data[i].children
}
}
})
},
methods: {
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()
},
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()
},
changeJyfx(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()
},
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 = []
}
let gsfx = this.gsfx
if(gsfx.indexOf('不限')>-1){
gsfx = []
}
let jyfx = this.jyfx
if(jyfx.indexOf('不限')>-1){
jyfx = []
}
let arr=[
...sffx,
...gsfx,
...jyfx,
]
if(arr.length > 0){
params.condition.dimension=arr
}else {
delete params.condition.dimension
}
// if(sffx.length > 0 && gsfx.length > 0 && jyfx.length > 0){
// // params.condition.riskType='司法风险,工商风险'
// params.condition.dimension=this.sffx.concat(this.gsfx)
// }
// if(sffx.length > 0 && gsfx.length === 0){
// // params.condition.riskType='司法风险'
// params.condition.dimension=this.sffx
// }
// if(sffx.length === 0 && gsfx.length > 0){
// // params.condition.riskType='工商风险'
// params.condition.dimension=this.gsfx
// }
// if(sffx.length === 0 && gsfx.length === 0){
// // delete params.condition.riskType
// delete params.condition.dimension
// }
dynamicPage(params).then(res => {
this.isSkeleton = false;
this.object=res.object;
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})
}
})
})
},
getDetail(name,id) {
companyDetail({dimensionName:name,sourceId:id}).then(res => {
this.dialogVisible=true;
this.detail=res.data;
})
},
checkFxjbBtn(val) {
this.fxjbType = [];
this.checkFx = true;
this.queryParams.pageNum=1
this.queryParams.pageSize=10
this.querySubmit()
},
checkFxjb1Btn(val){
this.queryParams.pageNum=1
this.queryParams.pageSize=10
if (val.length > 0) {
this.checkFx = false;
} else if (val.length == 0) {
this.checkFx = true;
this.fxjbType = [];
}
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;
case '新增行政处罚':
this.title='行政处罚详情'
this.getDetail(item.dimensionName,item.sourceId)
break;
default:
this.$message.success("暂无详情");
break;
}
},
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 * 7))
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 * 30))
this.queryParams.condition.endTime = this.formatDate(endTime)
this.querySubmit()
break;
case 4:
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>
.MonitoringReportDetails{
.search{
background: #FFFFFF;
padding: 25px 16px;
border-radius: 4px;
.enterprise{
border-bottom: 1px solid #EEEEEE;
margin-bottom: 18px;
.name{
img{
width: 28px;
height: 28px;
float: left;
margin-right: 12px;
}
span{
font-weight: 700;
color: #232323;
font-size: 16px;
}
}
.label{
color: rgba(35,35,35,0.4);
font-size: 14px;
}
.val{
color: rgba(35,35,35,0.8);
margin-right: 26px;
font-size: 14px;
}
}
.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;
}
.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;
.el-input {
width: 100%;
line-height: 22px;
.el-input__inner {
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-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;
border-top: 1px solid #EFEFEF;
.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;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment