zc

src/views/safetyOverview/pageComponent/subComponents.vue

@@ -105,12 +105,22 @@
           let useTotal = [];
           let availableTotal = [];
           let exceptionalTotal = [];
+          let num = 0;
           if(response.data.labStateSubs[0]){
             for(let i=0;i<response.data.labStateSubs.length;i++){
               hour.push(response.data.labStateSubs[i].hour)
               useTotal.push(response.data.labStateSubs[i].useTotal)
               availableTotal.push(response.data.labStateSubs[i].availableTotal)
               exceptionalTotal.push(response.data.labStateSubs[i].exceptionalTotal)
+              if(response.data.labStateSubs[i].useTotal > num){
+                num = response.data.labStateSubs[i].useTotal;
+              }
+              if(response.data.labStateSubs[i].availableTotal > num){
+                num = response.data.labStateSubs[i].availableTotal;
+              }
+              if(response.data.labStateSubs[i].exceptionalTotal > num){
+                num = response.data.labStateSubs[i].exceptionalTotal;
+              }
             }
           }else{
             hour = ["0.00", "3.00", "6.00", "9.00", "12.00", "15.00", "18.00", "21.00", "24.00",];
@@ -118,10 +128,10 @@
             availableTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
             exceptionalTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
           }
-          this.eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal,);
+          this.eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal,num);
         });
       },
-      eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal){
+      eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal,num){
         let option = {
           title: {
             text: "",
@@ -183,6 +193,7 @@
           yAxis: [
             {
               type: "value",
+              //以下设置y轴刻度为整数代码  valueDataAll是数组源，从里面找最大值用的
               axisTick: {
                 show: false,
               },
@@ -329,6 +340,13 @@
             },
           ],
         };
+        if(num < 5){
+          option.yAxis[0].max = 5;
+        }else{
+          option.yAxis[0].min= 0;
+          option.yAxis[0].max= num; // 计算最大值
+          option.yAxis[0].interval= Math.ceil(num / 5); // 平均分为5份
+        }
         let echartsBox = this.$echarts.init(document.getElementById('subComponentsECharts'));
         echartsBox.clear();
         echartsBox.setOption(option);

src/views/safetyOverview/pageComponent/warningComponents.vue

@@ -25,10 +25,10 @@
         </div>
         <!--星期-->
         <!--<div class="date-max-box">-->
-          <!--<div :class="dayIndex==index?'checkColor':''" v-for="(item,index) in timeList" :key="index" @click="dayButton(index)">-->
-            <!--<p>{{item.label}}</p>-->
-            <!--<p>{{item.name}}</p>-->
-          <!--</div>-->
+        <!--<div :class="dayIndex==index?'checkColor':''" v-for="(item,index) in timeList" :key="index" @click="dayButton(index)">-->
+        <!--<p>{{item.label}}</p>-->
+        <!--<p>{{item.name}}</p>-->
+        <!--</div>-->
         <!--</div>-->
         <div class="for-position-dept-max-box">
           <div class="for-position-dept-box"
@@ -52,9 +52,9 @@
   </div>
 </template>
 <script>
-import {
-  reportReportBigDataWarningHandle,
-} from "@/api/index";
+  import {
+    reportReportBigDataWarningHandle
+  } from '@/api/index'
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
 
   export default {
@@ -68,14 +68,14 @@ import {
           title: '安全风险预警处置'
         },
         dateData: new Date().getDay(),
-        dayIndex:null,
-        timeList:[],
+        dayIndex: null,
+        timeList: [],
         //获取数据
         deptList: [],
         //展示数据
-        deptData:{},
-        deptListIndex:0,
-        eChartsTimer:null,
+        deptData: {},
+        deptListIndex: 0,
+        eChartsTimer: null
       }
     },
     created() {
@@ -85,74 +85,82 @@ import {
       this.initialize()
     },
     methods: {
-      timedRefresh(){
-        let self = this;
-        self.getData();
+      timedRefresh() {
+        let self = this
+        self.getData()
         //定时动画
-        window.clearInterval(self.eChartsTimer);
-        self.eChartsTimer = setInterval(function(){
+        window.clearInterval(self.eChartsTimer)
+        self.eChartsTimer = setInterval(function() {
           self.deptListIndex++
-          if(self.deptList[self.deptListIndex]){
-            self.$set(self,'deptData',self.deptList[self.deptListIndex]);
-          }else{
-            self.getData();
+          if (self.deptList[self.deptListIndex]) {
+            self.$set(self, 'deptData', self.deptList[self.deptListIndex])
+          } else {
+            self.getData()
           }
-        },1000*30);
+        }, 1000 * 30)
       },
       //日期初始化
       initialize() {
-        let thisWeekDates = this.getThisWeekDates();
-        let timeList = [];
-        let day = new Date().getDay();
-        day = day==0 ? 7 : day;
-        this.$set(this,'dayIndex',day-1);
-        for(let i=0;i<thisWeekDates.length;i++){
+        let thisWeekDates = this.getThisWeekDates()
+        let timeList = []
+        let day = new Date().getDay()
+        day = day == 0 ? 7 : day
+        this.$set(this, 'dayIndex', day - 1)
+        for (let i = 0; i < thisWeekDates.length; i++) {
           timeList.push({
-            label:i+1,
-            name:i==0?'Mon':(i==1?'Tue':(i==2?'Wed':(i==3?'Thur':(i==4?'Fri':(i==5?'Sat':(i==6?'Sun':'')))))),
-            value:thisWeekDates[i],
+            label: i + 1,
+            name: i == 0 ? 'Mon' : (i == 1 ? 'Tue' : (i == 2 ? 'Wed' : (i == 3 ? 'Thur' : (i == 4 ? 'Fri' : (i == 5 ? 'Sat' : (i == 6 ? 'Sun' : '')))))),
+            value: thisWeekDates[i]
           })
         }
-        this.$set(this,'timeList',timeList);
-        this.timedRefresh();
+        this.$set(this, 'timeList', timeList)
+        this.timedRefresh()
       },
       getThisWeekDates() {
-        const today = new Date();
-        const dayOfWeek = today.getDay();
-        const firstDayOfWeek = new Date(today);
+        const today = new Date()
+        const dayOfWeek = today.getDay()
+        const firstDayOfWeek = new Date(today)
         if (dayOfWeek === 0) {
-          firstDayOfWeek.setDate(firstDayOfWeek.getDate() - 6);
+          firstDayOfWeek.setDate(firstDayOfWeek.getDate() - 6)
         } else {
-          firstDayOfWeek.setDate(firstDayOfWeek.getDate() - dayOfWeek + 1);
+          firstDayOfWeek.setDate(firstDayOfWeek.getDate() - dayOfWeek + 1)
         }
-        const dates = [];
+        const dates = []
         for (let i = 0; i < 7; i++) {
-          dates.push(new Date(firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000).toLocaleDateString().split("/") .join("-") );
+          let time = new Date(firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000).toLocaleDateString().split('/')
+          if (time[1] < 10) {
+            time[1] = '0' + time[1]
+          }
+          if (time[2] < 10) {
+            time[2] = '0' + time[2]
+          }
+          dates.push(time.join('-'))
+          // dates.push(new Date(firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000).toLocaleDateString().split("/") .join("-") );
         }
-        return dates;
+        return dates
       },
       //日期点击
-      dayButton(index){
-        if(index != this.dayIndex){
-          this.$set(this,'dayIndex',index);
+      dayButton(index) {
+        if (index != this.dayIndex) {
+          this.$set(this, 'dayIndex', index)
         }
       },
       //获取数据
-      getData(){
-        reportReportBigDataWarningHandle({date:this.timeList[this.dayIndex].value}).then( response => {
-          this.$set(this,'deptList',response.data);
-          this.$set(this,'deptListIndex',0);
-          this.$set(this,'deptData',this.deptList[this.deptListIndex]);
-        });
-      },
+      getData() {
+        reportReportBigDataWarningHandle({ date: this.timeList[this.dayIndex].value }).then(response => {
+          this.$set(this, 'deptList', response.data)
+          this.$set(this, 'deptListIndex', 0)
+          this.$set(this, 'deptData', this.deptList[this.deptListIndex])
+        })
+      }
     },
     beforeDestroy() {
       //清除定时器
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.eChartsTimer)
     },
     destroyed() {
       //清除定时器
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.eChartsTimer)
     }
   }
 </script>
@@ -185,7 +193,7 @@ import {
           background-image: url("../../../assets/ZDimages/img_yjczbg@1x.png");
           background-size: 100%;
           display: flex;
-          margin-left:25px;
+          margin-left: 25px;
           p:nth-child(1) {
             color: #fff;
             line-height: 52px;
@@ -228,7 +236,7 @@ import {
           }
         }
       }
-      .for-position-dept-max-box{
+      .for-position-dept-max-box {
         position: relative;
         .for-position-dept-box {
           display: inline-block;
@@ -303,75 +311,75 @@ import {
             text-align: center;
           }
         }
-        .for-position-dept-box:nth-child(1){
+        .for-position-dept-box:nth-child(1) {
           top: 100px;
           left: 30px;
         }
-        .for-position-dept-box:nth-child(2){
+        .for-position-dept-box:nth-child(2) {
           top: 100px;
           left: 280px;
         }
-        .for-position-dept-box:nth-child(3){
+        .for-position-dept-box:nth-child(3) {
           top: 100px;
           left: 530px;
         }
-        .for-position-dept-box:nth-child(4){
+        .for-position-dept-box:nth-child(4) {
           top: 100px;
           left: 780px;
         }
-        .for-position-dept-box:nth-child(5){
+        .for-position-dept-box:nth-child(5) {
           top: 165px;
           left: 153px;
         }
-        .for-position-dept-box:nth-child(6){
+        .for-position-dept-box:nth-child(6) {
           top: 165px;
           left: 403px;
         }
-        .for-position-dept-box:nth-child(7){
+        .for-position-dept-box:nth-child(7) {
           top: 165px;
           left: 653px;
         }
-        .for-position-dept-box:nth-child(8){
+        .for-position-dept-box:nth-child(8) {
           top: 230px;
           left: 30px;
         }
-        .for-position-dept-box:nth-child(9){
+        .for-position-dept-box:nth-child(9) {
           top: 230px;
           left: 280px;
         }
-        .for-position-dept-box:nth-child(10){
+        .for-position-dept-box:nth-child(10) {
           top: 230px;
           left: 530px;
         }
-        .for-position-dept-box:nth-child(11){
+        .for-position-dept-box:nth-child(11) {
           top: 230px;
           left: 780px;
         }
-        .for-position-dept-box:nth-child(12){
+        .for-position-dept-box:nth-child(12) {
           top: 295px;
           left: 153px;
         }
-        .for-position-dept-box:nth-child(13){
+        .for-position-dept-box:nth-child(13) {
           top: 295px;
           left: 403px;
         }
-        .for-position-dept-box:nth-child(14){
+        .for-position-dept-box:nth-child(14) {
           top: 295px;
           left: 653px;
         }
-        .for-position-dept-box:nth-child(15){
+        .for-position-dept-box:nth-child(15) {
           top: 360px;
           left: 30px;
         }
-        .for-position-dept-box:nth-child(16){
+        .for-position-dept-box:nth-child(16) {
           top: 360px;
           left: 280px;
         }
-        .for-position-dept-box:nth-child(17){
+        .for-position-dept-box:nth-child(17) {
           top: 360px;
           left: 530px;
         }
-        .for-position-dept-box:nth-child(18){
+        .for-position-dept-box:nth-child(18) {
           top: 360px;
           left: 780px;
         }