增加提示

叶松

2023-10-24 66b7008f64a5dff2ec458ce8e181200b0b557fdd

 web/src/views/DuctpiecePLM/ReportCenter/DuctReport.vue

@@ -1,3 +1,207 @@
<template>
    <div>管片生产报表</div>
</template>
  <div class="main">
    <div class="main_header">
      <!-- <div class="header_item">
        <span class="header_label">采集时间：</span>
        <el-date-picker
            v-model="search.time"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00','23:59:59']"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间">
        </el-date-picker>
      </div>
      <div class="header_item">
        <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
        <el-button :size="size" icon="el-icon-upload2" v-if="showButton('export')" @click="exportProp">导出Excel</el-button>
      </div> -->
    </div>
    <div class="main_content">
      <div class="main_cards" v-for="(item,index) in dataList" :key="index">
        <div class="main_cards_headers">{{item.proName}}</div>
        <div class="main_cards_numbers">
            <div class="cards_numbers_rows">
                <div class="cards_numbers_show" style="margin-right:15px">
                    <div class="numbers_rows_text">生产总数</div>
                    <div class="numbers_rows_datas">{{item.produceTotal}}</div>
                </div>
                <div class="cards_numbers_show">
                    <div class="numbers_rows_text">合格总数</div>
                    <div class="numbers_rows_datas">{{item.qualifiedTotal}}</div>
                </div>
            </div>
            <div class="cards_numbers_rows">
                <div class="cards_numbers_show" style="margin-right:15px">
                    <div class="numbers_rows_text">已发运数</div>
                    <div class="numbers_rows_datas">{{item.shippingNum}}</div>
                </div>
                <div class="cards_numbers_show" style="background:none">
                    <div class="numbers_rows_text"></div>
                    <div class="numbers_rows_datas"></div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="main_footer">
      <!-- <el-pagination
        background
        @current-change="changePageNum"
        @size-change="changePageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
import { buttonPinia } from '../../../pinia/index';
import { changeSize } from '../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
  export default {
    data() {
      return {
        size: changeSize(), // 组件尺寸
        pageNum: 1,
        pageSize: 10,
        search:{},//查询条件
        total: 0,
        loading: false,
        dataList: [], //管片生产报表列表
        asyncTitle: true, // 对话框title 新增：true  修改：false
        asyncVisible: false, // 添加 修改对话框
      }
    },
    watch: {
      asyncVisible(bol) {
        if(!bol) {
          this.ruleForm = {};
          this.$refs.ruleForm.resetFields();
        }
      }
    },
    mounted() {
      const that = this;
      // 根据窗口大小动态修改组件尺寸
      window.onresize = () => {
        that.size = changeSize();
      }
      that.searchButtonInfo(true);
    },
    methods: {
      // 查询按钮列表信息
      searchButtonInfo(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        let params = Object.assign({},this.search,{
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        this.loading = true;
        this.$api.Report.searchPipesReports(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.total = res.data.total;
            this.dataList = res.data.list;
          }else{
            this.$message.warning(res.statusMsg)
          }
          this.loading = false;
        })
      },
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      },      
      // 切换页数
      changePageNum(page) {
        this.pageNum = page;
        this.searchButtonInfo();
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
        this.searchButtonInfo();
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '../../../style/layout-main.scss';
.main_content{
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: auto!important;
    .main_cards{
        width: 500px;
        height: 220px;
        background-color: #031A46;
        border-radius: 4px;
        margin: 10px;
        display: flex;
        flex-direction: column;

        .main_cards_headers{
            flex: none;
            width: 100%;
            line-height: 50px;
            position: relative;
            color: #EBF8F9;
            font-size: 24px;
            padding-left: 50px;
            background-color: #11ACBC;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            &::before{
                content: "";
                width: 20px;
                height: 20px;
                position: absolute;
                top: 15px;
                left: 15px;
                background: url("../../../assets/report_icons.png") no-repeat;
                background-size: 100% 100%;
            }

        }
        .main_cards_numbers{
            height: calc(100% - 50px);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            flex: 1;
            padding: 15px;

            .cards_numbers_rows{
                line-height: 40px;
                display: flex;
                justify-content: space-around;
                border-radius: 4px;
                .cards_numbers_show{
                    width: 50%;
                    display: flex;
                    justify-content: space-around;
                    background-color: #085172;
                    border-radius: 4px;
                    .numbers_rows_text{
                        font-size: 20px;
                        color: #EBF1F3;
                    }
                    .numbers_rows_datas{
                        font-size: 24px;
                        color: #18F7F9;
                    }
                }
            }
        }
    }
}
</style>