Merge branch 'master' of http://192.168.110.209:9001/r/lims-before
| | |
| | | ENV = 'development' |
| | | |
| | | # base api |
| | | VUE_APP_BASE_API = 'http://192.168.110.167:1234/' |
| | | VUE_APP_BASE_API = 'http://localhost:1234/' |
| | |
| | | "babel-jest": "23.6.0", |
| | | "babel-plugin-dynamic-import-node": "2.3.3", |
| | | "chalk": "2.4.2", |
| | | "comlink-loader": "^2.0.0", |
| | | "connect": "3.6.6", |
| | | "eslint": "6.7.2", |
| | | "eslint-plugin-vue": "6.2.2", |
| | |
| | | color: #fff; |
| | | } |
| | | |
| | | .el-message-box{ |
| | | border: 0; |
| | | border-radius: 15px; |
| | | } |
| | | |
| | | .el-message-box__header * { |
| | | font-size: 16px !important; |
| | | color: #fff !important; |
| | | } |
| | | |
| | | .el-dialog__headerbtn .el-dialog__close{ |
| | | color: #fff; |
| | | top: -20px; |
| | |
| | | box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41); |
| | | padding: 0 14px; |
| | | } |
| | | |
| | | .ins_state_success{ |
| | | background-color: #67c23a; |
| | | color: #fff; |
| | | display: initial; |
| | | padding: 6px 10px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .ins_state_error{ |
| | | background-color: #f56c6c; |
| | | color: #fff; |
| | | display: initial; |
| | | padding: 6px 10px; |
| | | border-radius: 4px; |
| | | } |
| | | </style> |
| | |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * getSampleOptions |
| | | */ |
| | | export function getSampleOptions(params) { |
| | | return request({ |
| | | url: '/qualificationRate/getSampleOptions', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | |
| | | |
| | | export function selectAllReportCheck(params) { |
| | | return request({ |
| | | url: '/reportAuditing/selectAllReportAuditing', |
| | | // url: '/reportAuditing/selectAllReportAuditing', |
| | | url: '/report/selectAllReport', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | | // å®¡æ ¸ |
| | | export function checkApi(params){ |
| | | return request({ |
| | | url: '/report/check', |
| | | method: 'post', |
| | | params |
| | | }) |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | import request from '@/utils/request' |
| | | |
| | | //è·åå·²æ£éªtop3 |
| | | export function getVerifiedTop3(params) { |
| | | return request({ |
| | | url: '/home/checktop3', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | | |
| | | //è·åæªæ£éªtop4 |
| | | export function getUncheckedTop4(params) { |
| | | return request({ |
| | | url: '/home/unchecktop4', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | | |
| | | //è·å忿䏿ååæ ¼ç |
| | | export function getMatAndFinshQualified(params) { |
| | | return request({ |
| | | url: '/home/qualified', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | | |
| | | //è·åæ£éªä¸æªæ£éªçååä¸é¡¹ç®çæ°é |
| | | export function getCheckAndProjectNum(params) { |
| | | return request({ |
| | | url: '/home/checkProjectNum', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | |
| | | const url = { |
| | | "selectAllPlan": "/plan/selectAllPlan",//æ¥è¯¢æææ£éªè®¡å |
| | | "choosecheck": "/plan/choosecheck",//åé
--éæ©æ£éªäºº |
| | | "chooseinstum": "/plan/chooseinstum",//åé
--éæ©è®¾å¤ |
| | | "reported": "/plan/reported",//䏿¥ |
| | | "distribution": "/plan/distribution",//åé
|
| | | "check": "/plan/check",//æ£éª |
| | | } |
| | | |
| | | export default function(Vue) { |
| | |
| | | data |
| | | }) |
| | | } |
| | | |
| | | export function wpost(path, params) { |
| | | return request({ |
| | | url: path, |
| | | method: 'post', |
| | | params |
| | | }) |
| | | } |
| | | |
| | | export function postFile(path, data) { |
| | | return request({ |
| | | url: path, |
| | |
| | | 'sidebar' |
| | | ]), |
| | | routes() { |
| | | console.log(this.$router.options.routes); |
| | | return this.$router.options.routes |
| | | }, |
| | | activeMenu() { |
| | |
| | | import store from './store' |
| | | import router from './router' |
| | | |
| | | //å¼å
¥echarts |
| | | import echarts from 'echarts' |
| | | Vue.prototype.$echarts = echarts |
| | | |
| | | |
| | | import '@/icons' // icon |
| | | import '@/permission' // permission control |
| | | |
| | |
| | | <el-table-column prop="approver" label="审æ¹äºº" min-width="8%"> |
| | | <template slot-scope="scope"> |
| | | <span> |
| | | <el-tag type="info" icon="el-icon-user"> |
| | | <el-tag v-if="scope.row.approver!=null && scope.row.approver!=''" type="info" icon="el-icon-user"> |
| | | <i class="el-icon-user">{{ scope.row.approver }}</i> |
| | | </el-tag> |
| | | </span> |
| | |
| | | <el-pagination |
| | | class="pagination" |
| | | :current-page="currentPage" |
| | | :page-sizes="[1, 10, 20, 30]" |
| | | :page-sizes="[ 10, 20, 30,40]" |
| | | :page-size="pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total" |
| | |
| | | this.total = this.inspectionTable.length |
| | | }, |
| | | reset(){ |
| | | this.countSize = 1 |
| | | this.searchData = { } |
| | | // console.log('2222'); |
| | | this.selectInspectsList() |
| | | this.countSize = 1; |
| | | this.pageSize = 8; |
| | | this.searchData = { }; |
| | | this.selectInspectsList(); |
| | | }, |
| | | //被éä¸çä¿¡æ¯ åé |
| | | handleSelectionChange(val) { |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item style="margin-left: 40px;" label="æ ·å:"> |
| | | <el-select v-model="searchData.code" filterable placeholder="è¯·éæ©"> |
| | | <el-option v-for="item in sampleOptions" :key="item.value" :label="item.label" :value="item.value"> |
| | | <span style="float: left">{{ item.label }}</span> |
| | | <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <div class="rightBtn"> |
| | | <el-form-item> |
| | | <el-button type="primary" plain size="mini">æ¸
空</el-button> |
| | |
| | | <div class="chart-content"> |
| | | <div class="qualified-wrapper"> |
| | | <div style="margin-left: 20px;padding:20px 0px;font-size:18px">æ£æµæ ·ååæ ¼çç»è®¡</div> |
| | | <div class="qualified" ref="qualified"></div> |
| | | <div :hidden="testSample" class="qualified" ref="qualified"></div> |
| | | <div :hidden="!testSample" style="height: 100%;text-align: center; color: #999696df; margin-top: 100px;">ææ æ°æ® |
| | | </div> |
| | | </div> |
| | | <div class="unqualified"> |
| | | <div class="firstBox-wrapper"> |
| | | <div style="margin-left: 20px;padding:20px 0px;font-size:18px">ä¾åºåä¸åæ ¼æ¬¡æ°ç»è®¡</div> |
| | | <div class="firstBox" ref="unqualified_provider"></div> |
| | | <div style="margin-left: 20px;padding:20px 0px;font-size:18px">ä¾åºååæ ¼çç»è®¡</div> |
| | | <div> |
| | | <div :hidden="supplierData" class="firstBox" ref="unqualified_provider"></div> |
| | | <div :hidden="!supplierData" style="height: 100%;text-align: center; color: #999696df; margin-top: 100px;"> |
| | | ææ æ°æ®</div> |
| | | </div> |
| | | </div> |
| | | <div class="secondBox-wrapper"> |
| | | <div class="secondBox_header"> |
| | |
| | | }}</el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | <div class="secondBox" ref="unqualified_project"></div> |
| | | <div style="width: 100%;height: 100;"> |
| | | <div :hidden="projectData" class="secondBox" ref="unqualified_project"></div> |
| | | <div :hidden="!projectData" style="height: 100%;text-align: center; color: #999696df; margin-top: 100px;">ææ æ°æ® |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="bottom"> |
| | | <el-button type="primary" size="mini">æ°æ®å¯¼åº</el-button> |
| | | <!-- <el-button type="primary" size="mini" @click="testWork">æµè¯</el-button> --> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | }) |
| | | |
| | | import * as echarts from 'echarts' |
| | | import { getSupplierList,getTestSampleStatistics,getSupplierNoPassStatistics,getNoPassProjectStatistics } from '@/api/experiment/passRateStatistics'; |
| | | import { getSupplierList, getTestSampleStatistics, getSupplierNoPassStatistics, getNoPassProjectStatistics, getSampleOptions } from '@/api/experiment/passRateStatistics'; |
| | | import { dateFormat } from '../../../utils/dateUtil' |
| | | import MyWorker from 'comlink-loader!../../../worker/test'; |
| | | export default { |
| | | data() { |
| | | return { |
| | | supplier: [], |
| | | sampleOptions: [], |
| | | searchData: { |
| | | date: [], |
| | | type: null, |
| | | supplier: null |
| | | supplier: null, |
| | | sample: null, |
| | | code: null |
| | | }, |
| | | options: [ |
| | | { |
| | | label: 'å
¨é¨', |
| | | value: 3 |
| | | }, |
| | | { |
| | | label: 'åææ', |
| | | value: 0 |
| | |
| | | rules: { |
| | | // date: [{ required: true, message: '请è¾å
¥è´¦å·', trigger: 'blur' }], |
| | | // type: [{ required: true, message: '请è¾å
¥åå', trigger: 'blur' }] |
| | | } |
| | | }, |
| | | supplierNoPassStatistics: null, |
| | | supplierData: false, |
| | | projectStatistics: null, |
| | | projectData: false, |
| | | testSampleStatistics: null, |
| | | testSample: false, |
| | | m1: null, |
| | | m2: null, |
| | | m3: null |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getSupplierList() |
| | | this.getTestSampleStatistics() |
| | | this.getSupplierNoPassStatistics() |
| | | const chartDom_qualified = this.$refs.qualified; |
| | | const chartDom_unqualified_provider = this.$refs.unqualified_provider; |
| | | const chartDom_unqualified_project = this.$refs.unqualified_project; |
| | | |
| | | const myChart1 = echarts.init(chartDom_qualified); |
| | | const myChart2 = echarts.init(chartDom_unqualified_provider); |
| | | const myChart3 = echarts.init(chartDom_unqualified_project); |
| | | |
| | | /** |
| | | * æ£æµåæ ¼çç»è®¡ |
| | | */ |
| | | const option_qualified = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { // åæ è½´æç¤ºå¨ï¼åæ è½´è§¦åææ |
| | | type: 'shadow' // é»è®¤ä¸ºç´çº¿ï¼å¯é为ï¼'line' | 'shadow' |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ['æ°æ®1', 'æ°æ®2', 'æ°æ®3'] |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: ['ç¬¬ä¸æ¹', 'ç¬¬äºæ¹', 'ç¬¬ä¸æ¹', 'ç¬¬åæ¹'] |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | } |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'æ°æ®1', |
| | | type: 'bar', |
| | | data: [7245, 3475, 1237, 3456] |
| | | }, |
| | | { |
| | | name: 'æ°æ®2', |
| | | type: 'bar', |
| | | data: [9965, 9075, 4875, 8687] |
| | | }, |
| | | { |
| | | name: 'æ°æ®3', |
| | | type: 'line', |
| | | yAxisIndex: 0, |
| | | symbolSize: 3, // æçº¿èç¹çå¤§å° |
| | | symbol: 'circle', // æçº¿èç¹çå½¢ç¶ |
| | | smooth: false, // å¹³æ»æ²çº¿ |
| | | data: [1465, 6437, 3257, 6537] |
| | | } |
| | | ] |
| | | }; |
| | | /** |
| | | * ä¾åºå |
| | | */ |
| | | const option_unqualified1 = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { // åæ è½´æç¤ºå¨ï¼åæ è½´è§¦åææ |
| | | type: 'shadow' // é»è®¤ä¸ºç´çº¿ï¼å¯é为ï¼'line' | 'shadow' |
| | | }, |
| | | formatter: function (params) { |
| | | let tooltip = params[0].name + '<br/>'; |
| | | params.forEach(function (item) { |
| | | tooltip += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>'; // å°æ°æ®ä¿ç两ä½å°æ°å¹¶è½¬ä¸ºç¾åæ¯å½¢å¼ |
| | | }); |
| | | return tooltip; |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ['åæ ¼æ°é', 'ä¸åæ ¼æ°é'] |
| | | }, |
| | | xAxis: { |
| | | data: ['ä¾åºå1', 'ä¾åºå2', 'ä¾åºå3', 'ä¾åºå4'] |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: '{value}%' |
| | | } |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'åæ ¼æ°é', |
| | | data: [52, 46, 39, 66], |
| | | type: 'bar', |
| | | stack: 'x' |
| | | }, |
| | | { |
| | | name: 'ä¸åæ ¼æ°é', |
| | | data: [47, 53, 60, 33], |
| | | type: 'bar', |
| | | stack: 'x' |
| | | } |
| | | ] |
| | | }; |
| | | /** |
| | | * ä¸åæ ¼é¡¹ç® |
| | | */ |
| | | const option_unqualified2 = { |
| | | legend: { |
| | | orient: 'vertical', |
| | | x: 'left', |
| | | data: ['ç»ç¼åå¿ç', 'è¯éªç»æ', '导ä½å±è½æå¤§å¼'] |
| | | }, |
| | | title: { |
| | | text: '', |
| | | left: 'center', |
| | | top: 'center' |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | data: [ |
| | | { |
| | | value: 40, |
| | | name: 'ç»ç¼åå¿ç' |
| | | }, |
| | | { |
| | | value: 20, |
| | | name: 'è¯éªç»æ' |
| | | }, |
| | | { |
| | | value: 40, |
| | | name: '导ä½å±è½æå¤§å¼' |
| | | } |
| | | ], |
| | | radius: ['40%', '70%'], |
| | | label: { |
| | | show: true, |
| | | formatter: '{b}: {c}' |
| | | }, |
| | | } |
| | | ] |
| | | } |
| | | |
| | | myChart1.setOption(option_qualified); |
| | | myChart2.setOption(option_unqualified1); |
| | | if (this.type === 0) { |
| | | myChart3.setOption(option_unqualified2); |
| | | } |
| | | if (this.type === 1) { |
| | | myChart3.setOption(option_unqualified2); |
| | | } |
| | | async mounted() { |
| | | await this.start() |
| | | this.tableStart() |
| | | }, |
| | | methods: { |
| | | search() { |
| | | this.getTestSampleStatistics() |
| | | }, |
| | | dateHandle(){ |
| | | let data=JSON.parse(JSON.stringify(this.searchData)) |
| | | if(this.searchData.date.length!=0&&this.searchData.date !=[]){ |
| | | data.beginDate=dateFormat(this.searchData.date[0]) |
| | | data.endDate=dateFormat(this.searchData.date[1]) |
| | | testWork(){ |
| | | const inst = new MyWorker(); |
| | | inst.test() |
| | | for (let index = 0; index < 100; index++) { |
| | | console.log("主线ç¨"+index); |
| | | } |
| | | data.date=null |
| | | }, |
| | | async search() { |
| | | this.testSampleStatistics = null |
| | | this.supplierNoPassStatistics = null |
| | | this.projectStatistics = null |
| | | this.supplier = [] |
| | | this.sampleOptions = [] |
| | | await this.start() |
| | | this.tableStart() |
| | | }, |
| | | dateHandle() { |
| | | let data = JSON.parse(JSON.stringify(this.searchData)) |
| | | if (this.searchData.date.length != 0 && this.searchData.date != []) { |
| | | data.beginDate = dateFormat(this.searchData.date[0]) |
| | | data.endDate = dateFormat(this.searchData.date[1]) |
| | | } |
| | | if (data.supplier == 'å
¨é¨') { |
| | | data.supplier = null |
| | | } |
| | | if (data.type === 3) { |
| | | data.type = null |
| | | } |
| | | if (this.sampleOptions.length > 0 && this.sampleOptions != []) { |
| | | let labelSam = this.sampleOptions.filter(item => { |
| | | return item.value == data.code |
| | | })[0] |
| | | data.sample = labelSam.label |
| | | } |
| | | if (data.code == 'å
¨é¨') { |
| | | data.code = null |
| | | data.sample = null |
| | | } |
| | | data.date = null |
| | | return data |
| | | }, |
| | | async getSupplierList() { |
| | | let res = await getSupplierList() |
| | | this.supplier.push({ label: 'å
¨é¨', value: 'å
¨é¨' }) |
| | | res.data.forEach(item => { |
| | | this.supplier.push({ label: item.supplier, value: item.supplier }) |
| | | }) |
| | | }, |
| | | getTestSampleStatistics(){ |
| | | let param= this.dateHandle() |
| | | let res =getTestSampleStatistics(param) |
| | | async getTestSampleStatistics() { |
| | | let param = this.dateHandle() |
| | | let res = await getTestSampleStatistics(param) |
| | | this.testSample = !res.data.noData |
| | | this.testSampleStatistics = res.data |
| | | }, |
| | | getSupplierNoPassStatistics(){ |
| | | let param= this.dateHandle() |
| | | getSupplierNoPassStatistics(param) |
| | | async getSupplierNoPassStatistics() { |
| | | let param = this.dateHandle() |
| | | let res = await getSupplierNoPassStatistics(param) |
| | | this.supplierData = !res.data.noData |
| | | this.supplierNoPassStatistics = res.data |
| | | }, |
| | | async getNoPassProjectStatistics() { |
| | | let param = this.dateHandle() |
| | | let res = await getNoPassProjectStatistics(param) |
| | | this.projectData = !res.data.noData |
| | | this.projectStatistics = res.data |
| | | }, |
| | | async start() { |
| | | await this.getTestSampleStatistics() |
| | | await this.getSupplierNoPassStatistics() |
| | | await this.getNoPassProjectStatistics() |
| | | await this.getSupplierList() |
| | | await this.getSampleOptions() |
| | | }, |
| | | async getSampleOptions() { |
| | | let res = await getSampleOptions() |
| | | this.sampleOptions.push({ |
| | | label: 'å
¨é¨', |
| | | value: 'å
¨é¨' |
| | | }) |
| | | res.data.forEach(item => { |
| | | let data = { |
| | | label: item.name, |
| | | value: item.code |
| | | } |
| | | this.sampleOptions.push(data) |
| | | }) |
| | | }, |
| | | tableStart() { |
| | | const chartDom_qualified = this.$refs.qualified; |
| | | const chartDom_unqualified_provider = this.$refs.unqualified_provider; |
| | | const chartDom_unqualified_project = this.$refs.unqualified_project; |
| | | |
| | | const myChart1 = echarts.init(chartDom_qualified); |
| | | const myChart2 = echarts.init(chartDom_unqualified_provider, null, { |
| | | height: 300 |
| | | }); |
| | | |
| | | const myChart3 = echarts.init(chartDom_unqualified_project, null, { |
| | | height: 268 |
| | | }); |
| | | window.addEventListener("resize",function(){ |
| | | myChart1.resize() |
| | | myChart2.resize() |
| | | myChart3.resize() |
| | | }) |
| | | this.m1 = myChart1 |
| | | this.m2 = myChart2 |
| | | this.m3 = myChart3 |
| | | /** |
| | | * æ£æµåæ ¼çç»è®¡ |
| | | */ |
| | | const option_qualified = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { // åæ è½´æç¤ºå¨ï¼åæ è½´è§¦åææ |
| | | type: 'shadow' // é»è®¤ä¸ºç´çº¿ï¼å¯é为ï¼'line' | 'shadow' |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ['åæ ¼', 'ä¸åæ ¼'] |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: this.testSampleStatistics.xAxis |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | } |
| | | } |
| | | ], |
| | | series: this.testSampleStatistics.series |
| | | }; |
| | | /** |
| | | * ä¾åºå |
| | | */ |
| | | const option_unqualified1 = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { // åæ è½´æç¤ºå¨ï¼åæ è½´è§¦åææ |
| | | type: 'shadow' // é»è®¤ä¸ºç´çº¿ï¼å¯é为ï¼'line' | 'shadow' |
| | | }, |
| | | formatter: function (params) { |
| | | let tooltip = params[0].name + '<br/>'; |
| | | params.forEach(function (item) { |
| | | tooltip += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>'; // å°æ°æ®ä¿ç两ä½å°æ°å¹¶è½¬ä¸ºç¾åæ¯å½¢å¼ |
| | | }); |
| | | return tooltip; |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ['åæ ¼æ°é', 'ä¸åæ ¼æ°é'] |
| | | }, |
| | | xAxis: { |
| | | data: this.supplierNoPassStatistics.xAxis |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | formatter: '{value}%' |
| | | } |
| | | } |
| | | ], |
| | | series: this.supplierNoPassStatistics.series |
| | | }; |
| | | /** |
| | | * ä¸åæ ¼é¡¹ç® |
| | | */ |
| | | const option_unqualified2 = { |
| | | legend: { |
| | | orient: 'vertical', |
| | | x: 'left', |
| | | data: this.projectStatistics.legend |
| | | }, |
| | | title: { |
| | | text: '', |
| | | left: 'center', |
| | | top: 'center' |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | data: this.projectStatistics.series, |
| | | radius: ['40%', '70%'], |
| | | label: { |
| | | show: true, |
| | | formatter: '{b}: {c}%' |
| | | }, |
| | | } |
| | | ] |
| | | } |
| | | |
| | | myChart1.setOption(option_qualified); |
| | | myChart2.setOption(option_unqualified1); |
| | | if (this.type === 0) { |
| | | myChart3.setOption(option_unqualified2); |
| | | } |
| | | if (this.type === 1) { |
| | | myChart3.setOption(option_unqualified2); |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .content-main { |
| | | height: 100%; |
| | | width: 100%; |
| | | overflow: auto; |
| | | |
| | | .top-bar { |
| | | position: absolute; |
| | |
| | | margin: 10px; |
| | | padding: 15px; |
| | | background-color: white; |
| | | height: calc(100vh - 15vh); |
| | | height: calc(100vh - 18vh); |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .order_num{ |
| | | .order_num { |
| | | border-radius: 1rem; |
| | | width: 35px; |
| | | height: 25px; |
| | |
| | | <el-button size="small">éç½®</el-button> |
| | | </div> |
| | | <div class="thing"> |
| | | <el-table :data="tableData" style="width: 100%;" row-key="id" default-expand-all |
| | | <el-table :data="tableData" style="width: 100%;" row-key="code" default-expand-all |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :key="upIndex"> |
| | | <el-table-column type="index" width="50" label="åºå·"> |
| | | </el-table-column> |
| | | <el-table-column prop="date" label="ç³è¯·åå·"> |
| | | <el-table-column prop="code" label="ç³è¯·åå·" width="250px"> |
| | | <template slot-scope="scope"> |
| | | <div style="display: flex;"> |
| | | <div v-if="scope.row.code=='01'" style="color: #3caaff;background-color: #eff5ff;" class="order_num">01</div> |
| | | <div v-else-if="scope.row.code=='02'" style="color: #57c981;background-color: #f1fbf4;" class="order_num">02</div> |
| | | <div v-else-if="scope.row.code=='03'" style="color: #dfa8fb;background-color: #faf2ff;" class="order_num">03</div> |
| | | <div>{{scope.row.date}}</div> |
| | | <div v-if="scope.row.orderNum=='01'" style="color: #3caaff;background-color: #eff5ff;" class="order_num"> |
| | | 01 |
| | | </div> |
| | | <div v-else-if="scope.row.orderNum=='02'" style="color: #57c981;background-color: #f1fbf4;" |
| | | class="order_num"> |
| | | 02</div> |
| | | <div v-else-if="scope.row.orderNum=='03'" style="color: #dfa8fb;background-color: #faf2ff;" |
| | | class="order_num"> |
| | | 03</div> |
| | | <div>{{scope.row.code}}</div> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="æ£éªç»æ"> |
| | | <el-table-column prop="name" label="åç§°" width="200px"> |
| | | </el-table-column> |
| | | <el-table-column prop="address" label="å°å"> |
| | | <el-table-column prop="unit" label="åä½"> |
| | | </el-table-column> |
| | | <el-table-column label="æä½" width="80"> |
| | | <el-table-column prop="required" label="è¦æ±å¼"> |
| | | </el-table-column> |
| | | <el-table-column prop="internal" label="å
æ§å¼"> |
| | | </el-table-column> |
| | | <el-table-column prop="testValue" label="æ£éªå¼"> |
| | | </el-table-column> |
| | | <el-table-column prop="checker" label="æ§è¡äºº"> |
| | | </el-table-column> |
| | | <el-table-column prop="instrumentname" label="æ£éªè®¾å¤"> |
| | | </el-table-column> |
| | | <el-table-column prop="testState" label="æ£éªç¶æ" width="100px"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="mini" type="primary" v-if="isIfReport(scope.row)">䏿¥</el-button> |
| | | <el-button size="mini" type="warning" @click="openUpDia(scope.row)" |
| | | v-else-if="scope.row.code=='03'&&scope.row.insId==undefined&&scope.row.address==null">åé
</el-button> |
| | | <el-button size="mini" type="success" @click="openUpInsDia(scope.row)" |
| | | v-else-if="scope.row.code=='03'&&scope.row.insId==undefined&&scope.row.name==null">æ£éª</el-button> |
| | | <el-tag type="success" v-if="scope.row.testState==1">åæ ¼</el-tag> |
| | | <el-tag type="danger" v-else-if="scope.row.testState==0">ä¸åæ ¼</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="startTime" label="æ£éªå¼å§" width="100px"> |
| | | </el-table-column> |
| | | <el-table-column prop="endTime" label="æ£éªç»æ" width="100px"> |
| | | </el-table-column> |
| | | <el-table-column label="æä½" width="150"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="mini" type="primary" v-if="isIfReport(scope.row)" |
| | | @click="addReported(scope.row.id)">䏿¥</el-button> |
| | | <el-button size="mini" type="text" @click="openUpDia(scope.row)" |
| | | v-if="scope.row.orderNum=='02'">åé
</el-button> |
| | | <el-button size="mini" type="text" @click="openUpInsDia(scope.row)" |
| | | v-if="scope.row.orderNum=='02'">æ£éª</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <el-dialog title="åé
设å¤å人å" :visible.sync="upDia" width="500px" top="30vh"> |
| | | <div class="body"> |
| | | <el-row style="line-height: 46px;"> |
| | | <el-row style="line-height: 50px;"> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">人å:</el-col> |
| | | <el-col :span="16" :offset="1"> |
| | | <el-input v-model="upData.address" size="small" clearable></el-input> |
| | | <el-select v-model="upData.checker" size="medium" clearable style="width: 100%;"> |
| | | <el-option v-for="(a, ai) in users" :key="ai" :label="a.name" :value="a.id"></el-option> |
| | | </el-select> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="line-height: 50px;"> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">设å¤:</el-col> |
| | | <el-col :span="16" :offset="1"> |
| | | <el-cascader v-model="upData.device" :options="devices" size="medium" style="width: 100%;" clearable |
| | | :props="{label: 'name',value: 'id',emitPath: false}" :show-all-levels="false"></el-cascader> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | |
| | | <el-dialog title="æ£éª" :visible.sync="upInsDia" width="500px"> |
| | | <div class="body" style="max-height: 50vh;overflow-y: auto;"> |
| | | <el-row style="line-height: 46px;"> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">æ ·åç¼ç ï¼</el-col> |
| | | <el-col :span="8">{{upData.date}}</el-col> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">æ ·ååç§°ï¼</el-col> |
| | | <el-col :span="8">{{upData.date}}</el-col> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">ç³è¯·åç¼ç ï¼</el-col> |
| | | <el-col :span="7">{{upData.insId}}</el-col> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">æ ·ååç§°ï¼</el-col> |
| | | <el-col :span="7">{{upData.productName}}</el-col> |
| | | </el-row> |
| | | <el-row style="line-height: 46px;"> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">æ£éªé¡¹ç®ï¼</el-col> |
| | | <el-col :span="8">{{upData.date}}</el-col> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">åä½ï¼</el-col> |
| | | <el-col :span="8">{{upData.date}}</el-col> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">æ£éªé¡¹ç®ï¼</el-col> |
| | | <el-col :span="7">{{upData.name}}</el-col> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">åä½ï¼</el-col> |
| | | <el-col :span="7">{{upData.unit}}</el-col> |
| | | </el-row> |
| | | <el-row style="line-height: 46px;"> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">æ åå¼ï¼</el-col> |
| | | <el-col :span="8">{{upData.date}}</el-col> |
| | | <el-col :span="4" style="font-size: 14px;text-align: right;">å
æ§å¼ï¼</el-col> |
| | | <el-col :span="8">{{upData.date}}</el-col> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">æ åå¼ï¼</el-col> |
| | | <el-col :span="7">{{upData.required}}</el-col> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">å
æ§å¼ï¼</el-col> |
| | | <el-col :span="7">{{upData.internal}}</el-col> |
| | | </el-row> |
| | | <el-row style="line-height: 46px;"> |
| | | <el-col :span="5" style="font-size: 14px;text-align: right;">æ£éªç¶æï¼</el-col> |
| | | <el-col :span="7"> |
| | | <el-tag type="success" v-if="upData.testState==1">åæ ¼</el-tag> |
| | | <el-tag type="danger" v-else-if="upData.testState==0">ä¸åæ ¼</el-tag> |
| | | <el-tag type="info" v-else>æ ç»æ</el-tag> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="line-height: 46px;"> |
| | | <el-col style="text-align: right;"><el-button size="mini" @click="addRes">æ·»å æ£éªå¼</el-button></el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col> |
| | | <el-table :data="upData.res" border style="width: 99.9%;" :key="upIndex2"> |
| | | <el-table :data="upData.testValue" border style="width: 99.9%;" :key="upIndex2"> |
| | | <el-table-column type="index" width="100" label="åºå·"> |
| | | </el-table-column> |
| | | <el-table-column label="æ£éªå¼"> |
| | |
| | | <el-table-column label="æä½" width="60"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="mini" type="text" |
| | | @click.native.prevent="deleteRow(scope.$index, upData.res)">å é¤</el-button> |
| | | @click.native.prevent="deleteRow(scope.$index, upData.testValue)">å é¤</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | </el-row> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="submitUpData">æ 交</el-button> |
| | | <el-button type="primary" @click="submitUpData2">æ 交</el-button> |
| | | <el-button @click="upInsDia = false">å æ¶</el-button> |
| | | </span> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | get, |
| | | post, |
| | | wpost, |
| | | postFile |
| | | } from "@/api/util/requestUtil.js" |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | date: [], |
| | | userName: null, |
| | | }, |
| | | tableData: [{ |
| | | id: 1, |
| | | insId: 123, |
| | | date: '2016-05-02', |
| | | name: null, |
| | | address: '䏿µ·å¸æ®éåºéæ²æ±è·¯ 1518 å¼', |
| | | children: [{ |
| | | id: 33, |
| | | date: '2016-05-01', |
| | | name: null, |
| | | res: '[{"number": 1},{"number": 2}]', |
| | | address: '䏿µ·å¸æ®éåºéæ²æ±è·¯ 1519 å¼' |
| | | }, { |
| | | id: 34, |
| | | date: '2016-05-01', |
| | | name: null, |
| | | res: '[{"number": 1,"res": "ä¸åæ ¼"},{"number": 3,"res": "ä¸åæ ¼"}]', |
| | | address: '䏿µ·å¸æ®éåºéæ²æ±è·¯ 1519 å¼', |
| | | children: [{ |
| | | id: 35, |
| | | date: 'hhh', |
| | | name: null, |
| | | res: '[{"number": 1},{"number": 2}]', |
| | | address: '䏿µ·å¸æ®éåºéæ²æ±è·¯ 1519 å¼' |
| | | }] |
| | | }] |
| | | }, { |
| | | id: 2, |
| | | insId: 123, |
| | | date: '2016-05-04', |
| | | name: null, |
| | | address: '䏿µ·å¸æ®éåºéæ²æ±è·¯ 1517 å¼', |
| | | children: [] |
| | | }, { |
| | | id: 3, |
| | | insId: 123, |
| | | date: '2016-05-01', |
| | | children: [{ |
| | | id: 31, |
| | | date: '2016-05-01', |
| | | name: null, |
| | | res: '[{"number": 1},{"number": 2}]', |
| | | address: '䏿µ·å¸æ®éåºéæ²æ±è·¯ 1519 å¼' |
| | | }, { |
| | | id: 32, |
| | | date: '2016-05-01', |
| | | name: null, |
| | | res: '[]', |
| | | address: null |
| | | }] |
| | | }], |
| | | tableData: [], |
| | | upDia: false, |
| | | upData: {}, |
| | | upIndex: 0, |
| | | upInsDia: false, |
| | | upIndex2: 0 |
| | | upIndex2: 0, |
| | | users: [], |
| | | devices: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.selectDataList() |
| | | this.getUsers() |
| | | this.getDevices() |
| | | }, |
| | | methods: { |
| | | selectDataList() { |
| | | this.tableData.forEach(a => { |
| | | a.code = '01' |
| | | if (a.children != undefined) { |
| | | a.children.forEach(b => { |
| | | b.code = '02' |
| | | if (b.children != undefined) { |
| | | b.children.forEach(c => { |
| | | c.code = '03' |
| | | c.res = JSON.parse(c.res) |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | get(this.$url.selectAllPlan).then(res => { |
| | | this.tableData = JSON.parse(JSON.stringify(res.data).replaceAll('pid', 'code').replaceAll('samplename', |
| | | 'name').replaceAll('inspectionStatus', 'testState')) |
| | | this.tableData.forEach(a => { |
| | | a.orderNum = '01' |
| | | if (a.children != undefined) { |
| | | a.children.forEach(b => { |
| | | b.orderNum = '02' |
| | | if (b.testValue == undefined) { |
| | | b.testValue = [] |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | this.upIndex++ |
| | | }) |
| | | this.upIndex++ |
| | | }, |
| | | isIfReport(row) { |
| | | var count = 0 |
| | | if (row.children == undefined) return false |
| | | row.children.forEach(a => { |
| | | if (a.name != null && a.name != undefined) count++ |
| | | if (a.testState != null && a.testState != undefined) count++ |
| | | }) |
| | | return row.insId != undefined && count == row.children.length |
| | | return row.testState == undefined && row.orderNum == '01' && count == row |
| | | .children.length |
| | | }, |
| | | openUpDia(row) { |
| | | this.upDia = true |
| | | this.upData = { |
| | | id: row.id, |
| | | address: row.address |
| | | id: row.code, |
| | | checker: null, |
| | | device: null |
| | | } |
| | | }, |
| | | submitUpData() { |
| | | this.tableData.forEach(a => { |
| | | a.children.forEach(b => { |
| | | if (b.id == this.upData.id) { |
| | | b.address = this.upData.address |
| | | } |
| | | }) |
| | | if (this.upData.checker == null || this.upData.checker == '') { |
| | | this.$message.error('äººåæªåé
') |
| | | return |
| | | } else if (this.upData.device == null || this.upData.device == '') { |
| | | this.$message.error('è®¾å¤æªåé
') |
| | | return |
| | | } |
| | | wpost(this.$url.distribution, { |
| | | id: this.upData.id, |
| | | userId: this.upData.checker, |
| | | instrumentId: this.upData.device |
| | | }).then(res => { |
| | | this.$message.success('åé
æå') |
| | | this.upDia = false |
| | | this.selectDataList() |
| | | }) |
| | | this.$message.success('ä¿®æ¹æå') |
| | | this.upIndex++ |
| | | this.upDia = false |
| | | }, |
| | | openUpInsDia(row) { |
| | | this.upInsDia = true |
| | | this.upData = this.HaveJson(row) |
| | | var str = [] |
| | | JSON.parse('[' + this.upData.testValue + ']').forEach(a => { |
| | | str.push({ |
| | | number: a |
| | | }) |
| | | }) |
| | | this.upData.testValue = this.HaveJson(str) |
| | | this.tableData.forEach(a => { |
| | | a.children.forEach(b => { |
| | | if (b.code == this.upData.code) { |
| | | this.upData.insId = a.code |
| | | this.upData.productName = a.name |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | deleteRow(index, rows) { |
| | | rows.splice(index, 1); |
| | | }, |
| | | addRes() { |
| | | this.upData.res.push({ |
| | | this.upData.testValue.push({ |
| | | "number": null |
| | | }) |
| | | this.upIndex2++ |
| | | }, |
| | | getUsers() { |
| | | get(this.$url.choosecheck).then(res => { |
| | | this.users = res.data |
| | | }) |
| | | }, |
| | | getDevices() { |
| | | get(this.$url.chooseinstum).then(res => { |
| | | this.devices = res.data |
| | | }) |
| | | }, |
| | | addReported(id) { |
| | | wpost(this.$url.reported, { |
| | | id: id |
| | | }).then(res => { |
| | | this.$message.success('䏿¥æå') |
| | | this.selectDataList() |
| | | }).catch(e => { |
| | | this.$message.error('䏿¥å¤±è´¥') |
| | | }) |
| | | }, |
| | | submitUpData2() { |
| | | var data = [] |
| | | this.upData.testValue.forEach(a => { |
| | | if(a.number!=''&&a.number!=null){ |
| | | data.push(a.number) |
| | | } |
| | | }) |
| | | wpost(this.$url.check, { |
| | | id: this.upData.code, |
| | | value: data.toString() |
| | | }).then(res => { |
| | | this.upInsDia = false |
| | | this.selectDataList() |
| | | this.$confirm(`<p style="line-height: 80px">æ¨ç项ç®(${this.upData.name})æ£éªç»æä¸ºï¼<span class="${res.data==1?'ins_state_success':'ins_state_error'}">${res.data==1?'åæ ¼':'ä¸åæ ¼'}</span></p>`, 'æäº¤æå', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'å
³é', |
| | | dangerouslyUseHTMLString:true, |
| | | type: `${res.data==1?'success':'error'}` |
| | | }).then(() => { |
| | | }).catch(() => { |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | </script> |
| | |
| | | :data="reportTable" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column type="selection" label="" min-width="5%" /> |
| | | <el-table-column |
| | | type="index" |
| | | width="50"> |
| | | </el-table-column> |
| | | <!-- <el-table-column label="" min-width="5%" /> --> |
| | | <el-table-column prop="materialCode" label="æ ·åç¼å·" min-width="10%"> |
| | | <template slot-scope="scope"> |
| | | <span style="color: #409eff"> |
| | |
| | | label="æ ·ååç§°" |
| | | min-width="10%" |
| | | /> |
| | | <el-table-column prop="status" label="审æ¹ç¶æ" min-width="8%"> |
| | | <el-table-column prop="status" label="审æ¹ç¶æ" min-width="8%" v-model="Auditconclusion"> |
| | | <template slot-scope="scope"> |
| | | <span> |
| | | <el-tag type="warning">{{ |
| | |
| | | @click="handleClick(scope.row)" |
| | | >æ¥çè¯¦ç» |
| | | </el-button> |
| | | <el-button type="text" size="small" @click="checkskip = true">å®¡æ ¸</el-button> |
| | | <el-button type="text" size="small" @click="shenHE(scope)">å®¡æ ¸</el-button> |
| | | |
| | | <el-dialog |
| | | title="åå§è®°å½å®¡æ ¸" |
| | | :visible.sync="checkskip" |
| | | :visible.sync="checkskipvisible" |
| | | width="30%" |
| | | :before-close="handleClose"> |
| | | |
| | | > |
| | | <el-form :model="form"> |
| | | <el-form-item label="è¯·éæ©å®¡æ ¸ç»æ" :label-width="formLabelWidth"> |
| | | <el-form-item label="è¯·éæ©å®¡æ ¸ç»æ:" :label-width="formLabelWidth"> |
| | | </el-form-item> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6" :offset="5"> |
| | | <!-- <el-button type="primary" style="background-color: rgb(208, 201, 192);">éå</el-button> --> |
| | | <el-button style="background-color: rgb(206, 211, 216);">éå</el-button> |
| | | </el-col> |
| | | <el-col :span="6" :offset="3"> |
| | | <!-- <el-button type="primary" style="background-color: rgb(181, 237, 125);">éè¿</el-button> --> |
| | | <el-button style="background-color: rgb(192, 236, 148);">éè¿</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </el-form> |
| | | |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="checkskip = false">å æ¶</el-button> |
| | | <el-button type="primary" @click="checkskip= false">ç¡® å®</el-button> |
| | | <el-button @click="checkskipvisible = false">å æ¶</el-button> |
| | | <el-button style="background-color: rgb(206, 211, 216);" @click="nocheckskip(scope.row)" >ä¸éè¿</el-button> |
| | | <el-button type="primary" @click="checkskip(scope.row)">éè¿</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { selectAllReportCheck } from "@/api/experiment/reportAuditing"; |
| | | import { selectAllReportCheck,checkApi } from "@/api/experiment/reportAuditing"; |
| | | export default { |
| | | data() { |
| | | return { |
| | | input: "", |
| | | input: '', |
| | | checkStatus: undefined, |
| | | reportTable: [], |
| | | page: 1, |
| | | total: 0, |
| | | pageSize: 10, |
| | | checked: true, |
| | | checkskip: false, |
| | | checkskipvisible: false, |
| | | form:{}, |
| | | handleClose:'', |
| | | formLabelWidth: '120px' |
| | | // handleClose:{}, |
| | | formLabelWidth: '120px', |
| | | checked:{}, |
| | | usertt:[], |
| | | Auditconclusion:{}, |
| | | tableRow: {}, |
| | | |
| | | |
| | | }; |
| | | }, |
| | | created() { |
| | | this.getData(); |
| | | }, |
| | | methods: { |
| | | shenHE(s){ |
| | | this.tableRow=s |
| | | this.checkskipvisible=true |
| | | }, |
| | | // ç¶ææé® |
| | | handleRadioChange() { |
| | | this.getData(); |
| | |
| | | this.checkStatus = undefined; |
| | | this.getData(); |
| | | }, |
| | | //å®¡æ ¸è·³è½¬ |
| | | // checkskip() { |
| | | //éè¿ |
| | | async checkskip(row) { |
| | | console.log(this.tableRow); |
| | | this.reportTable[this.tableRow.$index].status=2 |
| | | this.transmitData(this.tableRow.row.id) |
| | | this.checkskipvisible= false |
| | | |
| | | // }, |
| | | }, |
| | | //ä¸éè¿ |
| | | async nocheckskip(row) { |
| | | console.log(this.tableRow); |
| | | this.reportTable[this.tableRow.$index].status=0 |
| | | this.transmitData(this.tableRow.row.id) |
| | | this.checkskipvisible= false |
| | | |
| | | }, |
| | | //å®¡æ ¸ |
| | | async transmitData(id) { |
| | | let param={"id":id,"result":1} |
| | | let data = await checkApi(param) |
| | | }, |
| | | // æ¥è¯¢å表 |
| | | async getData() { |
| | | const params = { |
| | |
| | | <template> |
| | | <div class="home-main"> |
| | | <div class="home-header-welcome"> |
| | | <div class="welcome-left"> |
| | | <div class="left-avatar" /> |
| | | <div class="left-tips"> |
| | | <div>Hi jackï¼æ¬¢è¿ä½¿ç¨ZT-LIMS</div> |
| | | <div>ä»å¤©æ¯2023å¹´07æ07æ¥ ææäº</div> |
| | | </div> |
| | | <div class="content-main"> |
| | | <div class="echart1"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="16"> |
| | | <el-card class="box-card" :body-style="{ padding: '0px 10px',height:'120px' }"> |
| | | <p style="font-size: 10px;margin-left: 10px;">æ£éªæ»æ°ç»è®¡</p> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="6" > |
| | | <img :src="imgSrc" /> |
| | | <div class="card-text"> |
| | | <h6>æ£éªåå·²æ£éªæ»æ°</h6> |
| | | <p>{{insNum}}</p> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <img :src="imgSrc"/> |
| | | <div class="card-text"> |
| | | <h6>æ£éªåæªæ£éªæ»æ°</h6> |
| | | <p>{{insUnNum}}</p> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <img :src="imgSrc"/> |
| | | <div class="card-text"> |
| | | <h6>æ£éªé¡¹ç®å·²æ£éªæ»æ°</h6> |
| | | <p>{{insproNum}}</p> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <img :src="imgSrc"/> |
| | | <div class="card-text"> |
| | | <h6>æ£éªé¡¹ç®æªæ£éªæ»æ°</h6> |
| | | <p>{{insproUnNum}}</p> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-card class="box-card" :body-style="{ padding: '0px',height:'120px' }"> |
| | | <p style="font-size: 10px;margin-left: 10px;color: #2fcf10;">å·²æ£éª</p> |
| | | <el-table |
| | | :data="verifiedData" |
| | | :default-sort = "{prop: 'date', order: 'descending'}" |
| | | :cell-style="{margin:'0',padding:'2px 0px'}" |
| | | :header-cell-style="{margin:'0',padding:'0',backgroundColor:'#f0f7ff',color:'#0050a7'}"> |
| | | <el-table-column prop="no" label="æå" sortable width="110"></el-table-column> |
| | | <el-table-column prop="result" label="æ£éªç»è®º" width="110"></el-table-column> |
| | | <el-table-column prop="num" label="æ£éªæ°é" sortable width="110"></el-table-column> |
| | | <el-table-column prop="chact" label="æ£éªå æ¯" sortable width="110"></el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <div class="welcome-right"> |
| | | <div class="right-centent"> |
| | | <div>å³å°è¶
æå¾
å</div> |
| | | <div>ææ </div> |
| | | </div> |
| | | <div /> |
| | | <div class="right-centent"> |
| | | <div>å·²è¶
æå¾
å</div> |
| | | <div>21</div> |
| | | </div> |
| | | <div class="echart2"> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="6"> |
| | | <el-card :body-style="{ padding: '0px',height:'180px' }"> |
| | | <p>åææåæ ¼ç</p> |
| | | <div id="materialPieChart" style="width:100%;height:180px"></div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-card :body-style="{ padding: '0px',height:'180px' }"> |
| | | <p>æååæ ¼ç</p> |
| | | <div id="finishedPieChart" style="width:100%;height:180px"></div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-card :body-style="{ padding: '0px',height:'180px' }"> |
| | | <p style="z-index: 10;position: absolute;font-size: 10px;margin-left: 10px;color: #ff0000;">æªæ£éª</p> |
| | | <el-table |
| | | :data="uncheckedData" |
| | | :cell-style="{margin:'0px',padding:'3px 0px'}" |
| | | :header-cell-style="{margin:'0px',padding:'3px 0px',backgroundColor:'#f0f7ff',color:'#0050a7'}"> |
| | | <el-table-column prop="no" label="åºå·" width="100"></el-table-column> |
| | | <el-table-column prop="name" label="å¾
æ£é¡¹ç®" width="120"></el-table-column> |
| | | <el-table-column prop="instrumentname" label="设å¤" width="120"></el-table-column> |
| | | <el-table-column prop="startTime" label="æ£éªæ¶é´" width="120"> |
| | | </el-table-column><el-table-column prop="checkname" label="æ£éªäºº" width="120"> |
| | | </el-table-column><el-table-column prop="endTime" label="é¢è®¡ç»ææ¶é´" width="120"></el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <div class="echart3"> |
| | | <el-card :body-style="{ padding: '0px',height:'300px' }"> |
| | | <el-radio-group class="button-group" :input="getDataByType(radioType)" v-model="radioType" size="mini"> |
| | | <el-radio-button label="æ¬å¨"></el-radio-button> |
| | | <el-radio-button label="æ¬æ"></el-radio-button> |
| | | <el-radio-button label="æ¬å¹´"></el-radio-button> |
| | | </el-radio-group> |
| | | <div id="barLineChart" style="width:100%;height:300px;"></div> |
| | | </el-card> |
| | | </div> |
| | | </div> |
| | | <div class="content-main" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts'; |
| | | import { getVerifiedTop3,getUncheckedTop4,getMatAndFinshQualified,getCheckAndProjectNum |
| | | } from '@/api/home' |
| | | export default { |
| | | name: "home", |
| | | data() { |
| | | return { |
| | | insNum: 0, |
| | | insUnNum: 0, |
| | | insproNum: 0, |
| | | insproUnNum: 1110, |
| | | radioType: "æ¬å¹´", |
| | | imgSrc: require("@/assets/404_images/bg.png"), |
| | | verifiedData: new Array(), |
| | | uncheckedData: new Array(), |
| | | } |
| | | }, |
| | | mounted(){ |
| | | this.getcheckProjectNum(); |
| | | this.getVerifiedData(); |
| | | this.getUncheckedData(); |
| | | this.getPieChart(); |
| | | }, |
| | | methods: { |
| | | async getcheckProjectNum(){ |
| | | const {data} = await getCheckAndProjectNum(); |
| | | this.insNum = data.insNum; |
| | | this.insUnNum = data.insUnNum; |
| | | this.insproNum = data.insproNum; |
| | | this.insproUnNum = data.insproUnNum; |
| | | }, |
| | | async getVerifiedData(){ |
| | | const { data } = await getVerifiedTop3(); |
| | | for(let i=0;i<data.length;i++){ |
| | | let val = ""; |
| | | if(data[i].result == 0){ |
| | | val = "ä¸åæ ¼"; |
| | | }else if(data[i].result == 1){ |
| | | val = "åæ ¼"; |
| | | }else{ |
| | | val = "æªæ£éª"; |
| | | } |
| | | this.verifiedData.push ({ |
| | | no: i+1, |
| | | result: val, |
| | | num: data[i].num, |
| | | chact: data[i].chact + '%' |
| | | }) |
| | | } |
| | | }, |
| | | async getUncheckedData(){ |
| | | const {data} = await getUncheckedTop4(); |
| | | for(let i=0;i<data.length;i++){ |
| | | this.uncheckedData.push ({ |
| | | no: i+1, |
| | | name: data[i].name, |
| | | instrumentname: data[i].instrumentname, |
| | | startTime: data[i].startTime, |
| | | checkname: data[i].checkname, |
| | | endTime: data[i].endTime |
| | | }) |
| | | } |
| | | }, |
| | | initPieChart(elementId,data){ |
| | | var chartDom = document.getElementById(elementId); |
| | | var myChart = echarts.init(chartDom); |
| | | window.addEventListener('resize', function() { |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | right: 'right', |
| | | top: 'center', |
| | | left: 20 |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | tooltip: { |
| | | valueFormatter: function(value){ |
| | | return value + '%'; |
| | | } |
| | | }, |
| | | avoidLabelOverlap: false, |
| | | label: { |
| | | show: false, |
| | | position: 'center', |
| | | }, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: data |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | option && myChart.setOption(option); |
| | | }, |
| | | async getPieChart(){ |
| | | const {data} = await getMatAndFinshQualified(); |
| | | let material = [ |
| | | { value: data.material, name: 'åæ ¼',itemStyle:{color: '#91cc75'} }, |
| | | { value: data.unmaterial, name: 'ä¸åæ ¼',itemStyle:{color: '#fac858'} }, |
| | | { value: data.notmaterial, name: 'å¾
æ£éª' }, |
| | | ] |
| | | let finished = [ |
| | | { value: data.finished, name: 'åæ ¼',itemStyle:{color: '#91cc75'} }, |
| | | { value: data.unfinished, name: 'ä¸åæ ¼',itemStyle:{color: '#fac858'} }, |
| | | { value: data.notfinished, name: 'å¾
æ£éª' }, |
| | | ] |
| | | //渲æé¥¼ç¶å¾ |
| | | this.initPieChart("materialPieChart",material); |
| | | this.initPieChart("finishedPieChart",finished); |
| | | }, |
| | | async getDataByType(label){ |
| | | const xAxis = ['䏿', 'äºæ', '䏿', 'åæ', 'äºæ', 'å
æ', '䏿','å
«æ','乿','åæ','å䏿','åäºæ'] |
| | | const bar1Data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]; |
| | | const bar2Data = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]; |
| | | const line1Data = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]; |
| | | const line2Data = [3.0, 4.2, 6.3, 5.5, 8.3, 13.2, 20.3, 13.4, 23.0, 21.5, 2.0, 33.2]; |
| | | switch(label){ |
| | | case "æ¬å¹´": |
| | | this.initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data); |
| | | break; |
| | | case "æ¬æ": |
| | | let arr = new Array(); |
| | | for(let i=1;i<=31;i++){ |
| | | arr.push(i); |
| | | } |
| | | this.initBarAndLineChart(arr,bar1Data,bar2Data,line1Data,line2Data); |
| | | break; |
| | | case "æ¬å¨": |
| | | let arr2 = new Array("å¨ä¸","å¨äº","å¨ä¸","å¨å","å¨äº","å¨å
","卿¥"); |
| | | this.initBarAndLineChart(arr2,bar1Data,bar2Data,line1Data,line2Data); |
| | | break |
| | | } |
| | | }, |
| | | initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data){ |
| | | var chartDom = document.getElementById('barLineChart'); |
| | | var myChart = echarts.init(chartDom); |
| | | window.addEventListener('resize', function() { |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'cross', |
| | | crossStyle: { |
| | | color: '#999' |
| | | } |
| | | } |
| | | }, |
| | | legend: { |
| | | data: ['åæææ£éª', 'æåæ£éª', 'åææåæ ¼ç','æååæ ¼ç'] |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: xAxis, |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | name: 'æ£éªæ°é', |
| | | min: 0, |
| | | max: 1000, |
| | | interval: 100, |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | } |
| | | }, |
| | | { |
| | | type: 'value', |
| | | name: 'åæ ¼ç', |
| | | min: 0, |
| | | max: 100, |
| | | interval: 10, |
| | | axisLabel: { |
| | | formatter: '{value} %' |
| | | } |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'åæææ£éª', |
| | | type: 'bar', |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value; |
| | | } |
| | | }, |
| | | data: bar1Data |
| | | }, |
| | | { |
| | | name: 'æåæ£éª', |
| | | type: 'bar', |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value ; |
| | | } |
| | | }, |
| | | data: bar2Data |
| | | }, |
| | | { |
| | | name: 'åææåæ ¼ç', |
| | | smooth: true, |
| | | type: 'line', |
| | | yAxisIndex: 1, |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + ' %'; |
| | | } |
| | | }, |
| | | data: line1Data |
| | | }, |
| | | { |
| | | name: 'æååæ ¼ç', |
| | | smooth: true, |
| | | type: 'line', |
| | | yAxisIndex: 1, |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + ' %'; |
| | | } |
| | | }, |
| | | data: line2Data |
| | | } |
| | | ] |
| | | }; |
| | | option && myChart.setOption(option); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .home-main{ |
| | | .home-header-welcome{ |
| | | width: 100%; |
| | | background: #fff; |
| | | height: 84px; |
| | | display: flex; |
| | | border-bottom: 1px solid #f0f2f5; |
| | | padding: 8px 24px 12px 24px; |
| | | justify-content: space-between; |
| | | .welcome-left{ |
| | | display: flex; |
| | | align-items: center; |
| | | height: 100%; |
| | | .left-avatar{ |
| | | width: 56px; |
| | | height: 56px; |
| | | margin-right: 24px; |
| | | background: #0077DB; |
| | | border-radius: 50%; |
| | | .content-main{ |
| | | .echart1{ |
| | | .el-table{ |
| | | font-weight: bold; |
| | | width: 100%; |
| | | height:100; |
| | | padding:0px; |
| | | margin-left:10px; |
| | | } |
| | | .box-card img{ |
| | | width:100%; |
| | | height:100px; |
| | | border-radius: 10px; |
| | | } |
| | | .box-card .card-text{ |
| | | position: absolute; |
| | | top:0px; |
| | | h6{ |
| | | margin:10px 15px; |
| | | } |
| | | p{ |
| | | width:100%; |
| | | text-align: right; |
| | | font-size: 25px; |
| | | } |
| | | } |
| | | } |
| | | .echart2 { |
| | | .el-table{ |
| | | font-weight: bold; |
| | | width: 100%; |
| | | height:100; |
| | | padding:0px; |
| | | margin-left:10px; |
| | | padding-top:40px; |
| | | } |
| | | .left-tips{ |
| | | height: 80%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | >div:nth-child(1){ |
| | | font-size: 20px; |
| | | color: #303133; |
| | | } |
| | | >div:nth-child(2){ |
| | | font-size: 14px; |
| | | color: #606266; |
| | | } |
| | | .el-col{ |
| | | margin: 10px 0; |
| | | } |
| | | p{ |
| | | position: absolute; |
| | | font-size: 10px; |
| | | margin-left: 10px; |
| | | color:black; |
| | | } |
| | | } |
| | | .welcome-right{ |
| | | width: 250px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .right-centent{ |
| | | height: 80%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | align-items: flex-end; |
| | | >div:nth-child(1){ |
| | | color: #909399; |
| | | font-size: 14px; |
| | | } |
| | | >div:nth-child(2){ |
| | | font-size: 24px; |
| | | color: #c0c4cc; |
| | | } |
| | | } |
| | | >div:nth-child(2){ |
| | | width: 2px; |
| | | height: 70%; |
| | | background: #f0f2f5; |
| | | } |
| | | .echart3 .button-group{ |
| | | margin-top: 10px; |
| | | margin-left: 88%; |
| | | z-index: 10; |
| | | } |
| | | } |
| | | } |
| | |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | |
| | | .el-table { |
| | | // flex: 1; |
| | | // max-height: 680px; |
| | | // overflow-y: scroll; |
| | | } |
| | | > div:nth-child(3) { |
| | | // height: 20px; |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |
| | | } |
| | | // .el-table { |
| | | // flex: 1; |
| | | // max-height: 680px; |
| | | // overflow-y: scroll; |
| | | // } |
| | | >div:nth-child(3){ |
| | | // height: 20px; |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |
| | | } |
| | | } |
| | | } |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | export function test(){ |
| | | for (let index = 0; index < 100; index++) { |
| | | console.log("å线ç¨"+index); |
| | | } |
| | | } |