From 6b9c34f458b7ec43e77278e4cdeb8c321dddf4cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=8A=B2=E9=BE=99?= <2860996570@qq.com>
Date: Mon, 18 Dec 2023 14:32:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=A7=E5=93=81=E7=94=BB?=
 =?UTF-8?q?=E5=83=8F=E6=A3=80=E9=AA=8C=E6=A3=80=E6=B5=8B=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E8=89=AF=E5=8F=8D=E5=BA=94=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/myAPI/login.js                        |  12 +-
 src/main.js                                   |  19 +--
 src/utils/request.js                          |   4 +-
 .../bigpage/bigcomponents/AdverseBox.vue      |  69 +++++++---
 .../bigcomponents/ChangeinformationList.vue   |   2 +-
 .../bigpage/bigcomponents/informationBox.vue  | 121 +++++++++++-------
 src/views/bigpage/index.vue                   |   5 +-
 src/views/components/Pagination.vue           |   2 +-
 src/views/index.vue                           |   3 +-
 9 files changed, 156 insertions(+), 81 deletions(-)

diff --git a/src/api/myAPI/login.js b/src/api/myAPI/login.js
index b5da98d..4d94585 100644
--- a/src/api/myAPI/login.js
+++ b/src/api/myAPI/login.js
@@ -1,8 +1,8 @@
 import request from "@/utils/request";
 // 本地
-// let api = "API"
+let api = "API"
 // 线上
-let api = location.origin
+// let api = location.origin
 export default {
   frimLogin() {
     return request({
@@ -16,10 +16,10 @@ export default {
       method: "POST",
       timeout: 60000,
       data: {
-        pdma: "Q2V0YzI4QGNvbQ==",
-				urne: "2112042170015",
-        // pdma: "MTExMTEx",
-        // urne: "2112042170015",
+        // pdma: "Q2V0YzI4QGNvbQ==",
+				// urne: "2112042170015",
+        pdma: "MTExMTEx",
+        urne: "2112042170015",
       },
     });
   },
diff --git a/src/main.js b/src/main.js
index 82ef462..23a64b2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -71,14 +71,14 @@ DictData.install()
 import { setToken } from '@/utils/auth'
 
 // 临时获取token
-// let token = async () => {
-//   let Authentication = await API.login.frimLogin();
-//   localStorage.setItem(
-//     "MSSM-LIAONING__TOKEN",
-//     Authentication.data.result.userToken
-//   );
-// }
-// token()
+let token = async () => {
+  let Authentication = await API.login.frimLogin();
+  localStorage.setItem(
+    "MSSM-LIAONING__TOKEN",
+    Authentication.data.result.userToken
+  );
+}
+token()
 let infor = async () => {
   let response = await API.login.getuserinfo();
   localStorage.setItem("userDto", JSON.stringify(response?.result.userDto));
@@ -94,7 +94,10 @@ infor()
  * Currently MockJs will be used in the production environment,
  * please remove it before going online! ! !
  */
+/* 
+  
 
+*/
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
diff --git a/src/utils/request.js b/src/utils/request.js
index b881ccf..ba7ecc3 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -15,9 +15,9 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  // baseURL: process.env.VUE_APP_BASE_API,
+  baseURL: process.env.VUE_APP_BASE_API,
   //!线上
-  baseURL:location.origin, 
+  // baseURL:location.origin, 
   // 超时
   timeout: 10000
 })
diff --git a/src/views/bigpage/bigcomponents/AdverseBox.vue b/src/views/bigpage/bigcomponents/AdverseBox.vue
index f5ae233..8ee3e17 100644
--- a/src/views/bigpage/bigcomponents/AdverseBox.vue
+++ b/src/views/bigpage/bigcomponents/AdverseBox.vue
@@ -28,7 +28,7 @@
         </div>
         <div class="topbox-item-right">
           <!-- <div class="redStyle">较去年</div> -->
-          <div >较去年</div>
+          <div>较去年</div>
           <!-- <span class="spanxia">↑</span> -->
           <span class="spanshang">↓</span>
         </div>
@@ -44,7 +44,7 @@
         </div>
         <div class="topbox-item-right">
           <!-- <div class="redStyle">较去年</div> -->
-          <div >较去年</div>
+          <div>较去年</div>
           <!-- <span class="spanxia">↑</span> -->
           <span class="spanshang">↓</span>
         </div>
@@ -55,20 +55,20 @@
         <div class="bottom-box" ref="bottom-box"></div>
       </div>
       <div class="rights">
-        <div>
+        <div v-for="(item, index) in pieDatalist">
           <div class="pt-top">
             <div class="ptleftbox">
-              <div class="rectangular1"></div>
+              <div :class="'rectangular' + (index + 1)"></div>
             </div>
-            <div class="texts">一般不良反应</div>
+            <div class="texts">{{ item.name }}</div>
           </div>
           <div class="pt-top">
             <div class="ptleftbox"></div>
             <div class="boxLine"></div>
-            <div class="ptStyle react1">0%</div>
+            <div :class="('react' + (index + 1))" class="ptStyle">{{item.percent}}%</div>
           </div>
         </div>
-        <div>
+        <!-- <div>
           <div class="pt-top">
             <div class="ptleftbox">
               <div class="rectangular2"></div>
@@ -80,8 +80,8 @@
             <div class="boxLine"></div>
             <div class="ptStyle react2">0%</div>
           </div>
-        </div>
-        <div>
+        </div> -->
+        <!-- <div>
           <div class="pt-top">
             <div class="ptleftbox">
               <div class="rectangular3"></div>
@@ -93,7 +93,7 @@
             <div class="boxLine"></div>
             <div class="ptStyle react3">0%</div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -115,6 +115,7 @@ export default {
       option1: {},
       // echarts
       myChart1: {},
+
       a1: 0,
       a2: 0,
       a3: 0,
@@ -133,10 +134,24 @@ export default {
           name: "发生死亡不良反应",
         },
       ],
+      pieDatalist: [
+        {
+          percent: 0,
+          name: "一般不良反应",
+        },
+        {
+          percent: 0,
+          name: "严重不良反应",
+        },
+        {
+          percent: 0,
+          name: "发生死亡不良反应",
+        },
+      ],
       total: 0,
     };
   },
-  created() {},
+  created() { },
   mounted() {
     this.getData();
   },
@@ -376,6 +391,13 @@ export default {
               normal: {
                 show: false,
                 formatter: "",
+                formatter: (params)=> {
+                 
+                  if (params.name == "一般不良反应") this.pieDatalist[0].percent = params.percent || 0;
+                  if (params.name == "严重不良反应") this.pieDatalist[1].percent = params.percent  || 0;
+                  if (params.name == "发生死亡不良反应") this.pieDatalist[2].percent = params.percent  || 0;
+                  return (params.percent || 0) + "%";
+                },
                 textStyle: {
                   fontSize: 12,
                 },
@@ -447,7 +469,7 @@ export default {
     background-repeat: no-repeat;
     background-position: bottom;
 
-    > div {
+    >div {
       display: flex;
       align-items: center;
     }
@@ -505,6 +527,7 @@ export default {
 
     .topbox-item-right {
       flex: 1;
+
       .redStyle {
         font-size: 16px;
         font-family: Alibaba PuHuiTi;
@@ -515,6 +538,7 @@ export default {
         -webkit-text-fill-color: transparent;
         margin-right: 5px;
       }
+
       div {
         font-size: 16px;
         font-family: Alibaba PuHuiTi;
@@ -542,6 +566,7 @@ export default {
     }
   }
 }
+
 .footers {
   height: calc(100% - 120px);
   display: flex;
@@ -550,11 +575,13 @@ export default {
     height: 100%;
     width: 50%;
     padding: 10px;
+
     .bottom-box {
       height: 100%;
       width: 100%;
     }
   }
+
   .rights {
     height: 100%;
     padding-left: 15px;
@@ -569,25 +596,30 @@ export default {
   display: flex;
   align-items: center;
   position: relative;
+
   .ptleftbox {
     width: 12%;
     height: 100%;
+
     .rectangular1 {
       height: 8px;
       width: 8px;
       background: #2e87e8;
     }
+
     .rectangular2 {
       height: 8px;
       width: 8px;
       background: #f0a436;
     }
+
     .rectangular3 {
       height: 8px;
       width: 8px;
       background: #f35656;
     }
   }
+
   .texts {
     width: 60%;
     font-size: 16px;
@@ -595,6 +627,7 @@ export default {
     font-weight: 400;
     color: #b7d4f5;
   }
+
   .react1 {
     // font-size: 20px;
     font-family: Alibaba PuHuiTi;
@@ -602,6 +635,7 @@ export default {
     color: #2e87e8;
     padding-left: 10px;
   }
+
   .react2 {
     // font-size: 20px;
     font-family: Alibaba PuHuiTi;
@@ -609,6 +643,7 @@ export default {
     color: #f0a436;
     padding-left: 10px;
   }
+
   .react3 {
     // font-size: 20px;
     font-family: Alibaba PuHuiTi;
@@ -617,15 +652,15 @@ export default {
 
     color: #f35656;
   }
+
   .ptStyle {
     width: 60%;
     margin-top: 5px;
-    background: linear-gradient(
-      to right,
-      rgba(36, 64, 97, 1),
-      rgba(36, 64, 97, 0)
-    );
+    background: linear-gradient(to right,
+        rgba(36, 64, 97, 1),
+        rgba(36, 64, 97, 0));
   }
+
   .boxLine {
     position: absolute;
     width: 18px;
diff --git a/src/views/bigpage/bigcomponents/ChangeinformationList.vue b/src/views/bigpage/bigcomponents/ChangeinformationList.vue
index 3266e22..9b417dd 100644
--- a/src/views/bigpage/bigcomponents/ChangeinformationList.vue
+++ b/src/views/bigpage/bigcomponents/ChangeinformationList.vue
@@ -109,7 +109,7 @@ export default {
 <style scoped lang='scss'>
 .Basic-box {
   margin-top: 10px;
-  width: 100%;
+  max-width: 100%;
   height: calc(100% - 41px - 10px);
   // padding: 0 11px 11px 11px;
   overflow-y: auto;
diff --git a/src/views/bigpage/bigcomponents/informationBox.vue b/src/views/bigpage/bigcomponents/informationBox.vue
index c964635..7501bae 100644
--- a/src/views/bigpage/bigcomponents/informationBox.vue
+++ b/src/views/bigpage/bigcomponents/informationBox.vue
@@ -10,9 +10,9 @@
             :content="Number(countryC) || 0"
             placement="top-start"
           > -->
-            <div class="topBOxitem-top">
-              <span>{{ countryC || 0 }}</span> <span>次</span>
-            </div>
+          <div class="topBOxitem-top">
+            <span>{{ countryC || 0 }}</span> <span>次</span>
+          </div>
           <!-- </el-tooltip> -->
 
           <div class="topBOxitem-bottom">国家检测次数</div>
@@ -26,9 +26,9 @@
             :content="Number(provinceC) || 0"
             placement="top-start"
           > -->
-            <div class="topBOxitem-top">
-              <span>{{ provinceC || 0 }}</span> <span>次</span>
-            </div>
+          <div class="topBOxitem-top">
+            <span>{{ provinceC || 0 }}</span> <span>次</span>
+          </div>
           <!-- </el-tooltip> -->
 
           <div class="topBOxitem-bottom">省级抽检次数</div>
@@ -76,7 +76,25 @@ export default {
       option1: {},
       // echarts
       myChart1: {},
+      myChart1data: [
+        // 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
+        // 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
+        {
+          value: "0",
+          name: "生产抽样环节",
+          percent: "0",
+          // itemStyle: { color: "#007EFF" },
+        },
+        {
+          value: "0",
+          name: "流通环节抽样",
+          percent: "0",
+          // itemStyle: { color: "#2CD8EC" },
+        },
+      ],
       option2: {},
+      myChart2data: [],
+      myChart2data2: [],
       // echarts
       myChart2: {},
       //==============
@@ -89,26 +107,56 @@ export default {
       ltcy: 0,
     };
   },
-  created() {},
+  created() { },
   mounted() {
     this.getData();
   },
   methods: {
+    reducefn(data = []) {
+      return data.reduce((accumulator, current) => current.sampleType + accumulator, 0);
+    },
     getData() {
       let newRouter = this.$route.query;
       getCPCJ({ name: newRouter.code }).then((res) => {
-        res.data.result.forEach((value, index) => {
-          if (value.sampleType == 1) {
-            this.provinceC += 1;
-          } else if (value.sampleType == 2) {
-            this.countryC += 1;
+        if (res.code == 200) {
+          if (res.data.result.length != 0) {
+
+            // 计算生产抽样数量
+            this.myChart1data[0].value = res.data.result.filter(item => item.inspectType === "生产环节").length
+            this.myChart1data[0].percent = ((res.data.result.filter(item => item.inspectType === "生产环节").length / res.data.result.length) * 100).toFixed(1)
+            this.myChart1data[1].value = res.data.result.filter(item => item.inspectType === "流通环节").length
+            this.myChart1data[1].percent = ((res.data.result.filter(item => item.inspectType === "流通环节").length / res.data.result.length) * 100).toFixed(1)
+            // 计算省份次数
+            let mergedData = {};
+            res.data.result.forEach((item) => {
+              if (item.qualified === "合格") {
+                if (mergedData[item.province]) {
+                  mergedData[item.province].sampleType += item.sampleType;
+                } else {
+                  mergedData[item.province] = {
+                    province: item.province,
+                    sampleType: item.sampleType
+                  };
+                }
+              }
+            });
+            const result = Object.values(mergedData);
+            result.forEach(item=>{
+              this.myChart2data.push(item.province)
+              this.myChart2data2.push(item.sampleType)
+            })
+            // 国家次数显示
+            this.countryC = res.data.result.length
+            // 计算合格率
+            const filteredData = res.data.result.filter(item => item.qualified === "不合格");
+            this.pt = Math.floor(((this.reducefn(res.data.result) - this.reducefn(filteredData)) / this.reducefn(res.data.result)) * 100)
+          }else{
+            this.myChart2data = ["暂无"]
+            this.myChart2data2 = ['0']
+         
           }
-        });
-        // 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);
@@ -131,9 +179,9 @@ export default {
               params.marker +
               params.name +
               ": " +
-              params.value +
+             ( params.value||0) +
               " (" +
-              params.percent +
+             ( params.percent || 0) +
               "%)</div>"
             );
           },
@@ -156,15 +204,15 @@ export default {
           {
             name: "",
             type: "pie",
-            radius: ["45%", "70%"],
-            center: ["50%", "40%"], // 调整 y 值为 '40%'，使饼图向上位移
+            radius: ["45%", "66%"],
+            center: ["50%", "44%"], // 调整 y 值为 '40%'，使饼图向上位移
             // itemStyle:{
             //     borderWidth:1, //设置border的宽度有多大
             //     borderColor:'#fff',
             // },
             labelLine: {
               normal: {
-                length: 15, // 指示线宽度
+                length: 10, // 指示线宽度
                 position: "outer", // 将标签线放在扇区外部转折点
                 lineStyle: function (params) {
                   // 根据数据项的颜色动态设置文字颜色
@@ -180,7 +228,7 @@ export default {
                 // 各分区的提示内容
                 // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                 formatter: function (params) {
-                  return params.percent + "%";
+                  return (params.data.percent || 0) + "%";
                 },
                 textStyle: {
                   color: "auto",
@@ -188,22 +236,7 @@ export default {
                 },
               },
             },
-            data: [
-              // 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
-              // 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
-              {
-                value: "1",
-                name: "生产抽样环节",
-                // percent: "39",
-                // itemStyle: { color: "#007EFF" },
-              },
-              {
-                value: "1",
-                name: "流通环节抽样",
-                // percent: "21",
-                // itemStyle: { color: "#2CD8EC" },
-              },
-            ],
+            data: this.myChart1data
           },
         ],
       };
@@ -238,11 +271,12 @@ export default {
                 fontSize: 12,
                 margin: 0,
               },
+              rotate: -30, // 设置文字倾斜角度
             },
             axisTick: {
               show: false,
             },
-            data: ["辽宁", "江苏", "湖南", "山西", "湖北", "山东"],
+            data: this.myChart2data
           },
         ],
         yAxis: [
@@ -302,7 +336,7 @@ export default {
               },
             },
 
-            data: [12, 15, 17, 20, 25, 26],
+            data: this.myChart2data2
           },
         ],
       };
@@ -313,8 +347,7 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
-.box {
-}
+.box {}
 
 .top-box {
   margin: 10px 0;
diff --git a/src/views/bigpage/index.vue b/src/views/bigpage/index.vue
index e3f44ad..82f0aea 100644
--- a/src/views/bigpage/index.vue
+++ b/src/views/bigpage/index.vue
@@ -349,7 +349,8 @@ div {
       }
 
       .system-box-left {
-        flex: 1;
+        // flex: 1;
+        width: 25vw;
 
         .system-boxleft-top,
         .system-boxleft-bottom {
@@ -366,6 +367,8 @@ div {
 
       .system-box-right {
         flex: 1;
+        width: 25vw;
+
       }
     }
 
diff --git a/src/views/components/Pagination.vue b/src/views/components/Pagination.vue
index cf40b52..f444a41 100644
--- a/src/views/components/Pagination.vue
+++ b/src/views/components/Pagination.vue
@@ -105,7 +105,7 @@ export default {
 </script>
 <style scoped lang='scss'>
 ::v-deep .el-pagination {
-  width: 100%;
+  max-width: 100%;
   display: flex;
   justify-content: end;
   padding: 8px 5px;
diff --git a/src/views/index.vue b/src/views/index.vue
index 485191c..c38c4f4 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -102,7 +102,8 @@ export default {
     gotoBgpage() {
       if (this.input) {
         console.log(this.searchList, 'this.searchList')
-        if (this.searchList.length == 1) {
+        console.log( this.getData.code," this.getData");
+        if (this.searchList.length == 1 || this.getData.code) {
           this.$router.push({ path: "/bgpage", query: { code: this.getData.code, name: this.getData.name, type: this.getData.type } })
           this.searchList = [];
         } else if (this.searchList.length > 1) {