维修分析

sgzb-screen/src/App.vue

@@ -19,4 +19,26 @@ export default {
 }
 </script>
 <style lang="less">
+.el-dialog {
+  // 背景色透明
+  background-color: rgba(0, 0, 0, 0.5);
+  // background-color: transparent; 
+  // background-color: #000;
+  background-image: url('./assets/img/dialog/window.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .el-dialog__headerbtn {
+    width: 83px;
+    height: 44px;
+    background-image: url('./assets/img/dialog/icon_close.png');
+    background-size: cover;
+    // 去除原来的 x 按钮
+    .el-dialog__close {
+      display: none;
+    }
+  }
+  .el-form-item__label {
+    color: #fff;
+  }
+}
 </style>

sgzb-screen/src/api/dialog.js

@@ -10,6 +10,8 @@ const URL_TOTAL_OWNERSHIP = '/screen/base/largeScreen/home/getTotalOwnership/det
 const URL_ACCEPTANCE_STORAGE = '/screen/base/largeScreen/home/getAcceptanceStorage/details'
 const URL_PICKING_ANALYSIS = '/screen/base/largeScreen/home/getPickingAnalysisByMonth/details'
 const URL_MATERIAL_RETURN_BY_MONTH = '/screen/base/largeScreen/home/getMaterialReturnByMonth/details'
+const URL_MAINTENANCE_BY_CHART = '/screen/base/largeScreen/home/getMaintenanceByMonth/chart'
+const URL_MAINTENANCE_BY_MONTH_DETAILS = '/screen/base/largeScreen/home/getMaintenanceByMonth/details'
 
 // 设备类型
 export const getTypeList = params => GET(URL_TYPE_LIST, params)
@@ -40,3 +42,9 @@ export const getPickingAnalysis = data => POST(URL_PICKING_ANALYSIS, data)
 
 // 退料分析
 export const getMaterialReturnByMonth = data => POST(URL_MATERIAL_RETURN_BY_MONTH, data)
+
+// 维修分析-pie+bar
+export const getMaintenanceByMonthChart = data => POST(URL_MAINTENANCE_BY_CHART, data)
+
+// 维修分析
+export const getMaintenanceByMonthDetails = data => POST(URL_MAINTENANCE_BY_MONTH_DETAILS, data)

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

@@ -0,0 +1,376 @@
+<template>
+  <div class="wrapper">
+    <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 width="100%">
+          <el-row >
+            <el-col :span="12">
+              <el-form-item class="formItem" label="维修情况" size="small">
+                <div class="chart" id="fixPieChart" ref="pieChart"></div>
+              </el-form-item>
+            
+            </el-col>
+            <el-col :span="12">
+              <el-form-item class="formItem" label=" 配件使用情况" label-width="110px" size="small">
+                <div class="chart" id="fixBarChart"></div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="维修单号" size="small" prop="repairCode">
+            <el-input v-model="formData.repairCode" placeholder="请输入维修单号" size="small" clearable filterable></el-input>
+          </el-form-item>
+          <el-form-item label="单位名称" size="small" prop="materialReqUnitValue">
+            <el-select v-model="formData.materialReqUnitValue" placeholder="请选择单位" size="small" clearable filterable @change="handleUnit">
+              <el-option
+                v-for="item in formData.materialReqUnitList"
+                :key="item.unitId"
+                :label="item.unitName"
+                :value="item.unitId"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="工程名称" size="small" prop="materialReqProjectValue">
+            <el-select v-model="formData.materialReqProjectValue" placeholder="请选择工程名称" size="small" clearable filterable @change="handleProject">
+              <el-option
+                v-for="item in formData.materialReqProjectList"
+                :key="item.projectId"
+                :label="item.projectName"
+                :value="item.projectId"
+              ></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>
+
+        <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 * as echarts from 'echarts'
+import Pagination from '../Pagination/index.vue'
+import { getMaintenanceByMonthDetails, getUnitList, getProjectList, getMaintenanceByMonthChart} from '../../api/dialog'
+
+export default {
+  name: 'getMaterialsDialog',
+  components: {
+    Pagination
+  },
+  data() {
+    return {
+      open: false,
+      formData: {
+        repairCode: '',
+        materialReqUnitValue: '',
+        materialReqProjectValue: '',
+        materialReqUnitList: [],
+        materialReqProjectList: [],
+      },
+      tableData: [],
+      tableColumn: [
+        {
+          label: '序号',
+          type: 'index',
+          width: 60,
+          align: 'center'
+        },
+        {
+          label: '维修单号',
+          prop: 'repairCode',
+          align: 'center'
+        },
+        {
+          label: '退料单位',
+          prop: 'unitName',
+          align: 'center'
+        },
+        {
+          label: '退料工程',
+          prop: 'projectName',
+          align: 'center'
+        },
+        {
+          label: '维修机具类型',
+          prop: 'typeName',
+          align: 'center'
+        },
+        {
+          label: '任务创建人',
+          prop: 'createBy',
+          align: 'center'
+        },
+        {
+          label: '任务创建时间',
+          prop: 'createTime',
+          align: 'center'
+        },
+        {
+          label: '退料单号',
+          prop: 'materialCode',
+          align: 'center'
+        },
+        {
+          label: '维修状态',
+          prop: 'repairStatus',
+          align: 'center'
+        }
+      ],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      maType: 1,
+    };
+  },
+  methods: {
+    setOpen(params) {
+      this.open = params.open,
+      this.maType = params.maType,
+      this.tableData = []
+      this.total = 0
+      setTimeout(() => {
+        this.$refs.form.resetFields()
+        this.getUnit()
+        this.getProject()
+        this.getList()
+        this.getChart()
+      }, 100)
+    },
+    getList() {
+      const params = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        maType: this.maType,
+        materialCode: this.formData.repairCode.trim(),
+        unitId: this.formData.materialReqUnitValue,
+        projectId: this.formData.materialReqProjectValue,
+      }
+      getMaintenanceByMonthDetails(params).then(({data}) => {
+        this.tableData = data.rows
+        this.total = data.total
+      })
+    },
+    getUnit() {
+      getUnitList().then(res => {
+        this.formData.materialReqUnitList = res.data
+      })
+    },
+    handleUnit(val) {
+      this.formData.materialReqUnitValue = val
+    },
+    getProject() {
+      getProjectList().then(res => {
+        this.formData.materialReqProjectList = res.data
+      })
+    },
+    handleProject(val) {
+      this.formData.materialReqProjectValue = val
+    },
+    handleSearch() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    handleReset() {
+      this.$refs.form.resetFields()
+      this.getList()
+    },
+    async getChart() {
+      const { data } = await getMaintenanceByMonthChart({ maType: this.maType })
+      const pieData = []
+      const barData = {
+        yAxisData: [],
+        seriesData: []
+      }
+      for (let key in data) {
+        if (key === 'num' && data[key]) pieData.push({ value: data[key], name: '待维修' })
+        if (key === 'num2' && data[key]) pieData.push({ value: data[key], name: '维修合格' })
+        if (key === 'num3' && data[key]) pieData.push({ value: data[key], name: '维修报废' })
+      }
+      data.accessVoList.forEach(item => {
+        if (item.partName && item.partNum) {
+          barData.yAxisData.push(item.partName)
+          barData.seriesData.push(item.partNum)
+        }
+      })
+      console.log('🚀 ~ getChart ~ barData:', barData);
+      this.myPieChart(pieData)
+      this.myBarChart(barData)
+    },
+    myPieChart(data) {
+      let pieChart = document.querySelector('#fixPieChart')
+      let myCharts = echarts.init(pieChart);
+      let option = {
+        color: ['#E89E42', '#ABF04B', '#C7352A'],
+        title: {
+          subtext: '',
+          left: 'left',
+          textStyle: {
+            color: '#fff',
+            // 背景图片
+            backgroundColor: 'url(../../../../assets/img/dialog/Heading.png)'
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          top: 'center',
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        series: [
+          {
+            name: '维修情况',
+            type: 'pie',
+            radius: '60%',
+            data,
+            label: {
+              show: true,
+              formatter: '{d}%',
+              color: '#fff'
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      myCharts.setOption(option)
+    },
+    myBarChart(data) {
+      let barChart = document.querySelector('#fixBarChart')
+      let myCharts = echarts.init(barChart);
+
+      let option = {
+        textStyle: {
+          color: '#fff'
+        },
+        title: {
+          subtext: '',
+          left: 'left',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: ''
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: data.yAxisData,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+        },
+        series: [
+          {
+            data: data.seriesData,
+            type: 'bar',
+            barWidth: 15,
+            itemStyle: {
+              borderRadius: [50, 50, 50, 50],
+              color: '#8080F7'
+            },
+            label: {
+              show: true,
+              position: 'right',
+              color: '#fff'
+            },
+          }
+        ]
+      };
+      myCharts.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  padding: 20px;
+  .el-row {
+    .formItem {
+      font-size: 20px !important;
+      background-image: url('../../assets/img/dialog/Heading.png');
+      background-repeat: no-repeat;
+      background-position: 0 10px;
+      padding-left: 10px;
+      .chart {
+        width: 39vw;
+        height: 400px;
+        color: #fff !important;
+      }
+    }
+    margin-left: 60px;
+  }
+}
+</style>

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

@@ -9,8 +9,8 @@
     >
       <div class="content">
         <el-form :model="formData" ref="form" label-width="80px" :inline="false" size="small" inline>
-          <el-form-item label="领料单号" size="small" prop="materialReqNo">
+          <el-form-item label="退料单号" size="small" prop="materialReqNo">
-            <el-input v-model="formData.materialReqNo" placeholder="请输入领料单号" size="small" clearable filterable></el-input>
+            <el-input v-model="formData.materialReqNo" placeholder="请输入退料单号" size="small" clearable filterable></el-input>
           </el-form-item>
           <el-form-item label="单位名称" size="small" prop="materialReqUnitValue">
             <el-select v-model="formData.materialReqUnitValue" placeholder="请选择单位" size="small" clearable filterable @change="handleUnit">

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

@@ -4,7 +4,7 @@
       <div class="access-rate-box-title-bg">
         <h5 class="access-rate-box-title">当月维修分析</h5>
       </div>
-      <div class="box_header">
+      <div class="box_header" @click="handleClick">
         <div class="box_left_bg">
           <div class="box_left_bg_upkeep">
             <div class="box_left_bg_img">
@@ -31,15 +31,19 @@
           </div>
         </div>
       </div>
+
+      <fixMaterialAnalysisDialog ref="fixMaterial" />
     </div>
   </div>
 </template>
 <script>
 import * as echarts from 'echarts';
 import { getMaintenanceByMonthApi } from "../../api/screen";
+import fixMaterialAnalysisDialog from './fixMaterialAnalysisDialog.vue';
 
 export default {
   name: 'accessRatePage',
+  components: { fixMaterialAnalysisDialog },
   data() {
     return {
       dataObj: {},
@@ -143,6 +147,9 @@ export default {
 
       let myCharts = echarts.init(document.querySelector('#accessRateEchartsPie'));
       myCharts.setOption(option)
+    },
+    handleClick() {
+      this.$refs.fixMaterial.setOpen({ open: true, maType: this.maType })
     }
   },
 }