¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div v-if="!isShowDataCom"> |
| | | <el-form ref="entity" size="small" :inline="true"> |
| | | <el-form-item style="width: 16%;"> |
| | | <el-date-picker |
| | | v-model="datePicker" |
| | | end-placeholder="ç»ææ¥æ" |
| | | format="yyyy-MM-dd" |
| | | placeholder="éæ©æ¥æ" |
| | | range-separator="è³" |
| | | size="small" |
| | | start-placeholder="å¼å§æ¥æ" |
| | | style="width: 100%;" |
| | | type="daterange" |
| | | value-format="yyyy-MM-dd"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="æ ·ååç§°" prop="sampleName"> |
| | | <el-input v-model="sampleName" clearable placeholder="请è¾å
¥æ ·ååç§°" size="small"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="åå·" prop="modelName"> |
| | | <el-input v-model="modelName" clearable placeholder="请è¾å
¥åå·" size="small"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ä¾åºååç§°" prop="supplierName"> |
| | | <el-input v-model="supplierName" clearable placeholder="请è¾å
¥ä¾åºååç§°" size="small"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="æ£éªé¡¹åç§°" prop="supplierName"> |
| | | <el-select v-model="itemNames" :loading="selectLoading" clearable multiple placeholder="è¯·éæ©" |
| | | size="small" style="width: 90%;" @focus="getItemList"> |
| | | <el-option |
| | | v-for="item in itemNamesList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="small" type="primary" @click="changeData">æ¥è¯¢</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div v-if="!isShowDataCom" style="overflow-y: auto;height: calc(100% - 70px);overflow-x: hidden"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <div class="inspection-card"> |
| | | <div style="display: flex;align-items: center;margin-bottom: 10px;justify-content: space-between;"> |
| | | <div>忿项æ£åæå表</div> |
| | | <el-button size="small" type="primary" @click="openShowData">æ¥çæ°æ®åæ</el-button> |
| | | </div> |
| | | <lims-table :tableData="editTableData" :column="editColumn" |
| | | height="400" key="tableData" :isSelection="true" |
| | | :handleSelectionChange="handleSelectionChange" |
| | | :tableLoading="editLoading"></lims-table> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="6" style="padding-top: 14px"> |
| | | <div style="display: flex;margin-left: 10px;align-items: center"> |
| | | <span style="width: 100px">åç»ç±»åï¼</span> |
| | | <el-select v-model="groupType" clearable placeholder="è¯·éæ©" |
| | | size="small" |
| | | style="width: 90%;" @change="getBarInfo"> |
| | | <el-option |
| | | v-for="item in groupTypeList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <div class="inspection-card"> |
| | | <div class="title">æ£éªé¡¹æ°æ®å¯¹æ¯</div> |
| | | <Echarts ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :dataset="dataset" |
| | | :grid="grid" |
| | | :options="echartsOptions" |
| | | :series="echartsSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis" |
| | | :yAxis="yAxis" |
| | | style="height: 40vh;"></Echarts> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <div class="inspection-card"> |
| | | <div class="title">忿项æ£åæ ¼ç</div> |
| | | <Echarts ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :dataset="dataset1" |
| | | :grid="grid" |
| | | :options="echartsOptions1" |
| | | :series="echartsSeries1" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis" |
| | | :yAxis="yAxis1" |
| | | style="height: 40vh;"></Echarts> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <el-dialog :visible.sync="dataDialogVisible" title="æ°æ®æ¥ç" width="80%"> |
| | | <div v-if="dataDialogVisible" style="height: 70vh;overflow-y: auto;"> |
| | | <lims-table :tableData="tableData" :column="column" |
| | | @pagination="pagination" key="tableData" |
| | | :page="page" :tableLoading="tableLoading"></lims-table> |
| | | </div> |
| | | </el-dialog> |
| | | <DataComparison v-if="isShowDataCom" :comparisonData="comparisonData" |
| | | :selectRow="selectRow" @goBack="goBack"></DataComparison> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import Echarts from "@/components/echarts/echarts.vue"; |
| | | import DataComparison from '@/components/echarts/DataComparison.vue' |
| | | import limsTable from "@/components/Table/lims-table.vue"; |
| | | import { |
| | | getRawItemNames, |
| | | getRawProductAnalysis, |
| | | getRawProductAnalysisAllList, |
| | | getRawProductAnalysisRawPass, getRawSupplierCompare |
| | | } from "@/api/statisticalCharts/dataAnalysis"; |
| | | import {selectSampleAndProductByOrderId} from "@/api/business/rawMaterialOrder"; |
| | | |
| | | export default { |
| | | name: "ItemInspectionAnalysis", |
| | | // import å¼å
¥çç»ä»¶éè¦æ³¨å
¥å°å¯¹è±¡ä¸æè½ä½¿ç¨ |
| | | components: {limsTable, Echarts, DataComparison}, |
| | | data() { |
| | | // è¿éåæ¾æ°æ® |
| | | return { |
| | | selectChangeRows: [], // éä¸çæ°æ® |
| | | groupTypeList: [ |
| | | {label: 'æ ·å', value: '0'}, |
| | | {label: 'åä¸åå®¶, åä¸åå·, ä¸åæ¹æ¬¡', value: '1'}, |
| | | {label: 'åä¸åå·, ä¸ååå®¶', value: '2'}, |
| | | ], |
| | | itemNames: [], // æ£éªé¡¹åç§° |
| | | itemNamesList: [], |
| | | selectLoading: false, |
| | | datePicker: [], // æ¶é´ |
| | | groupType: '', // åç» |
| | | beginDate: '', |
| | | endDate: '', |
| | | sampleName: '', // æ ·ååç§° |
| | | modelName: '', // åå· |
| | | supplierName: '', // ä¾åºååç§° |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | echartsOptions: {}, |
| | | echartsOptions1: {}, |
| | | dataset: { |
| | | dimensions: [], |
| | | source: [], |
| | | }, |
| | | dataset1: { |
| | | dimensions: [], |
| | | source: [], |
| | | }, |
| | | xAxis: [{ type: 'category' }], |
| | | yAxis: [{}], |
| | | yAxis1: [{ |
| | | axisLabel: { |
| | | formatter: '{value} %' |
| | | } |
| | | }], |
| | | echartsSeries: [], |
| | | echartsSeries1: [], |
| | | tooltip: {}, |
| | | chartStyle: { |
| | | width: '100%', |
| | | height: '96%' // 设置å¾è¡¨å®¹å¨çé«åº¦ |
| | | }, |
| | | editColumn: [ |
| | | { |
| | | label: 'æ¹å·', |
| | | minWidth: '120px', |
| | | prop: 'updateBatchNo' |
| | | }, { |
| | | label: 'å§æç¼å·', |
| | | minWidth: '120px', |
| | | prop: 'entrustCode' |
| | | }, { |
| | | label: 'é¶ä»¶å·', |
| | | minWidth: '120px', |
| | | prop: 'partNo' |
| | | }, { |
| | | label: 'é¶ä»¶æè¿°', |
| | | minWidth: '120px', |
| | | prop: 'partDesc' |
| | | }, { |
| | | label: 'ä¾åºååç§°', |
| | | minWidth: '120px', |
| | | prop: 'supplierName', |
| | | }, { |
| | | dataType: 'tag', |
| | | label: 'æ£éªç¶æ', |
| | | prop: 'inspectStatus', |
| | | minWidth: '120px', |
| | | formatData: (params) => { |
| | | if (params == 0) { |
| | | return 'æ£éªä¸' |
| | | } else if (params == 1) { |
| | | return 'åæ ¼' |
| | | } else if (params == 2) { |
| | | return 'ä¸åæ ¼' |
| | | } else if (params == 3) { |
| | | return 'æªä¸å' |
| | | } else if (params == 4) { |
| | | return 'è®©æ¥æ¾è¡' |
| | | } |
| | | }, |
| | | formatType: (params) => { |
| | | if (params == 1 || params == 4) { |
| | | return 'success' |
| | | } else if (params == 3) { |
| | | return 'warning' |
| | | } else if (params == 0 || params == 2) { |
| | | return 'danger' |
| | | } |
| | | } |
| | | }, { |
| | | label: 'æ ·ååç§°', |
| | | minWidth: '300px', |
| | | prop: 'sampleName' |
| | | }, { |
| | | label: 'æ ·ååå·', |
| | | minWidth: '300px', |
| | | prop: 'sampleModel' |
| | | },{ |
| | | label: 'ä¸åæ¶é´', |
| | | minWidth: '120px', |
| | | prop: 'sendTime' |
| | | },{ |
| | | label: 'æµè¾¾çéè´æ°é', |
| | | minWidth: '130px', |
| | | prop: 'qtyArrived' |
| | | },{ |
| | | label: 'åä½', |
| | | minWidth: '120px', |
| | | prop: 'buyUnitMeas' |
| | | }, |
| | | { |
| | | dataType: 'action', |
| | | width: '80px', |
| | | label: 'æä½', |
| | | fixed: 'right', |
| | | operation: [ |
| | | { |
| | | name: 'æ°æ®æ¥ç', |
| | | type: 'text', |
| | | clickFun: (row) => { |
| | | this.handleDataLook(row); |
| | | }, |
| | | }, |
| | | ] |
| | | } |
| | | ], |
| | | editTableData: [], |
| | | editLoading: false, |
| | | dataDialogVisible: false, |
| | | tableData: [], |
| | | tableLoading: false, |
| | | column: [ |
| | | {label: 'æ ·åç¼å·', prop: 'sampleCode'}, |
| | | {label: 'æ ·ååç§°', prop: 'sample'}, |
| | | {label: 'æ£éªé¡¹åç±»', prop: 'inspectionItemClass'}, |
| | | {label: 'æ£éªé¡¹', prop: 'inspectionItem'}, |
| | | {label: 'æ£éªå项', prop: 'inspectionItemSubclass'}, |
| | | {label: 'åä½', prop: 'unit'}, |
| | | {label: 'æ ·ååå·', prop: 'model'}, |
| | | {label: 'æ¡ä»¶', prop: 'radius'}, |
| | | {label: 'çµç¼æ è¯', prop: 'cableTag'}, |
| | | {label: 'è¯éªè¦æ±', prop: 'tell'}, |
| | | {label: 'æ£éªç»æ', prop: 'lastValue'}, |
| | | { |
| | | dataType: 'tag', |
| | | label: 'ç»æå¤å®', |
| | | prop: 'insResult', |
| | | formatData: (params) => { |
| | | if (params == 1) { |
| | | return 'åæ ¼' |
| | | } else if (params == 0) { |
| | | return 'ä¸åæ ¼' |
| | | } else if (params == 3) { |
| | | return 'ä¸å¤å®' |
| | | } else { |
| | | return null |
| | | } |
| | | }, |
| | | formatType: (params) => { |
| | | if (params == 1) { |
| | | return 'success' |
| | | } else if (params == 0) { |
| | | return 'danger' |
| | | } else if (params == 3) { |
| | | return '' |
| | | } else { |
| | | return null |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | page: { |
| | | total:0, |
| | | size:10, |
| | | current:1 |
| | | }, |
| | | currentRow: {}, |
| | | isShowDataCom: false, |
| | | comparisonData: {}, |
| | | selectRow: {}, |
| | | } |
| | | }, |
| | | mounted() { |
| | | // this.getBar() |
| | | }, |
| | | // æ¹æ³éå |
| | | methods: { |
| | | getBarInfo (val) { |
| | | if (val === '1') { |
| | | if (!this.modelName || !this.supplierName) { |
| | | this.$message.warning('åå·æä¾åºåä¸è½ä¸ºç©º') |
| | | this.groupType = '' |
| | | return |
| | | } |
| | | } else if (val === '2') { |
| | | if (!this.modelName) { |
| | | this.$message.warning('åå·ä¸è½ä¸ºç©º') |
| | | this.groupType = '' |
| | | return |
| | | } |
| | | if (this.supplierName) { |
| | | this.$message.warning('ä¸å¯éä¾åºååç§°') |
| | | this.groupType = '' |
| | | return |
| | | } |
| | | } |
| | | this.getBar() |
| | | this.getBar1() |
| | | }, |
| | | // è·ååæ ¼çå¾è¡¨æ°æ® |
| | | getBar() { |
| | | this.echartsSeries = [] |
| | | const params = { |
| | | beginDate: this.beginDate, |
| | | endDate: this.endDate, |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | itemNames: this.itemNames, |
| | | groupType: this.groupType, |
| | | } |
| | | getRawProductAnalysis(params).then((res) => { |
| | | if (res.data === null) { |
| | | this.$message.warning('ææ æ°æ®') |
| | | return |
| | | } |
| | | for (let i = 0; i < res.data.itemNames.length; i++) { |
| | | this.echartsSeries.push({type: 'line', label: { |
| | | show: true, |
| | | position: 'top' |
| | | },}) |
| | | } |
| | | this.dataset.dimensions = this.HaveJson(res.data.itemNames) |
| | | this.dataset.dimensions.unshift('product') |
| | | this.dataset.source = this.HaveJson(res.data.productList) |
| | | |
| | | }) |
| | | }, |
| | | getBar1() { |
| | | this.echartsSeries1 = [] |
| | | const params = { |
| | | beginDate: this.beginDate, |
| | | endDate: this.endDate, |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | itemNames: this.itemNames, |
| | | groupType: this.groupType, |
| | | } |
| | | getRawProductAnalysisRawPass(params).then((res) => { |
| | | if (res.data === null) { |
| | | this.$message.warning('ææ æ°æ®') |
| | | return |
| | | } |
| | | for (let i = 0; i < res.data.itemNames.length; i++) { |
| | | this.echartsSeries1.push({type: 'line',tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + '%'; |
| | | } |
| | | },label: { |
| | | show: true, |
| | | position: 'top', |
| | | formatter: (params) => params.value[params.dimensionNames[params.encode.y[0]]] + '%' |
| | | },}) |
| | | } |
| | | this.dataset1.dimensions = this.HaveJson(res.data.itemNames) |
| | | this.dataset1.dimensions.unshift('product') |
| | | this.dataset1.source = this.HaveJson(res.data.productList) |
| | | |
| | | }) |
| | | }, |
| | | // æ°æ®æ¥ç |
| | | handleDataLook(row) { |
| | | this.dataDialogVisible = true; |
| | | this.currentRow = row |
| | | this.refreshTable(row) |
| | | }, |
| | | // æ¥è¯¢åè° |
| | | refreshTable(row) { |
| | | selectSampleAndProductByOrderId({id: row.id}).then(res => { |
| | | this.tableLoading = false |
| | | if (res.code === 200) { |
| | | this.tableData = res.data.records |
| | | this.page.total = res.data.total |
| | | } |
| | | }).catch(err => { |
| | | this.tableLoading = false |
| | | }) |
| | | }, |
| | | pagination (page) { |
| | | this.page.size = page.limit |
| | | this.refreshTable(this.currentRow) |
| | | }, |
| | | changeData () { |
| | | if (this.datePicker !== null && this.datePicker.length > 0) { |
| | | this.beginDate = this.datePicker[0] + ' 00:00:00' |
| | | this.endDate = this.datePicker[1] + ' 23:59:59' |
| | | } else { |
| | | this.beginDate = '' |
| | | this.endDate = '' |
| | | } |
| | | this.getBar() |
| | | this.getBar1() |
| | | this.getTableData() |
| | | }, |
| | | getTableData () { |
| | | this.editLoading = true |
| | | const params = { |
| | | beginDate: this.beginDate, |
| | | endDate: this.endDate, |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | itemNames: this.itemNames, |
| | | } |
| | | getRawProductAnalysisAllList(params).then(res => { |
| | | this.editLoading = false |
| | | this.editTableData = res.data |
| | | }).catch(() => { |
| | | this.editLoading = false |
| | | }) |
| | | }, |
| | | // è·åæ£éªé¡¹ä¸ææ¡ |
| | | getItemList () { |
| | | this.selectLoading = true |
| | | this.itemNamesList = [] |
| | | const params = { |
| | | beginDate: this.beginDate, |
| | | endDate: this.endDate, |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | } |
| | | getRawItemNames(params).then((res) => { |
| | | this.selectLoading = false |
| | | res.data.map(val => { |
| | | const obj = Object.assign({ |
| | | label: val, |
| | | value: val, |
| | | }) |
| | | this.itemNamesList.push(obj) |
| | | }) |
| | | }).catch(() => { |
| | | this.selectLoading = false |
| | | }) |
| | | }, |
| | | goBack () { |
| | | this.isShowDataCom = false |
| | | }, |
| | | openShowData () { |
| | | if (this.selectChangeRows.length !== 5) { |
| | | this.$message.warning('è¯·éæ©5æ¡æ°æ®') |
| | | return |
| | | } |
| | | if (this.itemNames.length !== 1) { |
| | | this.$message.warning('åªè½éæ©1项æ£éªé¡¹åç§°') |
| | | return |
| | | } |
| | | let ids = [] |
| | | let itemNames = [] |
| | | this.selectChangeRows.forEach(item => { |
| | | ids.push(item.enterOrderId) |
| | | }) |
| | | this.itemNames.forEach(item => { |
| | | itemNames.push(item) |
| | | }) |
| | | const params = { |
| | | orderIds: ids, |
| | | itemNames: itemNames |
| | | } |
| | | getRawSupplierCompare(params).then(res => { |
| | | this.comparisonData = res.data |
| | | this.selectRow = params |
| | | this.isShowDataCom = true |
| | | }) |
| | | }, |
| | | handleSelectionChange (val) { |
| | | this.selectChangeRows = val |
| | | }, |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .inspection-card{ |
| | | width: 100%; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |