李劲龙 2 years ago
commit 93f3a9340c

@ -5,7 +5,6 @@ VUE_APP_TITLE = 产品画像
ENV = 'development' ENV = 'development'
# 若依管理系统/开发环境 # 若依管理系统/开发环境
VUE_APP_BASE_API = https://dev-mssm-liaoning.imian.org.cn/ggfw-api VUE_APP_BASE_API = 'https://dev-mssm-liaoning.imian.org.cn'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

@ -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
})
}

@ -27,6 +27,7 @@ service.interceptors.request.use(config => {
// 是否需要防止数据重复提交 // 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
if (getToken() && !isToken) { if (getToken() && !isToken) {
// config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
} }
// get请求映射params参数 // get请求映射params参数

@ -4,50 +4,61 @@
<div class="top-box"> <div class="top-box">
<div class="topbox-item"> <div class="topbox-item">
<div class="topbox-item-left"> <div class="topbox-item-left">
<div class="topbox-itemleft-img"></div> <span>不良反应</span> <div class="topbox-itemleft-img"></div>
<span>不良反应</span>
</div> </div>
<div class="topbox-item-content"> <div class="topbox-item-content">
<div class="topbox-itemleft-color">12121111111111111111</div> <span></span> <div class="topbox-itemleft-color">12121111111111111111</div>
<span></span>
</div> </div>
<div class="topbox-item-right"> <div class="topbox-item-right">
<div>较去年</div> <span class="spanshang"></span> <span class="spanxia"></span> <div>较去年</div>
<span class="spanshang"></span> <span class="spanxia"></span>
</div> </div>
</div> </div>
<div class="topbox-item"> <div class="topbox-item">
<div class="topbox-item-left"> <div class="topbox-item-left">
<div class="topbox-itemleft-img"></div> <span>严重不良反应</span> <div class="topbox-itemleft-img"></div>
<span>严重不良反应</span>
</div> </div>
<div class="topbox-item-content"> <div class="topbox-item-content">
<div class="topbox-itemleft-color">1212</div> <span></span> <div class="topbox-itemleft-color">1212</div>
<span></span>
</div> </div>
<div class="topbox-item-right"> <div class="topbox-item-right">
<div>较去年</div><span class="spanshang"></span> <span class="spanxia"></span> <div class="redStyle">较去年</div>
<span class="spanshang"></span> <span class="spanxia"></span>
</div> </div>
</div> </div>
<div class="topbox-item"> <div class="topbox-item">
<div class="topbox-item-left"> <div class="topbox-item-left">
<div class="topbox-itemleft-img"></div> <span>发生死亡不良反应</span> <div class="topbox-itemleft-img"></div>
<span>发生死亡不良反应</span>
</div> </div>
<div class="topbox-item-content"> <div class="topbox-item-content">
<div class="topbox-itemleft-color">1212</div> <span></span> <div class="topbox-itemleft-color">1212</div>
<span></span>
</div> </div>
<div class="topbox-item-right"> <div class="topbox-item-right">
<div>较去年</div> <span class="spanshang"></span> <span class="spanxia"></span> <div class="redStyle">较去年</div>
<span class="spanshang"></span> <span class="spanxia"></span>
</div> </div>
</div> </div>
</div>
<div class="bottom-box" ref="bottom-box">
</div> </div>
<div class="bottom-box" ref="bottom-box"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import {
getCosmeticsBL,
getMedicalDevicesBL,
getDrugBL,
} from "@/api/largeScreen";
export default { export default {
name: '', name: "",
components: {}, components: {},
data() { data() {
return { return {
@ -55,30 +66,49 @@ export default {
// echarts // echarts
myChart1: {}, myChart1: {},
center: ["18%", "50%"], center: ["18%", "50%"],
} };
}, },
created() {}, created() {},
mounted() { mounted() {
this.getData();
},
methods: {
getData() {
getDrugBL({ name: "国药准字B20020034" }).then((res) => {
this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
});
getCosmeticsBL({}).then(res=>{
this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
})
getMedicalDevicesBL({}).then(res=>{
this.$nextTick(() => { this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"]; let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom); this.myChart1 = echarts.init(chartDom);
this.initEcharts(); this.initEcharts();
}); });
})
}, },
methods: {
initEcharts() { initEcharts() {
this.option1 = { this.option1 = {
grid: { grid: {
left: '10%', left: "10%",
top: 0, top: 0,
bottom: 0, bottom: 0,
right: '60%', right: "60%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: "{b} : {c} ({d}%)", formatter: "{b} : {c} ({d}%)",
position: 'right' position: "right",
}, },
legend: { legend: {
type: "scroll", type: "scroll",
@ -90,7 +120,7 @@ export default {
itemGap: 16, itemGap: 16,
icon: "circle", icon: "circle",
textStyle: { textStyle: {
color: '#A3E2F4', color: "#A3E2F4",
fontSize: 12, fontSize: 12,
fontWeight: 0, fontWeight: 0,
rich: { rich: {
@ -100,56 +130,53 @@ export default {
}, },
percent: { percent: {
fontSize: 12, fontSize: 12,
color: '#ccc', color: "#ccc",
width: 80, // width: 80, //
height: 20, // height: 20, //
backgroundColor: { backgroundColor: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 1, x2: 1,
y2: 0, y2: 0,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(36, 64, 97, 1)' }, // { offset: 0, color: "rgba(36, 64, 97, 1)" }, //
{ offset: 1, color: 'rgba(36, 64, 97, 0)' } // { offset: 1, color: "rgba(36, 64, 97, 0)" }, //
], ],
},
} },
},
}
}
}, },
data: [{ data: [
{
value: 10, value: 10,
name: '一般不良反应' name: "一般不良反应",
}, },
{ {
value: 5, value: 5,
name: '严重不良反应' name: "严重不良反应",
}, },
{ {
value: 15, value: 15,
name: '发生死亡不良反应' name: "发生死亡不良反应",
}, },
], ],
formatter: function (name) { formatter: function (name) {
let data = [{ let data = [
{
value: 10, value: 10,
name: '一般不良反应' name: "一般不良反应",
}, },
{ {
value: 5, value: 5,
name: '严重不良反应' name: "严重不良反应",
}, },
{ {
value: 15, value: 15,
name: '发生死亡不良反应' name: "发生死亡不良反应",
}, },
];
]
// //
var index = data.findIndex(function (item) { var index = data.findIndex(function (item) {
@ -160,17 +187,21 @@ export default {
var value = data[index].value; var value = data[index].value;
// //
var percent = (value / data.reduce(function (sum, item) { var percent =
(
(value /
data.reduce(function (sum, item) {
return sum + item.value; return sum + item.value;
}, 0) * 100).toFixed(2) + '%'; }, 0)) *
100
).toFixed(2) + "%";
// //
return '{name|' + name + '}\n{percent|' + percent + '}'; return "{name|" + name + "}\n{percent|" + percent + "}";
}, },
}, },
polar: { center: this.center, color: "#0B3A72", }, polar: { center: this.center, color: "#0B3A72" },
angleAxis: { center: this.center, color: "#0B3A72", }, angleAxis: { center: this.center, color: "#0B3A72" },
radiusAxis: { radiusAxis: {
color: "#0B3A72", color: "#0B3A72",
center: this.center, center: this.center,
@ -182,53 +213,57 @@ export default {
lineStyle: { lineStyle: {
color: "#0B3E5E", color: "#0B3E5E",
width: 1, width: 1,
type: "solid" type: "solid",
}, },
}, },
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: "{value} %",
show: false, show: false,
padding: [0, 0, 20, 0], padding: [0, 0, 20, 0],
color: "#0B3E5E", color: "#0B3E5E",
fontSize: 16 fontSize: 16,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#0B3E5E", color: "#0B3E5E",
width: 2, width: 2,
type: "solid" type: "solid",
} },
} },
}, },
calculable: true, calculable: true,
series: [{ series: [
{
color: "#0B3A72", color: "#0B3A72",
center: this.center, center: this.center,
type: 'pie', type: "pie",
radius: ["5%", "10%"], radius: ["5%", "10%"],
hoverAnimation: false, hoverAnimation: false,
labelLine: { labelLine: {
normal: { normal: {
show: false, show: false,
length: 30, length: 30,
length2: 55 length2: 55,
}, },
emphasis: { emphasis: {
show: false show: false,
} },
}, },
data: [{ data: [
name: '', {
name: "",
value: 0, value: 0,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#0B3E5E" color: "#0B3E5E",
} },
} },
}] },
}, { ],
},
{
center: this.center, center: this.center,
type: 'pie', type: "pie",
radius: ["100%", "99%"], radius: ["100%", "99%"],
color: "#0B3A72", color: "#0B3A72",
hoverAnimation: false, hoverAnimation: false,
@ -236,28 +271,31 @@ export default {
normal: { normal: {
show: false, show: false,
length: 30, length: 30,
length2: 55 length2: 55,
}, },
emphasis: { emphasis: {
show: false show: false,
} },
}, },
name: "", name: "",
data: [{ data: [
name: '', {
name: "",
value: 0, value: 0,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#0B3A72" color: "#0B3A72",
} },
} },
}] },
}, { ],
},
{
center: this.center, center: this.center,
stack: 'a', stack: "a",
type: 'pie', type: "pie",
radius: ['20%', '90%'], radius: ["20%", "90%"],
roseType: 'area', roseType: "area",
zlevel: 10, zlevel: 10,
label: { label: {
normal: { normal: {
@ -268,77 +306,76 @@ export default {
}, },
}, },
emphasis: { emphasis: {
show: true show: true,
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false, show: false,
length: 200, length: 200,
length2: 55 length2: 55,
}, },
emphasis: { emphasis: {
show: false show: false,
}
}, },
data: [{ },
data: [
{
value: 10, value: 10,
name: '一般不良反应' name: "一般不良反应",
}, },
{ {
value: 5, value: 5,
name: '严重不良反应' name: "严重不良反应",
}, },
{ {
value: 15, value: 15,
name: '发生死亡不良反应' name: "发生死亡不良反应",
}, },
],
] },
}] ],
}; };
this.myChart1.setOption(this.option1); this.myChart1.setOption(this.option1);
}, },
}, },
computed: {} computed: {},
} };
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.box {} .box {
}
.top-box { .top-box {
.topbox-item { .topbox-item {
&:nth-child(1) { &:nth-child(1) {
.topbox-itemleft-img { .topbox-itemleft-img {
background: url('../../../assets/images/daping/buliang1.png'); background: url("../../../assets/images/daping/buliang1.png");
} }
.topbox-itemleft-color { .topbox-itemleft-color {
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%); background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
} }
} }
&:nth-child(2) { &:nth-child(2) {
.topbox-itemleft-img { .topbox-itemleft-img {
background: url('../../../assets/images/daping/buliang2.png'); background: url("../../../assets/images/daping/buliang2.png");
} }
.topbox-itemleft-color { .topbox-itemleft-color {
background: linear-gradient(0deg, #FFFFFF 0%, #BF6E35 100%); background: linear-gradient(0deg, #ffffff 0%, #bf6e35 100%);
} }
} }
&:nth-child(3) { &:nth-child(3) {
.topbox-itemleft-img { .topbox-itemleft-img {
background: url('../../../assets/images/daping/buliang3.png'); background: url("../../../assets/images/daping/buliang3.png");
} }
.topbox-itemleft-color { .topbox-itemleft-color {
background: linear-gradient(0deg, #FFFFFF 0%, #F04F50 100%); background: linear-gradient(0deg, #ffffff 0%, #f04f50 100%);
} }
} }
@ -346,7 +383,7 @@ export default {
align-items: center; align-items: center;
height: 40px; height: 40px;
width: 98%; width: 98%;
background: url('../../../assets/images/daping/toushi.png'); background: url("../../../assets/images/daping/toushi.png");
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom; background-position: bottom;
@ -372,7 +409,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #B7D4F5; color: #b7d4f5;
line-height: 50px; line-height: 50px;
} }
} }
@ -380,7 +417,6 @@ export default {
.topbox-item-content { .topbox-item-content {
flex: 1.5; flex: 1.5;
.topbox-itemleft-color { .topbox-itemleft-color {
max-width: 110px; max-width: 110px;
white-space: nowrap; white-space: nowrap;
@ -392,7 +428,7 @@ export default {
font-size: 26px; font-size: 26px;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
margin-right: 5px; margin-right: 5px;
@ -402,7 +438,7 @@ export default {
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #B7D4F5; color: #b7d4f5;
line-height: 50px; line-height: 50px;
opacity: 0.5; opacity: 0.5;
} }
@ -410,17 +446,25 @@ export default {
.topbox-item-right { .topbox-item-right {
flex: 1; flex: 1;
.redStyle {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
background: linear-gradient(0deg,#ffffff 0%, #d21b1b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 5px;
}
div { div {
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
background: linear-gradient(0deg, #FFFFFF 0%, #26E0C4 100%); background: linear-gradient(0deg, #ffffff 0%, #26e0c4 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
margin-right: 5px; margin-right: 5px;
} }
span { span {
@ -430,14 +474,13 @@ export default {
} }
.spanshang { .spanshang {
color: #26E0C4 color: #26e0c4;
} }
.spanxia { .spanxia {
color: #DA1B1B color: #da1b1b;
} }
} }
} }
} }

@ -1,100 +1,138 @@
<template> <template>
<div class="Basic-box"> <div class="Basic-box">
<el-table :data="tableData" stripe style="width: 100%;background-color: transparent;"> <el-table
<el-table-column prop="data" label="变更项目" width="100" show-overflow-tooltip> :data="tableData"
</el-table-column> v-loading="load1"
<el-table-column prop="name" label="变更事项" width="180" show-overflow-tooltip> element-loading-text="加载中..."
</el-table-column> element-loading-spinner="el-icon-loading"
<el-table-column prop="address" label="变更时间" show-overflow-tooltip> 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-column>
</el-table> </el-table>
<Pagination
<Pagination></Pagination> :total="total"
:page="query.current"
:limit="query.size"
@pagination="changeList"
></Pagination>
</div> </div>
</template> </template>
<script> <script>
import Pagination from "@/views/components/Pagination" import { getDrugChange } from "@/api/largeScreen";
import Pagination from "@/views/components/Pagination";
export default { export default {
name: 'Basicbox', name: "Basicbox",
components: { Pagination }, components: { Pagination },
data() { data() {
return { return {
tableData: [{ tableHeader1: [
data: "审批类变更概述", {
name: "原料对乙酰胺基供应商的公司名称由河北嘉恒(集团)药业有限公司变更为河北一恒药业股份有公司,生产地址未发生变更。", prop: "bgxm",
address: "2022-06-08" label: "变更项目",
}, { // width: "100",
data: "审批类变更概述",
name: "-",
address: "2022-06-08"
}, {
data: "审批类变更概述",
name: "-",
address: "2022-06-08"
}, },
{ {
data: "审批类变更概述", prop: "bgsx",
name: "-", label: "变更事项",
address: "2022-06-08"
}, },
{ {
data: "审批类变更概述", prop: "bgsj",
name: "-", label: "变更时间",
address: "2022-06-08" // width: "100",
}, },
] ],
} // tableHeader2: [
// {
// prop: "bgxm",
// label: "",
// },
// {
// prop: "bgsj",
// label: "",
// },
// ],
tableData: [],
query: {
current: 1,
size: 5,
name: "",
},
total: 0,
load1: false,
};
}, },
created() {}, created() {},
mounted() { }, mounted() {
methods: {}, this.getList();
computed: {} },
} 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> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.Basic-box { .Basic-box {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
height: 300px; height: 300px;
padding: 0 11px 11px 11px; // padding: 0 11px 11px 11px;
overflow-y: auto; overflow-y: auto;
background-color: transparent; background-color: transparent;
} }
::v-deep .el-table, .el-table__expanded-cell { ::v-deep .el-table,
.el-table__expanded-cell {
background-color: transparent; background-color: transparent;
} }
::v-deep .el-table th { ::v-deep .el-table th {
background-color: rgba(0, 100, 255, 0.2) !important; background-color: rgba(0, 100, 255, 0.2) !important;
color: #2492FF ; color: #2492ff;
border: none; border: none;
} }
::v-deep .el-table td { ::v-deep .el-table td {
border: none; border: none;
} }
::v-deep .el-table::before { ::v-deep .el-table::before {
height: 0px; height: 0px;
} }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: transparent !important; background-color: transparent !important;
color: #B7D4F5 ; color: #b7d4f5;
} }
::v-deep .el-table tbody tr:hover td { ::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; border: none;
} }
// //
::v-deep .el-table .el-table__body tr.el-table__row--striped td { ::v-deep .el-table .el-table__body tr.el-table__row--striped td {
background-color: rgba(0, 50, 150, 0.1) !important; background-color: rgba(0, 50, 150, 0.1) !important;
} }
</style> </style>

@ -10,19 +10,25 @@
</div> </div>
<div class="topbox-item"> <div class="topbox-item">
<div class="topBOxitem"> <div class="topBOxitem">
<el-tooltip class="item" effect="dark" content="1221111121212121" placement="top-start"> <el-tooltip
<div class="topBOxitem-top"> <span>1221111121212121</span> <span></span></div> class="item"
effect="dark"
content="1221111121212121"
placement="top-start"
>
<div class="topBOxitem-top">
<span>1221111121212121</span> <span></span>
</div>
</el-tooltip> </el-tooltip>
<div class="topBOxitem-bottom">省级抽检次数</div>
<div class="topBOxitem-bottom">国家检测次数</div>
</div> </div>
</div> </div>
<div class="topbox-item"> <div class="topbox-item">
<div class="topBOxitem"> <div class="topBOxitem">
<div class="topBOxitem-top"><span>12%</span></div> <div class="topBOxitem-top"><span>12%</span></div>
<div class="topBOxitem-bottom">国家检测次数</div> <div class="topBOxitem-bottom">抽检合格率</div>
</div> </div>
</div> </div>
</div> </div>
@ -37,33 +43,34 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: 'informationBox', name: "informationBox",
components: {}, components: {},
data() { data() {
return { return {
topList: [ topList: [
{ {
order: "12", order: "12",
jcaddress: "国家检测次数" jcaddress: "国家检测次数",
}, },
{ {
order: "31", order: "31",
jcaddress: "省级检测次数" jcaddress: "省级检测次数",
}, },
{ {
order: "14", order: "14",
jcaddress: "抽检合格率" jcaddress: "抽检合格率",
}, },
], ],
option1: {}, option1: {},
// echarts // echarts
myChart1: {}, myChart1: {},
option2: {}, option2: {},
// echarts // echarts
myChart2: {}, myChart2: {},
} //==============
};
}, },
created() {}, created() {},
mounted() { mounted() {
@ -75,69 +82,88 @@ export default {
let chartDom2 = this.$refs["right-echart"]; let chartDom2 = this.$refs["right-echart"];
this.myChart2 = echarts.init(chartDom2); this.myChart2 = echarts.init(chartDom2);
this.initEcharts2(); this.initEcharts2();
}); });
}, },
methods: { methods: {
initEcharts() { initEcharts() {
this.option1 = { this.option1 = {
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
// formatter: "{a} <br/>{b}: {c} ({d}%)", // // formatter: "{a} <br/>{b}: {c} ({d}%)", //
formatter: function (params) { formatter: function (params) {
return '<div style="line-height: 1;">' + params.marker + params.name + ': ' + params.value + ' (' + params.percent + '%)</div>'; return (
'<div style="line-height: 1;">' +
params.marker +
params.name +
": " +
params.value +
" (" +
params.percent +
"%)</div>"
);
}, },
extraCssText: 'padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;' // extraCssText:
"padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;", //
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: 'center', left: "center",
data: ['生产抽样环节', '流通环节抽样',], data: ["生产抽样环节", "流通环节抽样"],
textStyle: { textStyle: {
color: 'auto', color: "auto",
fontSize: 14 fontSize: 14,
}
}, },
series: [{ },
name: '', series: [
type: 'pie', {
radius: ['50%', '70%'], name: "",
center: ['50%', '40%'], // y '40%'使 type: "pie",
radius: ["50%", "70%"],
center: ["50%", "40%"], // y '40%'使
labelLine: { labelLine: {
normal: { normal: {
length: 15, // 线 length: 15, // 线
position: 'outer', // 线 position: "outer", // 线
lineStyle: function (params) { // lineStyle: function (params) {
//
return { return {
color: params.color, color: params.color,
fontSize: 14 fontSize: 14,
} };
} },
}, },
}, },
label: { label: {
normal: { normal: {
// //
// params: data, // params: data,
formatter: function (params) { formatter: function (params) {
return params.percent + "%" return params.percent + "%";
}, },
textStyle: { textStyle: {
color: 'auto', color: "auto",
fontSize: 14 fontSize: 14,
} },
} },
}, },
data: [ data: [
// : valuenameitemStyle // : valuenameitemStyle
// : namelegend-data // : namelegend-data
{ value: 39, name: '生产抽样环节', percent: '39', itemStyle: { color: '#007EFF' } }, {
{ value: 21, name: '流通环节抽样', percent: '21', itemStyle: { color: '#2CD8EC' } }, value: 39,
name: "生产抽样环节",
] percent: "39",
}] itemStyle: { color: "#007EFF" },
},
{
value: 21,
name: "流通环节抽样",
percent: "21",
itemStyle: { color: "#2CD8EC" },
},
],
},
],
}; };
this.myChart1.setOption(this.option1); this.myChart1.setOption(this.option1);
@ -147,20 +173,21 @@ export default {
backgroundColor: "rgba(0,0,0,0)", // backgroundColor: "rgba(0,0,0,0)", //
tooltip: {}, tooltip: {},
grid: { grid: {
top: '8%', top: "8%",
left: '10%', left: "10%",
right: '10%', right: "10%",
bottom: '8%', bottom: "8%",
containLabel: true, containLabel: true,
}, },
xAxis: [{ xAxis: [
type: 'category', {
type: "category",
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
show: false, // x 线 show: false, // x 线
lineStyle: { lineStyle: {
color: '#233e64' color: "#233e64",
}, },
}, },
axisLabel: { axisLabel: {
@ -173,18 +200,20 @@ export default {
axisTick: { axisTick: {
show: false, show: false,
}, },
data: ['辽宁', '黑龙江', '北京', '上海', '深圳', '苏州'], data: ["辽宁", "黑龙江", "北京", "上海", "深圳", "苏州"],
}], },
yAxis: [{ ],
yAxis: [
{
show: true, show: true,
type: 'value', type: "value",
name: '123', name: "123",
splitLine: { splitLine: {
show: true, // 线 show: true, // 线
lineStyle: { lineStyle: {
color: '#233e64', color: "#233e64",
type: 'dashed' // 线线 type: "dashed", // 线线
} },
}, },
axisLine: { axisLine: {
show: false, // y 线 show: false, // y 线
@ -192,49 +221,56 @@ export default {
axisLabel: { axisLabel: {
margin: 20, margin: 20,
textStyle: { textStyle: {
color: '#6a9cd5', color: "#6a9cd5",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
}], },
series: [{ ],
type: 'bar', series: [
barWidth: '10', {
type: "bar",
barWidth: "10",
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
{
offset: 0, offset: 0,
color: 'rgba(33,181,225,1)' // color: "rgba(33,181,225,1)", //
}, { },
{
offset: 1, offset: 1,
color: 'rgba(0,0,0,0.1)' // color: "rgba(0,0,0,0.1)", //
}] },
],
}, },
// label: { // label: {
// show: true, // show: true,
// position: 'top' // position: 'top'
// } // }
}
}, },
data: [12, 15, 17, 20, 25, 26] },
}] data: [12, 15, 17, 20, 25, 26],
},
],
}; };
this.myChart2.setOption(this.option2); this.myChart2.setOption(this.option2);
}, },
}, },
computed: {} computed: {},
} };
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.box {} .box {
}
.top-box { .top-box {
margin: 10px 0; margin: 10px 0;
@ -251,45 +287,37 @@ export default {
padding-right: 30px; padding-right: 30px;
&:nth-of-type(1) { &:nth-of-type(1) {
background: url('../../../assets/images/daping/jiance1.png'); background: url("../../../assets/images/daping/jiance1.png");
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%);
} }
} }
} }
&:nth-of-type(2) { &:nth-of-type(2) {
background: url('../../../assets/images/daping/jiance2.png'); background: url("../../../assets/images/daping/jiance2.png");
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
} }
} }
} }
&:nth-of-type(3) { &:nth-of-type(3) {
background: url('../../../assets/images/daping/jiance3.png'); background: url("../../../assets/images/daping/jiance3.png");
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%);
} }
} }
} }
@ -297,9 +325,7 @@ export default {
.topBOxitem { .topBOxitem {
margin-top: -40px; margin-top: -40px;
.topBOxitem-top { .topBOxitem-top {
display: flex; display: flex;
align-items: center; align-items: center;
@ -315,7 +341,7 @@ export default {
font-size: 34px; font-size: 34px;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
margin: 0; margin: 0;
@ -325,7 +351,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
opacity: 0.5; opacity: 0.5;
} }
} }
@ -334,13 +360,10 @@ export default {
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
} }
.bottom-content { .bottom-content {
@ -354,7 +377,5 @@ export default {
.right-echart { .right-echart {
flex: 1.3; flex: 1.3;
} }
} }
</style> </style>

@ -4,19 +4,25 @@
<div class="top-box"> <div class="top-box">
<div class="topbox-item"> <div class="topbox-item">
<div class="topBOxitem"> <div class="topBOxitem">
<div class="topBOxitem-top"> <span>12222222222</span> </div> <div class="topBOxitem-top">
<span>{{ zhcs || 0 }}</span>
</div>
<div class="topBOxitem-bottom">召回次数</div> <div class="topBOxitem-bottom">召回次数</div>
</div> </div>
</div> </div>
<div class="topbox-item"> <div class="topbox-item">
<div class="topBOxitem"> <div class="topBOxitem">
<div class="topBOxitem-top"> <span>12</span></div> <div class="topBOxitem-top">
<span>{{ cpzhbs || 0 }}</span>
</div>
<div class="topBOxitem-bottom">产品召回批数</div> <div class="topBOxitem-bottom">产品召回批数</div>
</div> </div>
</div> </div>
<div class="topbox-item"> <div class="topbox-item">
<div class="topBOxitem"> <div class="topBOxitem">
<div class="topBOxitem-top"> <span>100%</span> </div> <div class="topBOxitem-top">
<span>{{ cpzhcs || 0 }}</span>
</div>
<div class="topBOxitem-bottom">产品召回次数</div> <div class="topBOxitem-bottom">产品召回次数</div>
</div> </div>
</div> </div>
@ -29,66 +35,64 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getRecall } from "@/api/largeScreen";
export default { export default {
name: 'informationBox', name: "informationBox",
components: {}, components: {},
data() { data() {
return { return {
topList: [
{
order: "12",
jcaddress: "国家检测次数"
},
{
order: "31",
jcaddress: "省级检测次数"
},
{
order: "14",
jcaddress: "抽检合格率"
},
],
option2: {}, option2: {},
// echarts
myChart2: {}, myChart2: {},
} zhcs: 0,
cpzhbs: 0,
cpzhcs: 0,
pieData: [],
};
}, },
created() {}, created() {},
mounted() { 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(() => { this.$nextTick(() => {
let chartDom2 = this.$refs["right-echart"]; let chartDom2 = this.$refs["right-echart"];
this.myChart2 = echarts.init(chartDom2); this.myChart2 = echarts.init(chartDom2);
this.initEcharts2(); this.initEcharts2();
});
}); });
}, },
methods: {
initEcharts2() { initEcharts2() {
this.option2 = { this.option2 = {
backgroundColor: "rgba(0,0,0,0)", // backgroundColor: "rgba(0,0,0,0)", //
tooltip: {}, tooltip: {},
grid: { grid: {
top: '8%', top: "8%",
left: '0%', left: "0%",
right: '5%', right: "5%",
bottom: '0%', bottom: "0%",
containLabel: true, containLabel: true,
}, },
xAxis: [{ xAxis: [
type: 'category', {
type: "category",
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
show: false, // x 线 show: false, // x 线
lineStyle: { lineStyle: {
color: '#233e64' color: "#233e64",
}, },
}, },
axisLabel: { axisLabel: {
@ -101,18 +105,20 @@ export default {
axisTick: { axisTick: {
show: false, show: false,
}, },
data: ['一级召回', '二级召回', '三级召回'], data: ["一级召回", "二级召回", "三级召回"],
}], },
yAxis: [{ ],
yAxis: [
{
show: true, show: true,
type: 'value', type: "value",
name: '123', name: "123",
splitLine: { splitLine: {
show: true, // 线 show: true, // 线
lineStyle: { lineStyle: {
color: '#233e64', color: "#233e64",
type: 'dashed' // 线线 type: "dashed", // 线线
} },
}, },
axisLine: { axisLine: {
show: false, // y 线 show: false, // y 线
@ -120,49 +126,56 @@ export default {
axisLabel: { axisLabel: {
margin: 20, margin: 20,
textStyle: { textStyle: {
color: '#6a9cd5', color: "#6a9cd5",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
}], },
series: [{ ],
type: 'bar', series: [
barWidth: '30', {
type: "bar",
barWidth: "30",
itemStyle: { itemStyle: {
normal: { normal: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
{
offset: 0, offset: 0,
color: 'rgba(33,181,225,1)' // color: "rgba(33,181,225,1)", //
}, { },
{
offset: 1, offset: 1,
color: 'rgba(0,0,0,0.1)' // color: "rgba(0,0,0,0.1)", //
}] },
],
}, },
// label: { // label: {
// show: true, // show: true,
// position: 'top' // position: 'top'
// } // }
}
}, },
data: [12, 15, 17] },
}] data: this.pieData,
},
],
}; };
this.myChart2.setOption(this.option2); this.myChart2.setOption(this.option2);
}, },
}, },
computed: {} computed: {},
} };
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.box {} .box {
}
.top-box { .top-box {
margin: 10px 0; margin: 10px 0;
@ -177,46 +190,41 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&:nth-of-type(1) { &:nth-of-type(1) {
background: url('../../../assets/images/daping/zhaohuicishu.png'); background: url("../../../assets/images/daping/zhaohuicishu.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%); background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
} }
} }
} }
&:nth-of-type(2) { &:nth-of-type(2) {
background: url('../../../assets/images/daping/zhaohuicishu.png'); background: url("../../../assets/images/daping/zhaohuicishu.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%); background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
} }
} }
} }
&:nth-of-type(3) { &:nth-of-type(3) {
background: url('../../../assets/images/daping/zhaohuicishu.png'); background: url("../../../assets/images/daping/zhaohuicishu.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%); background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
} }
} }
} }
@ -243,7 +251,7 @@ export default {
font-size: 34px; font-size: 34px;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
margin: 0; margin: 0;
@ -254,13 +262,10 @@ export default {
font-size: 12px; font-size: 12px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
} }
.bottom-content { .bottom-content {
@ -270,7 +275,5 @@ export default {
.right-echart { .right-echart {
flex: 1.3; flex: 1.3;
} }
} }
</style> </style>

@ -48,7 +48,6 @@
</div> </div>
<headtitle mytitle="风险提示信息"></headtitle> <headtitle mytitle="风险提示信息"></headtitle>
<riskinformationList></riskinformationList> <riskinformationList></riskinformationList>
</div> </div>
<div class="bottom"> <div class="bottom">
<headtitle mytitle="检验检测信息"></headtitle> <headtitle mytitle="检验检测信息"></headtitle>
@ -60,7 +59,6 @@
<div class="top"> <div class="top">
<headtitle mytitle="召回信息"></headtitle> <headtitle mytitle="召回信息"></headtitle>
<recallbox></recallbox> <recallbox></recallbox>
</div> </div>
<div class="bottom"> <div class="bottom">
<headtitle mytitle="不良反应信息"></headtitle> <headtitle mytitle="不良反应信息"></headtitle>

@ -3,10 +3,14 @@
<div class="box"> <div class="box">
<el-pagination <el-pagination
background background
:current-page.sync="currentPage"
:page-size.sync="pageSize"
layout="->,prev, total,pager, next,jumper" layout="->,prev, total,pager, next,jumper"
:total="1000" :page-sizes="pageSizes"
:page-size="3" :pager-count="pagerCount"
:pager-count="5" :total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
small small
> >
</el-pagination> </el-pagination>
@ -14,74 +18,137 @@
</template> </template>
<script> <script>
import { scrollTo } from "@/utils/scroll-to";
export default { export default {
name: '', name: "Pagination",
components: {}, 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,
},
},
data() { data() {
return { 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);
} }
}, },
created () { }, handleCurrentChange(val) {
mounted () { }, this.$emit("pagination", { page: val, limit: this.pageSize });
methods: { }, if (this.autoScroll) {
computed: {} scrollTo(0, 800);
} }
},
},
};
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.box { .box {
background-color: transparent !important; background-color: transparent !important;
} }
::v-deep .el-pagination.is-background .btn-prev { ::v-deep .el-pagination.is-background .btn-prev {
background-color: transparent !important; background-color: transparent !important;
border: 1px solid #123864; border: 1px solid #123864;
color: #579ACF; color: #579acf;
} }
::v-deep .el-pagination.is-background .btn-next { ::v-deep .el-pagination.is-background .btn-next {
background-color: transparent !important; background-color: transparent !important;
border: 1px solid #123864; border: 1px solid #123864;
color: #579ACF; color: #579acf;
} }
::v-deep .el-pagination.is-background .el-pager li { ::v-deep .el-pagination.is-background .el-pager li {
background-color: transparent !important; background-color: transparent !important;
border: 1px solid #123864; border: 1px solid #123864;
color: #579ACF; color: #579acf;
} }
::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active { ::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active {
background: rgba(20, 131, 242, 0.2) !important; background: rgba(20, 131, 242, 0.2) !important;
border: 1px solid #1483F2; border: 1px solid #1483f2;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
} }
::v-deep .el-pagination__jump { ::v-deep .el-pagination__jump {
margin: 0; margin: 0;
color: #2668D6; color: #2668d6;
.el-input__inner { .el-input__inner {
background-color: transparent !important; background-color: transparent !important;
border: 1px solid #123864; border: 1px solid #123864;
color: #2668D6; color: #2668d6;
} }
} }
::v-deep .el-pagination__total { ::v-deep .el-pagination__total {
color: #2668D6; color: #2668d6;
} }
::v-deep .el-pagination.is-background .el-pager li:hover { ::v-deep .el-pagination.is-background .el-pager li:hover {
background: rgba(20, 131, 242, 0.2) !important; background: rgba(20, 131, 242, 0.2) !important;
border: 1px solid #1483F2; border: 1px solid #1483f2;
border-radius: 4px; border-radius: 4px;
} }
::v-deep .el-pager li.active { ::v-deep .el-pager li.active {
background: rgba(20, 131, 242, 0.2) !important; background: rgba(20, 131, 242, 0.2) !important;
border: 1px solid #1483F2; border: 1px solid #1483f2;
border-radius: 4px; border-radius: 4px;
} }
</style> </style>

Loading…
Cancel
Save