lxp
2025-03-10 c1136d8429f660335535afe8ad7c828c16eb7199
src/views/index.vue
@@ -1,5 +1,5 @@
<template>
  <div class="index">
  <div class="bg-1">
    <el-row :gutter="25">
      <el-col :lg="14" :md="14" :sm="24" :xl="14" :xs="24">
        <div class="left-1">
@@ -17,17 +17,24 @@
              <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 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>
                    <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>
@@ -88,9 +95,7 @@
                <el-button class="nextm" icon="el-icon-arrow-right" @click="nextMonth(calendarValue)"></el-button>
              </div>
              <el-calendar v-model="calendarValue">
                <template
                  slot="dateCell"
                  slot-scope="{date, data}">
                <template slot="dateCell" slot-scope="{date, data}">
                        <span>
                            {{ data.day.split('-').slice(2)+'' }}
                        </span>
@@ -106,24 +111,29 @@
                  <p class="ellipsis-multiline" >{{ m.text }}</p>
                </el-tooltip>
              </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>
              <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>
        </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" style="cursor: pointer;"
              @click="currentIndexChange">
              CNAS通知通告</div>
          </div>
          <div v-loading="listLoading" class="right-3-list">
            <scroll-pagination v-if="list.length>0||listLoading" :finishLoding="finishLoding" :list="list" @load="getList">
            <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)">
                  <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>
@@ -131,7 +141,9 @@
                </div>
              </div>
            </scroll-pagination>
            <div v-if="list.length<1&&!listLoading" style="color:#909399;font-size:14px;text-align: center;margin-top:80px" >暂无数据</div>
            <div v-if="list.length < 1 && !listLoading"
              style="color:#909399;font-size:14px;text-align: center;margin-top:80px">暂无数据
            </div>
          </div>
        </div>
      </el-col>
@@ -142,11 +154,7 @@
          <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"
              <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>
@@ -154,8 +162,7 @@
          <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>
              <el-input v-model="query.text" :rows="2" placeholder="请输入内容" size="small" type="textarea"></el-input>
            </div>
          </el-col>
        </el-row>
@@ -499,14 +506,6 @@
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
  padding: 20px 10px 10px;
  background: rgb(245, 247, 251);
}
.left-1 {
  background-image: url("~@/assets/index_image/index-img1.png");
  background-size: 100% 100%;
@@ -590,26 +589,33 @@
  align-items: flex-start;
  justify-content: space-between;
}
>>>.el-calendar__header {
  display: none;
}
>>>.el-calendar__body{
  padding: 0;
}
>>>.el-calendar-table:not(.is-range) td.next {
  /*隐藏下个月的日期*/
  display: none;
}
>>>.el-calendar-day{
  height: 40px;
}
>>>.el-calendar-table td{
  border: 0;
  font-size: 14px;
}
>>>.el-calendar-table tr td:first-child{
  border-left: 0;
}
.control{
  display: flex;
  align-items: center;
@@ -617,6 +623,7 @@
  box-sizing: border-box;
  padding: 0px 0 10px;
}
.control .el-button{
  width: 32px;
  height: 32px;
@@ -627,16 +634,19 @@
  color: #0166E2;
  font-size: 20px;
}
.list2-item{
  line-height: 22px;
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
}
.right-3-tab{
  display: flex;
  align-items: center;
}
.tab-item{
  width: 50%;
  box-sizing: border-box;
@@ -646,30 +656,36 @@
  background: #F5F7FB;
  color: #333333;
}
.tab-item.active{
  background: #fff;
  color: #FF3838;
  padding-left: 16px;
  text-align: left;
}
.right-3-list{
  padding: 0 12px 8px;
  box-sizing: border-box;
  height: 390px;
  overflow-y: auto;
}
.list3-item{
  padding: 6px 4px;
  margin: 8px 0;
}
.list3-item:hover{
  background: rgba(58, 123, 250,0.05);
}
.list3-item-title{
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.list3-item-info{
  display: flex;
  align-items: center;
@@ -677,24 +693,30 @@
  color: #666666;
  font-size: 14px;
}
.left-2{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 777px;
}
.left-2-item{
  border-right: 1px solid #F1F1F1;
  overflow: hidden !important;
}
.left-2-item:nth-last-child(1){
  border-right: 0;
}
.left-2-item:hover{
  background: rgba(58,123,250,0.05);
}
.left-2-item:hover .left-item-title span{
  color: #3A7BFA !important;
}
.left-item-title{
  border-bottom: 1px solid #F1F1F1;
  display: flex;
@@ -703,27 +725,33 @@
  justify-content: center;
  padding: 20px 0;
}
.left-item-body{
  box-sizing: border-box;
  padding: 5px;
  height: 693px;
  overflow-y: auto;
}
.body-item{
  background: #70A090;
  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);
  margin-top: 16px;
@@ -732,6 +760,7 @@
  display: flex;
  flex-direction: column;
}
.search_thing {
  height: 50px;
  margin-bottom: 26px;
@@ -743,6 +772,7 @@
  text-align: left;
  margin-bottom: 10px;
}
>>>.el-calendar-day span{
  display: inline-block;
  width: 30px;
@@ -751,26 +781,33 @@
  text-align: center;
  border-radius: 4px;
}
>>>.is-selected{
  background: transparent !important;
}
>>>.is-selected .el-calendar-day{
  background: transparent !important;
}
>>>.is-selected .el-calendar-day span{
  background: #3A7BFA !important;
  color: #fff !important;
}
>>>.el-calendar-day:hover{
  background: transparent;
}
>>>.el-calendar-day span:hover{
  background: #3A7BFA !important;
  color: #fff !important;
}
.body-item-name {
  display: inline-block;
  height: 22px;width: 60px;
  height: 22px;
  width: 60px;
  border-radius: 10px;
  line-height: 22px;
  text-align: center;
@@ -778,10 +815,12 @@
  color: #fff;
  font-size: 14px
}
.body-item-insState {
  margin-left: 2px;
  display: inline-block;
  height: 22px;width: 60px;
  height: 22px;
  width: 60px;
  border-radius: 10px;
  line-height: 22px;
  text-align: center;