Skip to content

F
founder_vue
Commit e8323849 by liupeng
Options

修改了页面样式

parent 76f5bd02
Showing with 393 additions and 212 deletions
src/views/cbyp/qgxxxx.vue
<template>
<div class="qgxxxx">
<div class="title">
<div class="title">
<img src="../../assets/img/login/jinhui.png" alt="" />
<div class="name">全国案件</div>
</div>
......@@ -10,7 +10,8 @@
v-for="item in bottonData"
:key="item.xzqhdmSj"
@click="searchCaseByProvince(item)"
type="primary" plain
type="primary"
plain
>{{ item.xzqhdmSj + " " + item.count }}</el-button
>
</div>
......@@ -26,7 +27,7 @@
width="100%"
size="small"
border
stripe
stripe
>
<el-table-column
align="center"
......@@ -101,9 +102,10 @@ export default {
xszajbh: "",
cbxgfwbzh: "",
tableLoading: false,
bottonData: [],
bottonData: [],
tableData: [],
currentPage: 1,
tableArr: [],
currentPage: 1,
propdefaultFormThead: [
{
label: "案发地点",
......@@ -144,7 +146,7 @@ export default {
this.xszajbh = this.$route.query.xszajbh;
this.cbxgfwbzh = this.$route.query.cbxgfwbzh;
this.xlajbh = this.$route.query.xlajbh;
this.getShuju();
},
methods: {
......@@ -152,49 +154,45 @@ export default {
var params = {
xszajbh: this.xszajbh,
cbxgfwbzh: this.cbxgfwbzh,
}
};
getQgAsjxxByXszajbh(params).then((res) => {
this.tableData = res.data.rows;
this.tableArr = res.data.rows;
this.bottonData = res.data.qucsj;
console.log(res);
});
},
searchCaseByProvince(item) {
var params = {
xszajbh: item.xszajbh,
cbxgfwbzh: item.cbxgfwbzh,
}
getQgAsjxxByXszajbh(params).then((res) => {
console.log(res);
this.tableData = res.data.qucsj;
});
let str = item.xzqhdmSj;
let arr = this.tableArr.filter((i) => i.xzqhdmSj.indexOf(str) >= 0);
this.tableData = arr;
},
handleSizeChange() {},
handleCurrentChange() {},
handleSizeChange() {},
handleCurrentChange() {},
},
};
</script>
<style lang="scss" scoped>
.qgxxxx {
.title {
height: 52px;
background: #1f212c;
padding-left: 32px;
display: flex;
align-items: center;
}
img {
width: 36px;
height: 36px;
}
.name {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 24px;
color: #ffffff;
}
.title {
height: 52px;
background: #1f212c;
padding-left: 32px;
display: flex;
align-items: center;
}
img {
width: 36px;
height: 36px;
}
.name {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 24px;
color: #ffffff;
}
}
.qgxxxx {
margin: 0;
......@@ -206,7 +204,7 @@ export default {
// width: 90%;
height: 20%;
margin: 8px 20px;
padding: 20px;
padding: 20px;
border-radius: 10px;
background-color: #fff;
border: 1px solid #eaeaea;
......
src/views/cbyp/tobjcba.vue
......@@ -8,9 +8,11 @@
<el-col :span="16" :offset="4" class="firstSquare">
<div class="topSquare">
<div class="titleBox">
<span>有关于内蒙古自治区呼和浩特市回民区、内蒙古自治区二连浩特等地区系列诈骗案的串并案件</span>
<span
>有关于内蒙古自治区呼和浩特市回民区、内蒙古自治区二连浩特等地区系列诈骗案的串并案件</span
>
</div>
<div class="contentBox">
<div class="contentBox">
<el-form ref="form" :model="messageForm" label-width="80px">
<el-col :span="8" :offset="0">
<el-form-item label="串并编号:" prop="cbbh">
......@@ -42,7 +44,7 @@
{{ messageForm.cblx }}
</el-form-item>
</el-col>
<el-col :span="8" :offset="0">
<el-col :span="24" :offset="0">
<el-form-item label="串并描述:" prop="cbms">
{{ messageForm.cbxxms }}
</el-form-item>
......@@ -56,31 +58,103 @@
<div class="titleBox">
<span>案件信息</span>
</div>
<span class="zhankai" @click="zhan('boo1', boo1, $event)">
<i class="el-icon-arrow-down" v-if="!boo1"></i>
<i class="el-icon-arrow-up" v-else></i>
{{ boo1 == true ? "收缩" : "展开" }}</span
>
<div class="contentBox">
<el-table
:data="messageTableData"
border
stripe
stripe
height="400"
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="asjbh" label="案件编号" width="230">
<el-table-column
prop="asjbh"
label="案件编号"
width="230"
align="center"
>
</el-table-column>
<el-table-column prop="ajmc" label="案件名称" width="100">
<el-table-column
prop="ajmc"
label="案件名称"
width="100"
align="center"
>
</el-table-column>
<el-table-column prop="ajlbdm" label="案件类别" width="80">
<el-table-column
prop="ajlbdm"
label="案件类别"
width="80"
align="center"
>
</el-table-column>
<el-table-column prop="zcjddm" label="案件状态" width="100">
<el-table-column
prop="zcjddm"
label="案件状态"
width="100"
align="center"
>
</el-table-column>
<el-table-column prop="asjfssjKssj" label="案发时间" width="100">
<el-table-column
prop="asjfssjKssj"
label="案发时间"
width="100"
align="center"
>
</el-table-column>
<el-table-column
prop="asjfsddXzqhdm"
label="案发地点"
width="90"
align="center"
>
</el-table-column>
<el-table-column prop="jyaq" label="简要案情" width="560">
<el-table-column
prop="jyaq"
label="简要案情"
width="360"
align="center"
>
<template slot-scope="scope">
<div class="ajxq_s">
<span class="none" v-html="scope.row['jyaq']"></span
><a
href="javascript:void(0);"
onclick='javascript:this.parentNode.style.display="none";this.parentNode.nextSibling.style.display="block"'
style="
display: inline-block;
width: 100%;
text-align: right;
color: #3692c6;
font-weight: 600;
"
id="open"
v-show="
scope.row['jyaq'] != '' && scope.row['jyaq'] != null
"
>展开</a
>
</div>
<div class="ajxq_n" style="display: none">
<span
style="display: block"
v-html="scope.row['jyaq']"
></span
><a
href="javascript:void(0);"
onclick='javascript:this.parentNode.style.display="none";this.parentNode.previousSibling.style.display="block"'
style="float: right; color: #3692c6; font-weight: 600"
id="stop"
v-show="
scope.row['jyaq'] != '' && scope.row['jyaq'] != null
"
>收起</a
>
</div>
</template>
</el-table-column>
</el-table>
</div>
......@@ -101,35 +175,67 @@
<div class="titleBox">
<span>嫌疑人员</span>
</div>
<span class="zhankai" @click="zhan('boo2', boo2, $event)">
<i class="el-icon-arrow-down" v-if="!boo2"></i>
<i class="el-icon-arrow-up" v-else></i>
{{ boo2 == true ? "收缩" : "展开" }}</span
>
<div class="contentBox">
<el-table
:data="criminalTableData"
border
stripe
stripe
height="400"
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="zhfzxyrXm" label="姓名" width="180">
<el-table-column
prop="zhfzxyrXm"
label="姓名"
width="180"
align="center"
>
</el-table-column>
<el-table-column prop="zhfzxyrXbdm" label="性别" width="180">
<el-table-column
prop="zhfzxyrXbdm"
label="性别"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="zhfzxyrCyzjZjhm"
label="身份证号"
width="180"
align="center"
>
</el-table-column>
<el-table-column prop="hjdzDzmc" label="户籍区域" width="180">
<el-table-column
prop="hjdzDzmc"
label="户籍区域"
width="180"
align="center"
>
</el-table-column>
<el-table-column prop="asjbh" label="案事件编号" width="210">
<el-table-column
prop="asjbh"
label="案事件编号"
width="210"
align="center"
>
</el-table-column>
<el-table-column
prop="zhfzxyrFzxyrdaztdm"
label="抓获状态"
width="150"
align="center"
>
</el-table-column>
<el-table-column prop="zhrq_str" label="抓获日期" width="180">
<el-table-column
prop="zhrq_str"
label="抓获日期"
width="180"
align="center"
>
</el-table-column>
</el-table>
</div>
......@@ -143,54 +249,98 @@
>
</el-pagination>
</div>
</div>
</el-col>
<el-col :span="16" :offset="4" class="fourthSquare">
<div class="titleBox">
<span>受害人员</span>
</div>
<div class="contentBox">
<el-table
:data="victimTableData"
border
stripe
height="400"
style="width: 100%; margin-top: 20px"
<el-col :span="16" :offset="4" class="fourthSquare">
<div class="titleBox">
<span>受害人员</span>
</div>
<span class="zhankai" @click="zhan('boo3', boo3, $event)">
<i class="el-icon-arrow-down" v-if="!boo3"></i>
<i class="el-icon-arrow-up" v-else></i>
{{ boo3 == true ? "收缩" : "展开" }}</span
>
<div class="contentBox">
<el-table
:data="victimTableData"
stripe
height="400"
style="width: 100%; margin-top: 20px"
>
<el-table-column
prop="bhrXm"
label="姓名"
width="180"
align="center"
>
<el-table-column prop="bhrXm" label="姓名" width="180">
</el-table-column>
<el-table-column prop="bhrXbdm" label="性别" width="180">
</el-table-column>
<el-table-column prop="bhrCyzjZjhm" label="身份证号" width="180">
</el-table-column>
<el-table-column prop="bhrHjdzDzmc" label="户籍区域" width="180">
</el-table-column>
<el-table-column prop="asjbh" label="案事件编号" width="180">
</el-table-column>
<el-table-column prop="rsshcddm" label="受害程度" width="180">
</el-table-column>
<el-table-column prop="bhrLxdh" label="联系电话" width="180">
</el-table-column>
</el-table>
</div>
<div class="paginationBox">
<el-pagination
@current-change="victimTableDataChange"
:current-page.sync="page03"
:page-size="4"
layout="total, prev, pager, next, jumper"
:total="totalrows03"
</el-table-column>
<el-table-column
prop="bhrXbdm"
label="性别"
width="180"
align="center"
>
</el-pagination>
</div>
</el-col>
</el-table-column>
<el-table-column
prop="bhrCyzjZjhm"
label="身份证号"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="bhrHjdzDzmc"
label="户籍区域"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="asjbh"
label="案事件编号"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="rsshcddm"
label="受害程度"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="bhrLxdh"
label="联系电话"
width="180"
align="center"
>
</el-table-column>
</el-table>
</div>
<div class="paginationBox">
<el-pagination
@current-change="victimTableDataChange"
:current-page.sync="page03"
:page-size="4"
layout="total, prev, pager, next, jumper"
:total="totalrows03"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { queryCbzAsjGlxx, getCbzXyry, getCbzBhry, toBjcba } from "@/api/cbyp.js";
import {
queryCbzAsjGlxx,
getCbzXyry,
getCbzBhry,
toBjcba,
} from "@/api/cbyp.js";
export default {
data() {
return {
......@@ -214,9 +364,12 @@ export default {
page02: 1,
page03: 1,
rows: 4,
totalrows01: 0,
totalrows02: 0,
totalrows03: 0,
totalrows01: 0,
totalrows02: 0,
totalrows03: 0,
boo1: true,
boo2: true,
boo3: true,
};
},
created() {
......@@ -224,72 +377,104 @@ export default {
this.getMessage();
this.getCriminalMessage();
this.getVictimMessage();
this.getDetailOfCase();
this.getDetailOfCase();
},
methods: {
getMessage() {
var params = {
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
}
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
};
queryCbzAsjGlxx(params).then((res) => {
this.messageTableData = res.data.result;
this.totalrows01 = res.data.recordsTotal
this.totalrows01 = res.data.recordsTotal;
});
},
zhan(type, value, event) {
this[type] = !this[type];
if (value) {
event.target.nextSibling.style.display = "none";
event.target.nextSibling.nextSibling.style.display = "none";
} else {
event.target.nextSibling.style.display = "block";
event.target.nextSibling.nextSibling.style.display = "block";
}
},
getCriminalMessage() {
var params = {
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
}
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
};
getCbzXyry(params).then((res) => {
this.criminalTableData = res.data.result;
this.totalrows02 = res.data.recordsTotal
this.totalrows02 = res.data.recordsTotal;
});
},
getVictimMessage() {
var params = {
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
}
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
};
getCbzBhry(params).then((res) => {
this.victimTableData = res.data.result;
this.totalrows03 = res.data.recordsTotal
this.totalrows03 = res.data.recordsTotal;
});
},
getDetailOfCase() {
var params = {
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
}
toBjcba(params).then((res) => {
getDetailOfCase() {
var params = {
xlajbh: this.xlajbh,
page: this.page01,
rows: this.rows,
};
toBjcba(params).then((res) => {
this.messageForm = res.data.rows;
});
},
},
messageTableDataChange(val) {
this.page01 = val
this.getMessage()
},
this.page01 = val;
this.getMessage();
},
criminalTableDataChange(val) {
this.page02 = val
this.getCriminalMessage()
},
this.page02 = val;
this.getCriminalMessage();
},
victimTableDataChange(val) {
this.page03 = val
this.getVictimMessage()
},
this.page03 = val;
this.getVictimMessage();
},
},
};
</script>
<style>
.el-form-item {
margin-bottom: 0px;
}
.el-form-item__label {
line-height: 30px !important;
}
.el-form-item__content {
line-height: 30px !important;
}
</style>
<style lang="scss" scoped>
.el-form-item {
margin-bottom: 0px;
}
.el-form-item__label {
line-height: 30px !important;
}
.el-form-item__content {
line-height: 30px !important;
}
.tobjcba {
margin: 0;
padding: 0;
.title {
height: 52px;
background: #1f212c;
......@@ -308,109 +493,103 @@ export default {
line-height: 24px;
color: #ffffff;
}
}
.firstSquare {
background-color: #fff;
.topSquare {
margin-top: 5px;
.titleBox {
border-bottom: 1px solid black;
margin: 5px 0 0 0;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #69ABE9;
color: #fff;
margin-left: 10px;
font-size: 16px;
span {
font-size: 16px;
}
}
.contentBox {
.topSquare {
margin-top: 5px;
.contentBox {
}
}
}
.titleBox {
border-bottom: 1px solid black;
margin: 5px 0 5px 0;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #69abe9;
color: #fff;
margin-left: 10px;
font-size: 16px;
span {
font-size: 16px;
}
}
.secondSquare {
background-color: #fff;
margin-top: 5px;
margin-top: 5px;
.midSquare {
background-color: #fff;
.midSquare {
background-color: #fff;
.titleBox {
border-bottom: 1px solid black;
margin: 5px 0 0 0;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #69ABE9;
color: #fff;
margin-left: 10px;
font-size: 16px;
span {
font-size: 16px;
}
}
.contentBox {
}
.paginationBox {
// .titleBox {
// border-bottom: 1px solid black;
// margin: 5px 0 0 0;
// display: inline-block;
// height: 40px;
// line-height: 40px;
// padding: 0 24px;
// border-radius: 0px 0px 22px 4px;
// background: #69abe9;
// color: #fff;
// margin-left: 10px;
// font-size: 16px;
// span {
// font-size: 16px;
// }
// }
.contentBox {
}
.paginationBox {
}
}
}
}
.thirdSquare {
background-color: #fff;
margin-top: 5px;
margin-top: 5px;
.bottomSquare {
.titleBox {
border-bottom: 1px solid black;
margin: 5px 0 0 0;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #69ABE9;
color: #fff;
margin-left: 10px;
font-size: 16px;
span {
font-size: 16px;
}
}
.contentBox {
.bottomSquare {
// .titleBox {
// font-size: 16px;
// font-family: Microsoft YaHei;
// font-weight: bold;
// line-height: 21px;
// color: #333333;
// span {
// font-size: 16px;
// }
// }
.contentBox {
}
.paginationBox {
}
}
.paginationBox {
}
}
}
.fourthSquare {
background-color: #fff;
margin-top: 5px;
margin-top: 5px;
.titleBox {
border-bottom: 1px solid black;
margin: 5px 0 0 0;
display: inline-block;
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
margin: 17px 0 0 10px;
display: inline-block;
height: 21px;
line-height: 21px;
padding: 0 24px;
border-radius: 0px 0px 22px 4px;
background: #69ABE9;
background: #69abe9;
color: #fff;
margin-left: 10px;
font-size: 16px;
span {
font-size: 16px;
}
font-family: Microsoft YaHei;
font-weight: bold;
span {
font-size: 16px;
}
}
.contentBox {
}
......@@ -418,7 +597,11 @@ export default {
}
}
.zhankai {
float: right !important;
margin-top: 5px;
font-size: 15px;
margin-right: 10px;
cursor: pointer;
}
</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