Compare commits

..

14 Commits

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

@ -4,7 +4,7 @@ VUE_APP_TITLE = 产品画像
# 生产环境配置
ENV = 'production'
# 若依管理系统/生产环境
# 若依管理系统/生产环境 /api/ggfw/
VUE_APP_BASE_API = '/prod-api'
VUE_APP_HOUTAI = /ggfw-jcphx

@ -20,7 +20,10 @@ export default {
}
}
};
/*
/* request 线线
myAPI 注意线上与线下环境
npm run build:prod
/usr/share/nginx/html/ggfw-jcphx

@ -56,3 +56,11 @@ export function getXXMSG(query) {
params: query
})
}
//根据产品画像类型查询产品
export function findByType(query) {
return request({
url: '/ggfw-api/pharmaceuticals/largeScreen/findByType',
method: 'get',
params: query
})
}

@ -1,12 +1,9 @@
import request from "@/utils/request";
// 本地
let api = "API"
let api = process.env.NODE_ENV === "production" ?location.origin: "API"
// 线上
// let api = location.origin
export default {
frimLogin() {
return request({
baseURL: process.env.VUE_APP_USER_LOGIN,
@ -19,6 +16,8 @@ export default {
method: "POST",
timeout: 60000,
data: {
// pdma: "Q2V0YzI4QGNvbQ==",
// urne: "2112042170015",
pdma: "MTExMTEx",
urne: "2112042170015",
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -78,6 +78,7 @@ import { setToken } from '@/utils/auth'
// Authentication.data.result.userToken
// );
// }
// token()
// let infor = async () => {
// let response = await API.login.getuserinfo();
@ -94,7 +95,10 @@ import { setToken } from '@/utils/auth'
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*/
/*
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})

@ -11,9 +11,7 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register']
router.beforeEach((to, from, next) => {
setToken()
NProgress.start()
next()
})

@ -15,8 +15,11 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
//!线上
//本地调试
baseURL: process.env.NODE_ENV === "production" ? location.origin +"/api/ggfw" : process.env.VUE_APP_BASE_API,
//!线上--2.17-198
// baseURL:location.origin +"/api/ggfw",
//!其他
// baseURL:location.origin,
// 超时
timeout: 10000
@ -113,6 +116,9 @@ service.interceptors.response.use(res => {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
setTimeout(() => {
location.href = `${location.origin}/login`;
}, 2000);
}
Message({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)

@ -27,9 +27,10 @@
<span></span>
</div>
<div class="topbox-item-right">
<div class="redStyle">较去年</div>
<span class="spanxia"></span>
<!-- <span class="spanshang"></span> -->
<!-- <div class="redStyle">较去年</div> -->
<div>较去年</div>
<!-- <span class="spanxia"></span> -->
<span class="spanshang"></span>
</div>
</div>
<div class="topbox-item">
@ -42,9 +43,10 @@
<span></span>
</div>
<div class="topbox-item-right">
<div class="redStyle">较去年</div>
<span class="spanxia"></span>
<!-- <span class="spanshang"></span> -->
<!-- <div class="redStyle">较去年</div> -->
<div>较去年</div>
<!-- <span class="spanxia"></span> -->
<span class="spanshang"></span>
</div>
</div>
</div>
@ -53,20 +55,20 @@
<div class="bottom-box" ref="bottom-box"></div>
</div>
<div class="rights">
<div>
<div v-for="(item, index) in pieDatalist">
<div class="pt-top">
<div class="ptleftbox">
<div class="rectangular1"></div>
<div :class="'rectangular' + (index + 1)"></div>
</div>
<div class="texts">一般不良反应</div>
<div class="texts">{{ item.name }}</div>
</div>
<div class="pt-top">
<div class="ptleftbox"></div>
<div class="boxLine"></div>
<div class="ptStyle react1">0%</div>
<div :class="('react' + (index + 1))" class="ptStyle">{{item.percent}}%</div>
</div>
</div>
<div>
<!-- <div>
<div class="pt-top">
<div class="ptleftbox">
<div class="rectangular2"></div>
@ -78,8 +80,8 @@
<div class="boxLine"></div>
<div class="ptStyle react2">0%</div>
</div>
</div>
<div>
</div> -->
<!-- <div>
<div class="pt-top">
<div class="ptleftbox">
<div class="rectangular3"></div>
@ -91,7 +93,7 @@
<div class="boxLine"></div>
<div class="ptStyle react3">0%</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@ -113,6 +115,7 @@ export default {
option1: {},
// echarts
myChart1: {},
a1: 0,
a2: 0,
a3: 0,
@ -131,6 +134,20 @@ export default {
name: "发生死亡不良反应",
},
],
pieDatalist: [
{
percent: 0,
name: "一般不良反应",
},
{
percent: 0,
name: "严重不良反应",
},
{
percent: 0,
name: "发生死亡不良反应",
},
],
total: 0,
};
},
@ -143,13 +160,20 @@ export default {
let newRouter = this.$route.query;
if (newRouter.type == 1) {
//
getDrugBL({ name: newRouter.code }).then((res) => {
getDrugBL({ name: newRouter.code })
.then((res) => {
res.data.result.forEach((value, index) => {
this.pieData.forEach((value1, index1) => {
if (value.reportType == "一般" && value1.name == "一般不良反应") {
if (
value.reportType == "一般" &&
value1.name == "一般不良反应"
) {
this.pieData[index1].value = value.reportCount;
}
if (value.reportType == "严重" && value1.name == "严重不良反应") {
if (
value.reportType == "严重" &&
value1.name == "严重不良反应"
) {
this.pieData[index1].value = value.reportCount;
}
if (
@ -166,17 +190,31 @@ export default {
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
})
.catch(() => {
this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
});
}
if (newRouter.type != 1 && newRouter.type != 2) {
//
getCosmeticsBL({ name: newRouter.code }).then((res) => {
getCosmeticsBL({ name: newRouter.code })
.then((res) => {
res.data.result.forEach((value, index) => {
this.pieData.forEach((value1, index1) => {
if (value.reportType == "一般" && value1.name == "一般不良反应") {
if (
value.reportType == "一般" &&
value1.name == "一般不良反应"
) {
this.pieData[index1].value = value.reportCount;
}
if (value.reportType == "严重" && value1.name == "严重不良反应") {
if (
value.reportType == "严重" &&
value1.name == "严重不良反应"
) {
this.pieData[index1].value = value.reportCount;
}
if (
@ -193,11 +231,19 @@ export default {
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
})
.catch(() => {
this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
});
}
if (newRouter.type == 2) {
//
getMedicalDevicesBL({ name: newRouter.code }).then((res) => {
getMedicalDevicesBL({ name: newRouter.code })
.then((res) => {
res.data.result.forEach((value, index) => {
this.pieData.forEach((value1, index1) => {
if (
@ -206,7 +252,10 @@ export default {
) {
this.pieData[index1].value = value.reportCount;
}
if (value.reportType == "其他" && value1.name == "一般不良反应") {
if (
value.reportType == "其他" &&
value1.name == "一般不良反应"
) {
this.pieData[index1].value = value.reportCount;
}
if (
@ -223,6 +272,13 @@ export default {
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
})
.catch(() => {
this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
});
});
}
},
@ -335,6 +391,13 @@ export default {
normal: {
show: false,
formatter: "",
formatter: (params)=> {
if (params.name == "一般不良反应") this.pieDatalist[0].percent = params.percent || 0;
if (params.name == "严重不良反应") this.pieDatalist[1].percent = params.percent || 0;
if (params.name == "发生死亡不良反应") this.pieDatalist[2].percent = params.percent || 0;
return (params.percent || 0) + "%";
},
textStyle: {
fontSize: 12,
},
@ -464,6 +527,7 @@ export default {
.topbox-item-right {
flex: 1;
.redStyle {
font-size: 16px;
font-family: Alibaba PuHuiTi;
@ -474,6 +538,7 @@ export default {
-webkit-text-fill-color: transparent;
margin-right: 5px;
}
div {
font-size: 16px;
font-family: Alibaba PuHuiTi;
@ -501,6 +566,7 @@ export default {
}
}
}
.footers {
height: calc(100% - 120px);
display: flex;
@ -509,11 +575,13 @@ export default {
height: 100%;
width: 50%;
padding: 10px;
.bottom-box {
height: 100%;
width: 100%;
}
}
.rights {
height: 100%;
padding-left: 15px;
@ -528,25 +596,30 @@ export default {
display: flex;
align-items: center;
position: relative;
.ptleftbox {
width: 12%;
height: 100%;
.rectangular1 {
height: 8px;
width: 8px;
background: #2e87e8;
}
.rectangular2 {
height: 8px;
width: 8px;
background: #f0a436;
}
.rectangular3 {
height: 8px;
width: 8px;
background: #f35656;
}
}
.texts {
width: 60%;
font-size: 16px;
@ -554,6 +627,7 @@ export default {
font-weight: 400;
color: #b7d4f5;
}
.react1 {
// font-size: 20px;
font-family: Alibaba PuHuiTi;
@ -561,6 +635,7 @@ export default {
color: #2e87e8;
padding-left: 10px;
}
.react2 {
// font-size: 20px;
font-family: Alibaba PuHuiTi;
@ -568,6 +643,7 @@ export default {
color: #f0a436;
padding-left: 10px;
}
.react3 {
// font-size: 20px;
font-family: Alibaba PuHuiTi;
@ -576,15 +652,15 @@ export default {
color: #f35656;
}
.ptStyle {
width: 60%;
margin-top: 5px;
background: linear-gradient(
to right,
background: linear-gradient(to right,
rgba(36, 64, 97, 1),
rgba(36, 64, 97, 0)
);
rgba(36, 64, 97, 0));
}
.boxLine {
position: absolute;
width: 18px;

@ -78,8 +78,8 @@ export default {
<style scoped lang='scss'>
.Basic-box {
width: 100%;
height: 300px;
padding: 0 11px 11px 11px;
height: 320px;
padding: 0 11px 0px 11px;
overflow-y: auto;
.Basic-box-item {

@ -1,34 +1,14 @@
<template>
<div class="Basic-box" ref="basic">
<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)"
:height="height"
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 :data="tableData" v-loading="load1" element-loading-text="..."
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :height="height" 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>
<div ref="pagination">
<Pagination
:total="total"
:page="query.current"
:limit="query.size"
@pagination="changeList"
></Pagination>
<Pagination :total="total" :page="query.current" :limit="query.size" @pagination="changeList"></Pagination>
</div>
</div>
</template>
@ -89,8 +69,41 @@ export default {
methods: {
getList() {
let newRouter = this.$route.query;
this.query.name = newRouter.code;
this.load1 = true;
if (this.query.name == "国药准字H21020985") {
this.tableData = [{
bgsj: "2020/6/15",
bgsx: "再注册",
bgxm: "符合《药品注册管理办法》的有关规定,进行再注册"
},{
bgsj: "2020/10/25",
bgsx: "企业更名",
bgxm: "生产企业名称由沈阳志鹰药业有限公司变更为辽宁亿帆药业有限公司"
},{
bgsj: "2020/12/30",
bgsx: "生产地址变更",
bgxm: "生产地址由沈阳市沈河区万柳塘路51号变更为本溪经济技术开发区香槐路67号"
},{
bgsj: "2022/4/20",
bgsx: "合并审批结论",
bgxm: "辽备2022008948予以备案申请人对申报资料的真实性、准确性、完整性负责"
},]
this.total = 4;
this.load1 = false;
return
}
if (this.query.name == "国药准字H19990372") {
this.tableData = [{
bgsj: "2020/7/13",
bgsx: "再注册",
bgxm: "符合《药品注册管理办法》的有关规定,进行再注册"
}]
this.total = 1;
this.load1 = false;
return
}
getDrugChange(this.query).then((res) => {
this.tableData = res.data.records;
this.total = res.data.total;
@ -109,38 +122,46 @@ export default {
<style scoped lang='scss'>
.Basic-box {
margin-top: 10px;
width: 100%;
max-width: 100%;
height: calc(100% - 41px - 10px);
// padding: 0 11px 11px 11px;
overflow-y: auto;
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;
}
::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;
}
::v-deep .el-table tbody tr:hover td {
background-color: transparent !important;
}
::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;

@ -4,32 +4,32 @@
<div class="top-box">
<div class="topbox-item">
<div class="topBOxitem">
<el-tooltip
<!-- <el-tooltip
class="item"
effect="dark"
:content="countryC"
:content="Number(countryC) || 0"
placement="top-start"
>
> -->
<div class="topBOxitem-top">
<span>{{ countryC || 0 }}</span> <span></span>
</div>
</el-tooltip>
<!-- </el-tooltip> -->
<div class="topBOxitem-bottom">国家检测次数</div>
</div>
</div>
<div class="topbox-item">
<div class="topBOxitem">
<el-tooltip
<!-- <el-tooltip
class="item"
effect="dark"
:content="provinceC"
:content="Number(provinceC) || 0"
placement="top-start"
>
> -->
<div class="topBOxitem-top">
<span>{{ provinceC || 0 }}</span> <span></span>
</div>
</el-tooltip>
<!-- </el-tooltip> -->
<div class="topBOxitem-bottom">省级抽检次数</div>
</div>
@ -76,7 +76,25 @@ export default {
option1: {},
// echarts
myChart1: {},
myChart1data: [
// : valuenameitemStyle
// : namelegend-data
{
value: "0",
name: "生产抽样环节",
percent: "0",
// itemStyle: { color: "#007EFF" },
},
{
value: "0",
name: "流通环节抽样",
percent: "0",
// itemStyle: { color: "#2CD8EC" },
},
],
option2: {},
myChart2data: [],
myChart2data2: [],
// echarts
myChart2: {},
//==============
@ -94,21 +112,52 @@ export default {
this.getData();
},
methods: {
reducefn(data = []) {
return data.length
},
getData() {
let newRouter = this.$route.query;
getCPCJ({ name: newRouter.code }).then((res) => {
// res.data.result.forEach((value, index) => {
// if (value.sampleType == 1) {
// this.provinceC += 1;
// } else if (value.sampleType == 2) {
// this.countryC += 1;
// }
// });
this.countryC = 12;
this.provinceC = 12;
this.pt = 67;
this.sccy = 60;
this.ltcy = 40;
getCPCJ({ pageNum: 1,pageSize:10000,approvalNumber: newRouter.code }).then((res) => {
if (res.code == 200) {
if (res.data.result.list.length != 0) {
//
this.myChart1data[0].value = res.data.result.list.filter(item => item.inspectType === "生产环节").length
this.myChart1data[0].percent = ((res.data.result.list.filter(item => item.inspectType === "生产环节").length / res.data.result.list.length) * 100).toFixed(1)
this.myChart1data[1].value = res.data.result.list.filter(item => item.inspectType === "流通环节").length
this.myChart1data[1].percent = ((res.data.result.list.filter(item => item.inspectType === "流通环节").length / res.data.result.list.length) * 100).toFixed(1)
//
let mergedData = {};
res.data.result.list.forEach((item) => {
if (item.qualified === "合格") {
if (mergedData[item.province]) {
mergedData[item.province].sampleType += 1;
} else {
mergedData[item.province] = {
province: item.province,
sampleType: 1
};
}
}
});
const result = Object.values(mergedData);
result.forEach(item=>{
this.myChart2data.push(item.province)
this.myChart2data2.push(item.sampleType)
})
//
this.countryC = res.data.result.list.filter(item => item.sampleType == "2").length
//
this.provinceC = res.data.result.list.filter(item => item.sampleType == "1").length
//
const filteredData = res.data.result.list.filter(item => item.qualified === "不合格");
this.pt = Math.floor(((this.reducefn(res.data.result.list) - this.reducefn(filteredData)) / this.reducefn(res.data.result.list)) * 100)
}else{
this.myChart2data = ["暂无"]
this.myChart2data2 = ['0']
}
}
this.$nextTick(() => {
let chartDom = this.$refs["left-echart"];
this.myChart1 = echarts.init(chartDom);
@ -131,9 +180,9 @@ export default {
params.marker +
params.name +
": " +
params.value +
( params.value||0) +
" (" +
params.percent +
( params.percent || 0) +
"%)</div>"
);
},
@ -156,15 +205,15 @@ export default {
{
name: "",
type: "pie",
radius: ["45%", "70%"],
center: ["50%", "40%"], // y '40%'使
radius: ["45%", "66%"],
center: ["50%", "44%"], // y '40%'使
// itemStyle:{
// borderWidth:1, //border
// borderColor:'#fff',
// },
labelLine: {
normal: {
length: 15, // 线
length: 10, // 线
position: "outer", // 线
lineStyle: function (params) {
//
@ -180,7 +229,7 @@ export default {
//
// params: data,
formatter: function (params) {
return params.percent + "%";
return (params.data.percent || 0) + "%";
},
textStyle: {
color: "auto",
@ -188,22 +237,7 @@ export default {
},
},
},
data: [
// : valuenameitemStyle
// : namelegend-data
{
value: 39,
name: "生产抽样环节",
// percent: "39",
// itemStyle: { color: "#007EFF" },
},
{
value: 21,
name: "流通环节抽样",
// percent: "21",
// itemStyle: { color: "#2CD8EC" },
},
],
data: this.myChart1data
},
],
};
@ -215,10 +249,10 @@ export default {
backgroundColor: "rgba(0,0,0,0)", //
tooltip: {},
grid: {
top: "8%",
top: "7%",
left: "10%",
right: "10%",
bottom: "8%",
bottom: "-5%",
containLabel: true,
},
xAxis: [
@ -238,11 +272,12 @@ export default {
fontSize: 12,
margin: 0,
},
rotate: -30, //
},
axisTick: {
show: false,
},
data: ["辽宁", "江苏", "湖南", "山西", "湖北", "山东"],
data: this.myChart2data
},
],
yAxis: [
@ -302,7 +337,7 @@ export default {
},
},
data: [12, 15, 17, 20, 25, 26],
data: this.myChart2data2
},
],
};
@ -313,8 +348,6 @@ export default {
};
</script>
<style scoped lang='scss'>
.box {
}
.top-box {
margin: 10px 0;

@ -21,11 +21,11 @@
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="address" label="分办处室" show-overflow-tooltip>
<el-table-column prop="fbcs" label="分办处室" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="address" label="处置状态" show-overflow-tooltip>
<el-table-column prop="czzt" label="处置状态" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="address" label="完成日期" show-overflow-tooltip>
<el-table-column prop="wcrq" label="完成日期" show-overflow-tooltip>
</el-table-column>
</el-table>
<div ref="pagination">
@ -51,8 +51,33 @@ export default {
this.height =
this.$refs.basic.offsetHeight - this.$refs.pagination.offsetHeight;
});
this.getList()
},
methods: {
getList() {
let newRouter = this.$route.query;
if (newRouter.code == "国药准字H21020985") {
this.tableData = [{
data: "2024/3/19",
name: "1年内累计发生严重不良反应2起",
fbcs: "药品生产监管处、稽查五处",
czzt: "查阅",
wcrq: "2024/3/20",
}]
return
}
if (newRouter.code == "国药准字H19990372") {
this.tableData = [{
data: "2024/3/21",
name: "1年内累计发生严重不良反应1起",
fbcs: "药品生产监管处、稽查一处",
czzt: "查阅",
wcrq: "2024/3/22",
}]
return
}
},
},
methods: {},
computed: {},
};
</script>

@ -1,15 +1,15 @@
<template>
<div class="pc-container">
<div class="system-header">
<div class="left-tags">2023年8月11日 星期五 16:23:34</div>
<div class="left-tags">{{dataNow(2)+ dataNow(3) + date}}</div>
<div class="system-title" text="产品画像">产品画像</div>
<div class="rigth-tags">
<!-- <div class="rigth-tags-diva">
<span class="rigth-tags-spana"><i class="el-icon-sunny"></i></span
>晴天 17~28°C <span class="rigth-tags-spanb"> | </span>东南风3级
</div> -->
<div class="content-top-fanhui" @click="toBack">
<div class="content-top-fanhui" @click="toBack" v-if="newRouter.cpda != 1">
<div class="content-top-fanhui-main">
<div class="black-bg"></div>
<span>返回</span>
@ -27,7 +27,6 @@
<div class="system-box-left">
<div class="system-boxleft-top top">
<headtitle mytitle="基本信息"></headtitle>
<!-- 组件 -->
<Basicbox></Basicbox>
</div>
<div class="system-boxleft-bottom bottom">
@ -40,10 +39,20 @@
<div class="top">
<!-- 头部 -->
<div class="fengxian-top">
<div class="fengxian-top-left">复方枸杞子胶囊</div>
<div class="fengxian-top-left">{{ query.name }}</div>
<div class="fengxian-top-right">
<span>保健药</span>
<span>OTC</span>
<div class="right-text-bog" v-if="newRouter.type == 1">
<span v-if="query.type">{{ query.type }}</span>
<span v-if="query.jx">{{ query.jx }}</span>
</div>
<div class="right-text-bog" v-if="newRouter.type == 2">
<span v-if="query.type">{{ query.type }}</span>
<span v-if="query.gllb">{{ query.gllb }}</span>
<span v-if="query.jgtz">{{ query.jgtz }}</span>
</div>
<div class="right-text-bog" v-if="newRouter.type != 1 && newRouter.type != 2">
<span v-if="query.type">{{ query.type }}</span>
</div>
</div>
</div>
<headtitle mytitle="风险提示信息"></headtitle>
@ -56,10 +65,7 @@
</div>
<!-- 右边 -->
<div class="system-box-right">
<div
class="top"
v-if="this.$route.query.type == 1 || this.$route.query.type == 2"
>
<div class="top" v-if="this.$route.query.type == 1 || this.$route.query.type == 2">
<headtitle mytitle="召回信息"></headtitle>
<recallbox></recallbox>
</div>
@ -74,7 +80,7 @@
</template>
<script>
import {getXXMSG} from '@/api/largeScreen'
import { getXXMSG } from "@/api/largeScreen";
//
import headtitle from "./bigcomponents/headtitle";
//
@ -101,30 +107,83 @@ export default {
AdverseBox,
},
data() {
return {};
return {
query: {},
newRouter: {},
date: '',
};
},
created() { this.dataNow(1) },
mounted() {
this.getData();
setInterval(() => {
this.dataNow(1)
}, 1000);
},
created() {},
mounted() {},
methods: {
toBack() {
this.$router.go(-1);
},
dataNow(index) {
let now = new Date();
if (index == 1) {
let hour = now.getHours();
if (hour < 10) hour = "0" + hour
let minute = now.getMinutes();
if (minute < 10) minute = "0" + minute
let second = now.getSeconds();
if (second < 10) second = "0" + second
this.date = `${hour}:${minute}:${second}`
} else if (index == 2) {
let year = now.getFullYear();
if (year < 10) year = "0" + year
let month = now.getMonth() + 1;
if (month < 10) month = "0" + month
let day = now.getDate();
if (day < 10) day = "0" + day
return `${year}/${month}/${day}`
} else if (index == 3) {
let dayOfWeek = now.getDay();
//
let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
let chineseDayOfWeek = weekDays[dayOfWeek];
return chineseDayOfWeek
}
},
getData() {
// debugger
this.newRouter = this.$route.query;
console.log(798, this.newRouter);
getXXMSG({ code: this.newRouter.code, type: this.newRouter.type }).then(
(res) => {
this.query = res.data;
}
);
},
},
computed: {},
};
</script>
<style scoped lang='scss'>
@import "@/assets/styles/theme.scss";
.content-top-fanhui {
margin-right: 10px;
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
rgba(103, 200, 255, 0.2) 0%,
rgba(111, 176, 231, 0.1) 100%
);
rgba(111, 176, 231, 0.1) 100%);
cursor: pointer;
.content-top-fanhui-main {
padding: 2px 12px;
border: 1px solid;
@ -132,6 +191,7 @@ export default {
border-radius: 4px;
display: flex;
align-items: center;
.black-bg {
width: 26px;
height: 24px;
@ -139,20 +199,19 @@ export default {
background-size: cover;
margin-top: 3px;
}
span {
font-size: 16px;
font-family: SourceHanSansSC;
font-weight: bold;
color: #feffff;
text-shadow: 0px 4px 9px rgba(0, 0, 0, 0.29);
background: linear-gradient(
0deg,
background: linear-gradient(0deg,
#caffff 0%,
#caffff 0%,
#ffffff 0%,
#74b4f4 38.96484375%,
#3883ff 100%
);
#3883ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@ -166,8 +225,7 @@ div {
.pc-container {
overflow: hidden;
height: 100%;
background: url("../../assets/images/daping/main-background.png") no-repeat
center;
background: url("../../assets/images/daping/main-background.png") no-repeat center;
background-size: cover;
position: relative;
@ -325,7 +383,8 @@ div {
}
.system-box-left {
flex: 1;
// flex: 1;
width: 25vw;
.system-boxleft-top,
.system-boxleft-bottom {
@ -342,6 +401,8 @@ div {
.system-box-right {
flex: 1;
width: 25vw;
}
}
@ -367,15 +428,18 @@ div {
.fengxian-top-right {
display: flex;
height: 100%;
.right-text-bog {
display: flex;
align-items: center;
span {
margin: 0 3px;
width: 93px;
height: 49px;
background: url("../../assets/images/daping/fengxianbgc.png")
no-repeat center;
background-size: contain;
padding: 5px 14px;
background: url("../../assets/images/daping/fengxianbgc.png") no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 49px;
color: #4da5ff;
font-weight: 400;
}
@ -383,5 +447,5 @@ div {
}
}
}
}
</style>

@ -1,18 +1,8 @@
<template>
<div class="box">
<el-pagination
background
:current-page.sync="currentPage"
:page-size.sync="pageSize"
layout="prev, pager, next,jumper"
:page-sizes="pageSizes"
:pager-count="pagerCount"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
small
>
<el-pagination background :current-page.sync="currentPage" :page-size.sync="pageSize"
layout="prev, pager, next,jumper" :page-sizes="pageSizes" :pager-count="pagerCount" :total="total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :small="smallShow">
</el-pagination>
</div>
</template>
@ -41,6 +31,10 @@ export default {
return [10, 20, 30, 50];
},
},
smallShow: {
type: Boolean,
default: true
},
// 5
pagerCount: {
type: Number,
@ -72,7 +66,7 @@ export default {
return this.page;
},
set(val) {
this.$emit("update:page", val);
// this.$emit("update:page", val);
},
},
pageSize: {
@ -80,7 +74,7 @@ export default {
return this.limit;
},
set(val) {
this.$emit("update:limit", val);
// this.$emit("update:limit", val);
},
},
},
@ -90,46 +84,51 @@ export default {
this.currentPage = 1;
}
this.$emit("pagination", { page: this.currentPage, limit: val });
if (this.autoScroll) {
scrollTo(0, 800);
}
// if (this.autoScroll) {
// scrollTo(0, 800);
// }
},
handleCurrentChange(val) {
this.$emit("pagination", { page: val, limit: this.pageSize });
if (this.autoScroll) {
scrollTo(0, 800);
}
// if (this.autoScroll) {
// scrollTo(0, 800);
// }
},
},
};
</script>
<style scoped lang='scss'>
::v-deep .el-pagination {
width: 100%;
max-width: 100%;
display: flex;
justify-content: end;
padding: 8px 5px;
box-sizing: border-box;
overflow-y: auto;
}
.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-next {
background-color: transparent !important;
border: 1px solid #123864;
color: #579acf;
}
::v-deep .el-pagination .el-pager li {
background-color: transparent !important;
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;
@ -139,12 +138,14 @@ export default {
::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-pager li.active {
background: rgba(20, 131, 242, 0.52) !important;
border: 1px solid #1483f2;
@ -153,5 +154,4 @@ export default {
// ::v-deep .el-pagination__total {
// color: #2668d6;
// }
</style>
// }</style>

@ -1,4 +1,3 @@
<template>
<div class="container">
<div class="content">
@ -26,7 +25,7 @@
<!-- <img src="@/assets/images/profile.jpg" alt="" /> -->
<el-dropdown trigger="click" @command="tuichudengl">
<span class="el-dropdown-link">
您好,{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
您好,{{ userName }}<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="0">退出登录</el-dropdown-item>
@ -35,7 +34,7 @@
</div>
</div>
</div>
<div class="content-content">
<div class="title">
<img src="@/assets/images/daping/guangxian.png" alt="" />
<div>产品画像搜索</div>
@ -43,13 +42,14 @@
<div class="content-bottom-box">
<div class="content-bottom">
<div class="input">
<el-input v-model="input" placeholder="请输入内容"></el-input>
<el-input v-model="input" placeholder="请输入产品名称、批准文号/备案编号"></el-input>
</div>
<div class="sousuo" @click="gotoBgpage">
<!-- @click="gotoBgpage" -->
<div class="sousuo" @click="getsearchList()" >
<img src="@/assets/images/daping/searchicon.png" alt="" />
搜索
</div>
<div class="box-dialog" v-loading="loading" v-if="dialog">
<div class="box-dialog" v-loading="loading" v-show="!loading">
<div class="dialog-item" v-for='(item, index) in searchList' :key="index" @click="getValue(item)">
{{ item.name }}
</div>
@ -57,13 +57,85 @@
</div>
</div>
</div>
<div class="bottomList">
<div class="conbtm-item" v-for="(item, index) in btmLitstTitle" v-show="btmLitstTitleShow">
<span class="conitem-bgimg">{{ index + 1 }}</span>
<div class="conitme-title"><span class="spantext">{{ item.name }}</span></div>
<div class="conitme-right-item" v-for="(item, index) in item.childarray" @click="onActivebtm(item)"
:class="activebtm == item.value ? 'conitme-right-item-active' : ''">
{{ item.lable }}
</div>
</div>
<div class="bottomListShow">
<el-button type="success" @click="btmLitstTitleShow = !btmLitstTitleShow">{{ btmLitstTitleShow ? "收起" : "展开"
}}<i class="el-icon-d-arrow-left"></i></el-button>
</div>
<div class="listBottom" v-loading="loadingTow">
<div class="listBottom-title">
<div class="span1"></div>
<div class="div1">为您查询到
<span class="span2">{{ total }}</span>
条数据
</div>
</div>
<div class="listBottom-item" v-for="(item, index) in btmLise">
<div class="listBottom-item-left">
<div class="listitem-title">
{{ item.name || "" }}
</div>
<div class="listitemleft-bottom">
<span class="span1">
<span>药品批准文号</span>
<el-tooltip class="item" effect="dark" :content="item.code || ''" placement="top-start">
<span class="span2">{{ item.code || "" }}</span>
</el-tooltip>
</span>
<span class="span1">
<span>持有/注册/备案人:</span>
<el-tooltip class="item" effect="dark" :content="item.scqy || ''" placement="top-start">
<span class="span2">{{ item.scqy || "" }}</span>
</el-tooltip>
</span>
</div>
</div>
<!-- <div class="listBottom-item-right">
<div class="listitem-title">近3年统计</div>
<div class="listitemright-bottom">
<div class="listitemright-bottom-item">
<img src='../assets/images/icon-xxx1.png' alt="">抽检不合格:<span>{{ item.cjbhg || "0" }}</span>
</div>
<div class="listitemright-bottom-item">
<img src='../assets/images/icon-xxx2.png' alt="">不良反应:<span>{{ item.blfy || "0" }}</span>
</div>
<div class="listitemright-bottom-item">
<img src='../assets/images/icon-xxx3.png' alt="">产品召回:<span>{{ item.cpzh || "0" }}</span>
</div>
</div>
</div> -->
<div class="listBottom-item-xiangqing">
<el-button type="primary" @click="ListGO(item)"></el-button>
</div>
</div>
</div>
<div ref="pagination">
<Pagination :total="total" :page="query.current" :limit="query.size" @pagination="changeList"
:smallShow="false"></Pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import Pagination from "@/views/components/Pagination";
import { findByType } from "@/api/largeScreen/index";
export default {
name: '',
components: {},
components: { Pagination },
data() {
return {
input: "",
@ -73,36 +145,124 @@ export default {
searchList: [],
getData: {},
userName: '',
btmLitstTitleShow: true,
btmLitstTitle: [{
name: "药品",
childarray: [{
lable: "本省注册药品",
value: 1,
}, {
lable: "本省持受托生产药品",
value: 2,
},]
}, {
name: "医疗器械",
childarray: [{
lable: "三类医疗器械",
value: 3,
}, {
lable: "三类体外诊断试剂",
value: 4,
}, {
lable: "二类医疗器械",
value: 5,
}, {
lable: "二类体外诊断试剂",
value: 6,
}, {
lable: "一类医疗器械",
value: 7,
}, {
lable: "一类体外诊断试剂",
value: 8,
},]
}, {
name: "化妆品",
childarray: [{
lable: "国产普通化妆品",
value: 9,
}, {
lable: "国产特殊化妆品",
value: 10,
}, {
lable: "进口普通化妆品",
value: 11,
}, {
lable: "进口特殊化妆品",
value: 12,
}]
},],
activebtm: 1,
query: {
current: 1,
size: 10,
type: 1,
},
total: 0,
btmLise: [],
loadingTow: true
}
},
watch: {
async input(newValue, oldValue) {
// let data = await this.$api.productPortrayal.findByName({current:1,size:10});
if (newValue) {
this.loading = true;
this.dialog = true;
// let a = this.throttle(this.getsearchList,500)
this.getsearchList(newValue);
} else {
this.dialog = false;
this.searchList = [];
this.loading = false;
}
}
// async input(newValue, oldValue) {
// // let data = await this.$api.productPortrayal.findByName({current:1,size:10});
// if (newValue) {
// this.loading = true;
// this.dialog = true;
// // let a = this.throttle(this.getsearchList,500)
// this.getsearchList(newValue);
// } else {
// this.dialog = false;
// this.searchList = [];
// this.loading = false;
// }
// }
},
created() { this.dataNow(1) },
mounted() {
this.getDataInterval(1)
console.log(localStorage.getItem('userDto'))
this.getLiset()
let user = JSON.parse(localStorage.getItem('userDto'))
console.log(user)
this.userName = user.realName
},
methods: {
ListGO(item) {
this.$router.push({ path: "/bgpage", query: { code: item.code, name: item.name, type: item.type } })
},
changeList(e) {
this.loadingTow = true
this.query.current = e.page;
this.query.size = e.limit;
this.getLiset()
},
onActivebtm(item) {
this.loadingTow = true
this.activebtm = item.value;
this.query.current = 1;
this.query.size = 10;
this.query.type = item.value
this.getLiset()
},
//
getLiset() {
findByType(this.query).then((res) => {
console.log(res);
if (res.code == 200) {
this.total = res.data.total
this.btmLise = res.data.records
this.loadingTow = false
}
})
},
gotoBgpage() {
if (this.input) {
console.log(this.searchList, 'this.searchList')
if (this.searchList.length == 1) {
console.log(this.getData.code, " this.getData");
if (this.searchList.length == 1 || this.getData.code) {
this.$router.push({ path: "/bgpage", query: { code: this.getData.code, name: this.getData.name, type: this.getData.type } })
this.searchList = [];
} else if (this.searchList.length > 1) {
@ -153,18 +313,20 @@ export default {
getValue(item) {
this.input = item.name;
this.getData = item;
setTimeout(() => {
this.dialog = false;
}, 200);
this.loading = true;
this.gotoBgpage()
},
async getsearchList(newValue) {
let data = await this.$api.productPortrayal.findByName({ name: newValue });
if (data.code == 200) {
async getsearchList() {
let res = await this.$api.productPortrayal.findByName({ name: this.input });
this.loading = false;
this.searchList = data.data;
if (this.searchList.length < 1) {
this.dialog = false;
}
this.searchList = res.data;
if(this.searchList.length>0){
this.loading = false
}else{
this.$modal.msgWarning("未搜索到结果!")
this.loading = true
}
},
tuichudengl() {
@ -184,7 +346,7 @@ export default {
.container {
width: 100vw;
height: 100vh;
min-height: 100vh;
padding: 10px 40px 0;
background-color: #000000;
position: relative;
@ -249,7 +411,7 @@ export default {
}
span {
font-size: 16px;
font-size: 18px;
font-family: SourceHanSansSC;
font-weight: bold;
color: #FEFFFF;
@ -285,18 +447,25 @@ export default {
}
.content-content {
height: 23vh;
position: relative;
}
.title {
margin-top: 250px;
margin-top: 60px;
color: #fff;
// display: flex;
// justify-content: center;
div {
position: relative;
z-index: 2;
padding-left: 50px;
text-align: center;
font-size: 48px;
font-family: Tensentype;
font-weight: normal;
font-weight: 700;
color: #FFFFFF;
line-height: 18px;
text-shadow: 0px 8px 16px rgba(24, 118, 172, 0.6);
@ -304,22 +473,25 @@ export default {
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
z-index: 20;
}
img {
width: 316px;
height: 316px;
position: absolute;
top: 220px;
left: 830px;
z-index: 1;
left: 50%;
transform: translate(-40%, -30%);
}
}
.content-bottom-box {
position: absolute;
top: 50%;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
.content-bottom {
position: relative;
@ -346,6 +518,8 @@ export default {
font-weight: 400;
color: #9CB4E2;
line-height: 18px;
overflow: hidden;
padding-right: 30px;
}
}
}
@ -383,7 +557,8 @@ export default {
top: 120px;
left: 10px;
padding: 2px;
background: linear-gradient(to right, rgba(24, 101, 242, 0.1), rgba(24, 101, 242, 0.1));
// background: linear-gradient(to right, rgba(24, 101, 242, 0.1), rgba(24, 101, 242, 0.1));
background: linear-gradient(to right, rgb(1, 2, 62), rgb(25, 31, 84));
overflow: scroll;
.dialog-item {
@ -406,12 +581,214 @@ export default {
}
}
.bottomList {
padding-left: 50px;
color: #fff;
.conbtm-item {
display: flex;
align-items: center;
margin: 20px 0;
color: #fff;
.conitem-bgimg {
width: 45px;
height: 45px;
font-size: 16px;
background-image: url("../assets/images/icon-type.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.conitme-title {
color: #f28221;
padding: 0 15px;
font-size: 17px;
text-align: justify;
/* 将文字两端对齐 */
.spantext {
display: inline-block;
width: 70px;
text-align: justify;
text-align-last: justify;
}
}
.conitme-right-item {
padding: 10px 20px;
background-color: #314b70;
margin-right: 1rem;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
&:hover {
background: #1d82dc;
}
}
.conitme-right-item-active {
background: #1d82dc;
}
}
.bottomListShow {
position: relative;
z-index: 200;
text-align: center;
margin-left: -60px;
.el-icon-d-arrow-left {
transform: rotate(90deg);
font-size: 16px;
margin-left: 5px;
}
::v-deep .el-button {
font-size: 16px;
background: #4ed4a4;
}
}
.listBottom {
.listBottom-title {
display: flex;
align-items: center;
.span1 {
width: 25px;
height: 20px;
background-image: url("../assets/images/icon-search.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: 10px;
}
.div1 {
color: #accbee;
font-size: 16px;
.span2 {
color: #0cc16e;
margin: 0 8px;
}
}
}
.listBottom-item {
width: 100%;
display: flex;
justify-content: space-between;
padding: 15px 20px;
color: #fff;
background: #1f3552;
border-radius: 10px;
margin: 15px 0;
.listitem-title {
width: 100%;
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 溢出部分隐藏 */
text-overflow: ellipsis;
font-weight: 700;
font-size: 18px;
}
.listBottom-item-left {
width: 40%;
.listitemleft-bottom {
margin-top: 20px;
color: #accbee;
font-size: 18px;
display: flex;
align-items: center;
.span1 {
margin-right: 10px;
display: flex;
align-items: center;
.span2 {
display: inline-block;
width: 200px;
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 溢出部分隐藏 */
text-overflow: ellipsis;
/* 显示省略号 */
}
}
}
}
.listBottom-item-right {
width: 50%;
.listitemright-bottom {
display: flex;
align-items: center;
.listitemright-bottom-item {
margin-top: 10px;
display: flex;
align-items: center;
font-size: 18px;
margin-right: 10px;
img {
width: 45px;
height: 45px;
margin-right: 10px;
}
span {
margin-left: 10px;
color: #35c4ff;
font-size: 28px;
font-weight: 700;
}
}
}
}
.listBottom-item-xiangqing {
display: flex;
align-items: center;
::v-deep .el-button {
font-size: 16px;
}
}
}
}
}
//
::v-deep .el-loading-mask {
background-color: rgba(205, 235, 243, 0.1);
}
//
// //
// ::v-deep .el-loading-spinner .path{
// stroke: #005432;
// }
@ -419,4 +796,3 @@ export default {
// ::v-deep .el-loading-spinner .el-loading-text{
// color: #005432;
// }</style>

@ -49,7 +49,7 @@ module.exports = {
}
},
"API": {
target: "https://dev-mssm-liaoning.imian.org.cn",
target: "https://dev-mssm-liaoning.lesdev.cn",
changeOrigin: true,
pathRewrite: {
["API"]: "",

Loading…
Cancel
Save