From 7d828bee5a6468b494f57a7984b0a52ec49b1356 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 03 四月 2025 14:36:58 +0800
Subject: [PATCH] 标准库修改
---
src/views/index.vue | 276 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 163 insertions(+), 113 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 858773c..4d536a3 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -5,30 +5,37 @@
<div class="left-1">
<div class="say">
<div style="display: flex;align-items: center;flex-wrap: wrap;">
- <div class="say-1">{{nickName}} 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</div>
- <div class="say-2">褰撳墠鏃堕棿锛� {{now}}</div>
+ <div class="say-1">{{ nickName }} 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</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-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>
+ <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>
@@ -40,11 +47,7 @@
<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>
@@ -52,26 +55,26 @@
<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"
- style="height: 150px;width: 100%;"></Echarts>
+ <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="tab-item">寰呭姙浜嬮」</div>
- <div class="tab-item2">{{'鎮ㄦ湁' + total + '椤逛换鍔″緟瀹屾垚'}}</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">
+ <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>
<el-link class="blue-dot1" @click="goAddList(m)">鏌ョ湅</el-link>
@@ -84,7 +87,8 @@
</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>
@@ -94,9 +98,9 @@
<script>
import ScrollPagination from '@/components/index/scroll-paging.vue'
-import {calendarWorkByWeek, currentUserWorkHourCount, msgRoll, page} from "@/api/index/report";
+import { calendarWorkByWeek, currentUserWorkHourCount, msgRoll, page } from "@/api/index/report";
import Echarts from "@/components/echarts/echarts.vue";
-import {mapGetters} from "vuex";
+import { mapGetters } from "vuex";
export default {
components: {
Echarts,
@@ -107,21 +111,21 @@
return {
now: null,
calendarValue: new Date(),
- workLoading:false,
- workList:[],
- workDay:[],
- weekdays:[],
- listScheduleByMe:[],
- scheduleLoading:false,
- list:[],
- currentPage:1,
+ workLoading: false,
+ workList: [],
+ workDay: [],
+ weekdays: [],
+ listScheduleByMe: [],
+ scheduleLoading: false,
+ list: [],
+ currentPage: 1,
pageSize: 8, // 涓�椤�7鏉�
total: 0,
listLoading: true, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue
finishLoding: false, // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡
- timer:null,
- keyMap:{},
- sonLaboratory:null,
+ timer: null,
+ keyMap: {},
+ sonLaboratory: null,
totalHour: 0,
materialPieSeries: [
{
@@ -150,20 +154,20 @@
length2: 10,
},
data: [
- { value: 0, name: '杈呭姪宸ユ椂', itemStyle: {color: '#A4EEDA'} },
- { value: 0, name: '浜ч噺宸ユ椂', itemStyle: {color: '#86C1F4'} },
+ { value: 0, name: '杈呭姪宸ユ椂', itemStyle: { color: '#A4EEDA' } },
+ { value: 0, name: '浜ч噺宸ユ椂', itemStyle: { color: '#86C1F4' } },
]
}
],
- pieLegend: {show: false},
+ pieLegend: { show: false },
pieTooltip: {
trigger: 'item'
},
- type:'鏈�',
- time:{
- week:'',
- month:'',
- year:'',
+ type: '鏈�',
+ time: {
+ week: '',
+ month: '',
+ year: '',
},
}
},
@@ -181,34 +185,34 @@
this.keyMap = {}
this.list = [];
this.getList();
- this.initEchart()
- this.timer&&clearInterval(this.timer)
+ // this.initEchart()
+ this.timer && clearInterval(this.timer)
this.timer = setInterval(() => {
this.init();
this.currentPage = 1;
this.keyMap = {}
this.list = [];
this.getList();
- },1000*60*10)
+ }, 1000 * 60 * 10)
},
methods: {
// 璺宠浆椤甸潰
goAddList(m) {
- this.$router.push({name: m.jumpPath, query: { activeName: m.jumpId }})
+ this.$router.push({ name: m.jumpPath, query: { activeName: m.jumpId } })
},
- getList(){
+ getList() {
const key = `_${this.currentPage}`
const value = this.keyMap[key]
// 濡傛灉value瀛樺湪锛岃〃绀虹紦瀛樻湁鍊硷紝閭ｄ箞闃绘璇锋眰
- if(value) {
+ if (value) {
return
}
// value涓嶅瓨鍦紝琛ㄧず绗竴娆¤姹�,璁剧疆鍗犱綅
this.keyMap[key] = 'temp'
- if(this.currentPage==1){
+ if (this.currentPage == 1) {
this.listLoading = true
}
- if(this.list.length==0){
+ if (this.list.length == 0) {
this.finishLoding = false;
}
const params = {
@@ -218,20 +222,20 @@
msgRoll(params).then(res => {
let list = res.data.records;
this.total = res.data.total;
- if(list.length==0){
+ if (list.length == 0) {
this.finishLoding = true;
- }else{
- if(list.length<this.pageSize){
+ } else {
+ if (list.length < this.pageSize) {
this.finishLoding = true;
}
this.list = this.list.concat(list)
- if(this.total==this.list.length){
+ if (this.total == this.list.length) {
this.finishLoding = true;
}
this.currentPage++;
}
this.listLoading = false
- }).catch(err=>{
+ }).catch(err => {
this.listLoading = false
})
},
@@ -262,19 +266,19 @@
this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
},
// 鑾峰彇鏃ュ巻浠诲姟鍥�
- init(){
+ init() {
this.workLoading = true;
calendarWorkByWeek().then(res => {
this.workLoading = false;
this.workList = [];
- for(let i=0;i<7;i++){
+ for (let i = 0; i < 7; i++) {
this.workList.push(res.data[`work${i}`])
}
- this.workDay = res.data.weekDays.map(m=>{
+ this.workDay = res.data.weekDays.map(m => {
let arr = m.split('-')
return arr[2]
})
- }).catch(err=>{
+ }).catch(err => {
this.workLoading = false;
})
},
@@ -287,8 +291,8 @@
weekdays.push(day);
}
weekdays.reverse()
- weekdays = weekdays.map(m=>{
- let day =''
+ weekdays = weekdays.map(m => {
+ let day = ''
switch (m) {
case 0:
day = '鏄熸湡澶�'
@@ -316,7 +320,7 @@
})
return weekdays;
},
- goNoticeDetail(row){
+ 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));
@@ -329,10 +333,10 @@
// },29);
// })
},
- changeTime(m){
+ changeTime(m) {
this.initEchart(m)
},
- async initEchart(m){
+ async initEchart(m) {
let month = ''
if (m) {
month = m
@@ -359,8 +363,8 @@
})
},
},
- deactivated(){
- this.timer&&clearInterval(this.timer)
+ deactivated() {
+ this.timer && clearInterval(this.timer)
}
}
</script>
@@ -381,6 +385,7 @@
margin-bottom: 16px;
border-radius: 16px;
}
+
.right-time-1 {
background: url("~@/assets/images/bg1.png") no-repeat;
background-size: 100% 100%;
@@ -420,51 +425,60 @@
border-radius: 3px;
}
-.card{
+.card {
background: #FFFFFF;
border-radius: 16px;
width: 100%;
box-sizing: border-box;
}
-.right-1-item .mun{
+.right-1-item .mun {
margin-left: 6px;
color: #0166E2;
}
-.right-2{
+.right-2 {
padding: 10px;
margin-bottom: 20px;
}
+
>>>.el-calendar__header {
display: none;
}
->>>.el-calendar__body{
+
+>>>.el-calendar__body {
padding: 0;
}
+
>>>.el-calendar-table:not(.is-range) td.next {
/*闅愯棌涓嬩釜鏈堢殑鏃ユ湡*/
display: none;
}
->>>.el-calendar-day{
+
+>>>.el-calendar-day {
height: 40px;
}
->>>.el-calendar-table td{
+
+>>>.el-calendar-table td {
border: 0;
font-size: 14px;
}
->>>.el-calendar-table tr td:first-child{
+
+>>>.el-calendar-table tr td:first-child {
border-left: 0;
}
+
.right-3 {
height: 600px;
}
-.right-3-tab{
+
+.right-3-tab {
padding: 20px 20px 10px 20px;
display: flex;
justify-content: space-between;
}
-.tab-item{
+
+.tab-item {
font-weight: 500;
font-size: 18px;
color: #3D3D3D;
@@ -473,27 +487,32 @@
font-style: normal;
text-transform: none;
}
-.tab-item2{
+
+.tab-item2 {
font-weight: 500;
font-size: 14px;
color: #FD8504;
}
-.right-3-list{
+
+.right-3-list {
padding: 0 20px 20px 20px;
box-sizing: border-box;
height: 544px;
overflow-y: auto;
}
-.list3-item{
+
+.list3-item {
padding: 10px;
margin: 8px 0;
height: 94px;
background: #F7F7F7;
}
-.list3-item:hover{
- background: rgba(58, 123, 250,0.05);
+
+.list3-item:hover {
+ background: rgba(58, 123, 250, 0.05);
}
-.list3-item-title{
+
+.list3-item-title {
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
@@ -501,20 +520,27 @@
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{
+
+.list3-item-info {
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -523,35 +549,43 @@
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{
+
+.left-2 {
display: grid;
grid-template-columns: repeat(7, 1fr);
height: 777px;
}
-.left-2-item{
+
+.left-2-item {
border-right: 1px solid #F1F1F1;
overflow: hidden !important;
}
-.left-2-item:nth-last-child(1){
+
+.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 {
+ background: rgba(58, 123, 250, 0.05);
}
-.left-2-item:hover .left-item-title span{
+
+.left-2-item:hover .left-item-title span {
color: #3A7BFA !important;
}
-.left-item-title{
+
+.left-item-title {
border-bottom: 1px solid #F1F1F1;
display: flex;
flex-direction: column;
@@ -559,36 +593,43 @@
justify-content: center;
padding: 20px 0;
}
-.left-item-body{
+
+.left-item-body {
box-sizing: border-box;
padding: 5px;
height: 693px;
overflow-y: auto;
}
-.body-item{
+
+.body-item {
background: #70A090;
border-radius: 16px;
overflow: hidden;
margin-bottom: 8px;
}
-.body-item.color0{
+
+.body-item.color0 {
background: #70A090;
}
-.body-item.color1{
+
+.body-item.color1 {
background: #EBD476;
}
-.body-item.color2{
+
+.body-item.color2 {
background: #FF3838;
}
-.body-item>div{
+
+.body-item>div {
height: calc(100% - 16px);
margin-top: 16px;
- background: rgba(255, 255, 255,0.9);
+ background: rgba(255, 255, 255, 0.9);
padding: 8px 8px 16px;
display: flex;
flex-direction: column;
}
->>>.el-calendar-day span{
+
+>>>.el-calendar-day span {
display: inline-block;
width: 30px;
height: 30px;
@@ -596,26 +637,33 @@
text-align: center;
border-radius: 4px;
}
->>>.is-selected{
+
+>>>.is-selected {
background: transparent !important;
}
->>>.is-selected .el-calendar-day{
+
+>>>.is-selected .el-calendar-day {
background: transparent !important;
}
->>>.is-selected .el-calendar-day span{
+
+>>>.is-selected .el-calendar-day span {
background: #3A7BFA !important;
color: #fff !important;
}
->>>.el-calendar-day:hover{
+
+>>>.el-calendar-day:hover {
background: transparent;
}
->>>.el-calendar-day span:hover{
+
+>>>.el-calendar-day span:hover {
background: #3A7BFA !important;
color: #fff !important;
}
->>>.el-tag--dark{
+
+>>>.el-tag--dark {
border: 0;
}
+
.body-item-name {
display: inline-block;
height: 22px;
@@ -627,10 +675,12 @@
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;
--
Gitblit v1.9.3