From e5454b769d44a34af423bf87ac8a740bf8c20341 Mon Sep 17 00:00:00 2001 From: Crunchy <3114200645@qq.com> Date: 星期二, 29 四月 2025 13:25:29 +0800 Subject: [PATCH] Merge branch 'dev' into dev_tides --- src/views/index.vue | 500 +++++++++++++++++++++++++------------------------------ 1 files changed, 228 insertions(+), 272 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index b540921..b9dcf90 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -5,7 +5,7 @@ <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> @@ -18,117 +18,69 @@ <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 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: 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> + <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> </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> + <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" - 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;"> + date-format="yyyy-MM" + value-format="yyyy-MM" + placeholder="閫夋嫨鏈�" size="mini" @change="changeTime" 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> + <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-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 :span="12"> + <Echarts ref="chart" + :legend="pieLegend" + :series="materialPieSeries" + :tooltip="pieTooltip" + style="height: 150px;width: 100%;"></Echarts> </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 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"> - <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)"> + <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> @@ -141,22 +93,26 @@ </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' +import { + calendarWorkByWeek, + currentUserWorkHourCount, + msgRoll, + page, + triggerModificationStatusToRead +} from "@/api/index/report"; +import Echarts from "@/components/echarts/echarts.vue"; +import {mapGetters} from "vuex"; export default { components: { + Echarts, ScrollPagination, - EchartModule }, dicts: ['sys_sub_lab'], data() { return { - user: {}, now: null, calendarValue: new Date(), - currentIndex:5, workLoading:false, workList:[], workDay:[], @@ -166,21 +122,48 @@ list:[], currentPage:1, pageSize: 8, // 涓�椤�7鏉� - total: null, + total: 0, listLoading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue finishLoding: false, // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡 timer:null, keyMap:{}, sonLaboratory:null, - chartData0:{ - total:0, - personNum:0, - data:[] - }, - chartConfig0:{ - height: '', - isLoading:false, - type:'pie0' + 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:{ @@ -190,16 +173,10 @@ }, } }, - watch:{ - 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() @@ -210,6 +187,7 @@ this.keyMap = {} this.list = []; this.getList(); + this.initEchart() this.timer&&clearInterval(this.timer) this.timer = setInterval(() => { this.init(); @@ -221,13 +199,14 @@ }, methods: { // 璺宠浆椤甸潰 - goAddList() { - + goAddList(m) { + this.$router.push({name: m.jumpPath, query: { activeName: m.jumpId }}) + this.changeStatus(m) }, - changeState (val) { - if (val == 0) { - return '寰呮楠�' - } + changeStatus (m) { + triggerModificationStatusToRead({id: m.id}).then(res => { + console.log(res.data) + }) }, getList(){ const key = `_${this.currentPage}` @@ -244,25 +223,29 @@ 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 - // }) + 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.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++; + } + this.listLoading = false + }).catch(err=>{ + this.listLoading = false + }) }, nowTime() { var date = new Date(); @@ -346,76 +329,46 @@ 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); - }) + // 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() + 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; + // 杩斿洖鏍煎紡涓簓yyymm鐨勫勾鏈� + month = date.year + '-' + newMonth; } - this.initEchart() - }, - async initEchart(){ - this.chartConfig0.isLoading = false const params = { - startTime: this.startTime, - endTime: this.endTime, - sonLaboratory: this.sonLaboratory, + month: month, } - 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 + 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 + }) }, }, deactivated(){ @@ -439,6 +392,14 @@ 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 { @@ -478,44 +439,14 @@ 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; */ + padding: 10px; + margin-bottom: 20px; } >>>.el-calendar__header { display: none; @@ -537,32 +468,13 @@ >>>.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 0 0 20px; - margin-bottom: 16px; + padding: 20px 20px 10px 20px; + display: flex; + justify-content: space-between; } .tab-item{ font-weight: 500; @@ -573,30 +485,65 @@ 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; @@ -635,7 +582,6 @@ border-radius: 16px; overflow: hidden; margin-bottom: 8px; - cursor: pointer; } .body-item.color0{ background: #70A090; @@ -653,17 +599,6 @@ 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; @@ -693,4 +628,25 @@ >>>.el-tag--dark{ border: 0; } +.body-item-name { + display: inline-block; + height: 22px; + width: 60px; + border-radius: 10px; + line-height: 22px; + text-align: center; + background: #C0C4CC; + color: #fff; + font-size: 12px +} +.body-item-insState { + margin-left: 2px; + display: inline-block; + height: 22px;width: 60px; + border-radius: 10px; + line-height: 22px; + text-align: center; + color: #fff; + font-size: 12px +} </style> -- Gitblit v1.9.3