| | |
| | | <el-tag style="margin-top: 6px;" size="small">{{workList[index].length}} 条</el-tag> |
| | | </div> |
| | | <div class="left-item-body"> |
| | | <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 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;">{{ m.text }}</span> |
| | | <div style="display: flex"> |
| | | <span class="body-item-name">{{ m.name }}</span> |
| | | <span v-if="m.state == 0" class="body-item-insState" style="background-color: #909399;font-size: 12px;">待检验</span> |
| | | <span v-if="m.state == 1" class="body-item-insState" style="background-color: #E6A23C;font-size: 12px;">检验中</span> |
| | | <span v-if="m.state == 2" class="body-item-insState" style="background-color: #67C23A;font-size: 12px;">已检验</span> |
| | | <span v-if="m.state == 3" class="body-item-insState" style="background-color: #E6A23C;font-size: 12px;">待复核</span> |
| | | <span v-if="m.state == 4" class="body-item-insState" style="background-color: #F56C6C;font-size: 9px;">复核未通过</span> |
| | | <span v-if="m.state == 5" class="body-item-insState" style="background-color: #67C23A;font-size: 10px;">复核通过</span> |
| | | <span v-if="m.state == 0" class="body-item-insState" |
| | | style="background-color: #909399;font-size: 12px;">待检验</span> |
| | | <span v-if="m.state == 1" class="body-item-insState" |
| | | style="background-color: #E6A23C;font-size: 12px;">检验中</span> |
| | | <span v-if="m.state == 2" class="body-item-insState" |
| | | style="background-color: #67C23A;font-size: 12px;">已检验</span> |
| | | <span v-if="m.state == 3" class="body-item-insState" |
| | | style="background-color: #E6A23C;font-size: 12px;">待复核</span> |
| | | <span v-if="m.state == 4" class="body-item-insState" |
| | | style="background-color: #F56C6C;font-size: 9px;">复核未通过</span> |
| | | <span v-if="m.state == 5" class="body-item-insState" |
| | | style="background-color: #67C23A;font-size: 10px;">复核通过</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="right-2 card"> |
| | | <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px"> |
| | | <span style="color: #333333;font-size: 16px;">工时统计</span> |
| | | <el-date-picker |
| | | v-model="time.month" |
| | | type="month" |
| | | date-format="yyyy-MM" |
| | | value-format="yyyy-MM" |
| | | <el-date-picker v-model="time.month" type="month" date-format="yyyy-MM" value-format="yyyy-MM" |
| | | placeholder="选择月" size="mini" @change="changeTime" style="width: 130px;"> |
| | | </el-date-picker> |
| | | </div> |
| | |
| | | <el-col :span="12"> |
| | | <div class="right-time-1"> |
| | | <div style="text-align: center;font-size: 14px;color: #606266;line-height: 60px;">总工时(小时)</div> |
| | | <div style="text-align: center;font-family: DIN Alternate, DIN Alternate;font-weight: 700;font-size: 26px;color: #3D3D3D;line-height: 40px;">{{totalHour}}</div> |
| | | <div |
| | | style="text-align: center;font-family: DIN Alternate, DIN Alternate;font-weight: 700;font-size: 26px;color: #3D3D3D;line-height: 40px;"> |
| | | {{ totalHour }}</div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <Echarts ref="chart" |
| | | :legend="pieLegend" |
| | | :series="materialPieSeries" |
| | | :tooltip="pieTooltip" |
| | | <Echarts ref="chart" :legend="pieLegend" :series="materialPieSeries" :tooltip="pieTooltip" |
| | | style="height: 150px;width: 100%;"></Echarts> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <div class="tab-item2">{{'您有' + total + '项任务待完成'}}</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"> |
| | | <span class="blue-dot">{{ m.theme }}</span> |
| | |
| | | </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> |
| | |
| | | this.keyMap = {} |
| | | this.list = []; |
| | | this.getList(); |
| | | this.initEchart() |
| | | // this.initEchart() |
| | | this.timer&&clearInterval(this.timer) |
| | | this.timer = setInterval(() => { |
| | | this.init(); |
| | |
| | | margin-bottom: 16px; |
| | | border-radius: 16px; |
| | | } |
| | | |
| | | .right-time-1 { |
| | | background: url("~@/assets/images/bg1.png") no-repeat; |
| | | background-size: 100% 100%; |
| | |
| | | padding: 10px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | >>>.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; |
| | | } |
| | | |
| | | .right-3 { |
| | | height: 600px; |
| | | } |
| | | |
| | | .right-3-tab{ |
| | | padding: 20px 20px 10px 20px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .tab-item{ |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | |
| | | font-style: normal; |
| | | text-transform: none; |
| | | } |
| | | |
| | | .tab-item2{ |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #FD8504; |
| | | } |
| | | |
| | | .right-3-list{ |
| | | padding: 0 20px 20px 20px; |
| | | box-sizing: border-box; |
| | | height: 544px; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .list3-item{ |
| | | padding: 10px; |
| | | margin: 8px 0; |
| | | height: 94px; |
| | | background: #F7F7F7; |
| | | } |
| | | |
| | | .list3-item:hover{ |
| | | background: rgba(58, 123, 250,0.05); |
| | | } |
| | | |
| | | .list3-item-title{ |
| | | margin-bottom: 6px; |
| | | font-weight: 600; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .blue-dot::before { |
| | | content: "•"; /* 这是小蓝点的字符 */ |
| | | color: #3A7BFA; /* 设置颜色为蓝色 */ |
| | | font-size: 20px; /* 设置大小 */ |
| | | content: "•"; |
| | | /* 这是小蓝点的字符 */ |
| | | color: #3A7BFA; |
| | | /* 设置颜色为蓝色 */ |
| | | font-size: 20px; |
| | | /* 设置大小 */ |
| | | line-height: 20px; |
| | | margin-right: 5px; /* 与<span>内容之间的间距 */ |
| | | margin-right: 5px; |
| | | /* 与<span>内容之间的间距 */ |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .blue-dot1 { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #3A7BFA; |
| | | } |
| | | |
| | | .list3-item-info{ |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | color: #3D3D3D; |
| | | height: 60%; |
| | | } |
| | | |
| | | .ellipsis-multiline { |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #3D3D3D; |
| | | } |
| | | |
| | | .createTime-info { |
| | | font-weight: 400; |
| | | font-size: 12px; |
| | | color: #9F9F9F; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | >>>.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; |
| | | } |
| | | |
| | | >>>.el-tag--dark{ |
| | | border: 0; |
| | | } |
| | | |
| | | .body-item-name { |
| | | display: inline-block; |
| | | height: 22px; |
| | |
| | | color: #fff; |
| | | font-size: 12px |
| | | } |
| | | |
| | | .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; |