完成实验室资质页面编写

licp

2024-04-18 caba724b7025dd8801ed590bed3d8d56579d6a8c

完成实验室资质页面编写

 src/assets/api/controller.js

@@ -19,6 +19,7 @@
    warehouse,
    department,
    report,
    certification,
    }
}

@@ -218,4 +219,15 @@

const report = {
  businessStatisticsByDay: "/report/businessStatisticsByDay", //每日业务统计
  calendarWorkByWeek: "/report/calendarWorkByWeek", //首页-->日历任务图
  addSchedule: "/report/addSchedule", //首页-->添加日程
  ScheduleByMe: "/report/ScheduleByMe", //首页-->我的日程
}
const certification = {
  getCertificationDetail:"/certification/getCertificationDetail",//查询资质明细列表
  addCertificationDetail:"/certification/addCertificationDetail",//添加资质明细列表
  delCertificationDetail:"certification/delCertificationDetail",//删除资质明细列表
}




 src/components/tool/echart.vue

@@ -34,7 +34,9 @@
      deep: true,
      // immediate: true,
      handler(val) {
        this.init();
        this.$nextTick(() => {
          this.init();
        })
      },
    },
  },
@@ -107,6 +109,6 @@
<style scoped>
.echart_size{
  width: 100%;
  height: 500px;
  height: 100%;
}
</style>

 src/components/tool/value-table.vue

@@ -1063,7 +1063,32 @@
      },
      handleCascader(e,label){
        this.upData[label] = e;
      }
      },
      // æ‰¹é‡åˆ é™¤
      batchDelete(){
        if(this.multipleSelection&&this.multipleSelection.length>0){
          // this.delUrl
          this.$confirm('是否删除选中的数据?', "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            this.$axios.post(this.delUrl, {
                                id: this.multipleSelection.map(item => item.id).join(',')
                            }).then(res => {
                                if (res.code === 201) {
                                    return
                                }
                                this.$message.success('删除成功')
                                this.selectList()
                            }).catch(e => {
                                this.$message.error('删除失败')
                            })
                        }).catch(() => {})
        }else{
          this.$message.error('请选择要删除的数据')
        }
      },
        }
    }
</script>

 src/components/view/a5-laboratory-qualifications.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,573 @@
<style scoped>
    .title {
        height: 60px;
        line-height: 60px;
    }

    .bodys {
        height: 100%;
    }

    .search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .search_thing {
        width: 350px;
        display: flex;
        align-items: center;
    }

    .search_label {
        width: 110px;
        font-size: 14px;
        text-align: right;
    }

    .search_input {
        width: calc(100% - 110px);
    }

    .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px);
        padding: 20px;
    }
  .table-item{
    border-radius: 8px 8px 8px 8px;
    box-shadow: 4px 4px 8px 0px rgba(51,51,51,0.04);
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

<template>
    <div class="capacity-scope">
        <div>
            <el-row class="title">
                <el-col :span="12">
                    <el-radio-group v-model="radio" @input="selectorSwitch" size="medium" fill="#3A7BFA">
                        <el-radio-button label="0">资质明细</el-radio-button>
                        <el-radio-button label="1">资质总览</el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="12" style="text-align: right;" v-if="radio==0">
                    <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
                    <el-button size="medium" icon="el-icon-delete" @click="handleDel" v-if="delPower">删除</el-button>
                </el-col>
            </el-row>
        </div>
        <div v-if="radio==0" class="bodys">
            <div class="search">
                <div class="search_thing">
                    <div class="search_label">资质名称：</div>
                    <div class="search_input">
            <el-select v-model="itemParameterData.entity.name" placeholder="选择资质名称" size="small" @change="refreshTable()">
              <el-option v-for="item in qualificationsList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
                </div>
                <div class="search_thing" style="padding-left: 30px;">
                    <el-button size="small" @click="refresh()">重 ç½®</el-button>
                    <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
                </div>
            </div>
            <div class="table">
                <ValueTable ref="itemParameterTable" :url="$api.certification.getCertificationDetail"
                    :componentData="itemParameterData" :delUrl="$api.certification.delCertificationDetail" :key="upIndex" />
            </div>
        </div>
        <div class="bodys">
            <div class="search" v-if="radio==1">
                <div class="search_thing">
                    <div class="search_label">资质名称：</div>
                    <div class="search_input">
            <el-select v-model="entity.name" placeholder="选择资质名称" size="small">
              <el-option v-for="item in qualificationsList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
                </div>
                <div class="search_thing" style="padding-left: 30px;">
                    <el-button size="small" @click="refresh()">重 ç½®</el-button>
                    <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
                </div>
            </div>
            <div class="table" v-if="radio==1" v-loading="pageLoading" @scroll="scrollFn">
        <el-row :gutter="16">
          <el-col :span="6" v-for="(m,i) in list" :key="i" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" style="margin-bottom: 16px;">
            <div class="table-item">
              <el-image style="width: 102px;height: 102px;margin-right: 20px;border-radius: 16px;" :src="javaApi+'/img/'+m.imageUrl">
                <div slot="error" class="image-error" style="width: 100px;
                height: 100px;
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #EEEEEE;">
                  <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
                </div>
              </el-image>
              <div class="table-item-right" style="flex: 1;font-size: 12px;color: #666666;">
                <p style="line-height: 30px;">资质名称：<span style="color: #3A7BFA;">{{ m.name }}</span></p>
                <p style="line-height: 30px;">有效时间：{{m.expireTime}}</p>
                <p>
                  <span>状态：</span>
                  <el-tag :type="m.state==0?'danger':'success'" size="small">{{ m.state==0?'失效':'有效' }}</el-tag>
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
        <div v-if="list.length<1&&!pageLoading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
        <div v-if="list.length>0">
          <el-button
            v-if="isLoding"
            type="text"
            style="display: flex; margin: 0 auto; color: #909399"
            ><i class="el-icon-loading" style="font-size:20px"></i
          ></el-button>
          <el-button
            type="text"
            v-if="finishLoding"
            style="display: flex; margin: 0 auto; color: #909399"
            >已经没有更多啦~</el-button
          >
        </div>
            </div>
        </div>
    <el-dialog title="资质更新" :visible.sync="qualificationsConnectVisible" width="400px">
            <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">资质名称：</div>
        <div class="search_input">
          <el-select v-model="formData.name" placeholder="请选择" style="width: 100%;" size="small" clearable>
            <el-option
              v-for="item in qualificationsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">资质编码：</div>
        <div class="search_input">
          <el-input
          size="small"
          placeholder="请输入"
          clearable
                    v-model="formData.code"></el-input>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">颁发机构：</div>
        <div class="search_input">
          <el-input
          size="small"
          placeholder="请输入"
          clearable
                    v-model="formData.organization"></el-input>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">资质说明：</div>
        <div class="search_input">
          <el-input
          size="small"
          placeholder="请输入"
          clearable
                    v-model="formData.explanation"></el-input>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">首次颁发时间：</div>
        <div class="search_input">
          <el-date-picker style="width:100%" v-model="formData.firstTime"
          type="datetime"
                    size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          placeholder="选择日期">
                    </el-date-picker>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">最近颁发时间：</div>
        <div class="search_input">
          <el-date-picker style="width:100%" v-model="formData.recentlyTime"
          type="datetime"
                    size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          placeholder="选择日期">
                    </el-date-picker>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">到期颁发时间：</div>
        <div class="search_input">
          <el-date-picker style="width:100%" v-model="formData.expireTime"
          type="datetime"
                    size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          placeholder="选择日期">
                    </el-date-picker>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">资质图片：</div>
        <div class="search_input">
          <el-upload
            ref="upload"
            :action="action"
            :on-success="m=>handleSuccessUpImg(m,'imageUrl')"
            accept='image/jpg,image/jpeg,image/png'
            :multiple="false"
            :limit="1"
            :headers="headers" :on-change="beforeUpload"
                        :on-error="onError">
            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
          </el-upload>
        </div>
      </div>
      <div class="search_thing" style="margin-bottom: 16px;">
        <div class="search_label" style="width:120px">资质附件：</div>
        <div class="search_input">
          <el-upload
            ref="upload1"
            :action="action"
            :on-success="m=>handleSuccessUpImg(m,'fileUrl')"
            accept='image/jpg,image/jpeg,image/png,application/pdf,.doc,.docx' :headers="headers" :multiple="false" :limit="1" :on-change="beforeUpload1"
                        :on-error="onError1">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </div>
      </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qualificationsConnectVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="confirmQualifications" :loading="loading">ç¡® å®š</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import ValueTable from '../tool/value-table.vue'
    export default {
        components: {
            ValueTable
        },
        data() {
            return {
                radio: '0',
                itemParameterData: {
                    entity: {
                        name: null,
                        orderBy: {
                            field: 'id',
                            order: 'asc'
                        }
                    },
                    isIndex: false,
                    showSelect: true,
                    select: true,
                    row: 2,
                    do: [{
                        id: '',
                        font: '附件下载',
                        type: 'text',
                        method: 'handleDownLoad',
                        field: []
                    }],
                    tagField: {
                        state: {
                            select: [
              {
                                value: 0,
                                label: '失效',
                                type: 'danger'
                            },{
                                value: 1,
                                label: '有效',
                                type: 'success'
                            }
              ]
                        },
                    },
                    selectField: {
                        inspectionItemType: {
                            select: []
                        },
                    },
                    requiredAdd: [],
                    requiredUp: []
                },
                itemParameterEntityCopy: {},
                upIndex: 0,
                addPower: true,
        delPower:true,
                select: 0,
        qualificationsList:[],
        qualificationsConnectVisible:false,
        formData:{},
        loading:false,
        pageLoading:false,
        isLoding: false, // åŠ è½½ä¸­ï¼Œloading图标,默认为true
        finishLoding: false, // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
        entity:{
          name: null,
          orderBy: {field: "id", order: "asc"}
        },
        currentPage: 1, // å½“前页
        pageSize: 16, // ä¸€é¡µ16条
        total: '',
        list:[],
            }
        },
    computed: {
            headers() {
                return {
                    'token': sessionStorage.getItem('token')
                }
            },
            action() {
                return this.javaApi + this.$api.deviceScope.uploadFile
            }
        },
        mounted() {
            this.itemParameterEntityCopy = this.HaveJson(this.itemParameterData.entity)
            this.selectEnumByCategory()
            this.getPower('0')
        },
        methods: {
            selectorSwitch(radio) {
        if(radio === '1'){
          this.list = [];
          this.refreshTable();
        }
            },
            refreshTable() {
                if (this.radio === '0') {
                    this.$refs['itemParameterTable'].selectList()
                } else {
          if(this.currentPage>1){
            this.isLoding = true
          }else{
            this.pageLoading = true
          }
          if(this.list.length==0){
            window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
          }
          this.$axios.post(this.$api.certification.getCertificationDetail,{
            page: {
              current: this.currentPage,
              size: this.pageSize
            },
            entity: this.entity
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if(res.code==200){
              this.total = res.data.body.total
              let list = res.data.body.records;
              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.pageLoading = false
            this.isLoding = false;
          })
                }
            },
            refresh() {
        if(this.radio === '0'){
          this.itemParameterData.entity = this.HaveJson(this.itemParameterEntityCopy)
                  this.upIndex++
        }else{
          this.finishLoding = false;
          this.currentPage= 1;
          this.list=[];
          this.entity={
            name: null,
            orderBy: {field: "id", order: "asc"}
          };
          this.refreshTable()
        }
            },
            openAdd() {
                // this.$refs.itemParameterTable.openAddDia(this.$api.certification.addCertificationDetail);
        this.qualificationsConnectVisible = true;
        this.$nextTick(()=>{
          this.$refs.upload.clearFiles()
          this.$refs.upload1.clearFiles()
        })
        this.formData = {};
            },
            selectEnumByCategory() {
                this.$axios.post(this.$api.enums.selectEnumByCategory, {
                    category: "资质名称"
                }).then(res => {
                    // this.itemParameterData.selectField.inspectionItemType.select = res.data
          this.qualificationsList = res.data
                })
            },
      handleDel(){
        this.$refs.itemParameterTable.batchDelete();
      },
      handleDownLoad(row){
        let url = row.fileUrl;
        const link = document.createElement('a');
        link.href = this.javaApi + '/img/'+ url;
        document.body.appendChild(link);
        link.click();
      },
      handleSuccessUpImg(response,name) {
                if (response.code == 200) {
                    this.formData[name] = response.data.url;
                }
            },
      beforeUpload(file) {
                if (file.size > 1024 * 1024 * 10) {
                    this.$message.error('上传文件不超过10M');
                    this.$refs.upload.clearFiles()
                    return false;
                } else {
                    return true;
                }
            },
            onError(err, file, fileList) {
                this.$message.error('上传失败')
                this.$refs.upload.clearFiles()
            },
      beforeUpload1(file) {
                if (file.size > 1024 * 1024 * 10) {
                    this.$message.error('上传文件不超过10M');
                    this.$refs.upload1.clearFiles()
                    return false;
                } else {
                    return true;
                }
            },
            onError1(err, file, fileList) {
                this.$message.error('上传失败')
                this.$refs.upload1.clearFiles()
            },
      confirmQualifications(){
        if(!this.formData.name){
          this.$message.error('未填写资质名称');
          return
        }
        if(!this.formData.code){
          this.$message.error('未填写资质编码');
          return
        }
        if(!this.formData.organization){
          this.$message.error('未填写颁发机构');
          return
        }
        if(!this.formData.expireTime){
          this.$message.error('未填写到期颁发时间');
          return
        }
        if(!this.formData.imageUrl){
          this.$message.error('未上传资质图片');
          return
        }
        if(!this.formData.fileUrl){
          this.$message.error('未上传资质附件');
          return
        }
        this.loading = true;
        this.$axios.post(this.$api.certification.addCertificationDetail, {
                        ...this.formData
                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        this.loading = false
                        if (res.code == 201) return
                        this.$message.success('已提交')
                        this.refreshTable()
            this.qualificationsConnectVisible = false
                    })
      },
            // æƒé™åˆ†é…
            getPower(radio) {
                let power = JSON.parse(sessionStorage.getItem('power'))
                let add = false
                let del = false
                for (var i = 0; i < power.length; i++) {
                    if (power[i].menuMethod == 'delCertificationDetail') {
                        del = true
          }
          if (power[i].menuMethod == 'addCertificationDetail') {
            add = true
          }
                }
                this.addPower = add
        this.delPower = del
            },
      // æ»šåŠ¨è§¦åº•åŠ è½½
      scrollFn() {
        let clientHeight = document.documentElement.clientHeight - 18; //可视区域
        let scrollHeight = document.body.scrollHeight; // æ»šåŠ¨æ–‡æ¡£é«˜åº¦
        let scrollTop = parseInt(document.documentElement.scrollTop); // å·²æ»šåŠ¨çš„高度
        let height = 300;
        if (
          scrollTop + clientHeight >= scrollHeight - height &&
          scrollHeight != 0
        ) {
          if (!this.finishLoding&&this.currentPage*this.pageSize<this.total) {
            this.currentPage = this.currentPage + 1;
            this.refreshTable();
          }
        } else {
          return false;
        }
      },
      throttle(fn, wait) {
        // å°è£…函数进行节流
        var timer = null;
        return function () {
          var context = this;
          var args = arguments;
          if (!timer) {
            timer = setTimeout(function () {
              fn.apply(context, args);
              timer = null;
            }, wait);
          }
        };
      },
        },
    destroyed() {
      window.removeEventListener("scroll", this.throttle(), false);
    },
    }
</script>

 src/components/view/a6-device-management.vue

@@ -386,7 +386,7 @@
                                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                                    accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                                    :on-error="onError" ref='upload'>
                                    <el-button type="text" style="height:30px;paddingTop:8px">上传</el-button>
                                    <el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
                                </el-upload>
                            </div>
                        </el-form-item>

 src/components/view/b4-daily-business-statistics.vue

@@ -1,9 +1,9 @@
<template>
<div class="daily-main" v-loading="loading">
  <div class="daily-content" style="height:100%">
    <p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p>
    <!-- <p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p> -->
    <el-row :gutter="20">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务接收</h4>
@@ -17,7 +17,7 @@
          <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务完成</h4>
@@ -31,7 +31,7 @@
          <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务剩余</h4>
@@ -45,7 +45,7 @@
          <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测费用</h4>
@@ -59,7 +59,7 @@
          <img src="../../../static/img/daliy-3.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测工时</h4>
@@ -73,7 +73,7 @@
          <img src="../../../static/img/daliy-4.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测人员</h4>
@@ -88,17 +88,17 @@
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
        <div class="daily-card chart-box">
    <el-row :gutter="20" style="height: calc(100% - 170px);">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
        <div class="daily-card chart-box" style="height: 100%;">
          <h4>近10日任务接收量</h4>
          <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0"></echart-module>
          <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></echart-module>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
        <div class="daily-card chart-box">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
        <div class="daily-card chart-box" style="height: 100%;">
          <h4>近10日实际完成任务与接收任务对比</h4>
          <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1"></echart-module>
          <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module>
        </div>
      </el-col>
    </el-row>
@@ -114,7 +114,7 @@
  data(){
    return{
      chartConfig0:{
        height: '435px',
        height: '',
        isLoading:false,
        type:'line'
      },
@@ -128,7 +128,7 @@
        ]
      },
      chartConfig1:{
        height: '435px',
        height: '',
        isLoading:false,
        type:'bar'
      },
@@ -190,6 +190,10 @@
  overflow-y: auto;
  overflow-x: hidden;
}
.daily-content{
  padding: 20px 0;
  box-sizing: border-box;
}
.daily-card{
  width: 100%;
  background: #FFFFFF;
@@ -209,7 +213,7 @@
  color: #202224;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
  margin-bottom: 16px;
  opacity: 0.8;
}

@@ -218,7 +222,7 @@
  font-weight: bold;
  font-size: 28px;
  display: inline-block;
  margin-bottom: 30px;
  margin-bottom: 16px;
}

.daily-head-left .daily-head-left-info{
@@ -236,7 +240,7 @@
}

.chart-box{
  padding: 30px 24px;
  padding: 16px 24px;
  box-sizing: border-box;
}


 src/components/view/b4-inspection-item-statistics.vue

@@ -1,9 +1,9 @@
<template>
  <div class="inspection-main">
    <div class="inspection-content" style="height:100%">
      <p style="font-size: 16px;padding:19.5px 0px">检测项目统计</p>
      <!-- <p style="font-size: 16px;padding:19.5px 0px">检测项目统计</p> -->
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
          <div class="inspection-card inspection-head">
            <div class="inspection-head-left">
              <h4>今日项目接收</h4>
@@ -17,7 +17,7 @@
            <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
          <div class="inspection-card inspection-head">
            <div class="inspection-head-left">
              <h4>今日项目完成</h4>
@@ -31,7 +31,7 @@
            <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
          <div class="inspection-card inspection-head">
            <div class="inspection-head-left">
              <h4>今日项目剩余</h4>
@@ -45,36 +45,36 @@
            <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
          <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
            <h4 style="margin-bottom: 5px;">今日项目合格率</h4>
            <echart-module :id="'inspection-qualified'" :config="chartConfig2" :datas="chartData2" style="align-self: center;"></echart-module>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
          <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
            <h4 style="margin-bottom: 5px;">今日项目完成率</h4>
            <echart-module :id="'inspection-complete'" :config="chartConfig3" :datas="chartData3" style="align-self: center;"></echart-module>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
          <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
            <h4 style="margin-bottom: 5px;">今日项目延期率</h4>
            <echart-module :id="'inspection-extension'" :config="chartConfig4" :datas="chartData4" style="align-self: center;"></echart-module>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
          <div class="inspection-card chart-box">
      <el-row :gutter="20" style="height: calc(100% - 170px);">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px; height: 100%;">
          <div class="inspection-card chart-box" style="height: 100%;">
            <h4>近10日项目接收量</h4>
            <echart-module :id="'inspection-left'" :config="chartConfig0" :datas="chartData0"></echart-module>
            <echart-module :id="'inspection-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></echart-module>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
          <div class="inspection-card chart-box">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
          <div class="inspection-card chart-box" style="height: 100%;">
            <h4>近10日实际完成项目与接收项目对比</h4>
            <echart-module :id="'inspection-right'" :config="chartConfig1" :datas="chartData1"></echart-module>
            <echart-module :id="'inspection-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module>
          </div>
        </el-col>
      </el-row>
@@ -90,7 +90,7 @@
    data(){
      return{
        chartConfig0:{
          height: '435px',
          height: '',
          isLoading:true,
          type:'line'
        },
@@ -104,7 +104,7 @@
          ]
        },
        chartConfig1:{
          height: '435px',
          height: '',
          isLoading:true,
          type:'bar'
        },
@@ -122,7 +122,7 @@
          ]
        },
        chartConfig2:{
          height: '118px',
          height: '103px',
          width:'140px',
          isLoading:true,
          type:'pie'
@@ -143,7 +143,7 @@
          ]
        },
        chartConfig3:{
          height: '118px',
          height: '103px',
          width:'140px',
          isLoading:true,
          type:'pie'
@@ -164,7 +164,7 @@
          ]
        },
        chartConfig4:{
          height: '118px',
          height: '103px',
          width:'140px',
          isLoading:true,
          type:'pie'
@@ -195,6 +195,10 @@
    overflow-y: auto;
    overflow-x: hidden;
  }
  .inspection-content{
    padding: 20px 0;
    box-sizing: border-box;
  }
  .inspection-card{
    width: 100%;
    background: #FFFFFF;
@@ -223,7 +227,7 @@
    font-weight: bold;
    font-size: 28px;
    display: inline-block;
    margin-bottom: 30px;
    margin-bottom: 16px;
  }

  .inspection-head-left .inspection-head-left-info{
@@ -242,7 +246,7 @@
  }

  .chart-box{
    padding: 30px 24px;
    padding: 16px 24px;
    box-sizing: border-box;
  }


 src/components/view/index-index.vue

@@ -3,7 +3,7 @@
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;
        padding: 25px 0;
        padding: 25px 0 10px;
    }

    .left-1 {
@@ -52,7 +52,7 @@
  }

  .right-1{
    padding: 14px 10px 4px;
    padding: 10px 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -72,7 +72,7 @@
  }

  .right-2{
    padding: 13px 20px;
    padding: 13px 14px 8px;
    margin-bottom: 16px;
  }

@@ -129,21 +129,19 @@
  .list2-item{
    line-height: 22px;
    display: flex;
    margin-bottom: 13px;
    margin-bottom: 12px;
    font-size: 14px;
  }
  .right-3{
  }
  .right-3-tab{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    margin-bottom: 12px;
  }
  .tab-item{
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    padding: 16px 0;
    padding: 14px 0;
    font-size: 20px;
    background: #F5F7FB;
    color: #333333;
@@ -153,7 +151,10 @@
    color: #FF3838;
  }
  .right-3-list{
    padding: 0 12px 16px;
    padding: 0 12px 8px;
    box-sizing: border-box;
    height: 390px;
    overflow-y: auto;
  }
  .list3-item{
    padding: 6px 4px;
@@ -175,12 +176,11 @@
    font-size: 14px;
  }
  .left-2{
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 777px;
  }
  .left-2-item{
    width: 14.1%;
    border-right: 1px solid #F1F1F1;
  }
  .left-2-item:nth-last-child(1){
@@ -203,7 +203,7 @@
  .left-item-body{
    box-sizing: border-box;
    padding: 5px;
    max-height: 711px;
    height: 693px;
    overflow-y: auto;
  }
  .body-item{
@@ -211,6 +211,15 @@
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .body-item.color0{
    background: #70A090;
  }
  .body-item.color1{
    background: #EBD476;
  }
  .body-item.color2{
    background: #FF3838;
  }
  .body-item>div{
    height: calc(100% - 16px);
@@ -246,21 +255,17 @@
                        </div>
                    </div>
                </div>
        <div class="left-2 card">
          <div class="left-2-item" v-for="(item,index) in 7" :key="index">
        <div class="left-2 card" v-loading="workLoading">
          <div class="left-2-item" v-for="(item,index) in workDay" :key="index">
            <div class="left-item-title">
              <span style="font-size: 18px;">25</span>
              <span style="font-size: 14px;color: #999999;">星期四</span>
              <span style="font-size: 18px;">{{ item }}</span>
              <span style="font-size: 14px;color: #999999;">{{ weekdays[index] }}</span>
            </div>
            <div class="left-item-body">
              <div class="body-item" v-for="(m,i) in 8" :key="i">
              <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}">
                <div>
                  <span style="font-size: 12px;margin-bottom: 17px;">委托订单WT20230101 -001检测</span>
                  <el-image style="height: 24px;width: 24px;border-radius: 50%;">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <span style="font-size: 12px;margin-bottom: 17px;">{{ m.text }}</span>
                  <span style="display: inline-block;height: 24px;width: 24px;border-radius: 50%;line-height: 24px;text-align: center;background: #C0C4CC;color: #fff;">{{ m.name.charAt(0) }}</span>
                </div>
              </div>
            </div>
@@ -331,13 +336,14 @@
                </template>
              </el-calendar>
            </div>
            <div class="right-2-list" style="width: 49%;">
              <div class="list2-item" v-for="(m,i) in 5" :key="i">
                <span>14:00</span>
                <el-tooltip style="margin-left: 10px;" effect="dark" content="参加LIMS系统培训会议，并签上线上线上线上线上线上线" placement="top">
                  <p class="ellipsis-multiline" >参加LIMS系统培训会议，并签上线上线上线上线上线上线</p>
            <div class="right-2-list" style="width: 49%;height: 286px;" v-loading="scheduleLoading">
              <div class="list2-item" v-for="(m,i) in listScheduleByMe" :key="i">
                <span>{{ m.scheduleTimes }}</span>
                <el-tooltip style="margin-left: 10px;" effect="dark" :content="m.text" placement="top">
                  <p class="ellipsis-multiline" >{{ m.text }}</p>
                </el-tooltip>
              </div>
              <span style="color:rgb(153, 153, 153);font-size: 12px;text-align: center;margin: 120px 0;display: inline-block;width: 100%;" v-if="listScheduleByMe.length==0">暂无</span>
            </div>
          </div>
        </div>
@@ -353,7 +359,7 @@
                <p>设备到期提醒</p>
              </div>
              <div class="list3-item-info">
                <p>编号<span style="color:#3A7BFA;"> SB20240101-001 </span>的设备将于2023-09-09 11:11:11过期</p>
                <p style="width: 73%;-webkit-line-clamp: 1;" class="ellipsis-multiline">编号<span style="color:#3A7BFA;"> SB20240101-001 </span>的设备将于2023-09-09 11:11:11过期</p>
                <p>2023-09-09 09:09:09</p>
              </div>
            </div>
@@ -372,14 +378,14 @@
                type="datetime"
                placeholder="选择日期时间"
                size="small"
                style="width:100%">
                value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
                        </div>
                    </el-col>
          <el-col class="search_thing" :span="22">
                        <div class="search_label">内容：</div>
                        <div class="search_input">
                            <el-input v-model="query.content" size="small" placeholder="请输入内容"></el-input>
                            <el-input v-model="query.text" size="small" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                </el-row>
@@ -395,6 +401,9 @@
</template>

<script>
  import {
        getYearAndMonthAndDays
    } from '../../util/date'
    export default {
        data() {
            return {
@@ -405,18 +414,31 @@
        dialogVisible:false,
        query:{
          time:'',
          content:''
          text:''
        },
        loading:false
        loading:false,
        workLoading:false,
        workList:[],
        workDay:[],
        weekdays:[],
        listScheduleByMe:[],
        scheduleLoading:false,
            }
        },
    watch:{
      calendarValue(val){
        this.getScheduleByMe()
      }
    },
        mounted() {
            this.user = JSON.parse(localStorage.getItem('user'))
            this.nowTime()
            // this.getDataList()
            setInterval(() => {
                this.nowTime()
            }, 1000)
      this.init();
      this.weekdays = this.getWeekdaysForNextWeek()
      this.getScheduleByMe()
        },
        methods: {
            nowTime() {
@@ -444,11 +466,6 @@
                    m = "0" + m;
                }
                this.now = y + "-" + m + "-" + d + "  " + h + ":" + min + ":" + s;
            },
            getDataList() {
                this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
                    this.data = res.data
                })
            },
      nextMonth(value) {
        let year = this.calendarValue.getFullYear();// å½“前年份
@@ -510,7 +527,7 @@
        this.dialogVisible = false;
        this.query = {
          time:'',
          content:''
          text:''
        }
      },
      submit(){
@@ -518,11 +535,94 @@
          this.$message.error('时间未填写')
          return
        }
        if(!this.query.content){
        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
          this.workLoading = false;
          this.workList = [];
          for(let i=0;i<7;i++){
            this.workList.push(res.data[`work${i}`])
          }
          this.workDay = res.data.weekDays.map(m=>{
            return m[2]
          })
        })
      },
      getWeekdaysForNextWeek() {
        let weekdays = [];
        for (let i = 0; i < 7; i++) {
          let date = new Date();
          date.setDate(date.getDate() + i); // ä»Šå¤©ä¹‹åŽçš„日子
          let day = date.getDay(); // 0-6 ä»£è¡¨æ˜ŸæœŸæ—¥åˆ°æ˜ŸæœŸå…­
          weekdays.push(day);
        }
        weekdays = weekdays.map(m=>{
          let day =''
          switch (m) {
            case 0:
              day = '星期天'
              break;
            case 1:
              day = '星期一'
              break;
            case 2:
              day = '星期二'
              break;
            case 3:
              day = '星期三'
              break;
            case 4:
              day = '星期四'
              break;
            case 5:
              day = '星期五'
              break;
            case 6:
              day = '星期六'
              break;
          }
          return day
        })
        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
          })
        })
      },
        }
    }
</script>

 src/util/date.js

@@ -1,8 +1,7 @@
/**
 * èŽ·å–年月日
 */
export function getYearAndMonthAndDays() {
  const date = new Date()
export function getYearAndMonthAndDays(date=new Date()) {
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  if (month < 10) {

 src/util/echarts.js

@@ -30,16 +30,16 @@
        },
      },
      grid: {
        top: '5%',
        left: '7%',
        top: '25px',
        left: '40px',
        right: '3%',
        bottom: '7%',
        bottom: '40px',
        // containLabel: true
      },
      legend: {
          show: true,
          orient: 'horizontal',
          y:-5,
          y:-2,
          right:15,
          itemWidth: 12,
          itemHeight: 12,
@@ -84,7 +84,7 @@
          },
          axisLabel: {
            color: 'rgba(43,48,52, 0.4)',
            margin: 30,
            margin: 20,
          },
          axisTick: {
              show: false,
@@ -139,10 +139,10 @@
          },
      },
      grid: {
          top: '5%',
          left: '7%',
          right: '2%',
          bottom: '7%',
        top: '25px',
        left: '40px',
        right: '3%',
        bottom: '40px',
          // containLabel: true
      },
      xAxis: [{
@@ -180,7 +180,7 @@
          },
          axisLabel: {
            color: 'rgba(43,48,52, 0.4)',
            margin: 30,
            margin: 20,
          },
          axisTick: {
              show: false,

 static/js/menu.js

@@ -232,7 +232,7 @@
        }, {
            v: "实验室资质",
            i: "font icon-erjidaohang",
            u: "",
            u: "a5-laboratory-qualifications",
            g: "C能力范围和资质",
            p: ""
        }, {