From 41c9b2fa8cef5f45c23d00d33680764b48dfc3cc Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期日, 27 四月 2025 11:03:43 +0800
Subject: [PATCH] 修改缓存
---
src/page/wel.vue | 642 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 392 insertions(+), 250 deletions(-)
diff --git a/src/page/wel.vue b/src/page/wel.vue
index fb7e60a..03cdf33 100644
--- a/src/page/wel.vue
+++ b/src/page/wel.vue
@@ -1,117 +1,318 @@
<template>
<div class="dashboard-main">
- <!-- <iframe
- src="https://console.huaweicloud.com/dlv/vision/share/?id=0b3b4dd2d19249c89991b8989b76e185&locale=zh-cn®ion=cn-north-1"
- width="100%"
- height="100%"
- style="border: none;"
- id="myiframe"
- >浣犵殑娴忚鍣ㄤ笉鏀寔璇frame鏍囩</iframe
- > -->
- <!-- <iframe
- src="http://124.221.177.11/#/home"
- width="100%"
- height="100%"
- style="border: none;"
- id="myiframe"
- >浣犵殑娴忚鍣ㄤ笉鏀寔璇frame鏍囩</iframe
- > -->
- <!-- <el-image :src="url" style="width:100%;height:100%;"></el-image> -->
- <!-- <el-row style="width: 100%; height: 100%;background-color: white;">
- <span>鏆傛湭寮�鍙戙�傘�傘�傘�傘�傘��</span>
- </el-row> -->
+ <div class="body">
+ <el-row>
+ <el-col :xs="24" :sm="14" :md="14" :lg="14">
+ <p class="todo-title"><i class="el-icon-bell"></i><span> 鐢熶骇璋冨害 路 寰呭姙</span></p>
+ <div style="display: flex;
+ align-items: center;
+ justify-content: space-between;margin-bottom: 16px;">
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
+ <span>浠婃棩寰呭姙</span>
+ <span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByDay }}</span>
+ </div>
+ <img src="../assets/daliy-0.svg" alt="">
+ </div>
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
+ <span>鏈懆寰呭姙</span>
+ <span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByWeek }}</span>
+ </div>
+ <img src="../assets/daliy-1.svg" alt="">
+ </div>
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
+ <span>鏈湀寰呭姙</span>
+ <span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByMonth }}</span>
+ </div>
+ <img src="../assets/daliy-2.svg" alt="">
+ </div>
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
+ <span>瓒呮湡</span>
+ <span style="font-size: 20px;font-weight: 500;color:red;">{{ todoInfo.outByTime }}</span>
+ </div>
+ <svg xmlns="http://www.w3.org/2000/svg" width="61" height="61" viewBox="0 0 61 61" fill="none">
+ <path opacity="0.21" d="M0.871094 23.209C0.871094 10.5064 11.1685 0.208984 23.8711 0.208984H37.8711C50.5736 0.208984 60.8711 10.5064 60.8711 23.209V37.209C60.8711 49.9115 50.5736 60.209 37.8711 60.209H23.8711C11.1685 60.209 0.871094 49.9115 0.871094 37.209V23.209Z" fill="red"/>
+ <path opacity="0.78" fill-rule="evenodd" clip-rule="evenodd" d="M29.503 24.8742C29.523 24.6138 29.7402 24.4126 30.0015 24.4126H30.4193C30.6762 24.4126 30.8913 24.6072 30.9169 24.8628L31.5385 31.0793L35.9532 33.602C36.109 33.691 36.2052 33.8567 36.2052 34.0361V34.4246C36.2052 34.7543 35.8917 34.9938 35.5736 34.907L29.2705 33.188C29.0391 33.1249 28.8851 32.9064 28.9035 32.6673L29.503 24.8742Z" fill="red"/>
+ <path opacity="0.901274" fill-rule="evenodd" clip-rule="evenodd" d="M23.5928 16.0498C23.3287 15.735 22.8188 15.8555 22.7235 16.2552L21.09 23.1033C21.0123 23.4289 21.2704 23.7374 21.6046 23.7185L28.6494 23.3193C29.0603 23.296 29.2687 22.814 29.0041 22.4987L27.2027 20.3519C28.3676 19.9538 29.6028 19.7459 30.8711 19.7459C37.1303 19.7459 42.2044 24.82 42.2044 31.0792C42.2044 37.3385 37.1303 42.4126 30.8711 42.4126C24.6119 42.4126 19.5378 37.3385 19.5378 31.0792C19.5378 30.0285 19.6801 28.9993 19.9575 28.0102L17.3899 27.29C17.0519 28.4951 16.8711 29.7661 16.8711 31.0792C16.8711 38.8112 23.1391 45.0792 30.8711 45.0792C38.6031 45.0792 44.8711 38.8112 44.8711 31.0792C44.8711 23.3472 38.6031 17.0792 30.8711 17.0792C28.9262 17.0792 27.074 17.4758 25.3908 18.1925L23.5928 16.0498Z" fill="red"/>
+ </svg>
+ </div>
+ </div>
+ <el-card class="box-card todo-card">
+ <el-row style="height: 100%;">
+ <el-col :span="12">
+ <ul class="type-box">
+ <li v-for="(m,i) in tabList" :key="i" :class="{active:current == i}" @click="changeTab(m,i)">{{ m }}</li>
+ </ul>
+ <el-collapse v-model="activeName" accordion class="todo-collapse" style="display: none;">
+ <el-collapse-item name="1">
+ <template slot="title">
+ <span class="title">浠婃棩寰呭姙</span>
+ <el-badge v-if="todoByDayList.length>0" :value="todoByDayList.length" class="item"></el-badge>
+ </template>
+ <el-table :data="todoByDayList">
+ <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
+ <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
+ <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
+ </el-table>
+ </el-collapse-item>
+ <el-collapse-item name="2">
+ <template slot="title">
+ <span class="title">鏈懆寰呭姙</span>
+ <el-badge v-if="todoByWeekList.length>0" :value="todoByWeekList.length" class="item"></el-badge>
+ </template>
+ <el-table :data="todoByWeekList">
+ <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
+ <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
+ <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
+ </el-table>
+ </el-collapse-item>
+ <el-collapse-item name="3">
+ <template slot="title">
+ <span class="title">鏈湀寰呭姙</span>
+ <el-badge v-if="todoByMonthList.length>0" :value="todoByMonthList.length" class="item"></el-badge>
+ </template>
+ <el-table :data="todoByMonthList">
+ <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
+ <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
+ <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
+ </el-table>
+ </el-collapse-item>
+ <el-collapse-item name="4">
+ <template slot="title">
+ <span class="title" style="color:red;">瓒呮湡</span>
+ <el-badge :value="100" :max="99" class="item"></el-badge>
+ </template>
+
+ </el-collapse-item>
+ </el-collapse>
+ <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>
+ </el-col>
+ <el-col :span="12" style="padding: 16px 20px;box-sizing: border-box;height: 100%;">
+ <div class="todo-span"><span>寰呭姙</span></div>
+ <div style="height: calc(100% - 30px);overflow-y: auto;">
+ <div class="todo-info" v-for="(item,index) in todoList" :key="index" v-show="todoList.length>0">
+ <div class="todo-info-state"></div>
+ <span>{{ item }}</span>
+ </div>
+ <span class="no-info" v-if="todoList.length==0">鏆傛棤</span>
+ </div>
+ </el-col>
+ </el-row>
+ </el-card>
+ </el-col>
+ <el-col :xs="24" :sm="10" :md="10" :lg="10" style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: calc(100vh - 200px);box-sizing: border-box;padding-top: 60px;">
+ <div class="login-info">
+ <img src="../assets/download.png" alt="">
+ <div class="login-info-right">
+ <span>{{ userInfo.username }} 娆㈣繋鎮ㄧ櫥褰昅ES绯荤粺</span>
+ <span>褰撳墠鏃堕棿锛歿{ now }}</span>
+ </div>
+ </div>
+ <img src="../assets/main.af3c5c19.png" class="baImg" alt="">
+ </el-col>
+ </el-row>
+ </div>
</div>
</template>
<style scoped="scoped" lang="scss">
.dashboard-main {
width: 100%;
height: 100%;
- padding: 0 0;
+ padding: 10px;
+ margin: 0;
+}
+.body{
+ margin: 5px;
+ padding: 0px 15px;
+ border-radius: 8px;
+ background: linear-gradient( 180deg, #E3E1FD 0%, #F0EFF9 100%);
+}
+.todo-title{
+ width: 487px;
+ height: 20px;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 700;
+ font-size: 18px;
+ color: #875A7B;
+ line-height: 20px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+}
+.todo-info{
+ width: 90%;
+ margin-left:5%;
+ height: 64px;
+ margin-top: 10px;
+ background: #FFFFFF;
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid #E8E8E8;
+ display: flex;
+ align-items: center;
+ .todo-info-state{
+ width:12px;
+ height:64px;
+ background-color: #6ACE00;
+ border-radius: 8px 0px 0px 8px;
+ position: relative;
+ top:0px;
+ }
+ span{
+ font-size: 14px;
+ margin: 0 16px;
+ }
+}
+.no-info{
+ font-size: 14px;
+ color: #666;
+ display: inline-block;
+ text-align: center;
+ width: 100%;
+ margin-top: 100px;
+}
+.todo-card{
+ height: 65vh;
+ overflow: hidden;
+ >>>.el-card__body{
+ padding: 0px 0px 5px;
+ height: 100%;
+ }
+ .todo-span{
+ height:17px;
+ padding:0px 20px;
+ }
+ .todo-span::before{
+ content: "";
+ display: inline-block;
+ width:21px;
+ height:17px;
+ background: url("/img/group-464.png") no-repeat;
+ }
+ .todo-span span{
+ height:20px;
+ display: inline-block;
+ position: relative;
+ top: -2px;
+ color: #6D5EEE;
+ }
+}
+.todo-collapse{
+ padding: 0px 20px;
+ .title{
+ font-weight: 700;
+ }
+}
+>>>.el-calendar-table .el-calendar-day {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 8px;
+ height: 32px;
+ line-height: 100%;
+ text-align: center;
+ font-size: 12px;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 400;
+}
+>>>.el-calendar-table tr td:first-child {
+ border-left: none;
+}
+>>>.el-calendar-table tr:first-child td {
+ border-top: none;
+}
+>>>.el-calendar-table td {
+ border-bottom: none;
+ border-right: none;
+ vertical-align: top;
+ -webkit-transition: background-color 0.2s ease;
+ transition: background-color 0.2s ease;
+}
+>>>.el-calendar-table td.is-selected {
+ background-color: #e3effc;
+}
+.type-box{
+ list-style-type: none;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding-left: 0;
+ margin-left: 20px;
+ li{
+ padding: 8px 16px;
+ border: 1px solid #E3E1FD;
+ cursor: pointer;
+ font-size: 14px;
+ color: #875A7B;
+ &.active{
+ background: linear-gradient( 180deg, #E3E1FD 0%, #F0EFF9 100%);
+ }
+ }
+}
+.todo-item{
+ width: 23.5%;
+ box-sizing: border-box;
+ background: #fff;
+ border: 1px solid #EBEEF5;
+ border-radius: 8px;
+ box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.todo-item-left{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin-right: 10px;
+}
+.login-info{
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 60px;
+ margin-top: 60px;
+ .login-info-right{
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+ color: rgb(135, 90, 123);
+ span{
+ &:nth-child(1){
+ font-size: 28px;
+ font-weight: 500;
+ margin-bottom: 14px;
+ }
+ &:nth-child(2){
+ font-size: 20px;
+ font-weight: 400;
+ }
+ }
+ }
+}
+.baImg{
+ width: 500px;
}
-.col-info-box {
- padding-left: 15px;
- padding-right: 15px;
-}
-
-.info-box {
- display: block;
- min-height: 90px;
- background: #fff;
- width: 100%;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
- border-radius: 2px;
- margin-bottom: 15px;
-}
-
-.info-box-icon {
- border-top-left-radius: 2px;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 2px;
- display: block;
- float: left;
- height: 90px;
- width: 90px;
- text-align: center;
- font-size: 45px;
- line-height: 90px;
- background: rgba(0, 0, 0, 0.2);
-}
-
-.info-box-content {
- padding: 5px 10px;
- margin-left: 90px;
- line-height: 1.42857143;
- color: #333;
-}
-
-.info-box-text {
- text-transform: uppercase;
- display: block;
- font-size: 14px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.info-box-number {
- display: block;
- font-weight: bold;
- font-size: 18px;
-}
-
-.bg-aqua {
- background-color: #00c0ef !important;
- color: #fff !important;
-}
-
-.bg-red {
- background-color: #dd4b39 !important;
- color: #fff !important;
-}
-
-.bg-green {
- background-color: #00a65a !important;
- color: #fff !important;
-}
-
-.bg-yellow {
- background-color: #f39c12 !important;
- color: #fff !important;
-}
-
-.line-charts {
- width: 100%;
- background: #fff;
-}
</style>
<script>
import { mapGetters } from 'vuex'
import ECharts from 'vue-echarts'
-import { sysParam } from '@/config/sysParam'
-import { getObj as getSysParam } from '@/api/admin/sys-public-param'
-
+import {dateFormat} from '@/util/date'
+import {getProductionSchedulReport} from '@/api/plan/productionschedul'
+import { getReportList,getReport } from '@/api/wel/index'
export default {
name: 'Wel',
components: {
@@ -119,164 +320,105 @@
},
data() {
return {
- line: {
- title: {
- text: '璁″垝涓庡疄闄呬骇閲忚蛋鍔�',
- left: 'center'
- },
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']
- },
- yAxis: {
- type: 'value',
- splitLine: { show: false }
- },
- series: [
- {
- name: '璁″垝',
- type: 'line',
- stack: '鎬婚噺',
- data: [120, 132, 101, 134, 90, 230, 210],
- smooth: true,
- symbol: 'none',
- itemStyle: {
- normal: { areaStyle: { type: 'default' }, color: '#85C1E9' }
- }
- },
- {
- name: '瀹為檯',
- type: 'line',
- stack: '鎬婚噺',
- data: [220, 182, 191, 234, 290, 330, 310],
- smooth: true,
- symbol: 'none',
- itemStyle: {
- normal: { areaStyle: { type: 'default' }, color: '#BB8FCE' }
- }
- }
- ]
- },
-
- pie: {
- color: ['#dd4b39', '#13315b', '#36aadb', '#f96e02', '#d2d6de'],
- title: {
- text: '24灏忔椂浜у搧鐢熶骇姣斾緥',
- left: 'center'
- },
- series: [
- {
- type: 'pie',
- radius: ['40%', '55%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '30',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- { value: 335, name: '閾滄帓鎶ゅ' },
- { value: 310, name: '鎸℃澘' },
- { value: 234, name: '鍦板垁姊�' },
- { value: 135, name: '搴曟澘瑁呴厤' },
- { value: 1548, name: '鐢电紗鏀灦' }
- ]
- }
- ]
- },
-
- bar: {
- title: {
- text: '24灏忔椂宸ュ簭浜ц兘鎯呭喌',
- left: 'center'
- },
- color: ['#3398DB'],
- grid: {
- left: '3%',
- right: '4%',
- bottom: '30%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: [
- '鍠锋秱',
- '鍐叉姌鐒�-鍠锋秱',
- '鍐叉姌鐒�',
- '澹充綋缁勮',
- '閾滄帓瀹夎',
- '妫�楠�',
- '鎵撳寘'
- ],
- axisTick: {
- alignWithLabel: true
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- nameTextStyle: {
- fontSize: 6
- },
- splitLine: { show: false }
- }
- ],
- series: [
- {
- name: '鐩存帴璁块棶',
- type: 'bar',
- barWidth: '10%',
- data: [10, 52, 200, 334, 390, 330, 220]
- }
- ]
- },
- fit: 'fill',
- url: ''
+ calendarValue: new Date(),
+ activeName: '1',
+ todoByDayList: [],
+ todoByWeekList: [],
+ todoByMonthList: [],
+ tabList:['姘村瘑鎺ユ彃浠�','娴峰伐鍣ㄤ欢','瑙傛祴缃�','鍏朵粬'],
+ current:0,
+ type:'姘村瘑鎺ユ彃浠�',
+ todoList:[],
+ todoInfo:{},
+ now:''
}
},
computed: {
- ...mapGetters(['website'])
+ ...mapGetters(['website','userInfo'])
},
created() {
- this.getSysParam(sysParam.SYSTEM_WEL_CONFIG)
+ // this.getProSchedulReport()
+ this.getReportList();
+ this.getReport();
+ setInterval(() => {
+ this.nowTime()
+ }, 1000)
+ },
+ watch:{
+ calendarValue(newVal){
+ if(newVal){
+ console.log(dateFormat(newVal,'yyyy-MM-dd'));
+ this.getReportList()
+ }
+ }
},
methods: {
- getSysParam(paramKey) {
- this.url = ''
- getSysParam(paramKey).then((response) => {
- var paramVal = response.data.data
- if (response.data.code === 0) {
- if (paramVal != null) {
- this.url = paramVal
- } else {
- this.url = ''
- }
- } else {
- this.url = ''
+ getProSchedulReport(){
+ getProductionSchedulReport().then(res=>{
+ if(res.status===200){
+ this.todoByDayList = res.data.data.todoByDay
+ this.todoByWeekList = res.data.data.todoByWeek
+ this.todoByMonthList = res.data.data.todoByMonth
+ }
+ }).catch(error=>{
+ console.error(error)
+ })
+ },
+ changeTab(m,i){
+ this.type = m;
+ this.current = i;
+ this.getReportList()
+ this.getReport();
+ },
+ getReportList(){
+ getReportList({
+ type:this.type,
+ time:dateFormat(this.calendarValue,'yyyy-MM-dd')
+ }).then(res=>{
+ if(res.status===200){
+ this.todoList = res.data.data
+ }
+ }).catch(error=>{
+ console.error(error)
+ })
+ },
+ getReport(){
+ getReport({
+ type:this.type,
+ }).then(res=>{
+ if(res.status===200){
+ this.todoInfo = res.data.data
+ }
+ }).catch(error=>{
+ console.error(error)
+ })
+ },
+ 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;
+ },
}
}
</script>
--
Gitblit v1.9.3