From beb4149046a27c78c25359ae0991c69fa3088e78 Mon Sep 17 00:00:00 2001
From: dhy1725534722 <1725534722@qq.com>
Date: Fri, 27 Oct 2023 09:06:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/largeScreen/index.js                  |  50 +-
 src/permission.js                             |   2 +-
 src/utils/request.js                          |   1 +
 .../bigpage/bigcomponents/AdverseBox.vue      | 859 +++++++++---------
 .../bigcomponents/ChangeinformationList.vue   | 160 ++--
 .../bigpage/bigcomponents/informationBox.vue  | 645 ++++++-------
 src/views/bigpage/bigcomponents/recallbox.vue | 466 +++++-----
 src/views/bigpage/index.vue                   |   2 -
 src/views/components/Pagination.vue           | 199 ++--
 9 files changed, 1300 insertions(+), 1084 deletions(-)

diff --git a/src/api/largeScreen/index.js b/src/api/largeScreen/index.js
index 7552cd6..8aeacb0 100644
--- a/src/api/largeScreen/index.js
+++ b/src/api/largeScreen/index.js
@@ -2,9 +2,49 @@ import request from '@/utils/request'
 
 // 根据批准文号或备案编号查询召回信息
 export function getRecall(query) {
-  return request({
-    url: '/ggfw-api/pharmaceuticals/largeScreen/findRecallByName',
-    method: 'get',
-    params: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
+    })
 }
\ No newline at end of file
diff --git a/src/permission.js b/src/permission.js
index c0d24f2..04099c9 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -11,7 +11,7 @@ NProgress.configure({ showSpinner: false })
 const whiteList = ['/login', '/register']
 
 router.beforeEach((to, from, next) => {
-  setToken()
+  setToken('UT:f7d012aa-8291-494c-a984-70793cef9ccf')
   NProgress.start()
   next()
 })
diff --git a/src/utils/request.js b/src/utils/request.js
index 796d765..9e5eadb 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -27,6 +27,7 @@ service.interceptors.request.use(config => {
   // 是否需要防止数据重复提交
   const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
   if (getToken() && !isToken) {
+    // config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
     config.headers['Authentication'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
   // get请求映射params参数
diff --git a/src/views/bigpage/bigcomponents/AdverseBox.vue b/src/views/bigpage/bigcomponents/AdverseBox.vue
index 46d1a37..fb3fbd2 100644
--- a/src/views/bigpage/bigcomponents/AdverseBox.vue
+++ b/src/views/bigpage/bigcomponents/AdverseBox.vue
@@ -1,448 +1,491 @@
 
 <template>
-    <div class="box">
-        <div class="top-box">
-            <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">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 class="box">
+    <div class="top-box">
+      <div class="topbox-item">
+        <div class="topbox-item-left">
+          <div class="topbox-itemleft-img"></div>
+          <span>不良反应</span>
         </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 class="topbox-item-right">
+          <div class="redStyle">较去年</div>
+          <span class="spanshang">↑</span> <span class="spanxia">↓</span>
+        </div>
+      </div>
     </div>
+    <div class="bottom-box" ref="bottom-box"></div>
+  </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
+import {
+  getCosmeticsBL,
+  getMedicalDevicesBL,
+  getDrugBL,
+} from "@/api/largeScreen";
 
 export default {
-    name: '',
-    components: {},
-    data() {
-        return {
-            option1: {},
-            // echarts
-            myChart1: {},
-            center: ["18%", "50%"],
-        }
-    },
-    created() { },
-    mounted() {
+  name: "",
+  components: {},
+  data() {
+    return {
+      option1: {},
+      // echarts
+      myChart1: {},
+      center: ["18%", "50%"],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getDrugBL({ name: "国药准字B20020034" }).then((res) => {
+        this.$nextTick(() => {
+          let chartDom = this.$refs["bottom-box"];
+          this.myChart1 = echarts.init(chartDom);
+          this.initEcharts();
+        });
+      });
+      getCosmeticsBL({}).then(res=>{
         this.$nextTick(() => {
-            let chartDom = this.$refs["bottom-box"];
-            this.myChart1 = echarts.init(chartDom);
-            this.initEcharts();
+          let chartDom = this.$refs["bottom-box"];
+          this.myChart1 = echarts.init(chartDom);
+          this.initEcharts();
         });
+      })
+      getMedicalDevicesBL({}).then(res=>{
+        this.$nextTick(() => {
+          let chartDom = this.$refs["bottom-box"];
+          this.myChart1 = echarts.init(chartDom);
+          this.initEcharts();
+        });
+      })
     },
-    methods: {
-        initEcharts() {
-            this.option1 = {
-                grid: {
-                    left: '10%',
-                    top: 0,
-                    bottom: 0,
-                    right: '60%',
-                    containLabel: true
-                },
-                tooltip: {
-                    trigger: 'item',
-                    formatter: "{b} : {c} ({d}%)",
-                    position: 'right'
+    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)" }, // 渐变结束色，逐渐透明
+                  ],
                 },
-                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 + '}';
-                    },
-
+              },
+            },
+          },
+
+          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,
+          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",
+            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",
-                    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',
-                    radius: ["5%", "10%"],
-                    hoverAnimation: false,
-                    labelLine: {
-                        normal: {
-                            show: false,
-                            length: 30,
-                            length2: 55
-                        },
-                        emphasis: {
-                            show: false
-                        }
-                    },
-                    data: [{
-                        name: '',
-                        value: 0,
-                        itemStyle: {
-                            normal: {
-                                color: "#0B3E5E"
-                            }
-                        }
-                    }]
-                }, {
-                    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"
-                            }
-                        }
-                    }]
-                }, {
-                    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);
-        },
+              },
+            ],
+          },
+          {
+            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>
 <style scoped lang='scss'>
-.box {}
+.box {
+}
 
 .top-box {
-    .topbox-item {
-        &:nth-child(1) {
-            .topbox-itemleft-img {
-                background: url('../../../assets/images/daping/buliang1.png');
-
-            }
-
-            .topbox-itemleft-color {
-                background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
-            }
-        }
+  .topbox-item {
+    &:nth-child(1) {
+      .topbox-itemleft-img {
+        background: url("../../../assets/images/daping/buliang1.png");
+      }
+
+      .topbox-itemleft-color {
+        background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
+      }
+    }
 
-        &:nth-child(2) {
-            .topbox-itemleft-img {
-                background: url('../../../assets/images/daping/buliang2.png');
+    &:nth-child(2) {
+      .topbox-itemleft-img {
+        background: url("../../../assets/images/daping/buliang2.png");
+      }
 
-            }
+      .topbox-itemleft-color {
+        background: linear-gradient(0deg, #ffffff 0%, #bf6e35 100%);
+      }
+    }
 
-            .topbox-itemleft-color {
-                background: linear-gradient(0deg, #FFFFFF 0%, #BF6E35 100%);
-            }
-        }
+    &:nth-child(3) {
+      .topbox-itemleft-img {
+        background: url("../../../assets/images/daping/buliang3.png");
+      }
 
-        &:nth-child(3) {
-            .topbox-itemleft-img {
-                background: url('../../../assets/images/daping/buliang3.png');
+      .topbox-itemleft-color {
+        background: linear-gradient(0deg, #ffffff 0%, #f04f50 100%);
+      }
+    }
 
-            }
+    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 {
-                background: linear-gradient(0deg, #FFFFFF 0%, #F04F50 100%);
-            }
-        }
+    .topbox-item-left {
+      margin-left: 20px;
+      flex: 1.9;
 
-        display: flex;
-        align-items: center;
-        height: 40px;
-        width: 98%;
-        background: url('../../../assets/images/daping/toushi.png');
+      .topbox-itemleft-img {
+        width: 20px;
+        height: 20px;
         background-size: contain;
         background-repeat: no-repeat;
-        background-position: bottom;
-
-        >div {
-            display: flex;
-            align-items: center;
-        }
-
-        .topbox-item-left {
-            margin-left: 20px;
-            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
-            }
+        margin-right: 10px;
+      }
+
+      span {
+        font-size: 14px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #b7d4f5;
+        line-height: 50px;
+      }
+    }
 
-            .spanxia {
-                color: #DA1B1B
-            }
-        }
+    .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;
+      .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 {
-    height: 170px;
-    width: 100%;
+  height: 170px;
+  width: 100%;
 }
 </style>
diff --git a/src/views/bigpage/bigcomponents/ChangeinformationList.vue b/src/views/bigpage/bigcomponents/ChangeinformationList.vue
index 64aebf3..77707c2 100644
--- a/src/views/bigpage/bigcomponents/ChangeinformationList.vue
+++ b/src/views/bigpage/bigcomponents/ChangeinformationList.vue
@@ -1,100 +1,138 @@
 
 <template>
   <div class="Basic-box">
-    <el-table :data="tableData" stripe style="width: 100%;background-color: transparent;">
-      <el-table-column prop="data" label="变更项目" width="100" show-overflow-tooltip>
-      </el-table-column>
-      <el-table-column prop="name" label="变更事项" width="180" show-overflow-tooltip>
-      </el-table-column>
-      <el-table-column prop="address" label="变更时间" show-overflow-tooltip>
+    <el-table
+      :data="tableData"
+      v-loading="load1"
+      element-loading-text="加载中..."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      stripe
+      style="width: 100%; background-color: transparent"
+    >
+      <el-table-column
+        v-for="(item, index) in tableHeader1"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width || ''"
+        show-overflow-tooltip
+        align="center"
+      >
       </el-table-column>
     </el-table>
-   
-    <Pagination></Pagination>
-    
+    <Pagination
+      :total="total"
+      :page="query.current"
+      :limit="query.size"
+      @pagination="changeList"
+    ></Pagination>
   </div>
 </template>
 
 <script>
-import Pagination from "@/views/components/Pagination"
+import { getDrugChange } from "@/api/largeScreen";
+import Pagination from "@/views/components/Pagination";
 export default {
-  name: 'Basicbox',
-  components: {Pagination},
+  name: "Basicbox",
+  components: { Pagination },
   data() {
     return {
-      tableData: [{
-        data: "审批类变更概述",
-        name: "原料对乙酰胺基供应商的公司名称由河北嘉恒（集团）药业有限公司变更为河北一恒药业股份有公司，生产地址未发生变更。",
-        address: "2022-06-08"
-      }, {
-        data: "审批类变更概述",
-        name: "-",
-        address: "2022-06-08"
-      }, {
-        data: "审批类变更概述",
-        name: "-",
-        address: "2022-06-08"
-      },
-      {
-        data: "审批类变更概述",
-        name: "-",
-        address: "2022-06-08"
-      },
-      {
-        data: "审批类变更概述",
-        name: "-",
-        address: "2022-06-08"
+      tableHeader1: [
+        {
+          prop: "bgxm",
+          label: "变更项目",
+          // width: "100",
+        },
+        {
+          prop: "bgsx",
+          label: "变更事项",
+        },
+        {
+          prop: "bgsj",
+          label: "变更时间",
+          // width: "100",
+        },
+      ],
+      // tableHeader2: [
+      //   {
+      //     prop: "bgxm",
+      //     label: "变更内容",
+      //   },
+      //   {
+      //     prop: "bgsj",
+      //     label: "变更时间",
+      //   },
+      // ],
+      tableData: [],
+      query: {
+        current: 1,
+        size: 5,
+        name: "",
       },
-      ]
-    }
+      total: 0,
+      load1: false,
+    };
   },
-  created() { },
-  mounted() { },
-  methods: {},
-  computed: {}
-}
+  created() {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.load1 = true;
+      getDrugChange(this.query).then((res) => {
+        this.tableData = res.data.records;
+        this.total = res.data.total;
+        this.load1 = false;
+      });
+    },
+    changeList(e) {
+      this.query.current = e.page;
+      this.query.size = e.limit;
+      this.getList();
+    },
+  },
+  computed: {},
+};
 </script>
 <style scoped lang='scss'>
 .Basic-box {
   margin-top: 10px;
   width: 100%;
   height: 300px;
-  padding: 0 11px 11px 11px;
+  // padding: 0 11px 11px 11px;
   overflow-y: auto;
-  background-color: transparent ;
+  background-color: transparent;
 }
-::v-deep .el-table, .el-table__expanded-cell {
-    background-color: transparent;
-  
+::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
 }
 ::v-deep .el-table th {
-    background-color: rgba(0,100,255,0.2) !important;
-    color: #2492FF  ;
-    border: none;
-
+  background-color: rgba(0, 100, 255, 0.2) !important;
+  color: #2492ff;
+  border: none;
 }
 ::v-deep .el-table td {
   border: none;
-
 }
 ::v-deep .el-table::before {
   height: 0px;
 }
 ::v-deep .el-table tr {
-    background-color: transparent !important;
-    color: #B7D4F5 ;
-
+  background-color: transparent !important;
+  color: #b7d4f5;
 }
 ::v-deep .el-table tbody tr:hover td {
-    background-color: transparent !important
+  background-color: transparent !important;
 }
-::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
+::v-deep .el-table th.el-table__cell.is-leaf,
+.el-table td.el-table__cell {
   border: none;
 }
 // 显示的颜色
-  ::v-deep .el-table .el-table__body tr.el-table__row--striped td {
-    background-color: rgba(0,50,150,0.1) !important;
-  }
-
-
+::v-deep .el-table .el-table__body tr.el-table__row--striped td {
+  background-color: rgba(0, 50, 150, 0.1) !important;
+}
 </style>
diff --git a/src/views/bigpage/bigcomponents/informationBox.vue b/src/views/bigpage/bigcomponents/informationBox.vue
index 2140f97..26aba5b 100644
--- a/src/views/bigpage/bigcomponents/informationBox.vue
+++ b/src/views/bigpage/bigcomponents/informationBox.vue
@@ -1,360 +1,381 @@
 
 <template>
-    <div class="box">
-        <div class="top-box">
-            <div class="topbox-item">
-                <div class="topBOxitem">
-                    <div class="topBOxitem-top"> <span>12</span> <span>次</span></div>
-                    <div class="topBOxitem-bottom">国家检测次数</div>
-                </div>
-            </div>
-            <div class="topbox-item">
-                <div class="topBOxitem">
-                    <el-tooltip class="item" effect="dark" content="1221111121212121" placement="top-start">
-                        <div class="topBOxitem-top"> <span>1221111121212121</span> <span>次</span></div>
-                    </el-tooltip>
-                   
-
-                    <div class="topBOxitem-bottom">国家检测次数</div>
-                </div>
+  <div class="box">
+    <div class="top-box">
+      <div class="topbox-item">
+        <div class="topBOxitem">
+          <div class="topBOxitem-top"><span>12</span> <span>次</span></div>
+          <div class="topBOxitem-bottom">国家检测次数</div>
+        </div>
+      </div>
+      <div class="topbox-item">
+        <div class="topBOxitem">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="1221111121212121"
+            placement="top-start"
+          >
+            <div class="topBOxitem-top">
+              <span>1221111121212121</span> <span>次</span>
             </div>
-            <div class="topbox-item">
-                <div class="topBOxitem">
-                    <div class="topBOxitem-top"> <span>12%</span> </div>
+          </el-tooltip>
 
-                    <div class="topBOxitem-bottom">国家检测次数</div>
-                </div>
-            </div>
+          <div class="topBOxitem-bottom">省级抽检次数</div>
         </div>
-        <div class="bottom-content">
-            <div class="left-echart" ref="left-echart"></div>
-            <div class="right-echart" ref="right-echart"></div>
+      </div>
+      <div class="topbox-item">
+        <div class="topBOxitem">
+          <div class="topBOxitem-top"><span>12%</span></div>
+
+          <div class="topBOxitem-bottom">抽检合格率</div>
         </div>
+      </div>
     </div>
+    <div class="bottom-content">
+      <div class="left-echart" ref="left-echart"></div>
+      <div class="right-echart" ref="right-echart"></div>
+    </div>
+  </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
 
 export default {
-    name: 'informationBox',
-    components: {},
-    data() {
-        return {
-            topList: [
-                {
-                    order: "12",
-                    jcaddress: "国家检测次数"
+  name: "informationBox",
+  components: {},
+  data() {
+    return {
+      topList: [
+        {
+          order: "12",
+          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 + "%";
                 },
-                {
-                    order: "14",
-                    jcaddress: "抽检合格率"
+                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" },
+              },
             ],
+          },
+        ],
+      };
 
-            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();
-
-        });
+      this.myChart1.setOption(this.option1);
     },
-    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
-                                }
-                            }
-                        },
-
-                    },
-                    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() {
+      this.option2 = {
+        backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
+        tooltip: {},
+        grid: {
+          top: "8%",
+          left: "10%",
+          right: "10%",
+          bottom: "8%",
+          containLabel: true,
         },
-        initEcharts2() {
-            this.option2 = {
-                backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
-                tooltip: {},
-                grid: {
-                    top: '8%',
-                    left: '10%',
-                    right: '10%',
-                    bottom: '8%',
-                    containLabel: true,
-                },
-                xAxis: [{
-                    type: 'category',
-                    boundaryGap: true,
-
-                    axisLine: {
-                        show: false, // 隐藏 x 轴线
-                        lineStyle: {
-                            color: '#233e64'
-                        },
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: "#B7D4F5",
-                            fontSize: 12,
-                            margin: 0,
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    data: ['辽宁', '黑龙江', '北京', '上海', '深圳', '苏州'],
-                }],
-                yAxis: [{
-                    show: true,
-                    type: 'value',
-                    name: '123',
-                    splitLine: {
-                        show: true, // 显示背后的横线
-                        lineStyle: {
-                            color: '#233e64',
-                            type: 'dashed' // 可以设置为实线或虚线
-                        }
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+
+            axisLine: {
+              show: false, // 隐藏 x 轴线
+              lineStyle: {
+                color: "#233e64",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#B7D4F5",
+                fontSize: 12,
+                margin: 0,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            data: ["辽宁", "黑龙江", "北京", "上海", "深圳", "苏州"],
+          },
+        ],
+        yAxis: [
+          {
+            show: true,
+            type: "value",
+            name: "123",
+            splitLine: {
+              show: true, // 显示背后的横线
+              lineStyle: {
+                color: "#233e64",
+                type: "dashed", // 可以设置为实线或虚线
+              },
+            },
+            axisLine: {
+              show: false, // 隐藏 y 轴线
+            },
+            axisLabel: {
+              margin: 20,
+              textStyle: {
+                color: "#6a9cd5",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barWidth: "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: {
-                            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)' // 起始颜色
-                                }, {
-                                    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);
-        },
+                  ],
+                },
+                // label: {
+                //     show: true,
+                //     position: 'top'
+                // }
+              },
+            },
+            data: [12, 15, 17, 20, 25, 26],
+          },
+        ],
+      };
+      this.myChart2.setOption(this.option2);
     },
-    computed: {}
-}
+  },
+  computed: {},
+};
 </script>
 <style scoped lang='scss'>
-.box {}
+.box {
+}
 
 .top-box {
-    margin: 10px 0;
-    height: 85px;
-    width: 100%F;
+  margin: 10px 0;
+  height: 85px;
+  width: 100%F;
+  display: flex;
+  justify-content: space-around;
+
+  .topbox-item {
+    width: 240px;
     display: flex;
-    justify-content: space-around;
-
-    .topbox-item {
-        width: 240px;
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        padding-right: 30px;
-
-        &:nth-of-type(1) {
-            background: url('../../../assets/images/daping/jiance1.png');
-            background-size: contain;
-            background-repeat: no-repeat;
-
-            .topBOxitem-top {
-                :nth-of-type(1) {
-
-                    background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%);
-
-                }
-            }
-
+    flex-direction: row-reverse;
+    align-items: center;
+    padding-right: 30px;
+
+    &:nth-of-type(1) {
+      background: url("../../../assets/images/daping/jiance1.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
         }
+      }
+    }
 
-        &:nth-of-type(2) {
-            background: url('../../../assets/images/daping/jiance2.png');
-            background-size: contain;
-            background-repeat: no-repeat;
-
-            .topBOxitem-top {
-                :nth-of-type(1) {
-
-                    background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
-
-                }
-            }
+    &:nth-of-type(2) {
+      background: url("../../../assets/images/daping/jiance2.png");
+      background-size: contain;
+      background-repeat: no-repeat;
 
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
         }
+      }
+    }
 
-        &:nth-of-type(3) {
-            background: url('../../../assets/images/daping/jiance3.png');
-            background-size: contain;
-            background-repeat: no-repeat;
-
-            .topBOxitem-top {
-                :nth-of-type(1) {
-
-                    background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%);
+    &:nth-of-type(3) {
+      background: url("../../../assets/images/daping/jiance3.png");
+      background-size: contain;
+      background-repeat: no-repeat;
 
-                }
-            }
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
         }
+      }
+    }
 
-        .topBOxitem {
-            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 {
+      margin-top: -40px;
 
-            .topBOxitem-bottom {
-                font-size: 16px;
-                font-family: Alibaba PuHuiTi;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
+      .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 {
+        font-size: 16px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #ffffff;
+      }
     }
-
+  }
 }
 
 .bottom-content {
-    height: 210px;
-    display: flex;
-
-    .left-echart {
-        flex: 0.7;
-    }
-
-    .right-echart {
-        flex: 1.3;
-    }
+  height: 210px;
+  display: flex;
 
+  .left-echart {
+    flex: 0.7;
+  }
 
+  .right-echart {
+    flex: 1.3;
+  }
 }
 </style>
diff --git a/src/views/bigpage/bigcomponents/recallbox.vue b/src/views/bigpage/bigcomponents/recallbox.vue
index 2b74a21..5024036 100644
--- a/src/views/bigpage/bigcomponents/recallbox.vue
+++ b/src/views/bigpage/bigcomponents/recallbox.vue
@@ -1,271 +1,279 @@
 
 <template>
-    <div class="box">
-        <div class="top-box">
-            <div class="topbox-item">
-                <div class="topBOxitem">
-                    <div class="topBOxitem-top"> <span>12222222222</span> </div>
-                    <div class="topBOxitem-bottom">召回次数</div>
-                </div>
-            </div>
-            <div class="topbox-item">
-                <div class="topBOxitem">
-                    <div class="topBOxitem-top"> <span>12</span></div>
-                    <div class="topBOxitem-bottom">产品召回批数</div>
-                </div>
-            </div>
-            <div class="topbox-item">
-                <div class="topBOxitem">
-                    <div class="topBOxitem-top"> <span>100%</span> </div>
-                    <div class="topBOxitem-bottom">产品召回次数</div>
-                </div>
-            </div>
+  <div class="box">
+    <div class="top-box">
+      <div class="topbox-item">
+        <div class="topBOxitem">
+          <div class="topBOxitem-top">
+            <span>{{ zhcs || 0 }}</span>
+          </div>
+          <div class="topBOxitem-bottom">召回次数</div>
         </div>
-        <div class="bottom-content">
-            <div class="right-echart" ref="right-echart"></div>
+      </div>
+      <div class="topbox-item">
+        <div class="topBOxitem">
+          <div class="topBOxitem-top">
+            <span>{{ cpzhbs || 0 }}</span>
+          </div>
+          <div class="topBOxitem-bottom">产品召回批数</div>
         </div>
+      </div>
+      <div class="topbox-item">
+        <div class="topBOxitem">
+          <div class="topBOxitem-top">
+            <span>{{ cpzhcs || 0 }}</span>
+          </div>
+          <div class="topBOxitem-bottom">产品召回次数</div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-content">
+      <div class="right-echart" ref="right-echart"></div>
     </div>
+  </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
-
+import { getRecall } from "@/api/largeScreen";
 export default {
-    name: 'informationBox',
-    components: {},
-    data() {
-        return {
-            topList: [
-                {
-                    order: "12",
-                    jcaddress: "国家检测次数"
-                },
-                {
-                    order: "31",
-                    jcaddress: "省级检测次数"
-                },
-                {
-                    order: "14",
-                    jcaddress: "抽检合格率"
-                },
-            ],
-            option2: {},
-            // echarts
-            myChart2: {},
-        }
-    },
-    created() { },
-    mounted() {
+  name: "informationBox",
+  components: {},
+  data() {
+    return {
+      option2: {},
+      myChart2: {},
+      zhcs: 0,
+      cpzhbs: 0,
+      cpzhcs: 0,
+      pieData: [],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getRecall({ name: "国药准字B20020034" }).then((res) => {
+        this.zhcs = res.data.cpzhcs;
+        this.cpzhbs = res.data.zhcppc;
+        this.cpzhcs = res.data.cpzhl;
+        let arr = res.data.list;
+        arr.sort(function (a, b) {
+          return a.recallLevel - b.recallLevel;
+        });
+        arr.forEach((value, index) => {
+          this.pieData.push(value.total);
+        });
         this.$nextTick(() => {
-            let chartDom2 = this.$refs["right-echart"];
-            this.myChart2 = echarts.init(chartDom2);
-            this.initEcharts2();
-
+          let chartDom2 = this.$refs["right-echart"];
+          this.myChart2 = echarts.init(chartDom2);
+          this.initEcharts2();
         });
+      });
     },
-    methods: {
-
-        initEcharts2() {
-            this.option2 = {
-                backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
-                tooltip: {},
-                grid: {
-                    top: '8%',
-                    left: '0%',
-                    right: '5%',
-                    bottom: '0%',
-                    containLabel: true,
-                },
-                xAxis: [{
-                    type: 'category',
-                    boundaryGap: true,
-
-                    axisLine: {
-                        show: false, // 隐藏 x 轴线
-                        lineStyle: {
-                            color: '#233e64'
-                        },
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: "#B7D4F5",
-                            fontSize: 12,
-                            margin: 0,
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    data: ['一级召回', '二级召回', '三级召回'],
-                }],
-                yAxis: [{
-                    show: true,
-                    type: 'value',
-                    name: '123',
-                    splitLine: {
-                        show: true, // 显示背后的横线
-                        lineStyle: {
-                            color: '#233e64',
-                            type: 'dashed' // 可以设置为实线或虚线
-                        }
-                    },
-                    axisLine: {
-                        show: false, // 隐藏 y 轴线
-                    },
-                    axisLabel: {
-                        margin: 20,
-                        textStyle: {
-                            color: '#6a9cd5',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
+    initEcharts2() {
+      this.option2 = {
+        backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
+        tooltip: {},
+        grid: {
+          top: "8%",
+          left: "0%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+
+            axisLine: {
+              show: false, // 隐藏 x 轴线
+              lineStyle: {
+                color: "#233e64",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#B7D4F5",
+                fontSize: 12,
+                margin: 0,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            data: ["一级召回", "二级召回", "三级召回"],
+          },
+        ],
+        yAxis: [
+          {
+            show: true,
+            type: "value",
+            name: "123",
+            splitLine: {
+              show: true, // 显示背后的横线
+              lineStyle: {
+                color: "#233e64",
+                type: "dashed", // 可以设置为实线或虚线
+              },
+            },
+            axisLine: {
+              show: false, // 隐藏 y 轴线
+            },
+            axisLabel: {
+              margin: 20,
+              textStyle: {
+                color: "#6a9cd5",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barWidth: "30",
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(33,181,225,1)", // 起始颜色
                     },
-                }],
-                series: [{
-                    type: 'bar',
-                    barWidth: '30',
-                    itemStyle: {
-                        normal: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [{
-                                    offset: 0,
-                                    color: 'rgba(33,181,225,1)' // 起始颜色
-                                }, {
-                                    offset: 1,
-                                    color: 'rgba(0,0,0,0.1)' // 结束颜色
-                                }]
-                            },
-                            // label: {
-                            //     show: true,
-                            //     position: 'top'
-                            // }
-                        }
+                    {
+                      offset: 1,
+                      color: "rgba(0,0,0,0.1)", // 结束颜色
                     },
-                    data: [12, 15, 17]
-                }]
-            };
-            this.myChart2.setOption(this.option2);
-        },
+                  ],
+                },
+                // label: {
+                //     show: true,
+                //     position: 'top'
+                // }
+              },
+            },
+            data: this.pieData,
+          },
+        ],
+      };
+      this.myChart2.setOption(this.option2);
     },
-    computed: {}
-}
+  },
+  computed: {},
+};
 </script>
 <style scoped lang='scss'>
-.box {}
+.box {
+}
 
 .top-box {
-    margin: 10px 0;
-    height: 85px;
-    width: 100%;
+  margin: 10px 0;
+  height: 85px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  .topbox-item {
+    width: 240px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
-    .topbox-item {
-        width: 240px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-
-        &:nth-of-type(1) {
-            background: url('../../../assets/images/daping/zhaohuicishu.png');
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            background-position: center;
-
-
-
-            .topBOxitem-top {
-                :nth-of-type(1) {
-                    background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%);
-                }
-            }
+    &:nth-of-type(1) {
+      background: url("../../../assets/images/daping/zhaohuicishu.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
 
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          background: linear-gradient(0deg, #bf6e35 0%, #ffffff 100%);
         }
+      }
+    }
 
-        &:nth-of-type(2) {
-            background: url('../../../assets/images/daping/zhaohuicishu.png');
-            background-size: 100% 100%;
-
-            background-repeat: no-repeat;
+    &:nth-of-type(2) {
+      background: url("../../../assets/images/daping/zhaohuicishu.png");
+      background-size: 100% 100%;
 
-            .topBOxitem-top {
-                :nth-of-type(1) {
-                    background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
-                }
-            }
+      background-repeat: no-repeat;
 
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          background: linear-gradient(0deg, #ffffff 0%, #0373e0 100%);
         }
+      }
+    }
 
-        &:nth-of-type(3) {
-            background: url('../../../assets/images/daping/zhaohuicishu.png');
-            background-size: 100% 100%;
+    &:nth-of-type(3) {
+      background: url("../../../assets/images/daping/zhaohuicishu.png");
+      background-size: 100% 100%;
 
-            background-repeat: no-repeat;
+      background-repeat: no-repeat;
 
-            .topBOxitem-top {
-                :nth-of-type(1) {
-                    background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%);
-                }
-            }
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          background: linear-gradient(0deg, #ffffff 0%, #37bea6 100%);
         }
+      }
+    }
 
-        .topBOxitem {
-            overflow: hidden;
-
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-
-            .topBOxitem-top {
-                :nth-of-type(1) {
-                    display: block;
-                    max-width: 130px;
-                    white-space: nowrap;
-                    /* 不换行 */
-                    overflow: hidden;
-                    /* 溢出内容隐藏 */
-                    text-overflow: ellipsis;
-                    font-size: 34px;
-                    font-family: YouSheBiaoTiHei;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                    margin: 0;
-                }
-            }
-
-            .topBOxitem-bottom {
-                font-size: 12px;
-                font-family: Alibaba PuHuiTi;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
-
+    .topBOxitem {
+      overflow: hidden;
+
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .topBOxitem-top {
+        :nth-of-type(1) {
+          display: block;
+          max-width: 130px;
+          white-space: nowrap;
+          /* 不换行 */
+          overflow: hidden;
+          /* 溢出内容隐藏 */
+          text-overflow: ellipsis;
+          font-size: 34px;
+          font-family: YouSheBiaoTiHei;
+          font-weight: 400;
+          color: #ffffff;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin: 0;
         }
-
+      }
+
+      .topBOxitem-bottom {
+        font-size: 12px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #ffffff;
+      }
     }
-
+  }
 }
 
 .bottom-content {
-    height: 210px;
-    display: flex;
-
-    .right-echart {
-        flex: 1.3;
-    }
-
+  height: 210px;
+  display: flex;
 
+  .right-echart {
+    flex: 1.3;
+  }
 }
 </style>
diff --git a/src/views/bigpage/index.vue b/src/views/bigpage/index.vue
index 2cb3799..39a6dac 100644
--- a/src/views/bigpage/index.vue
+++ b/src/views/bigpage/index.vue
@@ -48,7 +48,6 @@
                         </div>
                         <headtitle mytitle="风险提示信息"></headtitle>
                         <riskinformationList></riskinformationList>
-
                     </div>
                     <div class="bottom">
                         <headtitle mytitle="检验检测信息"></headtitle>
@@ -60,7 +59,6 @@
                     <div class="top">
                         <headtitle mytitle="召回信息"></headtitle>
                         <recallbox></recallbox>
-
                     </div>
                     <div class="bottom">
                         <headtitle mytitle="不良反应信息"></headtitle>
diff --git a/src/views/components/Pagination.vue b/src/views/components/Pagination.vue
index 75da93f..cdf6b2d 100644
--- a/src/views/components/Pagination.vue
+++ b/src/views/components/Pagination.vue
@@ -1,87 +1,154 @@
 
 <template>
-<div class="box">
+  <div class="box">
     <el-pagination
-        background
-        layout="->,prev, total,pager, next,jumper"
-        :total="1000"
-        :page-size="3"
-        :pager-count="5"
-        small
-        >
-</el-pagination>
-</div>
+      background
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      layout="->,prev, total,pager, next,jumper"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      small
+    >
+    </el-pagination>
+  </div>
 </template>
 
 <script>
+import { scrollTo } from "@/utils/scroll-to";
+
 export default {
-  name: '',
-  components: {},
-  data () {
-    return {
-    }
+  name: "Pagination",
+  props: {
+    total: {
+      type: Number,
+      default: 0,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 20,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50];
+      },
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7,
+    },
+    layout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper",
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
   },
-  created () { },
-  mounted () { },
-  methods: { },
-  computed: {}
-}
+  data() {
+    return {};
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit("update:page", val);
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit("update:limit", val);
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1;
+      }
+      this.$emit("pagination", { page: this.currentPage, limit: val });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit("pagination", { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+  },
+};
 </script>
 <style scoped lang='scss'>
-.box{
-   background-color: transparent !important;
-
+.box {
+  background-color: transparent !important;
 }
-
-::v-deep .el-pagination.is-background .btn-prev{
- background-color: transparent !important;
-   border: 1px solid #123864;
-   color: #579ACF;
+::v-deep .el-pagination.is-background .btn-prev {
+  background-color: transparent !important;
+  border: 1px solid #123864;
+  color: #579acf;
 }
-::v-deep  .el-pagination.is-background .btn-next{
-     background-color: transparent !important;
-   border: 1px solid #123864;
-   color: #579ACF;
+::v-deep .el-pagination.is-background .btn-next {
+  background-color: transparent !important;
+  border: 1px solid #123864;
+  color: #579acf;
 }
-::v-deep  .el-pagination.is-background .el-pager li{
+::v-deep .el-pagination.is-background .el-pager li {
   background-color: transparent !important;
-   border: 1px solid #123864;
-   color: #579ACF;
+  border: 1px solid #123864;
+  color: #579acf;
 }
 
-::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active{
-  background: rgba(20,131,242,0.2) !important;
-  border: 1px solid #1483F2;
+::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active {
+  background: rgba(20, 131, 242, 0.2) !important;
+  border: 1px solid #1483f2;
   border-radius: 4px;
-  color:#fff;
+  color: #fff;
 }
-::v-deep .el-pagination__jump{
-    margin: 0;
-    color: #2668D6;
-    .el-input__inner{
-        background-color: transparent !important;
-        border: 1px solid #123864;
-        color: #2668D6;
-
-    }
+::v-deep .el-pagination__jump {
+  margin: 0;
+  color: #2668d6;
+  .el-input__inner {
+    background-color: transparent !important;
+    border: 1px solid #123864;
+    color: #2668d6;
+  }
 }
-::v-deep .el-pagination__total{
-        color: #2668D6;
-
+::v-deep .el-pagination__total {
+  color: #2668d6;
+}
+::v-deep .el-pagination.is-background .el-pager li:hover {
+  background: rgba(20, 131, 242, 0.2) !important;
+  border: 1px solid #1483f2;
+  border-radius: 4px;
+}
+::v-deep .el-pager li.active {
+  background: rgba(20, 131, 242, 0.2) !important;
+  border: 1px solid #1483f2;
+  border-radius: 4px;
 }
-::v-deep .el-pagination.is-background .el-pager li:hover{
-   background: rgba(20,131,242,0.2) !important;
-   border: 1px solid #1483F2;
-   border-radius: 4px;
-   
- }
- ::v-deep .el-pager li.active{
-   background: rgba(20,131,242,0.2) !important;
-   border: 1px solid #1483F2;
-   border-radius: 4px;
-
- }
-
-
-  
 </style>