zc

src/views/medicUniversity-3_1/indexHome.vue

@@ -3,96 +3,110 @@
     <div class="app-container indexHome scrollbar-box">
       <div class="top-max-big-box">
         <div class="top-for-max-box">
-          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpkysl.png">
-          <div>
-            <p>化学品可用数量</p>
-            <p class="font-color-1">{{chemicalUsageCountData.chemicalUsableNum}}</p>
+          <div class="top-for-big-box">
+            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpkysl.png">
+            <div>
+              <p>化学品可用数量</p>
+              <p class="font-color-1">{{chemicalUsageCountData.chemicalUsableNum}}</p>
+            </div>
           </div>
         </div>
         <div class="top-for-max-box">
-          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpgsl.png">
-          <div>
-            <p>化学品柜数量</p>
-            <p class="font-color-2">{{chemicalUsageCountData.cabinetNum}}</p>
+          <div class="top-for-big-box">
+            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpgsl.png">
+            <div>
+              <p>化学品柜数量</p>
+              <p class="font-color-2">{{chemicalUsageCountData.cabinetNum}}</p>
+            </div>
           </div>
         </div>
         <div class="top-for-max-box">
-          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpyjsl.png">
-          <div>
-            <p>化学品用结数量</p>
-            <p class="font-color-3">{{chemicalUsageCountData.chemicalOutNum}}</p>
+          <div class="top-for-big-box">
+            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpyjsl.png">
+            <div>
+              <p>化学品用结数量</p>
+              <p class="font-color-3">{{chemicalUsageCountData.chemicalOutNum}}</p>
+            </div>
           </div>
         </div>
         <div class="top-for-max-box">
-          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpzfsl.png">
-          <div>
-            <p>化学品作废数量</p>
-            <p class="font-color-4">{{chemicalUsageCountData.chemicalCancelNum}}</p>
+          <div class="top-for-big-box">
+            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpzfsl.png">
+            <div>
+              <p>化学品作废数量</p>
+              <p class="font-color-4">{{chemicalUsageCountData.chemicalCancelNum}}</p>
+            </div>
           </div>
         </div>
         <div class="top-for-max-box">
-          <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpjjgq.png">
-          <div>
-            <p>化学品即将过期</p>
-            <p class="font-color-5">{{chemicalUsageCountData.overdueTime}}</p>
+          <div class="top-for-big-box">
+            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sy_hxpjjgq.png">
+            <div>
+              <p>化学品即将过期</p>
+              <p class="font-color-5">{{chemicalUsageCountData.overdueTime}}</p>
+            </div>
           </div>
         </div>
       </div>
       <div class="center-max-big-box">
         <div class="center-left-max-box">
-          <p class="min-box-title-p">化学品特别提示</p>
-          <div class="center-left-min-box">
-            <div>
-              <p>待归还数：</p>
-              <p style="color:#FF6200;">{{chemicalUnusualCountData.toBeReturned}}</p>
-            </div>
-            <div>
-              <p>超时未归还数：</p>
-              <p style="color:#FF2D2D;">{{chemicalUnusualCountData.overtimeReturn}}</p>
-            </div>
-          </div>
-          <div class="center-left-min-box">
-            <div>
-              <p>今日领用数：</p>
-              <p>{{chemicalUnusualCountData.todayCollect}}</p>
-            </div>
-            <div>
-              <p>今日归还数：</p>
-              <p>{{chemicalUnusualCountData.todayReturn}}</p>
+          <div class="center-left-big-box">
+            <p class="min-box-title-p">化学品特别提示</p>
+            <div class="center-left-min-box">
+              <div>
+                <p>待归还数：</p>
+                <p style="color:#FF6200;">{{chemicalUnusualCountData.toBeReturned}}</p>
+              </div>
+              <div>
+                <p>超时未归还数：</p>
+                <p style="color:#FF2D2D;">{{chemicalUnusualCountData.overtimeReturn}}</p>
+              </div>
             </div>
-          </div>
-          <div class="center-left-min-box">
-            <div>
-              <p>今日用结数：</p>
-              <p>{{chemicalUnusualCountData.todayOutNum}}</p>
+            <div class="center-left-min-box">
+              <div>
+                <p>今日领用数：</p>
+                <p>{{chemicalUnusualCountData.todayCollect}}</p>
+              </div>
+              <div>
+                <p>今日归还数：</p>
+                <p>{{chemicalUnusualCountData.todayReturn}}</p>
+              </div>
             </div>
-            <div>
-              <p>今日作废数：</p>
-              <p>{{chemicalUnusualCountData.todayCancelNum}}</p>
+            <div class="center-left-min-box">
+              <div>
+                <p>今日用结数：</p>
+                <p>{{chemicalUnusualCountData.todayOutNum}}</p>
+              </div>
+              <div>
+                <p>今日作废数：</p>
+                <p>{{chemicalUnusualCountData.todayCancelNum}}</p>
+              </div>
             </div>
           </div>
         </div>
         <div class="center-center-max-box">
-          <p class="min-box-title-p">化学品使用量TOP6</p>
-          <div class="center-center-for-box" v-for="(item,index) in chemicalUsagesCountData" :key="index">
-            <p :class="item.classifyLevel == 1?'for-color-p-1':(item.classifyLevel == 2?'for-color-p-2':'')">{{item.classifyLevel=='1'?'危险':(item.classifyLevel=='2'?'普通':'')}}</p>
-            <p>{{item.chemicalUsages}}</p>
-            <p>{{item.adminUser}}</p>
+          <div class="center-center-big-box">
+            <p class="min-box-title-p">化学品使用量TOP6</p>
+            <div class="center-center-for-box" v-for="(item,index) in chemicalUsagesCountData" :key="index">
+              <p :class="item.classifyLevel == 1?'for-color-p-1':(item.classifyLevel == 2?'for-color-p-2':'')">{{item.classifyLevel=='1'?'危险':(item.classifyLevel=='2'?'普通':'')}}</p>
+              <p>{{item.chemicalUsages}}</p>
+              <p>{{item.adminUser}}</p>
+            </div>
+            <p style="text-align: center;font-weight:500;font-size:16px;color:#999;line-height:100px;" v-if="!chemicalUsagesCountData[0]">暂无数据</p>
+            <p class="position-min-button" @click="goPage('usageRecord')" v-hasPermi="['chemical:hxpUserecord:list']">更多</p>
           </div>
-          <p style="text-align: center;font-weight:500;font-size:16px;color:#999;line-height:100px;" v-if="!chemicalUsagesCountData[0]">暂无数据</p>
-          <p class="position-min-button" @click="goPage('usageRecord')" v-hasPermi="['chemical:hxpUserecord:list']">更多</p>
         </div>
         <div class="center-right-max-box">
-          <p class="min-box-title-p">化学品属性占比</p>
-          <div class="center-right-big-box">
-            <div id="eCharts-box-1">
-
-            </div>
-            <div class="eCharts-right-list-box">
-              <div v-for="(item,index) in chemicalClassifyMixList">
-                <p :style="'background:'+eChartsListColor[index]+';'"></p>
-                <p>{{item.classifyAttribute}}</p>
-                <p>{{item.chemicalMix}}</p>
+          <div class="center-right-bigOne-box">
+            <p class="min-box-title-p">化学品属性占比</p>
+            <div class="center-right-big-box">
+              <div id="eCharts-box-1"></div>
+              <div class="eCharts-right-list-box">
+                <div v-for="(item,index) in chemicalClassifyMixList">
+                  <p :style="'background:'+eChartsListColor[index]+';'"></p>
+                  <p>{{item.classifyAttribute}}</p>
+                  <p>{{item.chemicalMix}}</p>
+                </div>
               </div>
             </div>
           </div>
@@ -100,37 +114,39 @@
       </div>
       <div class="bottom-max-big-box">
         <div class="bottom-left-max-box">
-          <p class="min-box-title-p" style="margin-bottom:24px;">报警通知</p>
-          <div class="bottom-left-for-max-box">
-            <div class="bottom-left-for-box" :class="{anim:animate==true}" ref="con1"
-                 v-for="(item,index) in alarmList" :key="index" v-if="index<6" @click="lockInfo(item)">
-              <p>{{item.alarmTime}}</p>
-              <p>{{item.alarmContent}}</p>
-              <!--<p v-if="!item.alarmContent">{{item.alarmContent}}</p>-->
-              <!--<el-tooltip class="item" effect="dark" :content="item.alarmContent" placement="top" v-else>-->
+          <div class="bottom-left-big-box">
+            <p class="min-box-title-p" style="margin-bottom:24px;">报警通知</p>
+            <div class="bottom-left-for-max-box">
+              <div class="bottom-left-for-box" :class="{anim:animate==true}" ref="con1"
+                   v-for="(item,index) in alarmList" :key="index" v-if="index<6" @click="lockInfo(item)">
+                <p>{{item.alarmTime}}</p>
+                <p>{{item.alarmContent}}</p>
+                <!--<p v-if="!item.alarmContent">{{item.alarmContent}}</p>-->
+                <!--<el-tooltip class="item" effect="dark" :content="item.alarmContent" placement="top" v-else>-->
                 <!--<p style="overflow: hidden;height:24px;">{{item.alarmContent}}</p>-->
-              <!--</el-tooltip>-->
-              <p>{{item.alarmMode}}</p>
-              <p>{{item.liableUserName}}</p>
-              <!--<p v-if="!item.liableUserName">{{item.liableUserName}}</p>-->
-              <!--<el-tooltip class="item" effect="dark" :content="item.liableUserName" placement="top" v-else>-->
+                <!--</el-tooltip>-->
+                <p>{{item.alarmMode}}</p>
+                <p>{{item.liableUserName}}</p>
+                <!--<p v-if="!item.liableUserName">{{item.liableUserName}}</p>-->
+                <!--<el-tooltip class="item" effect="dark" :content="item.liableUserName" placement="top" v-else>-->
                 <!--<p>{{item.liableUserName}}</p>-->
-              <!--</el-tooltip>-->
+                <!--</el-tooltip>-->
+              </div>
+              <p style="text-align: center;font-weight:500;font-size:16px;color:#999;line-height:100px;" v-if="!alarmList[0]">暂无数据</p>
             </div>
-            <p style="text-align: center;font-weight:500;font-size:16px;color:#999;line-height:100px;" v-if="!alarmList[0]">暂无数据</p>
+            <p class="position-min-button" @click="goPage('alarmRecord')" v-hasPermi="['chemical:hxpAlarmRecord:list']">更多</p>
           </div>
-          <p class="position-min-button" @click="goPage('alarmRecord')" v-hasPermi="['chemical:hxpAlarmRecord:list']">更多</p>
         </div>
         <div class="bottom-right-max-box">
-          <div class="title-button-box">
-            <p :class="buttonType == 1?'button-color-1':(buttonType == 2?'button-color-2':'')" @click="libraryButton(1)">入库数量</p>
-            <p :class="buttonType == 2?'button-color-1':(buttonType == 1?'button-color-2':'')" @click="libraryButton(2)">出库数量</p>
-          </div>
-          <div id="bottom-right-eCharts-box">
-
+          <div class="bottom-right-big-box">
+            <div class="title-button-box">
+              <p :class="buttonType == 1?'button-color-1':(buttonType == 2?'button-color-2':'')" @click="libraryButton(1)">入库数量</p>
+              <p :class="buttonType == 2?'button-color-1':(buttonType == 1?'button-color-2':'')" @click="libraryButton(2)">出库数量</p>
+            </div>
+            <div id="bottom-right-eCharts-box"></div>
+            <p class="position-min-button" @click="goPage('library')" v-if="buttonType == 1 && goPageTypeOne">更多</p>
+            <p class="position-min-button" @click="goPage('library')" v-if="buttonType == 2 && goPageTypeTwo">更多</p>
           </div>
-          <p class="position-min-button" @click="goPage('library')" v-if="buttonType == 1 && goPageTypeOne">更多</p>
-          <p class="position-min-button" @click="goPage('library')" v-if="buttonType == 2 && goPageTypeTwo">更多</p>
         </div>
       </div>
       <!--报警信息查看-->
@@ -359,12 +375,12 @@
         //化学品分类统计
         chemicalClassifyMix(){
           chemicalClassifyMix().then(response => {
-            let newList = response.data;
-            // for(let i=0;i<response.data.length;i++){
-            //   if(i<6){
-            //     newList.push(response.data[i]);
-            //   }
-            // }
+            let newList = [];
+            for(let i=0;i<response.data.length;i++){
+              if(i<6){
+                newList.push(response.data[i]);
+              }
+            }
             this.chemicalClassifyMixList = JSON.parse(JSON.stringify(newList));
             let list = [];
             for(let i=0;i<newList.length;i++){
@@ -668,195 +684,116 @@
       transition: all 0.5s;
     }
     .top-max-big-box{
-      display: flex;
-      padding:0 10px;
+      margin-bottom:22px;
       .top-for-max-box{
-        width:290px;
-        height:120px;
-        border-radius:10px;
-        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
-        margin:22px auto;
-        display: flex;
-        img{
-          width:68px;
-          height:68px;
-          margin:26px 26px 26px 16px;
-        }
-        div{
-          p:nth-child(1){
-            line-height:68px;
-            font-size:18px;
-            font-weight:500;
-          }
-          p:nth-child(2){
-            line-height:30px;
-            font-size:30px;
-          }
-          .font-color-1{
-            color:#0360FF;
-          }
-          .font-color-2{
-            color:#742EFF;
-          }
-          .font-color-3{
-            color:#0DDBDB;
-          }
-          .font-color-4{
-            color:#FFA201;
-          }
-          .font-color-5{
-            color:#FF4F4F;
-          }
-        }
-      }
-    }
-    .center-max-big-box{
-      display: flex;
-      padding:0 20px;
-      .center-left-max-box{
-        flex:1;
-        height:351px;
-        border-radius:10px;
-        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
-        .center-left-min-box{
+        display: inline-block;
+        margin:22px 0 0 21px;
+        .top-for-big-box{
+          width:290px;
+          height:120px;
+          border-radius:10px;
+          box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
           display: flex;
-          width:450px;
-          margin:0 auto;
-          font-size:16px;
-          font-weight:500;
+          img{
+            width:68px;
+            height:68px;
+            margin:26px 26px 26px 16px;
+          }
           div{
-            flex:1;
-            display: flex;
-            p{
-              line-height:94px;
-            }
             p:nth-child(1){
-              width:150px;
-              text-align: right;
+              line-height:68px;
+              font-size:18px;
+              font-weight:500;
             }
             p:nth-child(2){
-              flex:1;
-              font-size:34px;
+              line-height:30px;
+              font-size:30px;
+            }
+            .font-color-1{
+              color:#0360FF;
+            }
+            .font-color-2{
+              color:#742EFF;
+            }
+            .font-color-3{
+              color:#0DDBDB;
+            }
+            .font-color-4{
+              color:#FFA201;
+            }
+            .font-color-5{
+              color:#FF4F4F;
             }
           }
         }
       }
-      .center-center-max-box{
-        position: relative;
-        width:500px;
-        flex:1;
-        height:351px;
-        border-radius:10px;
-        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
-        margin:0 22px;
-        .center-center-for-box{
-          display: flex;
-          margin-top:24px;
-          p{
-            line-height:24px;
-            font-weight:500;
-          }
-          p:nth-child(1){
-            width:50px;
-            font-size:12px;
-            color:#fff;
-            margin-right:15px;
-            margin-left:30px;
-            text-align: center;
-            border-radius:4px;
-          }
-          p:nth-child(2){
-            flex:1;
+    }
+    .center-max-big-box{
+      /*display: flex;*/
+      padding:0 0 0 20px;
+      .center-left-max-box{
+        display: inline-block;
+        width:497px;
+        margin:0 22px 22px 0;
+        .center-left-big-box{
+          overflow: hidden;
+          height:351px;
+          border-radius:10px;
+          box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+          .center-left-min-box{
+            display: flex;
+            width:450px;
+            margin:0 auto;
             font-size:16px;
-            display:block;
-            overflow:hidden;
-            text-overflow:ellipsis;
-            white-space:nowrap;
-            margin-right:30px;
-
-          }
-          p:nth-child(3){
-            margin-right:30px;
-          }
-          .for-color-p-1{
-            background: #FC7F1A;
-          }
-          .for-color-p-2{
-            background: #0183FA;
-          }
-        }
-      }
-      .center-right-max-box{
-        flex:1;
-        height:351px;
-        border-radius:10px;
-        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
-        display: flex;
-        flex-direction: column;
-        .center-right-big-box{
-          display: flex;
-          flex:1;
-          #eCharts-box-1{
-            flex:1;
-          }
-          .eCharts-right-list-box{
-            width:220px;
-            padding-top:60px;
+            font-weight:500;
             div{
+              flex:1;
               display: flex;
-              margin-bottom:15px;
               p{
-                line-height: 20px;
-                font-size:14px;
-                font-weight:500;
+                line-height:94px;
               }
               p:nth-child(1){
-                width:14px;
-                height:14px;
-                margin:3px 10px 3px 0;
+                width:150px;
+                text-align: right;
               }
               p:nth-child(2){
-                flex: 1;
-              }
-              p:nth-child(3){
-                margin:0 20px 0 15px;
+                flex:1;
+                font-size:34px;
               }
             }
           }
         }
       }
-    }
-    .bottom-max-big-box{
-      display: flex;
-      padding:20px;
-      .bottom-left-max-box{
-        flex:1;
-        width: 760px;
-        height:347px;
-        border-radius:10px;
-        box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
-        position: relative;
-        overflow: hidden;
-        .bottom-left-for-max-box{
+      .center-center-max-box{
+        display: inline-block;
+        width:497px;
+        margin:0 22px 22px 0;
+        .center-center-big-box{
           overflow: hidden;
-          .bottom-left-for-box{
+          position: relative;
+          width:500px;
+          height:351px;
+          border-radius:10px;
+          box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+          .center-center-for-box{
             display: flex;
-            margin-bottom:24px;
-            cursor: pointer;
+            margin-top:24px;
             p{
-              font-size:16px;
               line-height:24px;
               font-weight:500;
             }
             p:nth-child(1){
-              width:160px;
-              margin-right:50px;
+              width:50px;
+              font-size:12px;
+              color:#fff;
+              margin-right:15px;
               margin-left:30px;
               text-align: center;
               border-radius:4px;
             }
             p:nth-child(2){
               flex:1;
+              font-size:16px;
               display:block;
               overflow:hidden;
               text-overflow:ellipsis;
@@ -867,60 +804,159 @@
             p:nth-child(3){
               margin-right:30px;
             }
-            p:nth-child(4){
-              text-align: right;
-              width:160px;
-              margin-right:30px;
-              display:block;
-              overflow:hidden;
-              text-overflow:ellipsis;
-              white-space:nowrap;
+            .for-color-p-1{
+              background: #FC7F1A;
+            }
+            .for-color-p-2{
+              background: #0183FA;
+            }
+          }
+        }
+      }
+      .center-right-max-box{
+        display: inline-block;
+        width:497px;
+        margin:0 0 22px 0;
+        .center-right-bigOne-box{
+          height:351px;
+          border-radius:10px;
+          overflow: hidden;
+          box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+          .center-right-big-box{
+            display: flex;
+            flex:1;
+            #eCharts-box-1{
+              flex:1;
+            }
+            .eCharts-right-list-box{
+              width:220px;
+              padding-top:60px;
+              div{
+                display: flex;
+                margin-bottom:15px;
+                p{
+                  line-height: 20px;
+                  font-size:14px;
+                  font-weight:500;
+                }
+                p:nth-child(1){
+                  width:14px;
+                  height:14px;
+                  margin:3px 10px 3px 0;
+                }
+                p:nth-child(2){
+                  flex: 1;
+                }
+                p:nth-child(3){
+                  margin:0 20px 0 15px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .bottom-max-big-box{
+      /*display: flex;*/
+      padding:0 20px 20px;
+      .bottom-left-max-box{
+        display: inline-block;
+        width: 758px;
+        margin:0 20px 20px 0;
+        .bottom-left-big-box{
+          height:347px;
+          border-radius:10px;
+          box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+          position: relative;
+          overflow: hidden;
+          .bottom-left-for-max-box{
+            overflow: hidden;
+            .bottom-left-for-box{
+              display: flex;
+              margin-bottom:24px;
+              cursor: pointer;
+              p{
+                font-size:16px;
+                line-height:24px;
+                font-weight:500;
+              }
+              p:nth-child(1){
+                width:160px;
+                margin-right:50px;
+                margin-left:30px;
+                text-align: center;
+                border-radius:4px;
+              }
+              p:nth-child(2){
+                flex:1;
+                display:block;
+                overflow:hidden;
+                text-overflow:ellipsis;
+                white-space:nowrap;
+                margin-right:30px;
+
+              }
+              p:nth-child(3){
+                margin-right:30px;
+              }
+              p:nth-child(4){
+                text-align: right;
+                width:160px;
+                margin-right:30px;
+                display:block;
+                overflow:hidden;
+                text-overflow:ellipsis;
+                white-space:nowrap;
+              }
             }
           }
         }
       }
       .bottom-right-max-box{
-        position: relative;
-        margin-left:20px;
-        flex:1;
-        height:347px;
+        display: inline-block;
+        width: 758px;
+        overflow: hidden;
         border-radius:10px;
         box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
-        display: flex;
-        flex-direction: column;
-        .title-button-box{
-          display: flex;
-          margin:20px 0 0 28px;
-          p{
-            text-align: center;
-            width:90px;
-            height:38px;
-            line-height:38px;
-            cursor: pointer;
-            font-size:18px;
-            font-weight:500;
-          }
-          p:nth-child(1){
-            border-top-left-radius: 4px;
-            border-bottom-left-radius: 4px;
-          }
-          p:nth-child(2){
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
-          }
-          .button-color-1{
-            color:#fff;
-            background: #0183FA;
+        .bottom-right-big-box{
+          position: relative;
+          overflow: hidden;
+          margin-left:20px;
+          height:347px;
+          .title-button-box{
+            display: flex;
+            margin:20px 0 0 28px;
+            p{
+              text-align: center;
+              width:90px;
+              height:38px;
+              line-height:38px;
+              cursor: pointer;
+              font-size:18px;
+              font-weight:500;
+            }
+            p:nth-child(1){
+              border-top-left-radius: 4px;
+              border-bottom-left-radius: 4px;
+            }
+            p:nth-child(2){
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+            }
+            .button-color-1{
+              color:#fff;
+              background: #0183FA;
+            }
+            .button-color-2{
+              color:#333333;
+              background: #fff;
+              border:1px solid #A2A2A2;
+            }
           }
-          .button-color-2{
-            color:#333333;
-            background: #fff;
-            border:1px solid #A2A2A2;
+          #bottom-right-eCharts-box{
+            flex:1;
           }
         }
-        #bottom-right-eCharts-box{
-          flex:1;
-        }
       }
     }
     .min-box-title-p{