suzhou-jichuang-lanhai
/
LiaoningChanpinHuaxiang
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'duhanyu' of http://39.101.188.84:8000/suzhou-jichuang-lanhai/LiaoningChanpinHuaxiang

Browse Source
duhanyu
李劲龙 1 year ago
parent 958c92c3c6 beb4149046
commit 93f3a9340c
9 changed files with 1337 additions and 1117 deletions
Show Stats Download Patch File Download Diff File

3
.env.development
Unescape View File

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

50
src/api/largeScreen/index.js
Unescape View File

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

65
src/utils/request.js
Unescape View File

@ -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参数
@ -61,46 +62,46 @@ service.interceptors.request.use(config => {
} }
return config return config
}, error => { }, error => {
console.log(error) console.log(error)
Promise.reject(error) Promise.reject(error)
}) })
// 响应拦截器 // 响应拦截器
service.interceptors.response.use(res => { service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态 // 未设置状态码则默认成功状态
const code = res.data.code || 200; const code = res.data.code || 200;
// 获取错误信息 // 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default'] const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回 // 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') { if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data return res.data
} }
if (code === 401) { if (code === 401) {
if (!isRelogin.show) { if (!isRelogin.show) {
isRelogin.show = true; isRelogin.show = true;
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
isRelogin.show = false; isRelogin.show = false;
store.dispatch('LogOut').then(() => { store.dispatch('LogOut').then(() => {
location.href = '/index'; location.href = '/index';
}) })
}).catch(() => { }).catch(() => {
isRelogin.show = false; isRelogin.show = false;
}); });
} }
return Promise.reject('无效的会话，或者会话已过期，请重新登录。') return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 500) { } else if (code === 500) {
Message({ message: msg, type: 'error' }) Message({ message: msg, type: 'error' })
return Promise.reject(new Error(msg)) return Promise.reject(new Error(msg))
} else if (code === 601) { } else if (code === 601) {
Message({ message: msg, type: 'warning' }) Message({ message: msg, type: 'warning' })
return Promise.reject('error') return Promise.reject('error')
} else if (code !== 200) { } else if (code !== 200) {
Notification.error({ title: msg }) Notification.error({ title: msg })
return Promise.reject('error') return Promise.reject('error')
} else { } else {
return res.data return res.data
} }
}, },
error => { error => {
console.log('err' + error) console.log('err' + error)
let { message } = error; let { message } = error;

859
src/views/bigpage/bigcomponents/AdverseBox.vue
Unescape View File

@ -1,448 +1,491 @@
<template> <template>
<div class="box"> <div class="box">
<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>
</div> <span>不良反应</span>
<div class="topbox-item-content">
<div class="topbox-itemleft-color">12121111111111111111</div> <span>例</span>
</div>
<div class="topbox-item-right">
<div>较去年</div> <span class="spanshang">↑</span> <span class="spanxia">↓</span>
</div>
</div>
<div class="topbox-item">
<div class="topbox-item-left">
<div class="topbox-itemleft-img"></div> <span>严重不良反应</span>
</div>
<div class="topbox-item-content">
<div class="topbox-itemleft-color">1212</div> <span>例</span>
</div>
<div class="topbox-item-right">
<div>较去年</div><span class="spanshang">↑</span> <span class="spanxia">↓</span>
</div>
</div>
<div class="topbox-item">
<div class="topbox-item-left">
<div class="topbox-itemleft-img"></div> <span>发生死亡不良反应</span>
</div>
<div class="topbox-item-content">
<div class="topbox-itemleft-color">1212</div> <span>例</span>
</div>
<div class="topbox-item-right">
<div>较去年</div> <span class="spanshang">↑</span> <span class="spanxia">↓</span>
</div>
</div>
</div> </div>
<div class="bottom-box" ref="bottom-box"> <div class="topbox-item-content">
<div class="topbox-itemleft-color">12121111111111111111</div>
<span>例</span>
</div>
<div class="topbox-item-right">
<div>较去年</div>
<span class="spanshang">↑</span> <span class="spanxia">↓</span>
</div>
</div>
<div class="topbox-item">
<div class="topbox-item-left">
<div class="topbox-itemleft-img"></div>
<span>严重不良反应</span>
</div>
<div class="topbox-item-content">
<div class="topbox-itemleft-color">1212</div>
<span>例</span>
</div>
<div class="topbox-item-right">
<div class="redStyle">较去年</div>
<span class="spanshang">↑</span> <span class="spanxia">↓</span>
</div>
</div>
<div class="topbox-item">
<div class="topbox-item-left">
<div class="topbox-itemleft-img"></div>
<span>发生死亡不良反应</span>
</div>
<div class="topbox-item-content">
<div class="topbox-itemleft-color">1212</div>
<span>例</span>
</div> </div>
<div class="topbox-item-right">
<div class="redStyle">较去年</div>
<span class="spanshang">↑</span> <span class="spanxia">↓</span>
</div>
</div>
</div> </div>
<div class="bottom-box" ref="bottom-box"></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 {
option1: {}, option1: {},
// 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(() => { 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();
}); });
})
getMedicalDevicesBL({}).then(res=>{
this.$nextTick(() => {
let chartDom = this.$refs["bottom-box"];
this.myChart1 = echarts.init(chartDom);
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: {
type: "scroll",
orient: "vartical",
top: "center",
right: "20",
itemWidth: 10,
itemHeight: 8,
itemGap: 16,
icon: "circle",
textStyle: {
color: "#A3E2F4",
fontSize: 12,
fontWeight: 0,
rich: {
name: {
fontSize: 12,
padding: [25, 0, 5, 0], //图例位置
},
percent: {
fontSize: 12,
color: "#ccc",
width: 80, // 设置宽度
height: 20, // 设置高度
backgroundColor: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(36, 64, 97, 1)" }, // 渐变起始色，淡白色
{ offset: 1, color: "rgba(36, 64, 97, 0)" }, // 渐变结束色，逐渐透明
],
}, },
legend: { },
type: "scroll", },
orient: "vartical", },
top: "center",
right: "20", data: [
itemWidth: 10, {
itemHeight: 8, value: 10,
itemGap: 16, name: "一般不良反应",
icon: "circle", },
textStyle: { {
color: '#A3E2F4', value: 5,
fontSize: 12, name: "严重不良反应",
fontWeight: 0, },
rich: { {
name: { value: 15,
fontSize: 12, name: "发生死亡不良反应",
padding: [25, 0, 5, 0],//图例位置 },
}, ],
percent: { formatter: function (name) {
fontSize: 12, let data = [
color: '#ccc', {
width: 80, // 设置宽度 value: 10,
height: 20, // 设置高度 name: "一般不良反应",
backgroundColor: { },
type: 'linear', {
x: 0, value: 5,
y: 0, name: "严重不良反应",
x2: 1, },
y2: 0, {
colorStops: [ value: 15,
{ offset: 0, color: 'rgba(36, 64, 97, 1)' }, // 渐变起始色，淡白色 name: "发生死亡不良反应",
{ offset: 1, color: 'rgba(36, 64, 97, 0)' } // 渐变结束色，逐渐透明 },
], ];
} // 获取该选项在数据数组中的索引
var index = data.findIndex(function (item) {
return item.name == name;
} });
}
}, // 获取该选项的值
var value = data[index].value;
data: [{
value: 10, // 计算该选项的百分比
name: '一般不良反应' var percent =
}, (
{ (value /
value: 5, data.reduce(function (sum, item) {
name: '严重不良反应' return sum + item.value;
}, }, 0)) *
{ 100
value: 15, ).toFixed(2) + "%";
name: '发生死亡不良反应'
}, // 返回自定义的显示内容
return "{name|" + name + "}\n{percent|" + percent + "}";
], },
formatter: function (name) { },
let data = [{ polar: { center: this.center, color: "#0B3A72" },
value: 10, angleAxis: { center: this.center, color: "#0B3A72" },
name: '一般不良反应' radiusAxis: {
}, color: "#0B3A72",
{ center: this.center,
value: 5, min: 40,
name: '严重不良反应' max: 120,
}, interval: 20,
{ axisLine: {
value: 15, show: false,
name: '发生死亡不良反应' lineStyle: {
}, color: "#0B3E5E",
width: 1,
] type: "solid",
},
// 获取该选项在数据数组中的索引 },
var index = data.findIndex(function (item) { axisLabel: {
return item.name == name; formatter: "{value} %",
}); show: false,
padding: [0, 0, 20, 0],
// 获取该选项的值 color: "#0B3E5E",
var value = data[index].value; fontSize: 16,
},
// 计算该选项的百分比 splitLine: {
var percent = (value / data.reduce(function (sum, item) { lineStyle: {
return sum + item.value; color: "#0B3E5E",
}, 0) * 100).toFixed(2) + '%'; width: 2,
type: "solid",
// 返回自定义的显示内容 },
return '{name|' + name + '}\n{percent|' + percent + '}'; },
}, },
calculable: true,
series: [
{
color: "#0B3A72",
center: this.center,
type: "pie",
radius: ["5%", "10%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 30,
length2: 55,
},
emphasis: {
show: false,
},
},
data: [
{
name: "",
value: 0,
itemStyle: {
normal: {
color: "#0B3E5E",
},
}, },
polar: { center: this.center, color: "#0B3A72", }, },
angleAxis: { center: this.center, color: "#0B3A72", }, ],
radiusAxis: { },
{
center: this.center,
type: "pie",
radius: ["100%", "99%"],
color: "#0B3A72",
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 30,
length2: 55,
},
emphasis: {
show: false,
},
},
name: "",
data: [
{
name: "",
value: 0,
itemStyle: {
normal: {
color: "#0B3A72", color: "#0B3A72",
center: this.center, },
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
lineStyle: {
color: "#0B3E5E",
width: 1,
type: "solid"
},
},
axisLabel: {
formatter: '{value} %',
show: false,
padding: [0, 0, 20, 0],
color: "#0B3E5E",
fontSize: 16
},
splitLine: {
lineStyle: {
color: "#0B3E5E",
width: 2,
type: "solid"
}
}
}, },
calculable: true, },
series: [{ ],
color: "#0B3A72", },
center: this.center, {
type: 'pie', center: this.center,
radius: ["5%", "10%"], stack: "a",
hoverAnimation: false, type: "pie",
labelLine: { radius: ["20%", "90%"],
normal: { roseType: "area",
show: false, zlevel: 10,
length: 30, label: {
length2: 55 normal: {
}, show: false,
emphasis: { formatter: "",
show: false textStyle: {
} fontSize: 12,
}, },
data: [{ },
name: '', emphasis: {
value: 0, show: true,
itemStyle: { },
normal: { },
color: "#0B3E5E" labelLine: {
} normal: {
} show: false,
}] length: 200,
}, { length2: 55,
center: this.center, },
type: 'pie', emphasis: {
radius: ["100%", "99%"], show: false,
color: "#0B3A72", },
hoverAnimation: false, },
labelLine: { data: [
normal: { {
show: false, value: 10,
length: 30, name: "一般不良反应",
length2: 55 },
}, {
emphasis: { value: 5,
show: false name: "严重不良反应",
} },
}, {
name: "", value: 15,
data: [{ name: "发生死亡不良反应",
name: '', },
value: 0, ],
itemStyle: { },
normal: { ],
color: "#0B3A72" };
}
} this.myChart1.setOption(this.option1);
}]
}, {
center: this.center,
stack: 'a',
type: 'pie',
radius: ['20%', '90%'],
roseType: 'area',
zlevel: 10,
label: {
normal: {
show: false,
formatter: "",
textStyle: {
fontSize: 12,
},
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: false,
length: 200,
length2: 55
},
emphasis: {
show: false
}
},
data: [{
value: 10,
name: '一般不良反应'
},
{
value: 5,
name: '严重不良反应'
},
{
value: 15,
name: '发生死亡不良反应'
},
]
}]
};
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 {
background: linear-gradient(0deg, #ffffff 0%, #bf6e35 100%);
}
}
.topbox-itemleft-color { &:nth-child(3) {
background: linear-gradient(0deg, #FFFFFF 0%, #BF6E35 100%); .topbox-itemleft-img {
} background: url("../../../assets/images/daping/buliang3.png");
} }
&:nth-child(3) { .topbox-itemleft-color {
.topbox-itemleft-img { background: linear-gradient(0deg, #ffffff 0%, #f04f50 100%);
background: url('../../../assets/images/daping/buliang3.png'); }
}
} display: flex;
align-items: center;
height: 40px;
width: 98%;
background: url("../../../assets/images/daping/toushi.png");
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
> div {
display: flex;
align-items: center;
}
.topbox-itemleft-color { .topbox-item-left {
background: linear-gradient(0deg, #FFFFFF 0%, #F04F50 100%); margin-left: 20px;
} flex: 1.9;
}
display: flex; .topbox-itemleft-img {
align-items: center; width: 20px;
height: 40px; height: 20px;
width: 98%;
background: url('../../../assets/images/daping/toushi.png');
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom; margin-right: 10px;
}
>div {
display: flex; span {
align-items: center; font-size: 14px;
} font-family: Alibaba PuHuiTi;
font-weight: 400;
.topbox-item-left { color: #b7d4f5;
margin-left: 20px; line-height: 50px;
flex: 1.9; }
}
.topbox-itemleft-img {
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 10px;
}
span {
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #B7D4F5;
line-height: 50px;
}
}
.topbox-item-content {
flex: 1.5;
.topbox-itemleft-color {
max-width: 110px;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 溢出内容隐藏 */
text-overflow: ellipsis;
/* 显示省略号 */
font-size: 26px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #FFFFFF;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 5px;
}
span {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #B7D4F5;
line-height: 50px;
opacity: 0.5;
}
}
.topbox-item-right {
flex: 1;
div {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #FFFFFF;
background: linear-gradient(0deg, #FFFFFF 0%, #26E0C4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 5px;
}
span {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
}
.spanshang {
color: #26E0C4
}
.spanxia { .topbox-item-content {
color: #DA1B1B flex: 1.5;
}
} .topbox-itemleft-color {
max-width: 110px;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 溢出内容隐藏 */
text-overflow: ellipsis;
/* 显示省略号 */
font-size: 26px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 5px;
}
span {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #b7d4f5;
line-height: 50px;
opacity: 0.5;
}
}
.topbox-item-right {
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 {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
background: linear-gradient(0deg, #ffffff 0%, #26e0c4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 5px;
}
span {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
}
.spanshang {
color: #26e0c4;
}
.spanxia {
color: #da1b1b;
}
} }
}
} }
.bottom-box { .bottom-box {
height: 170px; height: 170px;
width: 100%; width: 100%;
} }
</style> </style>

160
src/views/bigpage/bigcomponents/ChangeinformationList.vue
Unescape View File

@ -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" prop: "bgsx",
}, { label: "变更事项",
data: "审批类变更概述", },
name: "-", {
address: "2022-06-08" prop: "bgsj",
}, label: "变更时间",
{ // width: "100",
data: "审批类变更概述", },
name: "-", ],
address: "2022-06-08" // tableHeader2: [
}, // {
{ // prop: "bgxm",
data: "审批类变更概述", // label: "变更内容",
name: "-", // },
address: "2022-06-08" // {
// 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,
background-color: transparent; .el-table__expanded-cell {
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>

645
src/views/bigpage/bigcomponents/informationBox.vue
Unescape View File

@ -1,360 +1,381 @@
<template> <template>
<div class="box"> <div class="box">
<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>12</span> <span>次</span></div> <div class="topBOxitem-top"><span>12</span> <span>次</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">
<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"
</el-tooltip> effect="dark"
content="1221111121212121"
placement="top-start"
<div class="topBOxitem-bottom">国家检测次数</div> >
</div> <div class="topBOxitem-top">
<span>1221111121212121</span> <span>次</span>
</div> </div>
<div class="topbox-item"> </el-tooltip>
<div class="topBOxitem">
<div class="topBOxitem-top"> <span>12%</span> </div>
<div class="topBOxitem-bottom">国家检测次数</div> <div class="topBOxitem-bottom">省级抽检次数</div>
</div>
</div>
</div> </div>
<div class="bottom-content"> </div>
<div class="left-echart" ref="left-echart"></div> <div class="topbox-item">
<div class="right-echart" ref="right-echart"></div> <div class="topBOxitem">
<div class="topBOxitem-top"><span>12%</span></div>
<div class="topBOxitem-bottom">抽检合格率</div>
</div> </div>
</div>
</div> </div>
<div class="bottom-content">
<div class="left-echart" ref="left-echart"></div>
<div class="right-echart" ref="right-echart"></div>
</div>
</div>
</template> </template>
<script> <script>
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",
jcaddress: "省级检测次数",
},
{
order: "14",
jcaddress: "抽检合格率",
},
],
option1: {},
// echarts
myChart1: {},
option2: {},
// echarts
myChart2: {},
//==============
};
},
created() {},
mounted() {
this.$nextTick(() => {
let chartDom = this.$refs["left-echart"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
let chartDom2 = this.$refs["right-echart"];
this.myChart2 = echarts.init(chartDom2);
this.initEcharts2();
});
},
methods: {
initEcharts() {
this.option1 = {
tooltip: {
trigger: "item",
// formatter: "{a} <br/>{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容
formatter: function (params) {
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;", // 设置提示框的样式
},
legend: {
bottom: 0,
left: "center",
data: ["生产抽样环节", "流通环节抽样"],
textStyle: {
color: "auto",
fontSize: 14,
},
},
series: [
{
name: "",
type: "pie",
radius: ["50%", "70%"],
center: ["50%", "40%"], // 调整 y 值为 '40%'，使饼图向上位移
labelLine: {
normal: {
length: 15, // 指示线宽度
position: "outer", // 将标签线放在扇区外部转折点
lineStyle: function (params) {
// 根据数据项的颜色动态设置文字颜色
return {
color: params.color,
fontSize: 14,
};
}, },
{ },
order: "31", },
jcaddress: "省级检测次数" label: {
normal: {
// 各分区的提示内容
// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
formatter: function (params) {
return params.percent + "%";
}, },
{ textStyle: {
order: "14", color: "auto",
jcaddress: "抽检合格率" fontSize: 14,
}, },
},
},
data: [
// 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
// 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
{
value: 39,
name: "生产抽样环节",
percent: "39",
itemStyle: { color: "#007EFF" },
},
{
value: 21,
name: "流通环节抽样",
percent: "21",
itemStyle: { color: "#2CD8EC" },
},
], ],
},
],
};
option1: {}, this.myChart1.setOption(this.option1);
// echarts
myChart1: {},
option2: {},
// echarts
myChart2: {},
}
},
created() { },
mounted() {
this.$nextTick(() => {
let chartDom = this.$refs["left-echart"];
this.myChart1 = echarts.init(chartDom);
this.initEcharts();
let chartDom2 = this.$refs["right-echart"];
this.myChart2 = echarts.init(chartDom2);
this.initEcharts2();
});
}, },
methods: { initEcharts2() {
initEcharts() { this.option2 = {
this.option1 = { backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
tooltip: {},
tooltip: { grid: {
trigger: 'item', top: "8%",
// formatter: "{a} <br/>{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容 left: "10%",
formatter: function (params) { right: "10%",
return '<div style="line-height: 1;">' + params.marker + params.name + ': ' + params.value + ' (' + params.percent + '%)</div>'; bottom: "8%",
}, containLabel: true,
extraCssText: 'padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;' // 设置提示框的样式
},
legend: {
bottom: 0,
left: 'center',
data: ['生产抽样环节', '流通环节抽样',],
textStyle: {
color: 'auto',
fontSize: 14
}
},
series: [{
name: '',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'], // 调整 y 值为 '40%'，使饼图向上位移
labelLine: {
normal: {
length: 15, // 指示线宽度
position: 'outer', // 将标签线放在扇区外部转折点
lineStyle: function (params) { // 根据数据项的颜色动态设置文字颜色
return {
color: params.color,
fontSize: 14
}
}
},
},
label: {
normal: {
// 各分区的提示内容
// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
formatter: function (params) {
return params.percent + "%"
},
textStyle: {
color: 'auto',
fontSize: 14
}
}
},
data: [
// 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
// 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
{ value: 39, name: '生产抽样环节', percent: '39', itemStyle: { color: '#007EFF' } },
{ value: 21, name: '流通环节抽样', percent: '21', itemStyle: { color: '#2CD8EC' } },
]
}]
};
this.myChart1.setOption(this.option1);
}, },
initEcharts2() { xAxis: [
this.option2 = { {
backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景 type: "category",
tooltip: {}, boundaryGap: true,
grid: {
top: '8%', axisLine: {
left: '10%', show: false, // 隐藏 x 轴线
right: '10%', lineStyle: {
bottom: '8%', color: "#233e64",
containLabel: true, },
}, },
xAxis: [{ axisLabel: {
type: 'category', textStyle: {
boundaryGap: true, color: "#B7D4F5",
fontSize: 12,
axisLine: { margin: 0,
show: false, // 隐藏 x 轴线 },
lineStyle: { },
color: '#233e64' axisTick: {
}, show: false,
}, },
axisLabel: { data: ["辽宁", "黑龙江", "北京", "上海", "深圳", "苏州"],
textStyle: { },
color: "#B7D4F5", ],
fontSize: 12, yAxis: [
margin: 0, {
}, show: true,
}, type: "value",
axisTick: { name: "123",
show: false, splitLine: {
}, show: true, // 显示背后的横线
data: ['辽宁', '黑龙江', '北京', '上海', '深圳', '苏州'], lineStyle: {
}], color: "#233e64",
yAxis: [{ type: "dashed", // 可以设置为实线或虚线
show: true, },
type: 'value', },
name: '123', axisLine: {
splitLine: { show: false, // 隐藏 y 轴线
show: true, // 显示背后的横线 },
lineStyle: { axisLabel: {
color: '#233e64', margin: 20,
type: 'dashed' // 可以设置为实线或虚线 textStyle: {
} color: "#6a9cd5",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(33,181,225,1)", // 起始颜色
}, },
axisLine: { {
show: false, // 隐藏 y 轴线 offset: 1,
color: "rgba(0,0,0,0.1)", // 结束颜色
}, },
axisLabel: { ],
margin: 20, },
textStyle: { // label: {
color: '#6a9cd5', // show: true,
}, // position: 'top'
}, // }
axisTick: { },
show: false, },
}, data: [12, 15, 17, 20, 25, 26],
}], },
series: [{ ],
type: 'bar', };
barWidth: '10', this.myChart2.setOption(this.option2);
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'
// }
}
},
data: [12, 15, 17, 20, 25, 26]
}]
};
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;
height: 85px; height: 85px;
width: 100%F; width: 100%F;
display: flex;
justify-content: space-around;
.topbox-item {
width: 240px;
display: flex; display: flex;
justify-content: space-around; flex-direction: row-reverse;
align-items: center;
.topbox-item { padding-right: 30px;
width: 240px;
display: flex; &:nth-of-type(1) {
flex-direction: row-reverse; background: url("../../../assets/images/daping/jiance1.png");
align-items: center; background-size: contain;
padding-right: 30px; background-repeat: no-repeat;
&:nth-of-type(1) { .topBOxitem-top {
background: url('../../../assets/images/daping/jiance1.png'); :nth-of-type(1) {
background-size: contain; background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
background-repeat: no-repeat;
.topBOxitem-top {
:nth-of-type(1) {
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 {
:nth-of-type(1) {
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
}
}
.topBOxitem-top {
:nth-of-type(1) {
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 {
: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 { .topBOxitem {
margin-top: -40px; margin-top: -40px;
.topBOxitem-top {
display: flex;
align-items: center;
:nth-of-type(1) {
display: block;
max-width: 90px;
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;
}
:nth-of-type(2) {
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #FFFFFF;
opacity: 0.5;
}
}
.topBOxitem-bottom { .topBOxitem-top {
font-size: 16px; display: flex;
font-family: Alibaba PuHuiTi; align-items: center;
font-weight: 400;
color: #FFFFFF;
}
:nth-of-type(1) {
display: block;
max-width: 90px;
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;
} }
:nth-of-type(2) {
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
opacity: 0.5;
}
}
.topBOxitem-bottom {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
} }
}
} }
.bottom-content { .bottom-content {
height: 210px; height: 210px;
display: flex; display: flex;
.left-echart {
flex: 0.7;
}
.right-echart {
flex: 1.3;
}
.left-echart {
flex: 0.7;
}
.right-echart {
flex: 1.3;
}
} }
</style> </style>

471
src/views/bigpage/bigcomponents/recallbox.vue
Unescape View File

@ -1,276 +1,279 @@
<template> <template>
<div class="box"> <div class="box">
<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">
<div class="topBOxitem-bottom">召回次数</div> <span>{{ zhcs || 0 }}</span>
</div> </div>
</div> <div class="topBOxitem-bottom">召回次数</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> </div>
<div class="bottom-content"> </div>
<div class="right-echart" ref="right-echart"></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>
<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>
</div>
</template> </template>
<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: [ option2: {},
{ myChart2: {},
order: "12", zhcs: 0,
jcaddress: "国家检测次数" cpzhbs: 0,
}, cpzhcs: 0,
{ pieData: [],
order: "31", };
jcaddress: "省级检测次数" },
}, created() {},
{ mounted() {
order: "14", this.getData();
jcaddress: "抽检合格率" },
}, methods: {
], getData() {
getRecall({ name: "国药准字B20020034" }).then((res) => {
this.zhcs = res.data.cpzhcs;
this.cpzhbs = res.data.zhcppc;
option2: {}, this.cpzhcs = res.data.cpzhl;
// echarts let arr = res.data.list;
myChart2: {}, arr.sort(function (a, b) {
} return a.recallLevel - b.recallLevel;
}, });
created() { }, arr.forEach((value, index) => {
mounted() { this.pieData.push(value.total);
});
this.$nextTick(() => { this.$nextTick(() => {
let chartDom2 = this.$refs["right-echart"];
this.myChart2 = echarts.init(chartDom2);
let chartDom2 = this.$refs["right-echart"]; this.initEcharts2();
this.myChart2 = echarts.init(chartDom2);
this.initEcharts2();
}); });
});
}, },
methods: { initEcharts2() {
this.option2 = {
initEcharts2() { backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
this.option2 = { tooltip: {},
backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景 grid: {
tooltip: {}, top: "8%",
grid: { left: "0%",
top: '8%', right: "5%",
left: '0%', bottom: "0%",
right: '5%', containLabel: true,
bottom: '0%', },
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: { textStyle: {
textStyle: { color: "#B7D4F5",
color: "#B7D4F5", fontSize: 12,
fontSize: 12, margin: 0,
margin: 0, },
}, },
}, axisTick: {
axisTick: { show: false,
show: false, },
}, data: ["一级召回", "二级召回", "三级召回"],
data: ['一级召回', '二级召回', '三级召回'], },
}], ],
yAxis: [{ yAxis: [
show: true, {
type: 'value', show: true,
name: '123', type: "value",
splitLine: { name: "123",
show: true, // 显示背后的横线 splitLine: {
lineStyle: { show: true, // 显示背后的横线
color: '#233e64', lineStyle: {
type: 'dashed' // 可以设置为实线或虚线 color: "#233e64",
} type: "dashed", // 可以设置为实线或虚线
}, },
axisLine: { },
show: false, // 隐藏 y 轴线 axisLine: {
}, show: false, // 隐藏 y 轴线
axisLabel: { },
margin: 20, axisLabel: {
textStyle: { margin: 20,
color: '#6a9cd5', textStyle: {
}, color: "#6a9cd5",
}, },
axisTick: { },
show: false, 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: [{ offset: 1,
type: 'bar', color: "rgba(0,0,0,0.1)", // 结束颜色
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'
// }
}
}, },
data: [12, 15, 17] ],
}] },
}; // label: {
this.myChart2.setOption(this.option2); // show: true,
}, // position: 'top'
// }
},
},
data: this.pieData,
},
],
};
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;
height: 85px; height: 85px;
width: 100%; width: 100%;
display: flex;
justify-content: space-between;
.topbox-item {
width: 240px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
.topbox-item { &:nth-of-type(1) {
width: 240px; background: url("../../../assets/images/daping/zhaohuicishu.png");
display: flex; background-size: 100% 100%;
justify-content: space-between; background-repeat: no-repeat;
align-items: center; background-position: 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%);
}
}
.topBOxitem-top {
:nth-of-type(1) {
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;
.topBOxitem-top { background-repeat: no-repeat;
:nth-of-type(1) {
background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
}
}
.topBOxitem-top {
:nth-of-type(1) {
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%);
}
}
} }
}
}
.topBOxitem { .topBOxitem {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.topBOxitem-top { .topBOxitem-top {
:nth-of-type(1) { :nth-of-type(1) {
display: block; display: block;
max-width: 130px; max-width: 130px;
white-space: nowrap; white-space: nowrap;
/* 不换行 */ /* 不换行 */
overflow: hidden; overflow: hidden;
/* 溢出内容隐藏 */ /* 溢出内容隐藏 */
text-overflow: ellipsis; text-overflow: ellipsis;
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;
}
}
.topBOxitem-bottom {
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #FFFFFF;
}
} }
}
.topBOxitem-bottom {
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
} }
}
} }
.bottom-content { .bottom-content {
height: 210px; height: 210px;
display: flex; display: flex;
.right-echart {
flex: 1.3;
}
.right-echart {
flex: 1.3;
}
} }
</style> </style>

2
src/views/bigpage/index.vue
Unescape View File

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

199
src/views/components/Pagination.vue
Unescape View File

@ -1,87 +1,154 @@
<template> <template>
<div class="box"> <div class="box">
<el-pagination <el-pagination
background background
layout="->,prev, total,pager, next,jumper" :current-page.sync="currentPage"
:total="1000" :page-size.sync="pageSize"
:page-size="3" layout="->,prev, total,pager, next,jumper"
:pager-count="5" :page-sizes="pageSizes"
small :pager-count="pagerCount"
> :total="total"
</el-pagination> @size-change="handleSizeChange"
</div> @current-change="handleCurrentChange"
small
>
</el-pagination>
</div>
</template> </template>
<script> <script>
import { scrollTo } from "@/utils/scroll-to";
export default { export default {
name: '', name: "Pagination",
components: {}, props: {
data () { total: {
return { 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 () { }, data() {
mounted () { }, return {};
methods: { }, },
computed: {} 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> </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 {
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> </style>

Write Preview
Loading…
Cancel
Save