代码提交
This commit is contained in:
parent
a1eb63388a
commit
33cd5b7793
|
|
@ -22,7 +22,7 @@
|
|||
<div class="leftTwo">
|
||||
<div class="caseTitle">案件统计</div>
|
||||
<div class="select">
|
||||
<el-select
|
||||
<el-select
|
||||
v-model="userValue"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
|
|
@ -55,21 +55,80 @@
|
|||
<div id="caseEcharts"></div>
|
||||
</div>
|
||||
<div class="leftThree">
|
||||
<div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
|
||||
<div class="caseType">
|
||||
<div id="caseTypeLeft"></div>
|
||||
<div id="caseTypeRight"></div>
|
||||
</div>
|
||||
<div class="caseTitle" style="width: 32%; padding-left: 6%">
|
||||
案件类型统计
|
||||
</div>
|
||||
<div class="caseType">
|
||||
<div id="caseTypeLeft"></div>
|
||||
<div id="caseTypeRight"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title" style="height:5%">案件列表</div>
|
||||
<div class="caseList">
|
||||
<div class="selectList">
|
||||
<div class="selectChange"></div>
|
||||
<div class="title" style="height: 5%">案件列表</div>
|
||||
<div class="caseList">
|
||||
<div class="selectList">
|
||||
<div
|
||||
class="selectChange"
|
||||
v-for="(item, index) in selectList"
|
||||
:key="index"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.name"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
:placeholder="item.name"
|
||||
style="margin-left: 5%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in item.list"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="caseDetail"></div>
|
||||
</div>
|
||||
<div class="caseDetail">
|
||||
<div class="caseDetailList">
|
||||
<div
|
||||
class="detail"
|
||||
v-for="(item, index) in caseDetailList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="rowDetail">
|
||||
<span>{{ item.id }} 案件案号:</span>
|
||||
<span>{{ item.caseCode }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>案件名称:</span>
|
||||
<span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.caseName }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>开庭时间:</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>开庭法庭:</span>
|
||||
<span>{{ item.court }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>案件案由:</span>
|
||||
<span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.brief }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>当事人:</span>
|
||||
<span>{{ item.user }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>书记员:</span>
|
||||
<span>{{ item.clerk }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -98,38 +157,166 @@ export default {
|
|||
},
|
||||
], // 智慧法庭小房子
|
||||
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
|
||||
userValue:'', //人员选择
|
||||
userOptions:[
|
||||
{
|
||||
label:'人员',
|
||||
value:'1'
|
||||
},
|
||||
{
|
||||
label:'人员2',
|
||||
value:'2'
|
||||
}
|
||||
],//人员子项
|
||||
departmentValue:'', //部门选择
|
||||
departmentOptions:[
|
||||
{
|
||||
label:'部门',
|
||||
value:'1'
|
||||
},
|
||||
{
|
||||
label:'部门2',
|
||||
value:'2'
|
||||
}
|
||||
], //部门子项
|
||||
selectList:[
|
||||
userValue: "", //人员选择
|
||||
userOptions: [
|
||||
{
|
||||
name:'',
|
||||
list:[
|
||||
label: "人员",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "人员2",
|
||||
value: "2",
|
||||
},
|
||||
], //人员子项
|
||||
departmentValue: "", //部门选择
|
||||
departmentOptions: [
|
||||
{
|
||||
label: "部门",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "部门2",
|
||||
value: "2",
|
||||
},
|
||||
], //部门子项
|
||||
selectList: [
|
||||
{
|
||||
name: "立案日期",
|
||||
list: [
|
||||
{
|
||||
label:''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
label: "立案日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "立案日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "法官",
|
||||
list: [
|
||||
{
|
||||
label: "法官",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "法官2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "案件类型",
|
||||
list: [
|
||||
{
|
||||
label: "案件类型",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "案件类型2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "收案日期",
|
||||
list: [
|
||||
{
|
||||
label: "收案日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "收案日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "经办法院代码",
|
||||
list: [
|
||||
{
|
||||
label: "经办法院代码",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "经办法院代码2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "结案日期",
|
||||
list: [
|
||||
{
|
||||
label: "结案日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "结案日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "结案方式",
|
||||
list: [
|
||||
{
|
||||
label: "结案方式",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "结案方式2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "案件状态代码",
|
||||
list: [
|
||||
{
|
||||
label: "案件状态代码",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "案件状态代码2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
], //案件列表选择器
|
||||
caseDetailList: [
|
||||
{
|
||||
id: "1",
|
||||
caseCode: "(2022)苏0192民初14272号",
|
||||
caseName: "崔怀宁与高保加买卖合同纠纷",
|
||||
time: "2023-01-16 09:00--09:30",
|
||||
court: "新楼第十五法庭",
|
||||
brief: "买卖合同纠纷",
|
||||
user: "原告：崔怀宁;被告：高保加",
|
||||
clerk: "甫明",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
caseCode: "(2022)苏0192民初14272号",
|
||||
caseName: "崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;",
|
||||
time: "2023-01-16 09:00--09:30",
|
||||
court: "新楼第十五法庭",
|
||||
brief: "买卖合同纠纷",
|
||||
user: "原告：崔怀宁;被告：高保加",
|
||||
clerk: "甫明",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
caseCode: "(2022)苏0192民初14272号",
|
||||
caseName: "崔怀宁与高保加买卖合同纠纷",
|
||||
time: "2023-01-16 09:00--09:30",
|
||||
court: "新楼第十五法庭",
|
||||
brief: "买卖合同纠纷",
|
||||
user: "原告：崔怀宁;被告：高保加",
|
||||
clerk: "甫明",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -152,7 +339,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
bottom:0,
|
||||
bottom: 0,
|
||||
itemWidth: 15,
|
||||
data: ["收案", "结案", "存案"],
|
||||
textStyle: {
|
||||
|
|
@ -226,7 +413,7 @@ export default {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: '',
|
||||
type: "",
|
||||
dashOffset: 10,
|
||||
color: "rgb(108,108,109)",
|
||||
},
|
||||
|
|
@ -297,7 +484,7 @@ export default {
|
|||
global: false, // 缺省为 false
|
||||
}),
|
||||
},
|
||||
label: {
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "0.4rem",
|
||||
|
|
@ -333,7 +520,7 @@ export default {
|
|||
global: false, // 缺省为 false
|
||||
}),
|
||||
},
|
||||
label: {
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "0.4rem",
|
||||
|
|
@ -346,15 +533,20 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
caseTypeLeft(){
|
||||
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
|
||||
var data = [
|
||||
caseTypeLeft() {
|
||||
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
|
||||
var data = [
|
||||
{ value: "25", name: "民事案件" },
|
||||
{ value: "25", name: "行政案件" },
|
||||
{ value: "25", name: "刑事案件" },
|
||||
{ value: "25", name: "其他案件" },
|
||||
];
|
||||
var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
|
||||
var color = [
|
||||
"rgb(185,8,25)",
|
||||
"rgb(160,87,6)",
|
||||
"rgb(16,134,165)",
|
||||
"rgb(178,178,178)",
|
||||
];
|
||||
let option = {
|
||||
color: color,
|
||||
title: {
|
||||
|
|
@ -391,7 +583,7 @@ export default {
|
|||
orient: "horizontal",
|
||||
icon: "rect",
|
||||
bottom: "0",
|
||||
x:'center',
|
||||
x: "center",
|
||||
itemWidth: 30,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
|
|
@ -452,15 +644,22 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
caseTypeRight(){
|
||||
var myChart = this.$echarts.init(document.getElementById("caseTypeRight"));
|
||||
var data = [
|
||||
caseTypeRight() {
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("caseTypeRight")
|
||||
);
|
||||
var data = [
|
||||
{ value: "25", name: "民事案件" },
|
||||
{ value: "25", name: "行政案件" },
|
||||
{ value: "25", name: "刑事案件" },
|
||||
{ value: "25", name: "其他案件" },
|
||||
];
|
||||
var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
|
||||
var color = [
|
||||
"rgb(185,8,25)",
|
||||
"rgb(160,87,6)",
|
||||
"rgb(16,134,165)",
|
||||
"rgb(178,178,178)",
|
||||
];
|
||||
let option = {
|
||||
color: color,
|
||||
title: {
|
||||
|
|
@ -497,7 +696,7 @@ export default {
|
|||
orient: "horizontal",
|
||||
icon: "rect",
|
||||
bottom: "0",
|
||||
x:'center',
|
||||
x: "center",
|
||||
itemWidth: 30,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
|
|
@ -637,14 +836,14 @@ export default {
|
|||
width: 100%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
.select{
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 45%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
/deep/ .el-select {
|
||||
.select {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 45%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
|
|
@ -684,18 +883,18 @@ export default {
|
|||
.leftThree {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
.caseType{
|
||||
height: calc(100% - 8%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
#caseTypeLeft{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
#caseTypeRight{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.caseType {
|
||||
height: calc(100% - 8%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
#caseTypeLeft {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
#caseTypeRight {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -708,23 +907,91 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.caseList{
|
||||
.caseList {
|
||||
width: 100%;
|
||||
height: calc(100% - 5%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.selectList {
|
||||
width: 100%;
|
||||
height: calc(100% - 5%);
|
||||
border: 1px solid red;
|
||||
height: 20%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.selectList{
|
||||
width: 100%;
|
||||
.selectChange {
|
||||
width: 25%;
|
||||
height: 20%;
|
||||
border: 1px solid rgb(0, 255, 170);
|
||||
position: relative;
|
||||
margin-top: 3%;
|
||||
margin-left: 5%;
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
/deep/ .el-input__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-select-dropdown {
|
||||
background: transparent;
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 5px;
|
||||
// left: -3px !important;
|
||||
}
|
||||
/deep/ .el-select-dropdown__item {
|
||||
color: turquoise;
|
||||
}
|
||||
/deep/ .el-select .el-input .el-select__caret {
|
||||
color: rgb(1, 176, 202);
|
||||
font-size: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
/deep/ .el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.caseDetail{
|
||||
}
|
||||
.caseDetail {
|
||||
width: 100%;
|
||||
height: calc(100% - 20%);
|
||||
padding: 0 5%;
|
||||
box-sizing: border-box;
|
||||
.caseDetailList {
|
||||
width: 100%;
|
||||
height: calc(100% - 20%);
|
||||
border: 1px solid blue;
|
||||
height: 100%;
|
||||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border: 1px dashed #fff;
|
||||
color: #fff;
|
||||
font-size: 0.65rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
.rowDetail {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 3%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue