钢筋笼管理书写完成

叶松

2023-09-22 f7bf478f4fe27e41121ac9a2633aa178c0c18909

钢筋笼管理书写完成

 web/src/views/DuctpiecePLM/ReinManage/ReinAnalyse.vue

对比新文件
@@ -0,0 +1,65 @@
<template>
  <div class="main">
    <div class="main_tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="钢筋笼库存" name="first">
                <reins-invent ref="Invents"></reins-invent> 
            </el-tab-pane>
            <el-tab-pane label="成环统计" name="second">
                <rings-number ref="Rings"></rings-number>
            </el-tab-pane>
            <el-tab-pane label="生产数据统计" name="third">
                <products-data ref="Products"></products-data>
            </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>
<script>
import ReinsInvent from './components/ReinsInvent.vue'//钢筋笼库存
import RingsNumber from './components/RingsNumber.vue'//成环统计
import ProductsData from './components/ProductsData.vue'//生产数据统计
export default {
    components:{
        ReinsInvent,
        RingsNumber,
        ProductsData
    },
    data(){
        return{
            activeName:'first'
        }
    },
    mounted(){
        this.$refs.Invents.searchButtonInfo(true);
        this.$refs.Invents.getAllProjects();
    },
    methods:{
        //切换界面
        handleClick(tab){
            switch(tab.name){
                case 'second':
                    this.$refs.Rings.searchButtonInfo(true);
                    this.$refs.Rings.getAllProjects();
                    break;
                case 'third':
                    this.$refs.Products.searchSteelProducePlan();
                    break;
                default:
                    this.$refs.Invents.searchButtonInfo(true);
                    this.$refs.Invents.getAllProjects();
            }
        },
    }
}
</script>
<style scoped lang="scss">
@import'@/style/layout-main.scss';
/deep/ .el-tabs__content{
    position: static;
}

/deep/.main {
  background: none;
}
</style>

 web/src/views/DuctpiecePLM/ReinManage/ReinsProduct.vue

对比新文件
@@ -0,0 +1,586 @@
<template>
  <div class="main">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">项目名称：</span>
        <el-select v-model="search.proId" placeholder="请选择项目名称" clearable @change="changeSizes">
            <el-option
                v-for="item in optionsProject"
                :key="item.proId"
                :label="item.proName"
                :value="item.proId">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">钢筋笼编号：</span>
        <el-input v-model="search.produceNumber" :size="size" clearable placeholder="请输入钢筋笼编号"></el-input>
      </div>
      <div class="header_item">
        <span class="header_label">制作人：</span>
        <el-input v-model="search.realName" :size="size" clearable placeholder="请输入制作人"></el-input>
      </div>
      <div class="header_item">
        <span class="header_label">生产班组：</span>
        <el-select v-model="search.groupId" placeholder="请选择生产班组" clearable filterable>
            <el-option
                v-for="item in optionsDeparts"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupId">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">质量标注：</span>
        <el-select v-model="search.isQualified" placeholder="请选择质量标注" clearable>
            <el-option label="合格" value="1"></el-option>
            <el-option label="不合格" value="2"></el-option>
            <el-option label="报废" value="3"></el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">是否入模：</span>
        <el-select v-model="search.isModel" placeholder="请选择是否入模" clearable>
            <el-option label="已入模" value="1"></el-option>
            <el-option label="未入模" value="2"></el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">配筋：</span>
        <el-select v-model="search.reinforcementId" placeholder="请选择配筋" clearable>
            <el-option
                v-for="item in optionsReins"
                :key="item.hasSteel"
                :label="item.has"
                :value="item.hasSteel">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">块号：</span>
        <el-select v-model="search.blockNum" placeholder="请选择块号" clearable>
            <el-option
                v-for="item in optionsBlocks"
                :key="item.blockNum"
                :label="item.blockName"
                :value="item.blockNum">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">打印时间：</span>
        <el-date-picker
            v-model="search.time"
            type="datetimerange"
            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">
        <span class="header_label">质检时间：</span>
        <el-date-picker
            v-model="search.times"
            type="datetimerange"
            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">
      <el-table
        v-loading="loading"
        :data="dataList"
        height="100%"
        :cell-style="cellStyle">
        <el-table-column align="center" label="序号" width="60">
          <template #default="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="produceNumber" label="钢筋笼编号" align="center" width="180" ></el-table-column>
        <el-table-column prop="proName" label="项目名称" align="center" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sizeName" label="尺寸" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="reinforcementName" label="配筋" align="center"></el-table-column>
        <el-table-column prop="blockName" label="块号" align="center"></el-table-column>
        <el-table-column prop="groupName" label="生产班组" align="center"></el-table-column>
        <el-table-column prop="printTime" label="打印时间" align="center" width="150"></el-table-column>
        <el-table-column prop="realName" label="制作人" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="qualityUserName" label="质检人" align="center"></el-table-column>
        <el-table-column prop="qualityTime" label="质检时间" align="center" width="150"></el-table-column>
        <el-table-column prop="isQualified" label="质量标注" align="center">
            <template #default="{row}">
                <div :class="{'isStand':row.isQualified===2&&row.isModel ===1}">{{row.isQualified===1?'合格':row.isQualified===2?'不合格':row.isQualified===3?'报废':''}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="isModel" label="是否入模" align="center">
            <template #default="{row}">
                <div :class="{'isStand':row.isQualified===2&&row.isModel ===1}">{{row.isModel===1?'已入模':row.isModel===2?'未入模':''}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('question')&&row.isQualified===2 || row.isQualified===3" @click="updateQuestion(row)">存在问题</el-button>
            <el-button class="table_btn" size="mini" v-if="showButton('trace')" @click="traceInfo(row)">质量追溯</el-button>
          </template>
        </el-table-column>
      </el-table>
    </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>
    <el-dialog
      class="prop_dialog"
      :title="asyncTitle ? '存在问题' : '质量追溯'"
      :close-on-click-modal="false"
      :visible.sync="asyncVisible"
      width="58%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form" v-if="asyncTitle">
        <el-form-item label="质检结果：" prop="checkResult">
          <span style="color:red">{{ruleForm.checkResult ==='1'?'合格':ruleForm.checkResult ==='2'?'不合格':ruleForm.checkResult ==='3'?'报废':''}}</span>
        </el-form-item>
        <el-form-item label="存在问题：" prop="checkFaildReason">
          <el-input v-model="ruleForm.checkFaildReason" :size="size" type="textarea" :rows="3" :disabled="true" clearable placeholder="请输入盾构单位"></el-input>
        </el-form-item>
        <el-form-item label="图片：" v-if="showPhone">
          <el-image
              style="width:50px;height:50px; cursor: pointer;"
              :src="phoneList[0]"
              :preview-src-list="phoneList"
              fit="contain">
              <div slot="error" class="image-slot">
                <img src="https://pipe.thhy-tj.com/group1/M00/00/03/bx5d1GRlfmCAEmAPAAAFoOEW2dU397.png" style="width:50px;height:50px">
              </div>
          </el-image>
        </el-form-item>
        <el-form-item label="问题处理结果：" prop="execResult">
          <el-input v-model="ruleForm.execResult" :size="size" type="textarea" :rows="3" clearable placeholder="请输入问题处理结果"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input 
            v-model="ruleForm.remark" 
            :size="size" 
            type="textarea" 
            :rows="3" 
            clearable 
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div v-if="!asyncTitle">
        <div class="reins_info">钢筋笼信息</div>
        <div class="reins_info_content">
            <div class="reins_info_items">
                <div class="reins_info_titles">钢筋笼编号</div>  
                <div class="reins_info_datas">{{rebarInfos.produceNumber}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">项目</div>  
                <div class="reins_info_datas">{{rebarInfos.proName}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">尺寸</div>  
                <div class="reins_info_datas">{{rebarInfos.sizeName}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">配筋</div>  
                <div class="reins_info_datas">{{rebarInfos.reinforcementName}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">块号</div>  
                <div class="reins_info_datas">{{rebarInfos.blockName}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">制作人</div>  
                <div class="reins_info_datas">{{rebarInfos.realName}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">质检人</div>  
                <div class="reins_info_datas">{{rebarInfos.qualityUserName}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">质检时间</div>  
                <div class="reins_info_datas">{{rebarInfos.qualityTime}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">质检结果</div>  
                <div class="reins_info_datas">{{rebarInfos.isQualified===1?'合格':rebarInfos.isQualified===2?'不合格':rebarInfos.isQualified===3?'报废':''}}</div>  
            </div>
            <div class="reins_info_items">
                <div class="reins_info_titles">打印日期</div>  
                <div class="reins_info_datas">{{rebarInfos.printTime}}</div>  
            </div>
        </div>
      </div>
      <div slot="footer" v-if="asyncTitle && execFlag!==1">
        <el-button @click="asyncVisible = false">取 消</el-button>
        <el-button class="submit_btn" @click="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>
import { buttonPinia } from '../../../pinia/index';
import { throttle, changeSize,downFiles } from '../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
  export default {
    data() {
      return {
        size: changeSize(), // 组件尺寸
        pageNum: 1,
        pageSize: 10,
        steelProduceNum:null,
        showPhone:false,//是否展示报废图片
        phoneList:[],//展示图片族
        search:{},//查询条件
        execFlag:null,//是否提交过存在问题
        total: 0,
        loading: false,
        dataList: [], //钢筋笼生产信息列表  is_qualified：是否合格 1合格2 不合格   is_model：是否入模  1入模2未入模
        optionsDeparts:[],//生产班组
        optionsReins:[],//配筋
        optionsBlocks:[],//块号
        asyncTitle: true, // 对话框title 新增：true  修改：false
        asyncVisible: false, // 添加 修改对话框
        optionsProject:[],//项目名称
        rebarInfos:null,//质量追溯列表
        ruleForm: {}, // 按钮表单
        rules: {
          segmentName: [{
            required: true,
            message: '请输入标段名称',
            trigger: 'blur'
          }],
          shieldEnp: [{
            required: true,
            message: '请输入盾构单位',
            trigger: 'blur'
          }],
          station: [{
            required: true,
            message: '请输入站点',
            trigger: 'blur'
          }],
          proId: [{
            required: true,
            message: '请选择项目名称',
            trigger: 'change'
          }],
          segmentAdmin: [{
            required: true,
            message: '请选择需求负责人',
            trigger: 'change'
          }],
        },
      }
    },
    watch: {
      asyncVisible(bol) {
        if(!bol) {
          this.ruleForm = {};
          this.$refs.ruleForm.resetFields();
        }
      }
    },
    mounted() {
      const that = this;
      // 根据窗口大小动态修改组件尺寸
      window.onresize = () => {
        that.size = changeSize();
      }
      that.searchButtonInfo(true);
      that.getAllDeparts()
      that.getAllProjects()
    },
    methods: {
      //获得所有项目名称
     getAllProjects(){
        let obj = {
            pageNum: 1,
            pageSize: 100000000
        }
        this.$api.Engineer.searchProjects(obj).then(res=>{
            if(res.statusMsg === 'ok'){
                this.optionsProject = res.data.list
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
     },
    cellStyle({row,column}){
      if(row.isQualified===2&& row.isModel===1 &&column.property =="isQualified"&&column.property =="isModel"){
        return {
          'color':'red'
        }
      }
    },
    //通过选择项目选择尺寸
     changeSizes(val){
      this.$api.Reinforce.searchProjectBears({proId:val,pageNum: 1,
          pageSize:1000000}).then(res=>{
        if(res.statusMsg === 'ok'){
            this.optionsReins = res.data.hasDtos
            this.optionsBlocks = res.data.blokDtos
        }else{
            this.$message.warning(res.statusMsg)
        }
      })
     },
      //获取生产班组
      getAllDeparts(){
        this.$api.Personnerl.GETDEPARTMENTDATA({}).then(res=>{
            if(res.statusMsg === 'ok'){
                res.data.forEach(item=>{
                  this.optionsDeparts.push(...item.groups)
                })
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
      },
      // 查询按钮列表信息
      searchButtonInfo(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        let params = Object.assign({},this.search,{
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        params.strTime = this.search.time&&this.search.time[0]
        params.endTime = this.search.time&&this.search.time[1]
        params.strTimes = this.search.times&&this.search.times[0]
        params.endTimes = this.search.times&&this.search.times[1]
        delete params.time
        delete params.times
        this.loading = true;
        this.$api.Reinforce.searchReinforcement(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.total = res.data.total;
            this.dataList = res.data.list;
          }
          this.loading = false;
        })
      },
      // 转圈圈
      functionLoading() {
        this.loadingView = this.$loading({
          lock: true,
          text: '请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      // 导出按钮信息
      exportProp() {
        this.functionLoading();
        let params  = Object.assign({},this.search)
        params.strTime = this.search.time&&this.search.time[0]
        params.endTime = this.search.time&&this.search.time[1]
        params.strTimes = this.search.times&&this.search.times[0]
        params.endTimes = this.search.times&&this.search.times[1]
        delete params.time
        delete params.times
        this.$api.Reinforce.exportDatas(params).then(res => {
            downFiles(res, '钢筋笼生产信息', 'xls')
            this.loadingView.close()
        })
        .catch(() => {
          this.loadingView.close();
        })
      },
      // 存在问题按钮
      updateQuestion(row) {
        this.steelProduceNum = row.produceNumber
        this.asyncTitle = true;
        this.asyncVisible = true;
        this.$api.Reinforce.searchQuessions({steelProduceId: row.steelProduceId,steelProduceNum:row.produceNumber}).then(res=>{
            if(res.statusMsg === 'ok'){
              this.execFlag = res.data[0].execFlag
              if(res.data[0].checkResult==='3'){
                this.$set(this.ruleForm,'checkFaildReason',res.data[0].remark)
                this.$set(this.ruleForm,'checkResult',res.data[0].checkResult)
                res.data[0].checkFile.map(item=>{
                    this.phoneList.push(`https://pipe.thhy-tj.com/${item}`)
                })
                this.showPhone = true
              }else{
                this.showPhone = false
                // this.ruleForm = res.data[0]
                if(res.data[0].checkDtos === null){
                  // this.$set(this.ruleForm,'checkFaildReason',' '+res.data[0].remark)
                }else{
                  let arr =""
                  let arr1 = ""
                  let hmark = res.data[0].remark
                  res.data[0].checkDtos.map(names=>{
                    arr+=names.reasonName+","
                    return arr
                  })
                  arr1 = arr.lastIndexOf(',')
                  arr = arr.substring(0,arr1)
                  this.$set(this.ruleForm,'checkFaildReason',arr+'。'+hmark)
                }
              }
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
      },
      // 质量追溯按钮
      traceInfo(row) {
        this.asyncTitle = false;
        this.asyncVisible = true;
        this.$api.Reinforce.detailsReinforcement({steelProduceId:row.steelProduceId}).then(res=>{
            if(res.statusMsg === 'ok'){
                this.rebarInfos = res.data
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
      },
      // 提交存在问题按钮
      submitInsert: throttle(function() {
        this.$refs.ruleForm.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.ruleForm);
            params.segmentList = this.needBlocks
            params.steelProduceNum=this.steelProduceNum
            this.$api.Reinforce.submitQuessions(params).then((res) => {
              if(res.statusMsg === 'ok') {
                this.asyncVisible = false;
                this.searchButtonInfo(true);
                this.$message.success('提交成功！');
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 提交修改按钮信息
      submitUpdate: throttle(function() {
        this.$refs.ruleForm.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.ruleForm);
            params.segmentList = this.needBlocks
            this.$api.Engineer.updateSegment(params).then((res) => {
              if(res.statusMsg === 'ok') {
                this.asyncVisible = false;
                this.searchButtonInfo(true);
                this.$message.success('添加成功！');
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 判断按钮权限信息
      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';
.reins_info{
    color: #fff;
    font-size: 16px;
    position: relative;
    padding:0px 0px 10px 10px;
    border-bottom: 1px solid #0D5274;
    &::before{
        content: '';
        width: 2px;
        height: 18px;
        background-color: #18F6F8;
        position: absolute;
        left: 2px;
        top: 3px;
    }
}
.reins_info_content{
    display: flex;
    margin: 20px 0px;
    padding-right: 10px;
    overflow: auto;
    .reins_info_items{
        border-top: 1px solid #1CB7E0;
        flex: none;
        .reins_info_titles{
            border-left: 1px solid #1CB7E0;
            border-right: 1px solid #1CB7E0;
            border-bottom: 1px solid #1CB7E0;
            text-align: center;
            padding: 10px;
            background-color: #082F57;
            color: #0DEAF8;
        }
        .reins_info_datas{
            height: 40px;
            border-left: 1px solid #1CB7E0;
            border-right: 1px solid #1CB7E0;
            border-bottom: 1px solid #1CB7E0;
            text-align: center;
            padding: 10px;
            background-color: #061C48;
            color: #0DEAF8;
        }
    }
}

.isStand{
    color: red;
}

//滚动条样式
::-webkit-scrollbar {
    width: 4px; 
    height: 8px;   
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px #0DEAF8;
    background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px transparent;
    border-radius: 0;
    background: transparent;
}
</style>

 web/src/views/DuctpiecePLM/ReinManage/components/ProductsData.vue

对比新文件
@@ -0,0 +1,217 @@
<template>
  <div class="main tabs_main" style="height:89%">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">生产时间：</span>
        <el-date-picker
          v-model="timeData"
          type="monthrange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="header_item">
        <el-button
          v-if="showButton('search')"
          icon="el-icon-search"
          @click="searchSteelProducePlan()">
          查询
        </el-button>
      </div>
    </div>
    <div class="main_content">
      <div id="first_chart" class="main_content_chart"></div>
    </div>
  </div>
</template>

<script>
import { buttonPinia } from '../../../../pinia';
export default {
  name: 'RebarcageIndex',
  data() {
    return {
      timeData: '',
    }
  },
  mounted() {
    const dateYear = new Date().getFullYear();
    this.timeData = [`${dateYear}-01-01`, `${dateYear}-12-01`];
    // this.searchSteelProducePlan();
  },
  methods: {
    // 查询钢筋笼生产统计对比
    async searchSteelProducePlan() {
      const { data } = await this.$api.Analyse.searchSteelProducePlan({
        startTime: this.timeData ? this.timeData[0] : '',
        endTime: this.timeData ? this.timeData[1] : '',
      });
      if(data.length === 0) {
        this.$message.warning('请选择生产时间');
        return false;
      }
      this.$nextTick(() => {
        this.createCharts('first_chart', data);
      })
    },
    // 创建echart图表
    createCharts(name, data) {
      const labelData = data.map(item => item.month);
      const firstData = data.map(item => item.count ? item.count : 0);
      const secondData = data.map(item => item.rate ? item.rate : 0);
      const chartsImage = this.$echarts.init(document.getElementById(name));
      const option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0; i < params.length; i++) {
              if (params[i].componentIndex === 0) {
                relVal +=
                  "<br/>" +
                  params[i].marker +
                  "月生产量" +
                  " : " +
                  params[i].value;
              } else {
                relVal +=
                  "<br/>" +
                  params[i].marker +
                  "环比增长率" +
                  " : " +
                  params[i].value +
                  "%";
              }
            }
            return relVal;
          },
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "2%",
          bottom: "11%",
        },
        xAxis: [
          {
            type: "category",
            data: labelData,
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#B7E4F7",
              },
            },
            axisLabel: {
              color: "#B7E4F7",
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            max: 100,
            splitNumber: 10,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#CAD3E0",
              },
            },
            splitLine: {
              lineStyle: {
                width: 2,
                type: "dashed",
                color: "#28477C",
              },
            },
          },
          {
            type: "value",
            max: 100,
            splitNumber: 10,
            axisLabel: {
              formatter: "{value}%",
              textStyle: {
                color: "#B7E4F7",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: firstData,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            type: "bar",
            data: secondData,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: "rgba(194, 92, 61, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(250, 205, 145, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      }
      chartsImage.clear();
      chartsImage.setOption(option);
      window.onresize = () => {
        chartsImage.resize()
      }
    },
    // 判断按钮权限信息
    showButton(str) {
      const pinia = buttonPinia();
      return pinia.$state.buttonInfo.includes(str);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/layout-main.scss";

.main_content_chart {
  height: 100%;
}
</style>

 web/src/views/DuctpiecePLM/ReinManage/components/ReinsInvent.vue

对比新文件
@@ -0,0 +1,216 @@
<template>
  <div class="main tabs_main" style="height:89%">
    <div class="main_header">
        <div class="header_item">
        <span class="header_label">项目名称：</span>
        <el-select v-model="search.proId" placeholder="请选择项目名称" clearable @change="changeSizes">
            <el-option
                v-for="item in optionsProject"
                :key="item.proId"
                :label="item.proName"
                :value="item.proId">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">尺寸：</span>
        <el-select v-model="search.sizeId" placeholder="请选择尺寸" clearable>
            <el-option
                v-for="item in optionsSize"
                :key="item.sizeId"
                :label="item.sizeName"
                :value="item.sizeId">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">配筋：</span>
        <el-select v-model="search.reinforcementId" placeholder="请选择配筋" clearable>
            <el-option
                v-for="item in optionsReins"
                :key="item.hasSteel"
                :label="item.has"
                :value="item.hasSteel">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">块号：</span>
        <el-select v-model="search.blockId" placeholder="请选择块号" clearable>
            <el-option
                v-for="item in optionsBlocks"
                :key="item.blockNum"
                :label="item.blockName"
                :value="item.blockNum">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
      </div>
    </div>
    <div class="main_content">
      <el-table
        v-loading="loading"
        :data="dataList"
        height="100%">
        <el-table-column align="center" label="序号" width="60">
          <template #default="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="proName" label="项目名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sizeName" label="尺寸" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="reinforcementName" label="配筋" align="center"></el-table-column>
        <el-table-column prop="blockNumName" label="块号" align="center"></el-table-column>
        <el-table-column prop="stock" label="库存数量" align="center"></el-table-column>
      </el-table>
    </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,
        timer:null,//定时器
        search:{},//查询条件
        total: 0,
        loading: false,
        dataList: [], //钢筋笼库存信息列表
        optionsReins:[],//配筋
        optionsBlocks:[],//块号
        optionsSize:[],//尺寸
        optionsProject:[],//项目名称
      }
    },
    mounted() {
      const that = this;
      // 根据窗口大小动态修改组件尺寸
      window.onresize = () => {
        that.size = changeSize();
      }
    //   that.searchButtonInfo(true);
      that.timer = setInterval(()=>{
        that.searchButtonInfo(true);
      },30000)
      // that.getAllTypes()
    //   that.getAllProjects()
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
     //获得所有项目名称
     getAllProjects(){
        let obj = {
            pageNum: 1,
            pageSize: 100000000
        }
        this.$api.Engineer.searchProjects(obj).then(res=>{
            if(res.statusMsg === 'ok'){
                this.optionsProject = res.data.list
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
     },
     //通过选择项目选择尺寸
     changeSizes(val){
      this.$api.Reinforce.searchProjectSize({proId:val,pageNum: 1,
          pageSize:100000000}).then(res=>{
        if(res.statusMsg === 'ok'){
          if(this.search.proId ===""){
            this.optionsSize = []
          }else{
            this.optionsSize = res.data.list
          }
        }else{
            this.$message.warning(res.statusMsg)
        }
      })
      this.$api.Reinforce.searchProjectBears({proId:val,pageNum: 1,
          pageSize:1000000}).then(res=>{
        if(res.statusMsg === 'ok'){
            this.optionsReins = res.data.hasDtos
            this.optionsBlocks = res.data.blokDtos
        }else{
            this.$message.warning(res.statusMsg)
        }
      })
      
     },
    // //获取尺寸配筋转向等信息
    //   getAllTypes(){
    //     let params = {
    //         pageNum: 1,
    //         pageSize: 100000000
    //     }
    //     this.$api.Dictionary.searchDictionary(params).then(res=>{
    //         if(res.statusMsg === 'ok'){
    //             this.optionsSize = res.data.list.filter(item =>item.dictType === '1')
    //             this.optionsReins = res.data.list.filter(item =>item.dictType === '2')
    //             this.optionsBlocks = res.data.list.filter(item =>item.dictType === '5')
    //         }else{
    //             this.$message.warning(res.statusMsg)
    //         }
    //     })
    //   },
      // 查询按钮列表信息
      searchButtonInfo(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        let params = Object.assign({},this.search,{
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        this.loading = true;
        this.$api.Reinforce.searchInventory(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.total = res.data.total;
            this.dataList = res.data.list;
          }
          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';
</style>

 web/src/views/DuctpiecePLM/ReinManage/components/RingsNumber.vue

对比新文件
@@ -0,0 +1,448 @@
<template>
  <div class="main tabs_main" style="height:93%">
    <div class="main_header">
        <div class="header_item">
        <span class="header_label">项目名称：</span>
        <el-select v-model="search.proId" placeholder="请选择项目名称" clearable @change="changeSizes">
            <el-option
                v-for="item in optionsProject"
                :key="item.proId"
                :label="item.proName"
                :value="item.proId">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">尺寸：</span>
        <el-select v-model="search.sizeId" placeholder="请选择尺寸" clearable>
            <el-option
                v-for="item in optionsSize"
                :key="item.sizeId"
                :label="item.sizeName"
                :value="item.sizeId">
            </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
      </div>
    </div>
    <div class="main_content" style="display:flex;flex-wrap:wrap;overflow:auto;">
      <div class="main_content_index" v-for="(item,index) in staticLists" :key="index">
        <div class="main_content_top">
            <div class="main_content_title">
                <div class="main_text">{{item.proName}}</div>
                <div class="main_datas">{{item.sizeName}}</div>
            </div>
        </div>
        <div class="main_content_bottom">
            <div class="content_top">
                <div style="border:1px solid #39B5FE;background-color:#042548;border-radius:4px">
                    <img src="../../../../assets/wheel.png" class="bottom_left">
                </div>
                <div class="bottom_right">
                    <div class="plan_content_items" style="margin-bottom:16px">
                        <div class="plan_content_title">序号</div>
                        <div class="plan_content_datas" style="background-color:#052C55;color:#39B5FE" v-for="(its,indexs) in item.hasDtos" :key="indexs">{{indexs+1}}</div>
                    </div>
                    <div class="plan_content_items" style="margin-bottom:0px;border-bottom:0px solid transparent;">
                        <div class="plan_content_title">管片配筋</div>
                        <div class="plan_content_datas" v-for="(iten,idx) in item.hasDtos" :key="idx" :style="{'background': iten.colors || 'none'}">{{iten.has}}</div>
                    </div>
                    <div class="plan_content_items">
                        <div class="plan_content_title">已成环数（环）</div>
                        <div class="plan_content_datas" v-for="(loop,indexs) in item.hasDtos" :key="indexs">
                          {{showLooping(item.looping,loop)}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_bottom">
                <div class="content_bottom_rows">
                    <div class="content_bottom_text">
                        <span style="position:absolute;top:26px;left:10px;">配筋</span>
                        <span style="position:absolute;top:8px;left:65px">块号</span>
                    </div>
                    <div class="content_bottom_datas" v-for="(block,index) in item.blokDtos" :key="index">{{block.blockName}}</div>
                </div>
                <div class="content_bottom_rebar">
                    <div style="display: flex; flex-direction: column;">
                        <div class="content_bottom_titles" v-for="(iten,index) in item.hasDtos" :key="index">{{iten.has}}</div>
                    </div>
                    <template v-if="item&&item.info.length !==0">
                        <div style="display: flex; flex-direction: column; flex: 1" 
                            v-for="(blockItem,blockIndex) in item.blokDtos" 
                            :key="blockIndex">
                            <div 
                                class="content_bottom_num" 
                                :class="{'bottom_nums':showCounts(item.info, hasItem, blockItem) !== 0}" 
                                v-for="(hasItem,hasIndex) in item.hasDtos" 
                                :key="hasIndex">
                                {{showCounts(item.info, hasItem, blockItem)}}
                            </div>
                        </div>
                    </template>
                    <div v-else class="content_bottom_nodata" style="border-bottom:1px solid #39B5FE;">暂无数据</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,
        staticLists: [], //成环统计信息列表
        optionsSize:[],//尺寸
        optionsProject:[],//项目名称
        numLists: [],//已成环数
        nums:[],//配筋块号对应数量
      }
    },
    mounted() {
      const that = this;
      // 根据窗口大小动态修改组件尺寸
      window.onresize = () => {
        that.size = changeSize();
      }
    //   that.searchButtonInfo(true);
    //   that.getAllProjects()
    },
    methods: {
     //获得所有项目名称 
     getAllProjects(){
        this.$api.Engineer.getAllProjects({}).then(res=>{
            if(res.statusMsg === 'ok'){
                this.optionsProject = res.data
            }else{
                this.$message.warning(res.statusMsg)
            }
        })
     },
      //通过选择项目选择尺寸
     changeSizes(val){
      this.$api.Reinforce.searchProjectSize({proId:val,pageNum: 1,
          pageSize:100000000}).then(res=>{
        if(res.statusMsg === 'ok'){
          if(this.search.proId ===""){
            this.optionsSize = []
          }else{
            this.optionsSize = res.data.list
          }
        }else{
            this.$message.warning(res.statusMsg)
        }
      })
     },
      async getBlockData(proId) {
        const { data } = await this.$api.Reinforce.searchProjectBears({
            proId: proId
        })
        return data
      },
      async getLoopData(item) {
        const { data } = await this.$api.Reinforce.searchRing({
            proId:item.proId,sizeId:item.sizeId
        })
        return data;
      },
      // 查询按钮列表信息 
      searchButtonInfo(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        let params = Object.assign({},this.search,{
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        this.loading = true;
        this.$api.Reinforce.searchProjectSize(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.total = res.data.total;
            this.staticLists = res.data.list.map((item) => {
            this.getBlockData(item.proId).then((data) => {
                    this.$set(item, 'blokDtos', data.blokDtos || []);
                    this.$set(item, 'hasDtos', data.hasDtos || []);
                })
                this.getLoopData(item).then((data) => {
                    this.$set(item, 'info', data.info || []);
                    this.$set(item, 'looping', data.looping || []);  
                })
                return item;
            });
          }
          this.loading = false;
        })
      },
      showLooping(loopData,hasItem){
        if(loopData){
          const dataList = loopData.filter(item =>item.reinforcementId === hasItem.hasSteel)
          if(dataList &&dataList[0]){
            return dataList[0].counts
          }else{
            return 0
          }
        }else{
          return 0
        }
      },
      // 
      showCounts(infoData, hasItem, blockItem) {
        if(infoData) {
          infoData = infoData.flat(Infinity);
          const dataList = infoData.filter(item => 
            item.reinforcementId === hasItem.hasSteel && item.blockNum === blockItem.blockNum
          )
          if(dataList && dataList[0]) {
            return dataList[0].inventory
          } else {
            return 0;
          }
        }
      },
      // 判断按钮权限信息
      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_index{
    min-width: calc(50% - 16px);
    height: 500px;
    margin: 5px 16px 16px 0px;
    .main_content_top{
        height: 40px;
        background-color: rgba(57,181,254,0.3);
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;

        .main_content_title{
            height: 40px;
            margin-left: 24px;
            display: flex;
            align-items: center;
            flex-direction: row;
            position: relative;
            &::before{
                width: 4px;
                height: 20px;
                content: '';
                position: absolute;
                left: -13px;
                top: 10px;
                background-color: #39B5FE;
            }
            .main_text{
                color: #39B5FE;
                font-size: 16px;
                font-weight: 500;
            }
            .main_datas{
                margin-left: 30px;
                color: #39B5FE;
                font-size: 16px;
                font-weight: 500;
            }
        }
    }
    .main_content_bottom{
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        height: calc(100% - 50px);
        background-color: #02163C;
        padding: 20px;
        overflow: auto;

        .content_top{
            display: flex;
            height: 145px;
            .bottom_left{
                width: 100%;
                height: 100%;
                margin-left: -7px;
                cursor: pointer;
                &:hover{
                    animation: rotate 3s linear infinite;
                    }
                    @keyframes rotate {
                    0% {
                    transform: rotateY(0deg);
                    }
                    100% {
                    transform: rotateY(360deg);
                    }
                }
            }
            .bottom_right{
                width: 100%;
                min-width: 400px;

                .plan_content_items{
                    display: flex;
                    border: 1px solid #39B5FE;
                    margin: 0px 0px 8px 15px;

                    .plan_content_title{
                        width: 145px;
                        padding: 12px 0px;
                        flex: none;
                        color: #39B5FE;
                        text-align: center;
                        background-color: #052C55;
                    }
                    .plan_content_datas{
                        flex: 1;
                        padding: 12px 0px;
                        color: #fff;
                        text-align: center;
                        border-left: 1px solid #39B5FE;
                    }
                }
            }
        }
        .content_bottom{
            width: 100%;
            height: calc(100% - 145px);
            margin-top: 10px;
            border-bottom: 1px solid #063B5B;

            .content_bottom_rows{
                display: flex;
                text-align: center;
                height: 50px;
                border: 1px solid #09607A;
                margin-bottom: 15px;
                .content_bottom_text{
                    span{
                        color: #39B5FE;
                    }
                    flex: none;
                    color: #fff;
                    position: relative;
                    width: 100px;
                    height: 50px;
                    background: linear-gradient(to top right,#085A76,#032249);
                    &::before{
                        content: '';
                        width: 110%;
                        height: 2px;
                        background: linear-gradient(to bottom right,#085A76,#032249);
                        position: absolute;
                        top: 22px;
                        left: -6px;
                        transform: rotateZ(26deg);
                    }
                }
                .content_bottom_datas{
                    display: flex;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    color: #39B5FE;
                    border-left: 1px solid #09607A;
                    background: linear-gradient(to bottom,#032048,#09607A);
                    // cursor: pointer;
                }
            }
            .content_bottom_rebar{
                display: flex;
                text-align: center;
                height: calc(100% - 65px);
                border-top: 1px solid #39B5FE;
                border-left: 1px solid #39B5FE;
                border-right: 1px solid #39B5FE;

                .content_bottom_nodata{
                    border-left: 1px solid #39B5FE;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    color: #fff;
                }
                .content_bottom_titles{
                    color: #39B5FE;
                    width: 100px;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: 1px solid #39B5FE;
                    &:last-child{
                        border-bottom-color: #39B5FE;
                    }
                }
                .content_bottom_num{
                    border-left: 1px solid #39B5FE;
                    display: flex;
                    flex: 1;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    border-bottom: 1px solid #39B5FE;
                    &:last-child{
                        border-bottom-color: #39B5FE;
                    }
                }
                .bottom_nums{
                    background-color: #014C6E;
                    color: #39B5FE;
                }
            }
        }
    }
}
//滚动条样式
::-webkit-scrollbar {
    width: 4px; 
    height: 8px;   
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px #084E6B;
    background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px transparent;
    border-radius: 0;
    background: transparent;
}
</style>