修改首页样式

licp

2024-04-12 6e101e1c82ddc11fbd515d161d8b67413004c42f

 src/page/wel.vue

@@ -1,106 +1,279 @@
<template>
  <div class="dashboard-main">
    <!--<iframe
      src="https://console.huaweicloud.com/dlv/vision/share/?id=0b3b4dd2d19249c89991b8989b76e185&locale=zh-cn&region=cn-north-1"
      width="100%"
      height="100%"
      style="border: none;"
      id="myiframe"
      >你的浏览器不支持该iframe标签</iframe
    >-->
    <el-image :src="url" style="width:100%;height:100%;"></el-image>
    <div class="body">
        <el-row>
            <el-col :span="12">
                <p class="todo-title"><i class="el-icon-bell"></i><span> 生产调度 · 待办</span></p>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="12" :md="11" :lg="7">
                <el-card class="box-card todo-card">
                    <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>
                    <div class="todo-span"><span>待办</span></div>
                    <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>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="11" :lg="7">
                <el-card class="box-card todo-total-card">
                    <div class="todo-total-text">
                        <span>今日待办</span>
                        <span v-text="todoInfo.todoByDay"></span>
                    </div>
                    <div class="todo-total-text">
                        <span>本周待办</span>
                        <span v-text="todoInfo.todoByWeek"></span>
                    </div>
                    <div class="todo-total-text">
                        <span>本月待办</span>
                        <span v-text="todoInfo.todoByMonth"></span>
                    </div>
                    <div class="todo-total-text">
                        <span>超期</span>
                        <span v-text="todoInfo.outByTime"></span>
                    </div>
                </el-card>
            </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-total-card{
    margin-left: 15px;
    .todo-total-text{
        width: 90%;
        margin-left:5%;
        margin-bottom:10px;
        height: 40px;
        background: linear-gradient( 90deg, #C8C2FF 0%, rgba(200,194,255,0) 100%);
        display: flex;
        align-items: center;
        span:nth-child(1){
            width:50%;
            height:40px;
            display: inline-block;
            text-align: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #0166E2;
            line-height: 40px;
        }
        span:nth-child(2){
            width:50%;
            height:40px;
            display: inline-block;
            text-align: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24px;
            color: #0166E2;
            line-height: 40px;
        }
    }
    .todo-total-text:last-child span:nth-child(2){
        color:red
    }
}
.todo-card{
    height: 80vh;
    overflow-y: auto;
    >>>.el-card__body{
        padding: 0px 0px 5px
    }
    .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%);
        }
    }
}

.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: {
@@ -108,163 +281,74 @@
  },
  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:{}
    }
  },
  computed: {
    ...mapGetters(['website'])
  },
  created() {
    this.getSysParam(sysParam.SYSTEM_WEL_CONFIG)
    // this.getProSchedulReport()
    this.getReportList();
    this.getReport();
  },
  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)
        })
    }
  }
}