<template>
|
<div class="index">
|
<el-row :gutter="25">
|
<el-col :lg="14" :md="14" :sm="24" :xl="14" :xs="24">
|
<div class="left-1">
|
<div class="say">
|
<div style="display: flex;align-items: center;flex-wrap: wrap;">
|
<div class="say-1">{{user.name}} 您好！祝您开心每一天</div>
|
<div class="say-2">当前时间： {{now}}</div>
|
</div>
|
</div>
|
</div>
|
<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 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: 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-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-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-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>
|
</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==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">
|
<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)">
|
{{ m.content }}
|
</p>
|
<p>{{ m.createTime }}</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>
|
</div>
|
</el-col>
|
</el-row>
|
</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,
|
EchartModule
|
},
|
dicts: ['sys_sub_lab'],
|
data() {
|
return {
|
user: {},
|
now: null,
|
calendarValue: new Date(),
|
currentIndex:5,
|
workLoading:false,
|
workList:[],
|
workDay:[],
|
weekdays:[],
|
listScheduleByMe:[],
|
scheduleLoading:false,
|
list:[],
|
currentPage:1,
|
pageSize: 8, // 一页7条
|
total: null,
|
listLoading: true, // 组件loading的展示,默认为true
|
finishLoding: false, // 加载完成，显示已经没有更多了
|
timer:null,
|
keyMap:{},
|
sonLaboratory:null,
|
chartData0:{
|
total:0,
|
personNum:0,
|
data:[]
|
},
|
chartConfig0:{
|
height: '',
|
isLoading:false,
|
type:'pie0'
|
},
|
type:'月',
|
time:{
|
week:'',
|
month:'',
|
year:'',
|
},
|
}
|
},
|
watch:{
|
currentIndex(){
|
this.keyMap = {}
|
this.currentPage = 1;
|
this.list = [];
|
this.getList();
|
}
|
},
|
mounted() {
|
// this.user = JSON.parse(localStorage.getItem('user'))
|
this.nowTime()
|
setInterval(() => {
|
this.nowTime()
|
}, 1000)
|
this.weekdays = this.getWeekdaysForNextWeek()
|
this.init();
|
this.currentPage = 1;
|
this.keyMap = {}
|
this.list = [];
|
this.getList();
|
this.timer&&clearInterval(this.timer)
|
this.timer = setInterval(() => {
|
this.init();
|
this.currentPage = 1;
|
this.keyMap = {}
|
this.list = [];
|
this.getList();
|
},1000*60*10)
|
},
|
methods: {
|
// 跳转页面
|
goAddList() {
|
|
},
|
changeState (val) {
|
if (val == 0) {
|
return '待检验'
|
}
|
},
|
getList(){
|
const key = `_${this.currentPage}`
|
const value = this.keyMap[key]
|
// 如果value存在，表示缓存有值，那么阻止请求
|
if(value) {
|
return
|
}
|
// value不存在，表示第一次请求,设置占位
|
this.keyMap[key] = 'temp'
|
if(this.currentPage==1){
|
this.listLoading = true
|
}
|
if(this.list.length==0){
|
this.finishLoding = false;
|
}
|
// this.$axios.get(this.$api.informationNotification.page+'?size='+this.pageSize+'¤t='+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();
|
var y = date.getFullYear();
|
var m = date.getMonth() + 1;
|
var d = date.getDate();
|
var h = date.getHours();
|
this.timeH = h
|
var min = date.getMinutes();
|
var s = date.getSeconds();
|
if (s < 10) {
|
s = "0" + s;
|
}
|
if (min < 10) {
|
min = "0" + min;
|
}
|
if (h < 10) {
|
h = "0" + h;
|
}
|
if (d < 10) {
|
d = "0" + d;
|
}
|
if (m < 10) {
|
m = "0" + m;
|
}
|
this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
|
},
|
// 获取日历任务图
|
init(){
|
this.workLoading = true;
|
calendarWorkByWeek().then(res => {
|
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=>{
|
let arr = m.split('-')
|
return arr[2]
|
})
|
}).catch(err=>{
|
this.workLoading = false;
|
})
|
},
|
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.reverse()
|
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;
|
},
|
goNoticeDetail(row){
|
this.$axios.put(this.$api.informationNotification.triggerModificationStatusToRead+'/'+row.id).then(res => {
|
row.num = Math.random(100);
|
this.$bus.$emit("change", JSON.stringify(row));
|
this.$parent.addTab({
|
v: "消息详情",
|
i: "el-icon-s-tools",
|
u: "notice-detail",
|
k:35,
|
p: "abcd"
|
},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)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.index {
|
width: 100%;
|
height: calc(100% - 50px);
|
overflow-y: auto;
|
padding: 14px;
|
background: #F5F7FB;
|
}
|
|
.left-1 {
|
background-image: url("~@/assets/index_image/index-img1.png");
|
background-size: 100% 100%;
|
height: 118px;
|
margin-bottom: 16px;
|
border-radius: 16px;
|
}
|
|
.left-1 .say {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
margin-left: 15%;
|
width: 45%;
|
}
|
|
.left-1 .say div {
|
color: #fff;
|
margin: 4px 0;
|
}
|
|
.left-1 .say-1 {
|
font-size: 18px;
|
}
|
|
.left-1 .say-2 {
|
font-size: 17px;
|
}
|
|
::-webkit-scrollbar {
|
width: 0px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 3px;
|
}
|
|
.card{
|
background: #FFFFFF;
|
border-radius: 16px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.right-1{
|
padding: 10px 10px 4px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 16px;
|
}
|
|
.right-1-item{
|
width: 25%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.right-1-item .mun{
|
margin-left: 6px;
|
color: #0166E2;
|
}
|
|
.right-2{
|
padding: 13px 14px 8px;
|
margin-bottom: 16px;
|
}
|
|
.right-2-title{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.right-2-body{
|
width: 100%;
|
margin-top: 20px;
|
/* display: flex;
|
align-items: 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;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding: 0px 0 10px;
|
}
|
.control .el-button{
|
width: 32px;
|
height: 32px;
|
border-radius: 8px;
|
border: 1px solid #E8E8E8;
|
background: #fff;
|
padding: 0;
|
color: #0166E2;
|
font-size: 20px;
|
}
|
.list2-item{
|
line-height: 22px;
|
display: flex;
|
margin-bottom: 12px;
|
font-size: 14px;
|
}
|
.right-3-tab{
|
padding: 20px 0 0 20px;
|
margin-bottom: 16px;
|
}
|
.tab-item{
|
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;
|
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: start;
|
margin-bottom: 10px;
|
}
|
.list3-item-info{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
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;
|
flex-direction: column;
|
align-items: center;
|
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;
|
cursor: pointer;
|
}
|
.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;
|
background: rgba(255, 255, 255,0.9);
|
padding: 8px 8px 16px;
|
display: flex;
|
flex-direction: column;
|
}
|
.search_thing {
|
height: 50px;
|
margin-bottom: 26px;
|
}
|
|
.search_label {
|
width: 120px;
|
font-size: 14px;
|
text-align: left;
|
margin-bottom: 10px;
|
}
|
>>>.el-calendar-day span{
|
display: inline-block;
|
width: 30px;
|
height: 30px;
|
line-height: 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;
|
}
|
</style>
|
