| | |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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%; |
| | |
| | | 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; |
| | |
| | | box-sizing: border-box; |
| | | padding: 0px 0 10px; |
| | | } |
| | | |
| | | .control .el-button{ |
| | | width: 32px; |
| | | height: 32px; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .search_thing { |
| | | height: 50px; |
| | | margin-bottom: 26px; |
| | |
| | | text-align: left; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | >>>.el-calendar-day span{ |
| | | display: inline-block; |
| | | width: 30px; |
| | |
| | | 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; |
| | |
| | | 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; |