Merge branch 'duhanyu' of http://39.101.188.84:8000/suzhou-jichuang-lanhai/LiaoningChanpinHuaxiang
commit
93f3a9340c
@ -0,0 +1,50 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 根据批准文号或备案编号查询召回信息
|
||||
export function getRecall(query) {
|
||||
return request({
|
||||
url: '/ggfw-api/pharmaceuticals/largeScreen/findRecallByName',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//根据批准文号或备案编号查询自然年一年根据报告类型化妆品报告数量统计
|
||||
export function getCosmeticsBL(query) {
|
||||
return request({
|
||||
url: '/ggfw-api/pharmaceuticals/largeScreen/getHZPReportCountByType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//根据批准文号或备案编号查询自然年一年根据报告类型医疗器械数量统计
|
||||
export function getMedicalDevicesBL(query) {
|
||||
return request({
|
||||
url: '/ggfw-api/pharmaceuticals/largeScreen/getYLQXReportCountByType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//根据批准文号或备案编号查询自然年一年根据报告类型药品报告数量统计
|
||||
export function getDrugBL(query) {
|
||||
return request({
|
||||
url: '/ggfw-api/pharmaceuticals/largeScreen/getYPReportCountByType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//根据批准文号或备案编号查询药品变更信息
|
||||
export function getDrugChange(query) {
|
||||
return request({
|
||||
url: '/ggfw-api/pharmaceuticals/largeScreen/pageAlterByReq',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//根据批准文号或备案编号查询产品档案抽检信息
|
||||
export function getCPCJ(query) {
|
||||
return request({
|
||||
url: '/ggfw-api/pharmaceuticals/largeScreen/productFileInspect',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -1,100 +1,138 @@
|
||||
|
||||
<template>
|
||||
<div class="Basic-box">
|
||||
<el-table :data="tableData" stripe style="width: 100%;background-color: transparent;">
|
||||
<el-table-column prop="data" label="变更项目" width="100" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="变更事项" width="180" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="变更时间" show-overflow-tooltip>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
v-loading="load1"
|
||||
element-loading-text="加载中..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
stripe
|
||||
style="width: 100%; background-color: transparent"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableHeader1"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:width="item.width || ''"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Pagination></Pagination>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:page="query.current"
|
||||
:limit="query.size"
|
||||
@pagination="changeList"
|
||||
></Pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from "@/views/components/Pagination"
|
||||
import { getDrugChange } from "@/api/largeScreen";
|
||||
import Pagination from "@/views/components/Pagination";
|
||||
export default {
|
||||
name: 'Basicbox',
|
||||
components: {Pagination},
|
||||
name: "Basicbox",
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
data: "审批类变更概述",
|
||||
name: "原料对乙酰胺基供应商的公司名称由河北嘉恒（集团）药业有限公司变更为河北一恒药业股份有公司，生产地址未发生变更。",
|
||||
address: "2022-06-08"
|
||||
}, {
|
||||
data: "审批类变更概述",
|
||||
name: "-",
|
||||
address: "2022-06-08"
|
||||
}, {
|
||||
data: "审批类变更概述",
|
||||
name: "-",
|
||||
address: "2022-06-08"
|
||||
},
|
||||
{
|
||||
data: "审批类变更概述",
|
||||
name: "-",
|
||||
address: "2022-06-08"
|
||||
},
|
||||
{
|
||||
data: "审批类变更概述",
|
||||
name: "-",
|
||||
address: "2022-06-08"
|
||||
tableHeader1: [
|
||||
{
|
||||
prop: "bgxm",
|
||||
label: "变更项目",
|
||||
// width: "100",
|
||||
},
|
||||
{
|
||||
prop: "bgsx",
|
||||
label: "变更事项",
|
||||
},
|
||||
{
|
||||
prop: "bgsj",
|
||||
label: "变更时间",
|
||||
// width: "100",
|
||||
},
|
||||
],
|
||||
// tableHeader2: [
|
||||
// {
|
||||
// prop: "bgxm",
|
||||
// label: "变更内容",
|
||||
// },
|
||||
// {
|
||||
// prop: "bgsj",
|
||||
// label: "变更时间",
|
||||
// },
|
||||
// ],
|
||||
tableData: [],
|
||||
query: {
|
||||
current: 1,
|
||||
size: 5,
|
||||
name: "",
|
||||
},
|
||||
]
|
||||
}
|
||||
total: 0,
|
||||
load1: false,
|
||||
};
|
||||
},
|
||||
created() { },
|
||||
mounted() { },
|
||||
methods: {},
|
||||
computed: {}
|
||||
}
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.load1 = true;
|
||||
getDrugChange(this.query).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
this.load1 = false;
|
||||
});
|
||||
},
|
||||
changeList(e) {
|
||||
this.query.current = e.page;
|
||||
this.query.size = e.limit;
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.Basic-box {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
padding: 0 11px 11px 11px;
|
||||
// padding: 0 11px 11px 11px;
|
||||
overflow-y: auto;
|
||||
background-color: transparent ;
|
||||
background-color: transparent;
|
||||
}
|
||||
::v-deep .el-table, .el-table__expanded-cell {
|
||||
background-color: transparent;
|
||||
|
||||
::v-deep .el-table,
|
||||
.el-table__expanded-cell {
|
||||
background-color: transparent;
|
||||
}
|
||||
::v-deep .el-table th {
|
||||
background-color: rgba(0,100,255,0.2) !important;
|
||||
color: #2492FF ;
|
||||
border: none;
|
||||
|
||||
background-color: rgba(0, 100, 255, 0.2) !important;
|
||||
color: #2492ff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-table td {
|
||||
border: none;
|
||||
|
||||
}
|
||||
::v-deep .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent !important;
|
||||
color: #B7D4F5 ;
|
||||
|
||||
background-color: transparent !important;
|
||||
color: #b7d4f5;
|
||||
}
|
||||
::v-deep .el-table tbody tr:hover td {
|
||||
background-color: transparent !important
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
|
||||
::v-deep .el-table th.el-table__cell.is-leaf,
|
||||
.el-table td.el-table__cell {
|
||||
border: none;
|
||||
}
|
||||
// 显示的颜色
|
||||
::v-deep .el-table .el-table__body tr.el-table__row--striped td {
|
||||
background-color: rgba(0,50,150,0.1) !important;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table .el-table__body tr.el-table__row--striped td {
|
||||
background-color: rgba(0, 50, 150, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,276 +1,279 @@
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="top-box">
|
||||
<div class="topbox-item">
|
||||
<div class="topBOxitem">
|
||||
<div class="topBOxitem-top"> <span>12222222222</span> </div>
|
||||
<div class="topBOxitem-bottom">召回次数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbox-item">
|
||||
<div class="topBOxitem">
|
||||
<div class="topBOxitem-top"> <span>12</span></div>
|
||||
<div class="topBOxitem-bottom">产品召回批数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbox-item">
|
||||
<div class="topBOxitem">
|
||||
<div class="topBOxitem-top"> <span>100%</span> </div>
|
||||
<div class="topBOxitem-bottom">产品召回次数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="top-box">
|
||||
<div class="topbox-item">
|
||||
<div class="topBOxitem">
|
||||
<div class="topBOxitem-top">
|
||||
<span>{{ zhcs || 0 }}</span>
|
||||
</div>
|
||||
<div class="topBOxitem-bottom">召回次数</div>
|
||||
</div>
|
||||
<div class="bottom-content">
|
||||
<div class="right-echart" ref="right-echart"></div>
|
||||
</div>
|
||||
<div class="topbox-item">
|
||||
<div class="topBOxitem">
|
||||
<div class="topBOxitem-top">
|
||||
<span>{{ cpzhbs || 0 }}</span>
|
||||
</div>
|
||||
<div class="topBOxitem-bottom">产品召回批数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbox-item">
|
||||
<div class="topBOxitem">
|
||||
<div class="topBOxitem-top">
|
||||
<span>{{ cpzhcs || 0 }}</span>
|
||||
</div>
|
||||
<div class="topBOxitem-bottom">产品召回次数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-content">
|
||||
<div class="right-echart" ref="right-echart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { getRecall } from "@/api/largeScreen";
|
||||
export default {
|
||||
name: 'informationBox',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
topList: [
|
||||
{
|
||||
order: "12",
|
||||
jcaddress: "国家检测次数"
|
||||
},
|
||||
{
|
||||
order: "31",
|
||||
jcaddress: "省级检测次数"
|
||||
},
|
||||
{
|
||||
order: "14",
|
||||
jcaddress: "抽检合格率"
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
|
||||
option2: {},
|
||||
// echarts
|
||||
myChart2: {},
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
mounted() {
|
||||
name: "informationBox",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
option2: {},
|
||||
myChart2: {},
|
||||
zhcs: 0,
|
||||
cpzhbs: 0,
|
||||
cpzhcs: 0,
|
||||
pieData: [],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
getRecall({ name: "国药准字B20020034" }).then((res) => {
|
||||
this.zhcs = res.data.cpzhcs;
|
||||
this.cpzhbs = res.data.zhcppc;
|
||||
this.cpzhcs = res.data.cpzhl;
|
||||
let arr = res.data.list;
|
||||
arr.sort(function (a, b) {
|
||||
return a.recallLevel - b.recallLevel;
|
||||
});
|
||||
arr.forEach((value, index) => {
|
||||
this.pieData.push(value.total);
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
|
||||
|
||||
let chartDom2 = this.$refs["right-echart"];
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
this.initEcharts2();
|
||||
|
||||
let chartDom2 = this.$refs["right-echart"];
|
||||
this.myChart2 = echarts.init(chartDom2);
|
||||
this.initEcharts2();
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
initEcharts2() {
|
||||
this.option2 = {
|
||||
backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
|
||||
tooltip: {},
|
||||
grid: {
|
||||
top: '8%',
|
||||
left: '0%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
|
||||
axisLine: {
|
||||
show: false, // 隐藏 x 轴线
|
||||
lineStyle: {
|
||||
color: '#233e64'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#B7D4F5",
|
||||
fontSize: 12,
|
||||
margin: 0,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: ['一级召回', '二级召回', '三级召回'],
|
||||
}],
|
||||
yAxis: [{
|
||||
show: true,
|
||||
type: 'value',
|
||||
name: '123',
|
||||
splitLine: {
|
||||
show: true, // 显示背后的横线
|
||||
lineStyle: {
|
||||
color: '#233e64',
|
||||
type: 'dashed' // 可以设置为实线或虚线
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 隐藏 y 轴线
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: '#6a9cd5',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
initEcharts2() {
|
||||
this.option2 = {
|
||||
backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
|
||||
tooltip: {},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
|
||||
axisLine: {
|
||||
show: false, // 隐藏 x 轴线
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#B7D4F5",
|
||||
fontSize: 12,
|
||||
margin: 0,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: ["一级召回", "二级召回", "三级召回"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: true,
|
||||
type: "value",
|
||||
name: "123",
|
||||
splitLine: {
|
||||
show: true, // 显示背后的横线
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
type: "dashed", // 可以设置为实线或虚线
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 隐藏 y 轴线
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#6a9cd5",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: "30",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(33,181,225,1)", // 起始颜色
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
barWidth: '30',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(33,181,225,1)' // 起始颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0.1)' // 结束颜色
|
||||
}]
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top'
|
||||
// }
|
||||
}
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0,0,0,0.1)", // 结束颜色
|
||||
},
|
||||
data: [12, 15, 17]
|
||||
}]
|
||||
};
|
||||
this.myChart2.setOption(this.option2);
|
||||
},
|
||||
],
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top'
|
||||
// }
|
||||
},
|
||||
},
|
||||
data: this.pieData,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myChart2.setOption(this.option2);
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.box {}
|
||||
.box {
|
||||
}
|
||||
|
||||
.top-box {
|
||||
margin: 10px 0;
|
||||
height: 85px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
height: 85px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.topbox-item {
|
||||
width: 240px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.topbox-item {
|
||||
width: 240px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
&:nth-of-type(1) {
|
||||
background: url('../../../assets/images/daping/zhaohuicishu.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
background: url("../../../assets/images/daping/zhaohuicishu.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
background: url('../../../assets/images/daping/zhaohuicishu.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
&:nth-of-type(2) {
|
||||
background: url("../../../assets/images/daping/zhaohuicishu.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
|
||||
}
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
background: url('../../../assets/images/daping/zhaohuicishu.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-of-type(3) {
|
||||
background: url("../../../assets/images/daping/zhaohuicishu.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%);
|
||||
}
|
||||
}
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topBOxitem {
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
display: block;
|
||||
max-width: 130px;
|
||||
white-space: nowrap;
|
||||
/* 不换行 */
|
||||
overflow: hidden;
|
||||
/* 溢出内容隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
font-size: 34px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topBOxitem-bottom {
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.topBOxitem {
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.topBOxitem-top {
|
||||
:nth-of-type(1) {
|
||||
display: block;
|
||||
max-width: 130px;
|
||||
white-space: nowrap;
|
||||
/* 不换行 */
|
||||
overflow: hidden;
|
||||
/* 溢出内容隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
font-size: 34px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.topBOxitem-bottom {
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
height: 210px;
|
||||
display: flex;
|
||||
|
||||
.right-echart {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
height: 210px;
|
||||
display: flex;
|
||||
|
||||
.right-echart {
|
||||
flex: 1.3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,87 +1,154 @@
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box">
|
||||
<el-pagination
|
||||
background
|
||||
layout="->,prev, total,pager, next,jumper"
|
||||
:total="1000"
|
||||
:page-size="3"
|
||||
:pager-count="5"
|
||||
small
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
background
|
||||
:current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize"
|
||||
layout="->,prev, total,pager, next,jumper"
|
||||
:page-sizes="pageSizes"
|
||||
:pager-count="pagerCount"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
small
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scrollTo } from "@/utils/scroll-to";
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
name: "Pagination",
|
||||
props: {
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [10, 20, 30, 50];
|
||||
},
|
||||
},
|
||||
// 移动端页码按钮的数量端默认值5
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: document.body.clientWidth < 992 ? 5 : 7,
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: "total, sizes, prev, pager, next, jumper",
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
created () { },
|
||||
mounted () { },
|
||||
methods: { },
|
||||
computed: {}
|
||||
}
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
currentPage: {
|
||||
get() {
|
||||
return this.page;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("update:page", val);
|
||||
},
|
||||
},
|
||||
pageSize: {
|
||||
get() {
|
||||
return this.limit;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("update:limit", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
if (this.currentPage * val > this.total) {
|
||||
this.currentPage = 1;
|
||||
}
|
||||
this.$emit("pagination", { page: this.currentPage, limit: val });
|
||||
if (this.autoScroll) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit("pagination", { page: val, limit: this.pageSize });
|
||||
if (this.autoScroll) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.box{
|
||||
background-color: transparent !important;
|
||||
|
||||
.box {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination.is-background .btn-prev{
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #579ACF;
|
||||
::v-deep .el-pagination.is-background .btn-prev {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #579acf;
|
||||
}
|
||||
::v-deep .el-pagination.is-background .btn-next{
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #579ACF;
|
||||
::v-deep .el-pagination.is-background .btn-next {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #579acf;
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li{
|
||||
::v-deep .el-pagination.is-background .el-pager li {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #579ACF;
|
||||
border: 1px solid #123864;
|
||||
color: #579acf;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active{
|
||||
background: rgba(20,131,242,0.2) !important;
|
||||
border: 1px solid #1483F2;
|
||||
::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active {
|
||||
background: rgba(20, 131, 242, 0.2) !important;
|
||||
border: 1px solid #1483f2;
|
||||
border-radius: 4px;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-pagination__jump{
|
||||
margin: 0;
|
||||
color: #2668D6;
|
||||
.el-input__inner{
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #2668D6;
|
||||
|
||||
}
|
||||
::v-deep .el-pagination__jump {
|
||||
margin: 0;
|
||||
color: #2668d6;
|
||||
.el-input__inner {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #123864;
|
||||
color: #2668d6;
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination__total{
|
||||
color: #2668D6;
|
||||
|
||||
::v-deep .el-pagination__total {
|
||||
color: #2668d6;
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li:hover {
|
||||
background: rgba(20, 131, 242, 0.2) !important;
|
||||
border: 1px solid #1483f2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .el-pager li.active {
|
||||
background: rgba(20, 131, 242, 0.2) !important;
|
||||
border: 1px solid #1483f2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li:hover{
|
||||
background: rgba(20,131,242,0.2) !important;
|
||||
border: 1px solid #1483F2;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
::v-deep .el-pager li.active{
|
||||
background: rgba(20,131,242,0.2) !important;
|
||||
border: 1px solid #1483F2;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue