| | |
| | | <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-1">{{nickName}} 您好!祝您开心每一天</div> |
| | | <div class="say-2">当前时间: {{now}}</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-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 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 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.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.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> |
| | | </el-col> |
| | | <el-col :lg="10" :md="10" :sm="24" :xl="10" :xs="24"> |
| | | <div class="right-1 card"> |
| | | <div class="right-1-item"> |
| | | <div class="img"> |
| | | <img alt="" src="@/assets/index_image/index-0.svg"> |
| | | </div> |
| | | <div class="mun"> |
| | | <p style="font-size: 20px;">{{getNumberFourTypes.totalNumberOfMessages}}</p> |
| | | <p style="font-size: 14px;margin-bottom: 10px;">我的待办</p> |
| | | </div> |
| | | </div> |
| | | <div class="right-1-item"> |
| | | <div class="img"> |
| | | <img alt="" src="@/assets/index_image/index-1.svg"> |
| | | </div> |
| | | <div class="mun"> |
| | | <p style="font-size: 20px;">{{ getNumberFourTypes.totalNumberOfReadMessages }}</p> |
| | | <p style="font-size: 14px;margin-bottom: 10px;">已办事宜</p> |
| | | </div> |
| | | </div> |
| | | <div class="right-1-item"> |
| | | <div class="img"> |
| | | <img alt="" src="@/assets/index_image/index-2.svg"> |
| | | </div> |
| | | <div class="mun"> |
| | | <p style="font-size: 20px;">{{ getNumberFourTypes.remainingToDo }}</p> |
| | | <p style="font-size: 14px;margin-bottom: 10px;">剩余待办</p> |
| | | </div> |
| | | </div> |
| | | <div class="right-1-item"> |
| | | <div class="img"> |
| | | <img alt="" src="@/assets/index_image/index-3.svg"> |
| | | </div> |
| | | <div class="mun"> |
| | | <p style="font-size: 20px;">{{ getNumberFourTypes.totalNumberOfMessagesInThePastSevenDays }}</p> |
| | | <p style="font-size: 14px;margin-bottom: 10px;">近期事宜</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="right-2 card"> |
| | | <div class="right-2-title"> |
| | | <span style="color: #333333;font-size: 16px;">我的日程</span> |
| | | <span style="cursor: pointer;font-size: 12px; |
| | | color: #3A7BFA;" @click="dialogVisible=true">添加我的日程</span> |
| | | <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" |
| | | placeholder="选择月" size="mini" @change="changeTime" style="width: 130px;"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div class="right-2-body"> |
| | | <div class="calendar" style="width: 49%;"> |
| | | <div class="control"> |
| | | <el-button class="prevm" icon="el-icon-arrow-left" @click="prevMonth(calendarValue)"></el-button> |
| | | <span>{{ calendarValue.getFullYear()+'年'+(calendarValue.getMonth() + 1)+'月' }}</span> |
| | | <el-button class="nextm" icon="el-icon-arrow-right" @click="nextMonth(calendarValue)"></el-button> |
| | | <el-row :gutter="10" style="width: 100%;"> |
| | | <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> |
| | | <el-calendar v-model="calendarValue"> |
| | | <template |
| | | slot="dateCell" |
| | | slot-scope="{date, data}"> |
| | | <span> |
| | | {{ data.day.split('-').slice(2)+'' }} |
| | | </span> |
| | | <!-- <el-badge v-if="data.isSelected" is-dot class="item"> |
| | | </el-badge> --> |
| | | </template> |
| | | </el-calendar> |
| | | </div> |
| | | <div v-loading="scheduleLoading" class="right-2-list" style="width: 49%;height: 286px;"> |
| | | <div v-for="(m,i) in listScheduleByMe" :key="i" class="list2-item"> |
| | | <span>{{ m.scheduleTimes }}</span> |
| | | <el-tooltip :content="m.text" effect="dark" placement="top" style="margin-left: 10px;"> |
| | | <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> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <Echarts ref="chart" |
| | | :legend="pieLegend" |
| | | :series="materialPieSeries" |
| | | :tooltip="pieTooltip" |
| | | style="height: 150px;width: 100%;"></Echarts> |
| | | </el-col> |
| | | </el-row> |
| | | </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="tab-item">待办事项</div> |
| | | <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"> |
| | | <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> |
| | | <span class="blue-dot">{{ m.theme }}</span> |
| | | <el-link class="blue-dot1" @click="goAddList(m)">查看</el-link> |
| | | </div> |
| | | <div class="list3-item-info"> |
| | | <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过期 --> |
| | | <div class="ellipsis-multiline" @click="goNoticeDetail(m)"> |
| | | {{ m.content }} |
| | | </p> |
| | | <p>{{ m.createTime }}</p> |
| | | </div> |
| | | <div class="createTime-info">时间:{{ m.createTime }}</div> |
| | | </div> |
| | | </div> |
| | | </scroll-pagination> |
| | |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-dialog :visible.sync="dialogVisible" title="日程添加" width="400px"> |
| | | <div class="body" style="max-height: 60vh;"> |
| | | <el-row> |
| | | <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" |
| | | style="width: 100%;" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"> |
| | | </el-date-picker> |
| | | </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-input v-model="query.text" :rows="2" |
| | | placeholder="请输入内容" size="small" type="textarea"></el-input> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-row> |
| | | <el-button @click="handleCancel">取 消</el-button> |
| | | <el-button :loading="loading" type="primary" @click="submit">确 定</el-button> |
| | | </el-row> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import {getYearAndMonthAndDays} from '@/utils/date.js' |
| | | import ScrollPagination from '@/components/index/scroll-paging.vue' |
| | | import { |
| | | calendarWorkByWeek, |
| | | currentUserWorkHourCount, |
| | | msgRoll, |
| | | page, |
| | | triggerModificationStatusToRead |
| | | } from "@/api/index/report"; |
| | | import Echarts from "@/components/echarts/echarts.vue"; |
| | | import {mapGetters} from "vuex"; |
| | | export default { |
| | | components: { |
| | | ScrollPagination |
| | | Echarts, |
| | | ScrollPagination, |
| | | }, |
| | | dicts: ['sys_sub_lab'], |
| | | data() { |
| | | return { |
| | | user: {}, |
| | | now: null, |
| | | calendarValue: new Date(), |
| | | currentIndex:5, |
| | | dialogVisible:false, |
| | | query:{ |
| | | time:'', |
| | | text:'' |
| | | }, |
| | | loading:false, |
| | | workLoading:false, |
| | | workList:[], |
| | | workDay:[], |
| | |
| | | list:[], |
| | | currentPage:1, |
| | | pageSize: 8, // 一页7条 |
| | | total: null, |
| | | total: 0, |
| | | listLoading: true, // 组件loading的展示,默认为true |
| | | finishLoding: false, // 加载完成,显示已经没有更多了 |
| | | timer:null, |
| | | keyMap:{}, |
| | | getNumberFourTypes: {}, |
| | | sonLaboratory:null, |
| | | totalHour: 0, |
| | | materialPieSeries: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['40%', '60%'], |
| | | avoidLabelOverlap: false, |
| | | itemStyle: { |
| | | borderColor: '#fff', |
| | | borderWidth: 2 |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | | formatter: '{name|{b}}\n{time|{c} 小时}', |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: '#999' |
| | | } |
| | | }, |
| | | }, |
| | | labelLine: { |
| | | length: 10, |
| | | length2: 10, |
| | | }, |
| | | data: [ |
| | | { value: 0, name: '辅助工时', itemStyle: {color: '#A4EEDA'} }, |
| | | { value: 0, name: '产量工时', itemStyle: {color: '#86C1F4'} }, |
| | | ] |
| | | } |
| | | ], |
| | | pieLegend: {show: false}, |
| | | pieTooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | type:'月', |
| | | time:{ |
| | | week:'', |
| | | month:'', |
| | | year:'', |
| | | }, |
| | | } |
| | | }, |
| | | watch:{ |
| | | calendarValue(val){ |
| | | this.getScheduleByMe() |
| | | }, |
| | | currentIndex(){ |
| | | this.keyMap = {} |
| | | this.currentPage = 1; |
| | | this.list = []; |
| | | this.getList(); |
| | | } |
| | | computed: { |
| | | ...mapGetters(['nickName']) |
| | | }, |
| | | mounted() { |
| | | this.user = JSON.parse(localStorage.getItem('user')) |
| | | this.nowTime() |
| | | setInterval(() => { |
| | | this.nowTime() |
| | |
| | | this.keyMap = {} |
| | | this.list = []; |
| | | this.getList(); |
| | | this.getScheduleByMe() |
| | | this.initEchart() |
| | | this.timer&&clearInterval(this.timer) |
| | | this.timer = setInterval(() => { |
| | | this.init(); |
| | |
| | | this.keyMap = {} |
| | | this.list = []; |
| | | this.getList(); |
| | | this.getScheduleByMe() |
| | | },1000*60*10) |
| | | this.getNumberFourTypesFun() |
| | | }, |
| | | methods: { |
| | | changeState (val) { |
| | | if (val == 0) { |
| | | return '待检验' |
| | | } |
| | | // 跳转页面 |
| | | goAddList(m) { |
| | | this.$router.push({name: m.jumpPath, query: { activeName: m.jumpId }}) |
| | | this.changeStatus(m) |
| | | }, |
| | | currentIndexChange () { |
| | | this.keyMap = {} |
| | | this.currentPage = 1; |
| | | this.list = []; |
| | | this.getList(); |
| | | }, |
| | | getNumberFourTypesFun() { |
| | | this.$axios.get(this.$api.informationNotification.getNumberFourTypesMessagesHomePage).then(res => { |
| | | this.getNumberFourTypes = res.data |
| | | changeStatus (m) { |
| | | triggerModificationStatusToRead({id: m.id}).then(res => { |
| | | console.log(res.data) |
| | | }) |
| | | }, |
| | | getList(){ |
| | |
| | | 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 => { |
| | | if(res.code === 201){ |
| | | return |
| | | } |
| | | const params = { |
| | | size: this.pageSize, |
| | | currentPage: this.currentPage, |
| | | } |
| | | msgRoll(params).then(res => { |
| | | let list = res.data.records; |
| | | this.total = res.data.total; |
| | | if(list.length==0){ |
| | |
| | | } |
| | | this.currentPage++; |
| | | } |
| | | this.listLoading = false |
| | | }).catch(err=>{ |
| | | this.listLoading = false |
| | | }) |
| | | }, |
| | |
| | | } |
| | | this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s; |
| | | }, |
| | | nextMonth(value) { |
| | | let year = this.calendarValue.getFullYear();// 当前年份 |
| | | let month = this.calendarValue.getMonth() + 1;// 当前月份 |
| | | let day = this.calendarValue.getDate();// 当前天数 |
| | | let nextyear = year; |
| | | let nextmonth = parseInt(month) + 1; |
| | | // 判断下一月是否会进入下一年 |
| | | if (nextmonth === 13) { |
| | | nextyear = parseInt(year) + 1; |
| | | nextmonth = 1; |
| | | } |
| | | // 计算下一年下一个月有多少天 |
| | | let nextday = new Date(nextyear, nextmonth, 0); |
| | | let nextdays = nextday.getDate(); |
| | | if (day > nextdays) { |
| | | day = nextdays; |
| | | if (day < 10) { |
| | | day = '0' + day; |
| | | } |
| | | } |
| | | if (nextmonth < 10) { |
| | | nextmonth = '0' + nextmonth; |
| | | } |
| | | let nexttime = nextyear + '-' + nextmonth + '-' + day; |
| | | |
| | | // 将得到的年月日格式转换为标准时间,与饿了么时间格式相同才能联动 |
| | | this.calendarValue = new Date(nexttime); |
| | | }, |
| | | prevMonth(time) { |
| | | let year = this.calendarValue.getFullYear();// 当前年份 |
| | | let month = this.calendarValue.getMonth() + 1;// 当前月份 |
| | | let day = this.calendarValue.getDate();// 当前天数 |
| | | let prevyear = year; |
| | | let prevmonth = parseInt(month) - 1; |
| | | // 判断上一月是否会进入上一年 |
| | | if (prevmonth === 0) { |
| | | prevyear = parseInt(year) - 1; |
| | | prevmonth = 12; |
| | | } |
| | | // 计算上一年上一个月有多少天 |
| | | let prevday = new Date(prevyear, prevmonth, 0); |
| | | let prevdays = prevday.getDate(); |
| | | if (day > prevdays) { |
| | | day = prevdays; |
| | | if (day < 10) { |
| | | day = '0' + day; |
| | | } |
| | | } |
| | | if (prevmonth < 10) { |
| | | prevmonth = '0' + prevmonth; |
| | | } |
| | | let prevtime = prevyear + '-' + prevmonth + '-' + day; |
| | | |
| | | // 将得到的年月日格式转换为标准时间,与饿了么时间格式相同才能联动 |
| | | this.calendarValue = new Date(prevtime); |
| | | }, |
| | | handleCancel(){ |
| | | this.dialogVisible = false; |
| | | this.query = { |
| | | time:'', |
| | | text:'' |
| | | } |
| | | }, |
| | | submit(){ |
| | | if(!this.query.time){ |
| | | this.$message.error('时间未填写') |
| | | return |
| | | } |
| | | 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 |
| | | calendarWorkByWeek().then(res => { |
| | | this.workLoading = false; |
| | | this.workList = []; |
| | | for(let i=0;i<7;i++){ |
| | |
| | | let arr = m.split('-') |
| | | return arr[2] |
| | | }) |
| | | }).catch(err=>{ |
| | | this.workLoading = false; |
| | | }) |
| | | }, |
| | | getWeekdaysForNextWeek() { |
| | |
| | | }) |
| | | 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 |
| | | }) |
| | | }) |
| | | }, |
| | | 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); |
| | | // 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(m){ |
| | | this.initEchart(m) |
| | | }, |
| | | async initEchart(m){ |
| | | let month = '' |
| | | if (m) { |
| | | month = m |
| | | } else { |
| | | // 获取时间 |
| | | const nowDate = new Date(); |
| | | // 分别获取年、月 |
| | | const date = { |
| | | year: nowDate.getFullYear(), |
| | | month: nowDate.getMonth() + 1, |
| | | }; |
| | | // 月份为单数时十位显示0 |
| | | const newMonth = date.month >= 10 ? date.month : "0" + date.month; |
| | | // 返回格式为yyyymm的年月 |
| | | month = date.year + '-' + newMonth; |
| | | } |
| | | const params = { |
| | | month: month, |
| | | } |
| | | currentUserWorkHourCount(params).then(res => { |
| | | this.totalHour = res.data.totalHour |
| | | this.materialPieSeries[0].data[0].value = res.data.subsidiaryHour |
| | | this.materialPieSeries[0].data[1].value = res.data.yieldHour |
| | | }) |
| | | }, |
| | | }, |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | <style scoped> |
| | | .index { |
| | | width: 100%; |
| | | height: calc(100% - 50px); |
| | | overflow-y: auto; |
| | | padding: 20px 10px 10px; |
| | | background: rgb(245, 247, 251); |
| | | padding: 14px; |
| | | background: #F5F7FB; |
| | | } |
| | | |
| | | .left-1 { |
| | |
| | | height: 118px; |
| | | margin-bottom: 16px; |
| | | border-radius: 16px; |
| | | } |
| | | .right-time-1 { |
| | | background: url("~@/assets/images/bg1.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | padding: 4px 0 4px 50px; |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | height: 122px; |
| | | } |
| | | |
| | | .left-1 .say { |
| | |
| | | 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; |
| | | } |
| | | |
| | | .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; |
| | | padding: 10px; |
| | | margin-bottom: 20px; |
| | | } |
| | | >>>.el-calendar__header { |
| | | display: none; |
| | |
| | | >>>.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 { |
| | | height: 600px; |
| | | } |
| | | .right-3-tab{ |
| | | padding: 20px 20px 10px 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | .tab-item{ |
| | | width: 50%; |
| | | box-sizing: border-box; |
| | | text-align: center; |
| | | padding: 14px 0; |
| | | font-size: 20px; |
| | | background: #F5F7FB; |
| | | color: #333333; |
| | | } |
| | | .tab-item.active{ |
| | | background: #fff; |
| | | color: #FF3838; |
| | | padding-left: 16px; |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | color: #3D3D3D; |
| | | line-height: 25px; |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | } |
| | | .tab-item2{ |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #FD8504; |
| | | } |
| | | .right-3-list{ |
| | | padding: 0 12px 8px; |
| | | padding: 0 20px 20px 20px; |
| | | box-sizing: border-box; |
| | | height: 390px; |
| | | height: 544px; |
| | | overflow-y: auto; |
| | | } |
| | | .list3-item{ |
| | | padding: 6px 4px; |
| | | 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; |
| | | font-size: 14px; |
| | | color: #3D3D3D; |
| | | display: flex; |
| | | align-items: start; |
| | | margin-bottom: 10px; |
| | | justify-content: space-between; |
| | | } |
| | | .blue-dot::before { |
| | | content: "•"; /* 这是小蓝点的字符 */ |
| | | color: #3A7BFA; /* 设置颜色为蓝色 */ |
| | | font-size: 20px; /* 设置大小 */ |
| | | line-height: 20px; |
| | | margin-right: 5px; /* 与<span>内容之间的间距 */ |
| | | vertical-align: middle; |
| | | } |
| | | .blue-dot1 { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #3A7BFA; |
| | | } |
| | | .list3-item-info{ |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | color: #666666; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | 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; |
| | |
| | | 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; |
| | |
| | | background: #3A7BFA !important; |
| | | color: #fff !important; |
| | | } |
| | | >>>.el-tag--dark{ |
| | | border: 0; |
| | | } |
| | | .body-item-name { |
| | | display: inline-block; |
| | | height: 22px;width: 60px; |
| | | height: 22px; |
| | | width: 60px; |
| | | border-radius: 10px; |
| | | line-height: 22px; |
| | | text-align: center; |
| | | background: #C0C4CC; |
| | | color: #fff; |
| | | font-size: 14px |
| | | font-size: 12px |
| | | } |
| | | .body-item-insState { |
| | | margin-left: 2px; |
| | |
| | | line-height: 22px; |
| | | text-align: center; |
| | | color: #fff; |
| | | font-size: 14px |
| | | font-size: 12px |
| | | } |
| | | </style> |