代码提交

src/views/court.vue

@@ -55,7 +55,9 @@
         <div id="caseEcharts"></div>
       </div>
       <div class="leftThree">
-          <div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
+        <div class="caseTitle" style="width: 32%; padding-left: 6%">
+          案件类型统计
+        </div>
         <div class="caseType">
           <div id="caseTypeLeft"></div>
           <div id="caseTypeRight"></div>
@@ -63,12 +65,69 @@
       </div>
     </div>
     <div class="right">
-        <div class="title" style="height:5%">案件列表</div>
+      <div class="title" style="height: 5%">案件列表</div>
       <div class="caseList">
         <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 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 class="caseDetail"></div>
       </div>
     </div>
   </div>
@@ -98,38 +157,166 @@ export default {
         },
       ], // 智慧法庭小房子
       houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
-      userValue:'', //人员选择
+      userValue: "", //人员选择
-      userOptions:[
+      userOptions: [
         {
-              label:'人员',
+          label: "人员",
-              value:'1'
+          value: "1",
         },
         {
-              label:'人员2',
+          label: "人员2",
-              value:'2'
+          value: "2",
-          }
+        },
-      ],//人员子项
+      ], //人员子项
-      departmentValue:'', //部门选择
+      departmentValue: "", //部门选择
-      departmentOptions:[
+      departmentOptions: [
         {
-              label:'部门',
+          label: "部门",
-              value:'1'
+          value: "1",
         },
         {
-              label:'部门2',
+          label: "部门2",
-              value:'2'
+          value: "2",
-          }
+        },
       ], //部门子项
-      selectList:[
+      selectList: [
         {
-          name:'',
+          name: "立案日期",
-          list:[
+          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)",
               },
@@ -346,7 +533,7 @@ export default {
       };
       myChart.setOption(option);
     },
-    caseTypeLeft(){
+    caseTypeLeft() {
       var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
       var data = [
         { value: "25", name: "民事案件" },
@@ -354,7 +541,12 @@ export default {
         { 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(){
+    caseTypeRight() {
-         var myChart = this.$echarts.init(document.getElementById("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,7 +836,7 @@ export default {
       width: 100%;
       height: 35%;
       position: relative;
-      .select{
+      .select {
         position: absolute;
         right: 5%;
         width: 45%;
@@ -684,15 +883,15 @@ export default {
     .leftThree {
       width: 100%;
       height: 40%;
-      .caseType{
+      .caseType {
         height: calc(100% - 8%);
         width: 100%;
         display: flex;
-          #caseTypeLeft{
+        #caseTypeLeft {
           width: 50%;
           height: 100%;
         }
-          #caseTypeRight{
+        #caseTypeRight {
           width: 50%;
           height: 100%;
         }
@@ -708,22 +907,90 @@ 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%);
-        border: 1px solid red;
       display: flex;
       flex-wrap: wrap;
-        .selectList{
+      .selectList {
         width: 100%;
         height: 20%;
-          border: 1px solid rgb(0, 255, 170);
         position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        .selectChange {
+          width: 25%;
+          height: 20%;
+          margin-top: 3%;
+          margin-left: 5%;
+          /deep/ .el-select {
+            width: 100%;
+            height: 100%;
+            border-radius: 15px;
           }
-        .caseDetail{
+          /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 {
         width: 100%;
         height: calc(100% - 20%);
-          border: 1px solid blue;
+        padding: 0 5%;
+        box-sizing: border-box;
+        .caseDetailList {
+          width: 100%;
+          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;
+      }
       }
     }
   }