|
|
<!--
|
|
|
* @description: 案件详情
|
|
|
* @fileName: index
|
|
|
* @author: 17076
|
|
|
* @date: 2024/6/19-下午2:54
|
|
|
* @version: V1.0.0
|
|
|
-->
|
|
|
|
|
|
<template>
|
|
|
<div class="details-content">
|
|
|
<div class="details-header">
|
|
|
<div v-if="expand" class="flex-row expand-info">
|
|
|
<div class="left-score">
|
|
|
<vue-chart autoresize :option="scoreOption" :style="{ width: '100%', height: '260px' }" />
|
|
|
<div
|
|
|
v-if="caseData['totalScore'] && caseData['totalScore'] > 0"
|
|
|
class="flex-column circle-info"
|
|
|
:style="circleStyle"
|
|
|
>
|
|
|
<span>综合得分</span>
|
|
|
<span :style="commonStyle">{{ caseData['totalScore'] }}</span>
|
|
|
<span :style="commonStyle">{{ caseData['identifyResultName'] }}</span>
|
|
|
<span>{{ `最新时间：${caseData['updateTime']}` }}</span>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
v-else
|
|
|
class="flex-column circle-info empty-score"
|
|
|
>
|
|
|
<span>待分析</span>
|
|
|
<span>暂无结果</span>
|
|
|
|
|
|
</div>
|
|
|
<div v-if="isEdit" class="model" @click="handleAnalysis">模型分析</div>
|
|
|
</div>
|
|
|
<div class="base-info">
|
|
|
<div class="flex-row" style="align-items: center; justify-content: space-between">
|
|
|
<h4>基本信息</h4>
|
|
|
<div>
|
|
|
<!-- <el-button type="info" plain icon="el-icon-download" @click="handleDownload">下载</el-button> -->
|
|
|
<el-button v-if="isEdit" type="primary" plain icon="el-icon-edit" @click="handleEdit">编辑</el-button>
|
|
|
<el-button v-if="caseData['totalScore'] && caseData['totalScore'] > 0" type="primary" plain @click="openDeatil">案件分析结果</el-button>
|
|
|
|
|
|
<el-button type="text" icon="el-icon-arrow-up" style="color: #666666" @click="expand = false">收起</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-descriptions :column="4">
|
|
|
<el-descriptions-item label="案件编号">{{ caseData['caseNo'] }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="案件名称">{{ caseData['caseName'] }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="案件类型" span="2">{{ caseData.caseTypeName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="案件状态">{{ caseData.caseStatusName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="到案方式">{{ caseData.crimeModeName }}</el-descriptions-item>
|
|
|
<!-- <el-descriptions-item label="立案时间">{{ caseData.registerTime || '暂未添加，上传笔录后自动生成' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="受理时间">{{ caseData.acceptTime || '暂未添加，上传笔录后自动生成' }}</el-descriptions-item> -->
|
|
|
|
|
|
<el-descriptions-item label="行为人">{{ caseData.lawActorName || '暂未添加，上传笔录后自动生成' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="当事人">{{ caseData.lawParty || '暂未添加，上传笔录后自动生成' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="案件概述" span="24">
|
|
|
<div slot="default" class="case-summarize">
|
|
|
{{ caseData.caseDetail }}
|
|
|
</div>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="flex-row pick-up-info">
|
|
|
<div class="flex-row left-title" style="align-items: center">
|
|
|
<span>综合得分：</span>
|
|
|
<span :style="commonStyle">{{ caseData.totalScore }}</span>
|
|
|
</div>
|
|
|
<div class="base-info flex-row" style="align-items: center; justify-content: space-between">
|
|
|
<div class="flex-row">
|
|
|
<span>案件编号：</span>
|
|
|
<span>{{ caseData.caseNo }}</span>
|
|
|
<span style="margin-left: 30px">案件名称：</span>
|
|
|
<span>{{ caseData.caseName }}</span>
|
|
|
<span style="margin-left: 30px">案件状态：</span>
|
|
|
<span>{{ caseData.caseStatusName }}</span>
|
|
|
</div>
|
|
|
<el-button type="text" icon="el-icon-arrow-down" style="color: #666666" @click="expand = true">展开</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex-row details-info" :style="{ height: expand ? 'calc(100% - 270px)' : 'calc(100% - 100px)' }">
|
|
|
<div class="info-left">
|
|
|
<el-tree
|
|
|
:data="leftTabs"
|
|
|
node-key="value"
|
|
|
highlight-current
|
|
|
current-node-key="1-1"
|
|
|
default-expand-all
|
|
|
@node-click="handleNodeClick"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="info-right">
|
|
|
<h4 style="margin: 0">{{ selectTitle }}</h4>
|
|
|
<component :is="selectCom" :is-edit="isEdit" :is-expand="expand" @reloadData="fetchData" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--编辑/新增弹窗-->
|
|
|
<edit-case-info ref="edit" @reloadData="fetchData" />
|
|
|
<!--模型分析-->
|
|
|
<model-analysis ref="analysis" @confirm="handleConfirmAnalysis" />
|
|
|
<!--案件分析详情-->
|
|
|
<case-analysis ref="caseAnalysis" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import VueChart from '@/plugins/echarts'
|
|
|
import scoreConfig from './js/scoreConfig'
|
|
|
import EditCaseInfo from '@/views/caseManagement/components/EditCaseInfo.vue'
|
|
|
import CaseRecord from './components/CaseRecord.vue'
|
|
|
import CaseEvidence from './components/CaseEvidence.vue'
|
|
|
import CommonIndex from './components/CommonIndex.vue'
|
|
|
import InnocentIndex from './components/InnocentIndex.vue'
|
|
|
import IncriminateIndex from './components/IncriminateIndex.vue'
|
|
|
import CaseAtlas from './components/CaseAtlas.vue'
|
|
|
import ModelAnalysis from '@/views/caseManagement/components/ModelAnalysis.vue'
|
|
|
import CaseAnalysis from './components/CaseAnalysis.vue'
|
|
|
import { executeModelAnalyse, queryCaseList } from '@/api/caseManagement'
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
components: {
|
|
|
ModelAnalysis,
|
|
|
EditCaseInfo,
|
|
|
VueChart,
|
|
|
CaseRecord,
|
|
|
CaseEvidence,
|
|
|
CommonIndex,
|
|
|
InnocentIndex,
|
|
|
IncriminateIndex,
|
|
|
CaseAtlas,
|
|
|
CaseAnalysis
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// 是否展开
|
|
|
expand: true,
|
|
|
caseData: {},
|
|
|
// 得分配置
|
|
|
scoreOption: scoreConfig,
|
|
|
// 得分/结果样式
|
|
|
commonStyle: {
|
|
|
color: '#FFBB69'
|
|
|
},
|
|
|
// 圆圈样式
|
|
|
circleStyle: {
|
|
|
alignItems: 'center',
|
|
|
boxShadow: '0px 1px 30px 0px rgba(255,169,66,0.2)'
|
|
|
},
|
|
|
// 左侧分类树
|
|
|
leftTabs: [
|
|
|
{ label: '案件证据', value: '1', children: [
|
|
|
{ label: '笔录', value: '1-1', component: 'CaseRecord' },
|
|
|
{ label: '证据', value: '1-2', component: 'CaseEvidence' }
|
|
|
] },
|
|
|
{ label: '指标结果', value: '2', children: [
|
|
|
{ label: '共性指标', value: '2-1', component: 'CommonIndex' },
|
|
|
{ label: '入罪指标', value: '2-2', component: 'IncriminateIndex' },
|
|
|
{ label: '出罪指标', value: '2-3', component: 'InnocentIndex' }
|
|
|
|
|
|
] },
|
|
|
{ label: '知识图谱', value: '3', children: [
|
|
|
{ label: '案件图谱', value: '3-1', component: 'CaseAtlas' }
|
|
|
] }
|
|
|
],
|
|
|
// 当前选中的标题
|
|
|
selectTitle: '案件证据-笔录',
|
|
|
// 当前选中的组件
|
|
|
selectCom: 'CaseRecord',
|
|
|
// 是否编辑
|
|
|
isEdit: false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
// 是否是编辑
|
|
|
this.isEdit = this.$route.query.isEdit === '1'
|
|
|
this.fetchData()
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取案件数据
|
|
|
fetchData() {
|
|
|
queryCaseList({ id: this.$route.params['id'] }, 1, 1).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
this.caseData = res.data.records[0]
|
|
|
if (this.caseData.lawPartyList) {
|
|
|
const list = []
|
|
|
this.caseData.lawPartyList.forEach(e => {
|
|
|
list.push(e.name)
|
|
|
})
|
|
|
this.caseData.lawParty = list.join(',')
|
|
|
}
|
|
|
|
|
|
// 设置分数
|
|
|
this.scoreOption.series[0].data = [{ value: this.caseData.totalScore }]
|
|
|
// 判断分数设置不通颜色
|
|
|
if (this.caseData.totalScore >= 70) {
|
|
|
this.scoreOption.series[0].progress.itemStyle.color.colorStops = [{
|
|
|
offset: 0, color: '#00975E'
|
|
|
}, {
|
|
|
offset: 1, color: '#3EE5A6'
|
|
|
}]
|
|
|
this.scoreOption.series[0].pointer.itemStyle.color = '#3EE5A6'
|
|
|
this.commonStyle.color = '#00975E'
|
|
|
this.circleStyle.boxShadow = '0px 1px 30px 0px rgba(0,151,94,0.2)'
|
|
|
} else if (this.caseData.totalScore > 0 && this.caseData.totalScore < 70) {
|
|
|
this.scoreOption.series[0].progress.itemStyle.color.colorStops = [{
|
|
|
offset: 0, color: '#F68600'
|
|
|
}, {
|
|
|
offset: 1, color: '#FFA942'
|
|
|
}]
|
|
|
this.scoreOption.series[0].pointer.itemStyle.color = '#FFA942'
|
|
|
this.commonStyle.color = '#FFBB69'
|
|
|
this.circleStyle.boxShadow = '0px 1px 30px 0px rgba(255,169,66,0.2)'
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 下载
|
|
|
handleDownload() {
|
|
|
|
|
|
},
|
|
|
openDeatil() {
|
|
|
this.$refs.caseAnalysis.show()
|
|
|
},
|
|
|
// 编辑
|
|
|
handleEdit() {
|
|
|
this.$refs.edit.show(this.caseData, true)
|
|
|
},
|
|
|
// 模型分析
|
|
|
handleAnalysis() {
|
|
|
this.$refs.analysis.show(this.caseData)
|
|
|
},
|
|
|
handleConfirmAnalysis(data) {
|
|
|
this.$set(this.caseData, 'isAnalysing', true)
|
|
|
const params = {
|
|
|
caseId: this.$route.params['id'],
|
|
|
lawActorName: this.caseData.lawActorName,
|
|
|
lawParty: this.caseData.lawParty
|
|
|
}
|
|
|
executeModelAnalyse(params).then(res => {
|
|
|
const { code, msg } = res
|
|
|
this.$set(this.caseData, 'isAnalysing', false)
|
|
|
code === 200 ? this.$baseMessage.success(msg || '模型分析成功!') : this.$baseMessage.error(msg || '模型分析失败！')
|
|
|
this.fetchData()
|
|
|
})
|
|
|
},
|
|
|
// 节点点击回调
|
|
|
handleNodeClick(node, data) {
|
|
|
// console.log(data, 666)
|
|
|
if (data.level === 1) return
|
|
|
this.selectTitle = `${data.parent.data['label']}-${data.data['label']}`
|
|
|
this.selectCom = node.component
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.details-content {
|
|
|
height: 100%;
|
|
|
color: #333333;
|
|
|
box-sizing: border-box;
|
|
|
.details-header {
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8px;
|
|
|
background: #FFFFFF;
|
|
|
.expand-info {
|
|
|
height: 260px;
|
|
|
align-items: center;
|
|
|
|
|
|
.left-score {
|
|
|
position: relative;
|
|
|
width: 340px;
|
|
|
.model {
|
|
|
width: 200px;
|
|
|
height: 52px;
|
|
|
background: #3763FF;
|
|
|
border-radius: 26px 26px 26px 26px;
|
|
|
text-align: center;
|
|
|
font-size: 18px !important;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 52px;
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
top: 180px;
|
|
|
left: 70px;
|
|
|
}
|
|
|
.circle-info {
|
|
|
position: absolute;
|
|
|
width: 220px;
|
|
|
height: 220px;
|
|
|
top: 30px;
|
|
|
left: 60px;
|
|
|
box-shadow: 0 1px 30px 0 rgba(255,169,66,0.2);
|
|
|
border-radius: 50%;
|
|
|
font-size: 12px;
|
|
|
color: #999999;
|
|
|
span {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
span:nth-child(2) {
|
|
|
font-size: 35px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
span:nth-child(3) {
|
|
|
font-size: 13px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
span:nth-last-child(1) {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
.empty-score {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
// position: relative;
|
|
|
span:nth-child(1) {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
span:nth-last-child(1) {
|
|
|
font-size: 17px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
.pick-up-info {
|
|
|
height: 50px;
|
|
|
color: #333333;
|
|
|
line-height: 50px;
|
|
|
.left-title {
|
|
|
font-weight: 500;
|
|
|
margin-right: 10px;
|
|
|
span:nth-last-child(1) {
|
|
|
font-weight: 700;
|
|
|
font-size: 20px;
|
|
|
color: #FF9311;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.base-info {
|
|
|
flex: 1;
|
|
|
background: #F5F9FF;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
.case-summarize {
|
|
|
max-height: 55px;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
text-wrap: wrap;
|
|
|
}
|
|
|
}
|
|
|
.details-info {
|
|
|
margin-top: 10px;
|
|
|
box-sizing: border-box;
|
|
|
>div {
|
|
|
height: 100%;
|
|
|
background: #FFFFFF;
|
|
|
padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
.info-left {
|
|
|
width: 10%;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
.info-right {
|
|
|
width: 90%;
|
|
|
margin-left: 10px;
|
|
|
>div {
|
|
|
margin-top: 10px;
|
|
|
height: calc(100% - 10px - 20px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
::v-deep {
|
|
|
.el-descriptions__body {
|
|
|
background: none;
|
|
|
}
|
|
|
.el-tree-node__content {
|
|
|
background: linear-gradient( 90deg, rgba(69, 105, 255, .1) 0%, #FFFFFF 100%);
|
|
|
border-radius: 5px;
|
|
|
height: 35px;
|
|
|
line-height: 35px;
|
|
|
margin-bottom: 10px;
|
|
|
.el-tree-node__expand-icon {
|
|
|
padding: 6px;
|
|
|
}
|
|
|
}
|
|
|
.el-tree-node__children{
|
|
|
margin-left: 10px;
|
|
|
border-left: 1px solid rgba(51, 51, 51, 0.20);
|
|
|
}
|
|
|
.el-tree-node__children .el-tree-node__content {
|
|
|
background: #FFFFFF;
|
|
|
padding-left: 0 !important;
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
.el-tree-node__children .el-tree-node__content .el-tree-node__expand-icon {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
background: #3763FF;
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
</style>
|