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