diff --git a/src/api/largeScreen/index.js b/src/api/largeScreen/index.js index 8aeacb0..ec2f433 100644 --- a/src/api/largeScreen/index.js +++ b/src/api/largeScreen/index.js @@ -47,4 +47,12 @@ export function getCPCJ(query) { method: 'get', params: query }) +} +//根据批准文号或备案编号以及类型查询产品详细信息 +export function getXXMSG(query) { + return request({ + url: '/ggfw-api/pharmaceuticals/largeScreen/findInfoByReq', + method: 'get', + params: query + }) } \ No newline at end of file diff --git a/src/views/bigpage/bigcomponents/AdverseBox.vue b/src/views/bigpage/bigcomponents/AdverseBox.vue index d231561..4b91dcd 100644 --- a/src/views/bigpage/bigcomponents/AdverseBox.vue +++ b/src/views/bigpage/bigcomponents/AdverseBox.vue @@ -1,6 +1,6 @@ @@ -68,11 +113,25 @@ export default { option1: {}, // echarts myChart1: {}, - blfxxx: {}, a1: 0, a2: 0, a3: 0, - center: ["30%", "50%"], + center: ["50%", "50%"], + pieData: [ + { + value: 0, + name: "一般不良反应", + }, + { + value: 0, + name: "严重不良反应", + }, + { + value: 0, + name: "发生死亡不良反应", + }, + ], + total: 0, }; }, created() {}, @@ -85,7 +144,23 @@ export default { if (newRouter.type == 1) { //药品 getDrugBL({ name: newRouter.code }).then((res) => { - console.log(res); + res.data.result.forEach((value, index) => { + this.pieData.forEach((value1, index1) => { + if (value.reportType == "一般" && value1.name == "一般不良反应") { + this.pieData[index1].value = value.reportCount; + } + if (value.reportType == "严重" && value1.name == "严重不良反应") { + this.pieData[index1].value = value.reportCount; + } + if ( + value.reportType != "一般" && + value.reportType != "严重" && + value1.name == "发生死亡不良反应" + ) { + this.pieData[index1].value = value.reportCount; + } + }); + }); this.$nextTick(() => { let chartDom = this.$refs["bottom-box"]; this.myChart1 = echarts.init(chartDom); @@ -95,17 +170,23 @@ export default { } if (newRouter.type != 1 && newRouter.type != 2) { //化妆品 - getCosmeticsBL().then((res) => { + getCosmeticsBL({ name: newRouter.code }).then((res) => { res.data.result.forEach((value, index) => { - if (value.reportType == "一般") { - this.a1 = value.reportCount; - } - if (value.reportType == "严重") { - this.a2 = value.reportCount; - } - if (value.reportType != "一般" && value.reportType != "严重") { - this.a3 = value.reportCount; - } + this.pieData.forEach((value1, index1) => { + if (value.reportType == "一般" && value1.name == "一般不良反应") { + this.pieData[index1].value = value.reportCount; + } + if (value.reportType == "严重" && value1.name == "严重不良反应") { + this.pieData[index1].value = value.reportCount; + } + if ( + value.reportType != "一般" && + value.reportType != "严重" && + value1.name == "发生死亡不良反应" + ) { + this.pieData[index1].value = value.reportCount; + } + }); }); this.$nextTick(() => { let chartDom = this.$refs["bottom-box"]; @@ -117,7 +198,26 @@ export default { if (newRouter.type == 2) { //医疗器械 getMedicalDevicesBL({ name: newRouter.code }).then((res) => { - console.log(res); + res.data.result.forEach((value, index) => { + this.pieData.forEach((value1, index1) => { + if ( + value.reportType == "严重伤害" && + value1.name == "严重不良反应" + ) { + this.pieData[index1].value = value.reportCount; + } + if (value.reportType == "其他" && value1.name == "一般不良反应") { + this.pieData[index1].value = value.reportCount; + } + if ( + value.reportType != "严重伤害" && + value.reportType != "其他" && + value1.name == "发生死亡不良反应" + ) { + this.pieData[index1].value = value.reportCount; + } + }); + }); this.$nextTick(() => { let chartDom = this.$refs["bottom-box"]; this.myChart1 = echarts.init(chartDom); @@ -128,116 +228,19 @@ export default { }, initEcharts() { this.option1 = { - grid: { - left: "10%", - top: 0, - bottom: 0, - right: "60%", - containLabel: true, - }, tooltip: { trigger: "item", formatter: "{b} : {c} ({d}%)", 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)" }, // 渐变结束色,逐渐透明 - ], - }, - }, - }, - }, - - data: [ - { - value: 10, - name: "一般不良反应", - }, - { - value: 5, - name: "严重不良反应", - }, - { - value: 15, - name: "发生死亡不良反应", - }, - ], - formatter: function (name) { - let data = [ - { - value: 10, - name: "一般不良反应", - }, - { - value: 5, - name: "严重不良反应", - }, - { - value: 15, - name: "发生死亡不良反应", - }, - ]; - - // 获取该选项在数据数组中的索引 - var index = data.findIndex(function (item) { - return item.name == name; - }); - - // 获取该选项的值 - var value = data[index].value; - - // 计算该选项的百分比 - var percent = - ( - (value / - data.reduce(function (sum, item) { - return sum + item.value; - }, 0)) * - 100 - ).toFixed(2) + "%"; - - // 返回自定义的显示内容 - return "{name|" + name + "}\n{percent|" + percent + "}"; - }, - }, polar: { center: this.center, color: "#0B3A72" }, angleAxis: { center: this.center, color: "#0B3A72" }, radiusAxis: { color: "#0B3A72", center: this.center, - min: 40, - max: 120, - interval: 20, + min: 10, + max: 70, + interval: 10, axisLine: { show: false, lineStyle: { @@ -267,8 +270,9 @@ export default { color: "#0B3A72", center: this.center, type: "pie", - radius: ["5%", "10%"], + radius: ["9%", "16%"], hoverAnimation: false, + tooltip: { show: false }, labelLine: { normal: { show: false, @@ -285,7 +289,7 @@ export default { value: 0, itemStyle: { normal: { - color: "#0B3E5E", + color: "#fff", }, }, }, @@ -294,7 +298,7 @@ export default { { center: this.center, type: "pie", - radius: ["100%", "99%"], + radius: ["96%", "95%"], color: "#0B3A72", hoverAnimation: false, labelLine: { @@ -324,7 +328,7 @@ export default { center: this.center, stack: "a", type: "pie", - radius: ["20%", "90%"], + radius: ["26%", "68%"], roseType: "area", zlevel: 10, label: { @@ -349,20 +353,7 @@ export default { show: false, }, }, - data: [ - { - value: 10, - name: "一般不良反应", - }, - { - value: 5, - name: "严重不良反应", - }, - { - value: 15, - name: "发生死亡不良反应", - }, - ], + data: this.pieData, }, ], }; @@ -374,9 +365,6 @@ export default { }; diff --git a/src/views/bigpage/bigcomponents/ChangeinformationList.vue b/src/views/bigpage/bigcomponents/ChangeinformationList.vue index 7b90b67..3266e22 100644 --- a/src/views/bigpage/bigcomponents/ChangeinformationList.vue +++ b/src/views/bigpage/bigcomponents/ChangeinformationList.vue @@ -1,13 +1,13 @@ @@ -73,10 +75,15 @@ export default { }, total: 0, load1: false, + height: 0, }; }, created() {}, mounted() { + this.$nextTick(() => { + this.height = + this.$refs.basic.offsetHeight - this.$refs.pagination.offsetHeight; + }); this.getList(); }, methods: { @@ -103,7 +110,7 @@ export default { .Basic-box { margin-top: 10px; width: 100%; - height: 300px; + height: calc(100% - 41px - 10px); // padding: 0 11px 11px 11px; overflow-y: auto; background-color: transparent; diff --git a/src/views/bigpage/bigcomponents/informationBox.vue b/src/views/bigpage/bigcomponents/informationBox.vue index 3ef268a..28dbe11 100644 --- a/src/views/bigpage/bigcomponents/informationBox.vue +++ b/src/views/bigpage/bigcomponents/informationBox.vue @@ -4,7 +4,17 @@
-
12
+ +
+ {{ countryC || 0 }} +
+
+
国家检测次数
@@ -13,11 +23,11 @@
- 1221111121212121 + {{ provinceC || 0 }}
@@ -26,8 +36,9 @@
-
12%
- +
+ {{ pt }}% +
抽检合格率
@@ -69,6 +80,13 @@ export default { // echarts myChart2: {}, //============== + provinceC: 0, + countryC: 0, + //合格率 + pt: 0, + //抽样类型 + sccy: 0, + ltcy: 0, }; }, created() {}, @@ -79,7 +97,18 @@ export default { getData() { let newRouter = this.$route.query; getCPCJ({ name: newRouter.code }).then((res) => { - console.log(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; this.$nextTick(() => { let chartDom = this.$refs["left-echart"]; this.myChart1 = echarts.init(chartDom); @@ -92,6 +121,7 @@ export default { }, initEcharts() { this.option1 = { + color: ["#007EFF", "#2CD8EC"], tooltip: { trigger: "item", // formatter: "{a}
{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容 @@ -111,20 +141,27 @@ export default { "padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;", // 设置提示框的样式 }, legend: { + orient: "horizontal", bottom: 0, - left: "center", + itemWidth: 10, + itemHeight: 10, + itemGap: 25, data: ["生产抽样环节", "流通环节抽样"], textStyle: { color: "auto", - fontSize: 14, + fontSize: 12, }, }, series: [ { name: "", type: "pie", - radius: ["50%", "70%"], + radius: ["45%", "70%"], center: ["50%", "40%"], // 调整 y 值为 '40%',使饼图向上位移 + // itemStyle:{ + // borderWidth:1, //设置border的宽度有多大 + // borderColor:'#fff', + // }, labelLine: { normal: { length: 15, // 指示线宽度 @@ -157,14 +194,14 @@ export default { { value: 39, name: "生产抽样环节", - percent: "39", - itemStyle: { color: "#007EFF" }, + // percent: "39", + // itemStyle: { color: "#007EFF" }, }, { value: 21, name: "流通环节抽样", - percent: "21", - itemStyle: { color: "#2CD8EC" }, + // percent: "21", + // itemStyle: { color: "#2CD8EC" }, }, ], }, @@ -205,7 +242,7 @@ export default { axisTick: { show: false, }, - data: ["辽宁", "黑龙江", "北京", "上海", "深圳", "苏州"], + data: ["辽宁", "江苏", "湖南", "山西", "湖北", "山东"], }, ], yAxis: [ @@ -237,7 +274,7 @@ export default { series: [ { type: "bar", - barWidth: "10", + barWidth: "16", itemStyle: { normal: { color: { @@ -247,13 +284,14 @@ export default { x2: 0, y2: 1, colorStops: [ + // background: linear-gradient(0deg, #21B5E1 100%); { offset: 0, color: "rgba(33,181,225,1)", // 起始颜色 }, { offset: 1, - color: "rgba(0,0,0,0.1)", // 结束颜色 + color: "rgba(6,31,55,0.1)", // 结束颜色 }, ], }, @@ -263,6 +301,7 @@ export default { // } }, }, + data: [12, 15, 17, 20, 25, 26], }, ], @@ -280,7 +319,7 @@ export default { .top-box { margin: 10px 0; height: 85px; - width: 100%F; + width: 100%; display: flex; justify-content: space-around; diff --git a/src/views/bigpage/bigcomponents/riskinformationList.vue b/src/views/bigpage/bigcomponents/riskinformationList.vue index ec4d61e..0e30dce 100644 --- a/src/views/bigpage/bigcomponents/riskinformationList.vue +++ b/src/views/bigpage/bigcomponents/riskinformationList.vue @@ -1,113 +1,110 @@ + background-color: rgba(0, 50, 150, 0.1) !important; +} + \ No newline at end of file diff --git a/src/views/bigpage/index.vue b/src/views/bigpage/index.vue index 204188c..bf4fa02 100644 --- a/src/views/bigpage/index.vue +++ b/src/views/bigpage/index.vue @@ -43,9 +43,7 @@
复方枸杞子胶囊
保健药 - 保健药 - 保健药 - 保健药 + OTC
@@ -58,7 +56,10 @@
-
+
@@ -73,6 +74,7 @@