chengdandan
/
fayuanjiangbei
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-04-13 09:33:58 +08:00
parent a1eb63388a
commit 33cd5b7793
1 changed files with 352 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

437
src/views/court.vue
View File

@ -22,7 +22,7 @@
<div class="leftTwo"> <div class="leftTwo">
<div class="caseTitle">案件统计</div> <div class="caseTitle">案件统计</div>
<div class="select"> <div class="select">
<el-select <el-select
v-model="userValue" v-model="userValue"
:popper-append-to-body="false" :popper-append-to-body="false"
clearable clearable
@ -55,21 +55,80 @@
<div id="caseEcharts"></div> <div id="caseEcharts"></div>
</div> </div>
<div class="leftThree"> <div class="leftThree">
<div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div> <div class="caseTitle" style="width: 32%; padding-left: 6%">
<div class="caseType"> 案件类型统计
<div id="caseTypeLeft"></div> </div>
<div id="caseTypeRight"></div> <div class="caseType">
</div> <div id="caseTypeLeft"></div>
<div id="caseTypeRight"></div>
</div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="title" style="height:5%">案件列表</div> <div class="title" style="height: 5%">案件列表</div>
<div class="caseList"> <div class="caseList">
<div class="selectList"> <div class="selectList">
<div class="selectChange"></div> <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>
<div class="caseDetail"></div>
</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 }}&nbsp;&nbsp;案件案号:</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>
</div> </div>
</template> </template>
@ -98,38 +157,166 @@ export default {
}, },
], // 智慧法庭小房子 ], // 智慧法庭小房子
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"], houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
userValue:'', //人员选择 userValue: "", //人员选择
userOptions:[ userOptions: [
{
label:'人员',
value:'1'
},
{
label:'人员2',
value:'2'
}
],//人员子项
departmentValue:'', //部门选择
departmentOptions:[
{
label:'部门',
value:'1'
},
{
label:'部门2',
value:'2'
}
], //部门子项
selectList:[
{ {
name:'', label: "人员",
list:[ 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() { mounted() {
@ -152,7 +339,7 @@ export default {
}, },
legend: { legend: {
icon: "rect", icon: "rect",
bottom:0, bottom: 0,
itemWidth: 15, itemWidth: 15,
data: ["收案", "结案", "存案"], data: ["收案", "结案", "存案"],
textStyle: { textStyle: {
@ -226,7 +413,7 @@ export default {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: '', type: "",
dashOffset: 10, dashOffset: 10,
color: "rgb(108,108,109)", color: "rgb(108,108,109)",
}, },
@ -297,7 +484,7 @@ export default {
global: false, // 缺省为 false global: false, // 缺省为 false
}), }),
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
fontSize: "0.4rem", fontSize: "0.4rem",
@ -333,7 +520,7 @@ export default {
global: false, // 缺省为 false global: false, // 缺省为 false
}), }),
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
fontSize: "0.4rem", fontSize: "0.4rem",
@ -346,15 +533,20 @@ export default {
}; };
myChart.setOption(option); myChart.setOption(option);
}, },
caseTypeLeft(){ caseTypeLeft() {
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft")); var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
var data = [ var data = [
{ value: "25", name: "民事案件" }, { value: "25", name: "民事案件" },
{ value: "25", name: "行政案件" }, { value: "25", name: "行政案件" },
{ 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 = { let option = {
color: color, color: color,
title: { title: {
@ -391,7 +583,7 @@ export default {
orient: "horizontal", orient: "horizontal",
icon: "rect", icon: "rect",
bottom: "0", bottom: "0",
x:'center', x: "center",
itemWidth: 30, itemWidth: 30,
itemGap: 20, itemGap: 20,
textStyle: { textStyle: {
@ -452,15 +644,22 @@ export default {
}; };
myChart.setOption(option); myChart.setOption(option);
}, },
caseTypeRight(){ caseTypeRight() {
var myChart = this.$echarts.init(document.getElementById("caseTypeRight")); var myChart = this.$echarts.init(
var data = [ document.getElementById("caseTypeRight")
);
var data = [
{ value: "25", name: "民事案件" }, { value: "25", name: "民事案件" },
{ value: "25", name: "行政案件" }, { value: "25", name: "行政案件" },
{ 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 = { let option = {
color: color, color: color,
title: { title: {
@ -497,7 +696,7 @@ export default {
orient: "horizontal", orient: "horizontal",
icon: "rect", icon: "rect",
bottom: "0", bottom: "0",
x:'center', x: "center",
itemWidth: 30, itemWidth: 30,
itemGap: 20, itemGap: 20,
textStyle: { textStyle: {
@ -637,14 +836,14 @@ export default {
width: 100%; width: 100%;
height: 35%; height: 35%;
position: relative; position: relative;
.select{ .select {
position: absolute; position: absolute;
right: 5%; right: 5%;
width: 45%; width: 45%;
height: 10%; height: 10%;
display: flex; display: flex;
z-index: 999; z-index: 999;
/deep/ .el-select { /deep/ .el-select {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 15px; border-radius: 15px;
@ -684,18 +883,18 @@ export default {
.leftThree { .leftThree {
width: 100%; width: 100%;
height: 40%; height: 40%;
.caseType{ .caseType {
height: calc(100% - 8%); height: calc(100% - 8%);
width: 100%; width: 100%;
display: flex; display: flex;
#caseTypeLeft{ #caseTypeLeft {
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
#caseTypeRight{ #caseTypeRight {
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
} }
} }
} }
@ -708,23 +907,91 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat; background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.caseList{ .caseList {
width: 100%;
height: calc(100% - 5%);
display: flex;
flex-wrap: wrap;
.selectList {
width: 100%; width: 100%;
height: calc(100% - 5%); height: 20%;
border: 1px solid red; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.selectList{ .selectChange {
width: 100%; width: 25%;
height: 20%; height: 20%;
border: 1px solid rgb(0, 255, 170); margin-top: 3%;
position: relative; 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%; width: 100%;
height: calc(100% - 20%); height: 100%;
border: 1px solid blue; 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;
}
}
} }
} }
} }