退料分析-折线图弹框

sgzb-screen/src/api/dialog.js

@@ -5,6 +5,7 @@ const URL_DETAILS = '/screen/base/largeScreen/home/getMaterialReqData/details'
 const URL_RETURN_DETAILS = '/screen/base/largeScreen/home/getMaterialReturnData/details'
 const URL_UNIT_LIST = '/screen/material/agreementInfo/getUnitList'
 const URL_PROJECT_LIST = '/screen/material/agreementInfo/getProjectList'
+const URL_SCRAP_ANALYSIS = '/screen/base/largeScreen/home/getScrapAnalysisByMonth/details'
 
 // 设备类型
 export const getTypeList = params => GET(URL_TYPE_LIST, params)
@@ -19,4 +20,7 @@ export const getReturnDetails = data => POST(URL_RETURN_DETAILS, data)
 export const getUnitList = params => GET(URL_UNIT_LIST, params)
 
 // 工程名称-下拉
-export const getProjectList = params => GET(URL_PROJECT_LIST, params)
+export const getProjectList = params => GET(URL_PROJECT_LIST, params)
+
+// 废料分析
+export const getScrapAnalysis = data => POST(URL_SCRAP_ANALYSIS, data)

sgzb-screen/src/components/Pagination/index.vue

@@ -107,7 +107,7 @@ export default {
 .pagination-container {
   margin-top: 20px;
   background: #fff;
-  padding: 32px 16px;
+  /* padding: 32px 16px; */
   display: flex;
   justify-content: end;
   align-items: center;

sgzb-screen/src/components/home/getMaterialsDialog.vue

@@ -65,8 +65,8 @@
         <Pagination
           v-show="total > 0"
           :total="total"
-          :page="queryParams.pageNum"
-          :limit="queryParams.pageSize"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
         

sgzb-screen/src/components/home/leftThree.vue

@@ -4,7 +4,9 @@
       <div class="access-rate-box-title-bg">
         <h5 class="access-rate-box-title">当月报废分析</h5>
       </div>
-      <div id="accessRateEcharts"></div>
+      <div id="accessRateEcharts" @click="handleClick">
+        <scrapAnalysisDialog ref="scrapAnalysisDialog" />
+      </div>
     </div>
   </div>
 </template>
@@ -13,11 +15,13 @@
 import * as echarts from 'echarts';
 import CountFlopOne from './countFlopOne.vue'
 import { getScrapAnalysisByMonthApi } from "../../api/screen";
+import scrapAnalysisDialog from './scrapAnalysisDialog.vue'
 
 export default {
   name: 'accessRatePage',
   components: {
-    CountFlopOne
+    CountFlopOne,
+    scrapAnalysisDialog
   },
   data() {
     return {
@@ -230,6 +234,10 @@ export default {
       }
       let myCharts = echarts.init(document.querySelector('#accessRateEcharts'));
       myCharts.setOption(echartOption)
+    },
+    handleClick() {
+      console.log('handleClick--报废分析')
+      this.$refs.scrapAnalysisDialog.setOpen({ open: true, maType: this.maType})
     }
   }
 }

sgzb-screen/src/components/home/returnMaterialsDialog.vue

@@ -51,7 +51,6 @@
         <el-table :data="tableData" style="width: 100%">
           <el-table-column
             v-for="item in tableColumn"
-            v-if="item.isShow"
             :prop="item.prop"
             :label="item.label"
             :width="item.width"
@@ -66,8 +65,8 @@
         <Pagination
           v-show="total > 0"
           :total="total"
-          :page="queryParams.pageNum"
-          :limit="queryParams.pageSize"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
         

sgzb-screen/src/components/home/scrapAnalysisDialog.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <el-dialog
+      title=""
+      :visible.sync="open"
+      width="85%"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div class="content">
+        <el-form :model="formData" ref="form" label-width="80px" :inline="false" size="small" inline>
+          <el-form-item label="报废单号" size="small" prop="scrapCode">
+            <el-input v-model="formData.scrapCode" placeholder="请输入领料单号" size="small" clearable filterable></el-input>
+          </el-form-item>
+          <el-form-item label="报废来源" size="small" prop="scrapSource">
+            <el-select v-model="formData.scrapSource" placeholder="请选择报废来源" size="small" clearable filterable @change="handleSource">
+              <el-option
+                v-for="item in formData.scrapSourceList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="处置状态" size="small" prop="scrapStatus">
+            <el-select v-model="formData.scrapStatus" placeholder="请选择处置状态" size="small" clearable filterable @change="handleStatus">
+              <el-option
+                v-for="item in formData.scrapStatusList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备类型" size="small" prop="materialReqTypeValue">
+            <el-select v-model="formData.materialReqTypeValue" placeholder="请选择设备类型" size="small" clearable filterable @change="handleType">
+              <el-option v-for="item in formData.materialReqTypeList"
+                :key="item.typeId"
+                :label="item.typeName"
+                :value="item.typeId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
+            <el-button icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column
+            v-for="item in tableColumn"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            :key="item.prop"
+            :align="item.align"
+            :type="item.type"
+            show-overflow-tooltip
+            >
+          </el-table-column>
+
+          <el-table-column
+            label="处置状态"
+            prop="statusName"
+            align="center"
+            >
+            <template slot-scope="scope">
+              <el-tag :type="tagType(scope.row.scrapStatus)">{{ scope.row.statusName }}</el-tag>
+            </template>
+          </el-table-column>
+          
+        </el-table>
+
+        <Pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+        
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from '../Pagination/index.vue'
+import { getTypeList, getScrapAnalysis } from '../../api/dialog'
+
+export default {
+  name: 'getMaterialsDialog',
+  components: {
+    Pagination
+  },
+  data() {
+    return {
+      open: false,
+      material: false, // 领料
+      formData: {
+        scrapCode: '',
+        scrapSource: '',
+        scrapStatus: '',
+        materialReqTypeValue: '',
+        scrapSourceList: [
+          // 1,退料报废 2,维修报废 3,盘点报废
+          { value: 1, label: '退料报废' },
+          { value: 2, label: '维修报废' },
+          { value: 3, label: '盘点报废' }
+        ],
+        scrapStatusList: [
+          // 0进行中，1已审核，2驳回，3待处置，4已处置
+          { value: 0, label: '进行中' },
+          { value: 1, label: '已审核' },
+          { value: 2, label: '驳回' },
+          { value: 3, label: '待处置' },
+          { value: 4, label: '已处置' }
+        ],
+        materialReqTypeList: [],
+      },
+      tableData: [],
+      tableColumn: [
+        {
+          label: '序号',
+          type: 'index',
+          width: 60,
+          align: 'center'
+        },
+        {
+          label: '报废单号',
+          prop: 'scrapCode',
+          align: 'center'
+        },
+        {
+          label: '报废来源',
+          prop: 'scrapSourceName',
+          align: 'center'
+        },
+        {
+          label: '报废时间',
+          prop: 'scrapTime',
+          align: 'center'
+        },
+        {
+          label: '设备类型',
+          prop: 'typeName',
+          align: 'center'
+        },
+        {
+          label: '规格型号',
+          prop: 'typeModelName',
+          align: 'center'
+        },
+        {
+          label: '报废数量',
+          prop: 'scrapNum',
+          align: 'center'
+        },
+      ],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      maType: 1,
+      tagType: (status) => {
+        switch (status) {
+          case '0':
+            return 'primary'
+          case '1':
+            return 'success'
+          case '2':
+            return 'danger'
+          case '3':
+            return 'warning'
+          case '4':
+            return 'info'
+          default:
+            return 'primary'
+        }
+      }
+    };
+  },
+  created() {
+    this.getType()
+    
+  },
+  methods: {
+    setOpen(params) {
+      this.open = params.open,
+      this.maType = params.maType,
+      this.tableData = []
+      setTimeout(() => {
+        this.$refs.form.resetFields()
+        this.getList()
+      }, 100)
+    },
+    getList() {
+      const params = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        scrapCode: this.formData.scrapCode.trim(),
+        scrapSource: this.formData.scrapSource,
+        scrapStatus: this.formData.scrapStatus,
+        typeId: this.formData.materialReqTypeValue,
+        maType: this.maType
+      }
+      getScrapAnalysis(params).then(({data}) => {
+        this.tableData = data.rows
+        this.total = data.total
+      })
+    },
+    handleSource(val) {
+      this.formData.scrapSource = val
+    },
+    handleStatus(val) {
+      this.formData.scrapStatus = val
+    },
+    getType() {
+      getTypeList({ level: '3' }).then(res => {
+        this.formData.materialReqTypeList = res.data
+      })
+    },
+    handleType(val) {
+      this.formData.materialReqTypeValue = val
+    },
+    handleSearch() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    handleReset() {
+      this.$refs.form.resetFields()
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .content{
+    padding: 20px;
+  }
+</style>