首页修改

gaoluyang

2025-03-04 eeb99eafbfb86410f1501545483bf4256cb8e5d9

首页修改

 src/api/index/report.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
// é¦–页相关接口
import request from '@/utils/request'

//首页-->日历任务图
export function calendarWorkByWeek() {
  return request({
    url: '/report/calendarWorkByWeek',
    method: 'get'
  })
}
//首页-->首页工时统计
export function manHourByStation(query) {
  return request({
    url: '/report/manHourByStation',
    method: 'get',
    params: query
  })
}
//首页-->首页工时统计
export function manHourByPerson() {
  return request({
    url: '/report/manHourByPerson',
    method: 'get',
    params: query
  })
}

 src/assets/images/bg1.png

 src/assets/images/bg2.png

 src/components/echarts/echart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,119 @@

<template>
  <div>
      <div class="echart_size" :id="id" :style="`height:${config.height};width:${config.width}`"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import ResizeListener from 'element-resize-detector';
import {iuCharts} from '@/utils/echarts'
export default {
  props: {
      id: {
          type: String,
          default: ''
      },
      config:{
        type: Object,
        default: () => {}
      },
      datas: {
          type: Object,
          default: () => {}
      }
  },
  data() {
      return {
        chart:null,
      }
  },
  watch: {
    /* å¦‚果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
    datas: {
      deep: true,
      // immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.init();
        })
      },
    },
  },
  created() {
      this.$nextTick(() => {
          this.init()
      })
  },
  mounted() {
      window.addEventListener('resize', this.windowResizeListener);
      this.chartEleResizeListener();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
      init() {
        // å®žä¾‹åŒ–对象
        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.showLoading({
          text: 'loading',
          color: '#3A7BFA',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        });
        if (this.config.isLoading) {
          this.chart.hideLoading();
          switch (this.config.type){
            case 'bar':
            iuCharts.drawBar(this.chart,this.datas)
              break;
            case 'line':
            iuCharts.drawLine(this.chart,this.datas)
              break;
            case 'pie':
            iuCharts.drawPie(this.chart,this.datas)
              break;
            case 'gauge':
            iuCharts.drawGauge(this.chart,this.datas)
              break;
            case 'pie0':
              iuCharts.drawPie0(this.chart,this.datas)
            default:
              break;
          }
          setTimeout(()=>{
            this.chart.resize()
          },200)
        }
      },
      /* å¯¹chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
      chartEleResizeListener() {
          const chartInstance = ResizeListener({
              strategy: 'scroll',
              callOnAdd: true
          });
          chartInstance.listenTo(this.$el, () => {
              if (!this.chart) return;
              this.chart.resize();
          });
      },
      /* å½“窗口缩放时，echart动态调整自身大小 */
      windowResizeListener() {
          if (!this.chart) return;
          this.chart.resize();
      }
  }
}
</script>
<style scoped>
.echart_size{
  width: 100%;
  height: 100%;
}
</style>

 src/views/index.vue

@@ -10,121 +10,122 @@
            </div>
          </div>
        </div>
        <div v-loading="workLoading" class="left-2 card" style="overflow: hidden;">
          <div v-for="(item,index) in workDay" :key="index" class="left-2-item">
        <div class="left-2 card" v-loading="workLoading" style="overflow: hidden;">
          <div class="left-2-item" v-for="(item,index) in workDay" :key="index">
            <div class="left-item-title">
              <span style="font-size: 18px;">{{ item }}</span>
              <span style="font-size: 14px;color: #999999;">{{ weekdays[index] }}</span>
              <el-tag style="margin-top: 6px;" size="small">{{workList[index].length}} æ¡</el-tag>
            </div>
            <div class="left-item-body">
              <div v-for="(m,i) in workList[index]" :key="i" :class="{color0:m.type==0,color1:m.type==1,color2:m.type==2}" class="body-item">
              <div class="body-item" v-for="(m,i) in workList[index]" :key="i" :class="{color0:m.type==0,color1:m.type==1,color2:m.type==2}" @click="goAddList(m)">
                <div>
                  <span style="font-size: 12px;margin-bottom: 17px;">{{ m.text }}</span>
                  <div style="display: flex">
                    <span class="body-item-name">{{ m.name }}</span>
                    <span v-if="m.insState == 0" class="body-item-insState" style="background-color: #909399;font-size: 12px;">待检验</span>
                    <span v-if="m.insState == 1" class="body-item-insState" style="background-color: #E6A23C;font-size: 12px;">检验中</span>
                    <span v-if="m.insState == 2" class="body-item-insState" style="background-color: #67C23A;font-size: 12px;">已检验</span>
                    <span v-if="m.insState == 3" class="body-item-insState" style="background-color: #E6A23C;font-size: 12px;">待复核</span>
                    <span v-if="m.insState == 4" class="body-item-insState" style="background-color: #F56C6C;font-size: 9px;">复核未通过</span>
                    <span v-if="m.insState == 5" class="body-item-insState" style="background-color: #67C23A;font-size: 10px;">复核通过</span>
                  <span style="font-size: 12px;margin-bottom: 8px;">{{ m.text }}</span>
                  <div class="tags" style="display: flex;align-items: end;flex-wrap: wrap;margin-bottom: 8px;">
                    <el-tooltip class="item" effect="dark" :content="item" placement="top" v-for="(item,index) in m.sample?m.sample.split(','):[]"
                                :key="index">
                      <el-tag
                        :color="m.type==0?'#70A090':(m.type==1?'#EBD476':'#FF3838')"
                        effect="dark" size="mini" style="margin: 2px;" class="single-line-ellipsis">
                        {{ item }}
                      </el-tag>
                    </el-tooltip>
                  </div>
                  <span style="display: inline-block;height: 22px;width: 70px;border-radius: 10px;line-height: 22px;text-align: center;background: #C0C4CC;color: #fff;font-size: 14px;">{{ m.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
<!--        <div v-loading="workLoading" class="left-2 card" style="overflow: hidden;">-->
<!--          <div v-for="(item,index) in workDay" :key="index" class="left-2-item">-->
<!--            <div class="left-item-title">-->
<!--              <span style="font-size: 18px;">{{ item }}</span>-->
<!--              <span style="font-size: 14px;color: #999999;">{{ weekdays[index] }}</span>-->
<!--            </div>-->
<!--            <div class="left-item-body">-->
<!--              <div v-for="(m,i) in workList[index]" :key="i" :class="{color0:m.type==0,color1:m.type==1,color2:m.type==2}" class="body-item">-->
<!--                <div>-->
<!--                  <span style="font-size: 12px;margin-bottom: 17px;">{{ m.text }}</span>-->
<!--                  <div style="display: flex">-->
<!--                    <span class="body-item-name">{{ m.name }}</span>-->
<!--                    <span v-if="m.insState == 0" class="body-item-insState" style="background-color: #909399;font-size: 12px;">待检验</span>-->
<!--                    <span v-if="m.insState == 1" class="body-item-insState" style="background-color: #E6A23C;font-size: 12px;">检验中</span>-->
<!--                    <span v-if="m.insState == 2" class="body-item-insState" style="background-color: #67C23A;font-size: 12px;">已检验</span>-->
<!--                    <span v-if="m.insState == 3" class="body-item-insState" style="background-color: #E6A23C;font-size: 12px;">待复核</span>-->
<!--                    <span v-if="m.insState == 4" class="body-item-insState" style="background-color: #F56C6C;font-size: 9px;">复核未通过</span>-->
<!--                    <span v-if="m.insState == 5" class="body-item-insState" style="background-color: #67C23A;font-size: 10px;">复核通过</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </el-col>
      <el-col :lg="10" :md="10" :sm="24" :xl="10" :xs="24">
        <div class="right-1 card">
          <div class="right-1-item">
            <div class="img">
              <img alt="" src="@/assets/index_image/index-0.svg">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">{{getNumberFourTypes.totalNumberOfMessages}}</p>
              <p style="font-size: 14px;margin-bottom: 10px;">我的待办</p>
            </div>
          </div>
          <div class="right-1-item">
            <div class="img">
              <img alt="" src="@/assets/index_image/index-1.svg">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">{{ getNumberFourTypes.totalNumberOfReadMessages }}</p>
              <p style="font-size: 14px;margin-bottom: 10px;">已办事宜</p>
            </div>
          </div>
          <div class="right-1-item">
            <div class="img">
              <img alt="" src="@/assets/index_image/index-2.svg">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">{{ getNumberFourTypes.remainingToDo }}</p>
              <p style="font-size: 14px;margin-bottom: 10px;">剩余待办</p>
            </div>
          </div>
          <div class="right-1-item">
            <div class="img">
              <img alt="" src="@/assets/index_image/index-3.svg">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">{{ getNumberFourTypes.totalNumberOfMessagesInThePastSevenDays }}</p>
              <p style="font-size: 14px;margin-bottom: 10px;">近期事宜</p>
            </div>
        <div class="right-2 card">
          <span style="color: #333333;font-size: 16px;">工时统计</span>
          <div>
            <el-select v-model="sonLaboratory" placeholder="站点" size="mini" style="width: 100px;" @change="initEchart">
              <el-option
                v-for="item in dict.type.sys_sub_lab"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-radio-group v-model="type" size="mini">
              <el-radio-button label="周" ></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="å¹´"></el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="time.week"
              type="week"
              format="yyyy ç¬¬ WW å‘¨"
              placeholder="选择周" size="mini" v-if="type=='周'" @change="m=>changeTime(type,m)" style="width: 130px;">
            </el-date-picker>
            <el-date-picker
              v-model="time.month"
              type="month"
              placeholder="选择月" size="mini" v-if="type=='月'" @change="m=>changeTime(type,m)" style="width: 130px;">
            </el-date-picker>
            <el-date-picker
              v-model="time.year"
              type="year"
              placeholder="选择年" size="mini" v-if="type=='å¹´'" @change="m=>changeTime(type,m)" style="width: 130px;">
            </el-date-picker>
          </div>
        </div>
        <div class="right-2 card">
          <div class="right-2-title">
            <span style="color: #333333;font-size: 16px;">我的日程</span>
            <span style="cursor: pointer;font-size: 12px;
color: #3A7BFA;" @click="dialogVisible=true">添加我的日程</span>
          </div>
          <div class="right-2-body">
            <div class="calendar" style="width: 49%;">
              <div class="control">
                <el-button class="prevm" icon="el-icon-arrow-left" @click="prevMonth(calendarValue)"></el-button>
                <span>{{ calendarValue.getFullYear()+'å¹´'+(calendarValue.getMonth() + 1)+'月' }}</span>
                <el-button class="nextm" icon="el-icon-arrow-right" @click="nextMonth(calendarValue)"></el-button>
        <div class="right-2-body">
          <el-row :gutter="10" style="width: 100%;height: 80px;">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <div style="height: 100%;background: url(~@/assets/images/bg1.png) no-repeat;background-size: 100% 100%;padding: 12px 0;box-sizing: border-box;">
                <p style="text-align: center;font-size: 14px;color: #606266;line-height: 20px;margin-bottom: 4px;">总工时(小时)</p>
                <p style="text-align: center;font-family: DIN Alternate, DIN Alternate;font-weight: 700;font-size: 30px;color: #3D3D3D;line-height: 35px;">{{chartData0.total}}</p>
              </div>
              <el-calendar v-model="calendarValue">
                <template
                  slot="dateCell"
                  slot-scope="{date, data}">
                        <span>
                            {{ data.day.split('-').slice(2)+'' }}
                        </span>
                  <!-- <el-badge v-if="data.isSelected" is-dot class="item">
                  </el-badge> -->
                </template>
              </el-calendar>
            </div>
            <div v-loading="scheduleLoading" class="right-2-list" style="width: 49%;height: 286px;">
              <div v-for="(m,i) in listScheduleByMe" :key="i" class="list2-item">
                <span>{{ m.scheduleTimes }}</span>
                <el-tooltip :content="m.text" effect="dark" placement="top" style="margin-left: 10px;">
                  <p class="ellipsis-multiline" >{{ m.text }}</p>
                </el-tooltip>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <div style="height: 100%;background: url(~@/assets/images/bg2.png) no-repeat;background-size: 100% 100%;padding: 12px 0;box-sizing: border-box;">
                <p style="text-align: center;font-size: 14px;color: #606266;line-height: 20px;margin-bottom: 4px;">检验员(个)</p>
                <p style="text-align: center;font-family: DIN Alternate, DIN Alternate;font-weight: 700;font-size: 30px;color: #3D3D3D;line-height: 35px;">{{chartData0.personNum}}</p>
              </div>
              <span v-if="listScheduleByMe.length==0" style="color:rgb(144, 147, 153);font-size: 14px;text-align: center;margin: 120px 0;display: inline-block;width: 100%;">暂无数据</span>
            </div>
          </div>
            </el-col>
          </el-row>
          <echart-module :id="'index-1'" :config="chartConfig0" :datas="chartData0" style="height: 250px;width: 100%;"></echart-module>
        </div>
        <div class="right-3 card" style="overflow: hidden;">
          <div class="right-3-tab">
            <!--            <div :class="{active:currentIndex==4}" class="tab-item" style="cursor: pointer;" @click="currentIndex=4">预警提醒</div>-->
            <div :class="{active:currentIndex==5}" class="tab-item" style="cursor: pointer;" @click="currentIndexChange">CNAS通知通告</div>
            <div :class="{active:currentIndex==5}" class="tab-item">待办事项</div>
          </div>
          <div v-loading="listLoading" class="right-3-list">
            <scroll-pagination v-if="list.length>0||listLoading" :finishLoding="finishLoding" :list="list" @load="getList">
              <div v-for="(m,i) in list" :key="i" class="list3-item">
                <div class="list3-item-title">
                  <!--                <img alt="" src="../../../static/img/index-tip.svg">-->
                  <p style="color: #FF7756">{{ m.theme }}</p>
                </div>
                <div class="list3-item-info">
                  <p class="ellipsis-multiline" style="width: 73%;-webkit-line-clamp: 1;cursor: pointer;" @click="goNoticeDetail(m)">
                    <!-- ç¼–号<span style="color:#3A7BFA;"> SB20240101-001 </span>的设备将于2023-09-09 11:11:11过期 -->
                    {{ m.content }}
                  </p>
                  <p>{{ m.createTime }}</p>
@@ -136,59 +137,26 @@
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" title="日程添加" width="400px">
      <div class="body" style="max-height: 60vh;">
        <el-row>
          <el-col :span="22" class="search_thing">
            <div class="search_label"><span style="color: red;margin-right: 4px;">*</span>时间：</div>
            <div class="search_input">
              <el-date-picker
                v-model="query.time"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                size="small"
                style="width: 100%;" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="22" class="search_thing">
            <div class="search_label"><span style="color: red;margin-right: 4px;">*</span>内容：</div>
            <div class="search_input">
              <el-input v-model="query.text" :rows="2"
                        placeholder="请输入内容" size="small" type="textarea"></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="handleCancel">取 æ¶ˆ</el-button>
                    <el-button :loading="loading" type="primary" @click="submit">ç¡® å®š</el-button>
                </el-row>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import {getYearAndMonthAndDays} from '@/utils/date.js'
import ScrollPagination from '@/components/index/scroll-paging.vue'
import {calendarWorkByWeek, manHourByPerson, manHourByStation} from "@/api/index/report";
import EchartModule from '@/components/echarts/echart.vue'
export default {
  components: {
    ScrollPagination
    ScrollPagination,
    EchartModule
  },
  dicts: ['sys_sub_lab'],
  data() {
    return {
      user: {},
      now: null,
      calendarValue: new Date(),
      currentIndex:5,
      dialogVisible:false,
      query:{
        time:'',
        text:''
      },
      loading:false,
      workLoading:false,
      workList:[],
      workDay:[],
@@ -203,13 +171,26 @@
      finishLoding: false, // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
      timer:null,
      keyMap:{},
      getNumberFourTypes: {},
      sonLaboratory:null,
      chartData0:{
        total:0,
        personNum:0,
        data:[]
      },
      chartConfig0:{
        height: '',
        isLoading:false,
        type:'pie0'
      },
      type:'月',
      time:{
        week:'',
        month:'',
        year:'',
      },
    }
  },
  watch:{
    calendarValue(val){
      this.getScheduleByMe()
    },
    currentIndex(){
      this.keyMap = {}
      this.currentPage = 1;
@@ -218,7 +199,7 @@
    }
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem('user'))
    // this.user = JSON.parse(localStorage.getItem('user'))
    this.nowTime()
    setInterval(() => {
      this.nowTime()
@@ -229,7 +210,6 @@
    this.keyMap = {}
    this.list = [];
    this.getList();
    this.getScheduleByMe()
    this.timer&&clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.init();
@@ -237,26 +217,17 @@
      this.keyMap = {}
      this.list = [];
      this.getList();
      this.getScheduleByMe()
    },1000*60*10)
    this.getNumberFourTypesFun()
  },
  methods: {
    // è·³è½¬é¡µé¢
    goAddList() {

    },
    changeState (val) {
      if (val == 0) {
        return '待检验'
      }
    },
    currentIndexChange () {
      this.keyMap = {}
      this.currentPage = 1;
      this.list = [];
      this.getList();
    },
    getNumberFourTypesFun() {
      this.$axios.get(this.$api.informationNotification.getNumberFourTypesMessagesHomePage).then(res => {
        this.getNumberFourTypes = res.data
      })
    },
    getList(){
      const key = `_${this.currentPage}`
@@ -273,26 +244,25 @@
      if(this.list.length==0){
        this.finishLoding = false;
      }
      this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'&current='+this.currentPage+'&messageType='+this.currentIndex).then(res => {
        if(res.code === 201){
          return
        }
        let list = res.data.records;
        this.total = res.data.total;
        if(list.length==0){
          this.finishLoding = true;
        }else{
          if(list.length<this.pageSize){
            this.finishLoding = true;
          }
          this.list = this.list.concat(list)
          if(this.total==this.list.length){
            this.finishLoding = true;
          }
          this.currentPage++;
        }
        this.listLoading = false
      })
      // this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'&current='+this.currentPage+'&messageType='+this.currentIndex).then(res => {
      //   this.listLoading = false
      //   let list = res.data.records;
      //   this.total = res.data.total;
      //   if(list.length==0){
      //     this.finishLoding = true;
      //   }else{
      //     if(list.length<this.pageSize){
      //       this.finishLoding = true;
      //     }
      //     this.list = this.list.concat(list)
      //     if(this.total==this.list.length){
      //       this.finishLoding = true;
      //     }
      //     this.currentPage++;
      //   }
      // }).catch(err => {
      //   this.listLoading = false
      // })
    },
    nowTime() {
      var date = new Date();
@@ -320,94 +290,10 @@
      }
      this.now = y + "-" + m + "-" + d + "  " + h + ":" + min + ":" + s;
    },
    nextMonth(value) {
      let year = this.calendarValue.getFullYear();// å½“前年份
      let month = this.calendarValue.getMonth() + 1;// å½“前月份
      let day = this.calendarValue.getDate();// å½“前天数
      let nextyear = year;
      let nextmonth = parseInt(month) + 1;
      // åˆ¤æ–­ä¸‹ä¸€æœˆæ˜¯å¦ä¼šè¿›å…¥ä¸‹ä¸€å¹´
      if (nextmonth === 13) {
        nextyear = parseInt(year) + 1;
        nextmonth = 1;
      }
      // è®¡ç®—下一年下一个月有多少天
      let nextday = new Date(nextyear, nextmonth, 0);
      let nextdays = nextday.getDate();
      if (day > nextdays) {
        day = nextdays;
        if (day < 10) {
          day = '0' + day;
        }
      }
      if (nextmonth < 10) {
        nextmonth = '0' + nextmonth;
      }
      let nexttime = nextyear + '-' + nextmonth + '-' + day;

      // å°†å¾—到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
      this.calendarValue = new Date(nexttime);
    },
    prevMonth(time) {
      let year = this.calendarValue.getFullYear();// å½“前年份
      let month = this.calendarValue.getMonth() + 1;// å½“前月份
      let day = this.calendarValue.getDate();// å½“前天数
      let prevyear = year;
      let prevmonth = parseInt(month) - 1;
      // åˆ¤æ–­ä¸Šä¸€æœˆæ˜¯å¦ä¼šè¿›å…¥ä¸Šä¸€å¹´
      if (prevmonth === 0) {
        prevyear = parseInt(year) - 1;
        prevmonth = 12;
      }
      // è®¡ç®—上一年上一个月有多少天
      let prevday = new Date(prevyear, prevmonth, 0);
      let prevdays = prevday.getDate();
      if (day > prevdays) {
        day = prevdays;
        if (day < 10) {
          day = '0' + day;
        }
      }
      if (prevmonth < 10) {
        prevmonth = '0' + prevmonth;
      }
      let prevtime = prevyear + '-' + prevmonth + '-' + day;

      // å°†å¾—到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
      this.calendarValue = new Date(prevtime);
    },
    handleCancel(){
      this.dialogVisible = false;
      this.query = {
        time:'',
        text:''
      }
    },
    submit(){
      if(!this.query.time){
        this.$message.error('时间未填写')
        return
      }
      if(!this.query.text){
        this.$message.error('内容未填写')
        return
      }
      this.loading = true;
      this.$axios.post(this.$api.report.addSchedule, this.query).then(res => {
        this.loading = false;
        if (res.code == 201) {
          this.$message.error('操作失败')
          return
        }
        this.$message.success('保存成功')
        this.handleCancel()
        this.getScheduleByMe()
      })
    },
    // èŽ·å–日历任务图
    init(){
      this.workLoading = true;
      this.$axios.get(this.$api.report.calendarWorkByWeek).then(res => {
        if (res.code == 201) return
      calendarWorkByWeek().then(res => {
        this.workLoading = false;
        this.workList = [];
        for(let i=0;i<7;i++){
@@ -417,6 +303,8 @@
          let arr = m.split('-')
          return arr[2]
        })
      }).catch(err=>{
        this.workLoading = false;
      })
    },
    getWeekdaysForNextWeek() {
@@ -457,27 +345,6 @@
      })
      return weekdays;
    },
    getScheduleByMe(){
      this.scheduleLoading = true;
      this.$axios.post(this.$api.report.ScheduleByMe, {
        date:getYearAndMonthAndDays(this.calendarValue)
      }).then(res => {
        this.loading = false;
        this.scheduleLoading = false;
        if (res.code == 201) {
          return
        }
        this.listScheduleByMe = res.data.map(m=>{
          if(m.scheduleTime){
            let time = m.scheduleTime.split(' ')[1].split(':')
            m.scheduleTimes = time[0] + ':' + time[1]
          }else{
            m.scheduleTimes = ''
          }
          return m
        })
      })
    },
    goNoticeDetail(row){
      this.$axios.put(this.$api.informationNotification.triggerModificationStatusToRead+'/'+row.id).then(res => {
        row.num = Math.random(100);
@@ -491,6 +358,65 @@
        },29);
      })
    },
    changeTime(type,m){
      if(m){
        switch(type){
          case '周':
            this.startTime  = getYearAndMonthAndDays(new Date(this.time.week.getTime() - 24 * 60 * 60 * 1000))
            this.endTime = getYearAndMonthAndDays(new Date(this.time.week.getTime() + 24 * 60 * 60 * 1000 * 5))
            break;
          case '月':
            const year = new Date(this.time.month).getFullYear();
            const month = new Date(this.time.month).getMonth();
            const day = new Date(year, month + 1, 0).getDate(); //
            // è®¾ç½®èµ·å§‹æ—¥æœŸå’Œç»“束日期
            this.startTime = `${year}-${month + 1}-01`
            this.endTime = `${year}-${month + 1}-${day}` // æœˆæœ«
            break;
          case 'å¹´':
            const year0 = new Date(this.time.year).getFullYear();
            this.startTime = `${year0}-01-01`; // å¹´åˆ
            this.endTime = `${year0}-12-31`; // å¹´æœ«
            break;
        }
      }else{
        const year = new Date().getFullYear();
        const month = new Date().getMonth();

        // è®¾ç½®èµ·å§‹æ—¥æœŸå’Œç»“束日期
        this.startTime = new Date(year, month, 1).toISOString().slice(0, 10); // æœˆåˆ
        this.endTime = new Date(year, month + 1, 0).toISOString().slice(0, 10); // æœˆæœ«
        this.time.month = new Date()
      }
      this.initEchart()
    },
    async initEchart(){
      this.chartConfig0.isLoading = false
      const params = {
        startTime: this.startTime,
        endTime: this.endTime,
        sonLaboratory: this.sonLaboratory,
      }
      let res0 = await manHourByStation(params)
      if (res0.code == 500) return
      this.chartData0.total = res0.message
      let res1 = await manHourByPerson(params)
      if (res1.code == 500) return
      this.chartData0.personNum = 0
      this.chartData0.data = []
      if(res1.data){
        for(let m in res1.data){
          this.chartData0.personNum ++
          let obj = {
            name:m,
            value:res1.data[m],
            penl:this.chartData0.total>0?((res1.data[m]/this.chartData0.total)*100).toFixed(2):0
          }
          this.chartData0.data.push(obj)
        }
      }
      this.chartConfig0.isLoading = true
    },
  },
  deactivated(){
    this.timer&&clearInterval(this.timer)
@@ -498,13 +424,13 @@
}
</script>

<style scoped lang="scss">
<style scoped>
.index {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
  padding: 20px 10px 10px;
  background: rgb(245, 247, 251);
  padding: 14px;
  background: #F5F7FB;
}

.left-1 {
@@ -565,6 +491,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.right-1-item .mun{
@@ -586,9 +513,9 @@
.right-2-body{
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* display: flex;
  align-items: start;
  justify-content: space-between; */
}
>>>.el-calendar__header {
  display: none;
@@ -634,23 +561,17 @@
  font-size: 14px;
}
.right-3-tab{
  display: flex;
  align-items: center;
  padding: 20px 0 0 20px;
  margin-bottom: 16px;
}
.tab-item{
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 0;
  font-size: 20px;
  background: #F5F7FB;
  color: #333333;
}
.tab-item.active{
  background: #fff;
  color: #FF3838;
  padding-left: 16px;
  font-weight: 500;
  font-size: 18px;
  color: #3D3D3D;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.right-3-list{
  padding: 0 12px 8px;
@@ -667,7 +588,7 @@
}
.list3-item-title{
  display: flex;
  align-items: flex-start;
  align-items: start;
  margin-bottom: 10px;
}
.list3-item-info{
@@ -714,6 +635,7 @@
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 8px;
  cursor: pointer;
}
.body-item.color0{
  background: #70A090;
@@ -768,24 +690,7 @@
  background: #3A7BFA !important;
  color: #fff !important;
}
.body-item-name {
  display: inline-block;
  height: 22px;width: 60px;
  border-radius: 10px;
  line-height: 22px;
  text-align: center;
  background: #C0C4CC;
  color: #fff;
  font-size: 14px
}
.body-item-insState {
  margin-left: 2px;
  display: inline-block;
  height: 22px;width: 60px;
  border-radius: 10px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  font-size: 14px
>>>.el-tag--dark{
  border: 0;
}
</style>