From a2fe40a6232559f2bd2d5c818fc206395072b403 Mon Sep 17 00:00:00 2001 From: XiaoRuby <3114200645@qq.com> Date: 星期三, 23 八月 2023 18:03:34 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/experiment/passRateStatistics/index.vue | 399 +++++++++++++-------------------- src/views/home/index.vue | 187 +++++++++++---- src/views/laboratory/measure/index.vue | 16 src/views/experiment/planAssignments/plan.vue | 59 +++- src/api/home.js | 9 5 files changed, 352 insertions(+), 318 deletions(-) diff --git a/src/api/home.js b/src/api/home.js index 7c33bcc..4568c4a 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -34,4 +34,13 @@ method: 'get', params }) +} + +//缁熻 +export function getTurno(params) { + return request({ + url: '/home/turno', + method: 'get', + params + }) } \ No newline at end of file diff --git a/src/views/experiment/passRateStatistics/index.vue b/src/views/experiment/passRateStatistics/index.vue index 36b874b..bf2c28a 100644 --- a/src/views/experiment/passRateStatistics/index.vue +++ b/src/views/experiment/passRateStatistics/index.vue @@ -1,66 +1,36 @@ <template> <div class="content-main"> <div class="top-bar"> - <el-form - ref="form" - :inline="true" - :rules="rules" - :model="searchData" - label-position="top" - > + <el-form ref="form" :inline="true" :rules="rules" :model="searchData" label-position="top"> <el-form-item label="妫�娴嬫棩鏈�:" class="sermargin" prop="date"> - <el-date-picker - v-model="searchData.date" - type="daterange" - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - > + <el-date-picker v-model="searchData.date" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡"> </el-date-picker> </el-form-item> <el-form-item label="妫�楠岀被鍨�:" class="sermargin" prop="type"> <el-select v-model="searchData.type" placeholder="鍏ㄩ儴"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - > + <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="渚涘簲鍟�:"> <el-select v-model="searchData.supplier" placeholder="鍏ㄩ儴"> - <el-option - v-for="item in supplier" - :key="item.value" - :label="item.label" - :value="item.value" - > + <el-option v-for="item in supplier" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> - <el-form-item style="margin-left: 40px" label="鏍峰搧:"> + <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" - > + <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> + <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> - <el-button type="primary" @click="search" size="mini" - >鏌ヨ</el-button - > + <el-button type="primary" @click="search" size="mini">鏌ヨ</el-button> </el-form-item> </div> </el-form> @@ -68,74 +38,31 @@ <div class="top-bar-copy"></div> <div class="chart-content"> <div class="qualified-wrapper"> - <div style="margin-left: 20px; padding: 20px 0px; font-size: 18px"> - 妫�娴嬫牱鍝佸悎鏍肩巼缁熻 - </div> + <div style="margin-left: 20px;padding:20px 0px;font-size:18px">妫�娴嬫牱鍝佸悎鏍肩巼缁熻</div> <div :hidden="testSample" class="qualified" ref="qualified"></div> - <div - :hidden="!testSample" - style=" - height: 100%; - text-align: center; - color: #999696df; - margin-top: 100px; - " - > - 鏆傛棤鏁版嵁 + <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 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 :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"> - <div style="font-size: 18px">涓嶅悎鏍奸」鐩粺璁�</div> + <div style="font-size:18px">涓嶅悎鏍奸」鐩粺璁�</div> <el-radio-group v-model="type"> - <el-radio-button - v-for="item in radiooptions" - :key="item.value" - :label="item.value" - >{{ item.label }}</el-radio-button - > + <el-radio-button v-for="item in radiooptions" :key="item.value" :label="item.value">{{ item.label + }}</el-radio-button> </el-radio-group> </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 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> @@ -150,27 +77,21 @@ <script> // 娣诲姞婊氬姩鐩戝惉浜嬩欢 -window.addEventListener("scroll", function () { - var topBar = document.querySelector(".top-bar"); +window.addEventListener('scroll', function () { + var topBar = document.querySelector('.top-bar'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > 0) { - topBar.classList.add("fixed"); + topBar.classList.add('fixed'); } else { - topBar.classList.remove("fixed"); + topBar.classList.remove('fixed'); } -}); +}) -import * as echarts from "echarts"; -import { - getSupplierList, - getTestSampleStatistics, - getSupplierNoPassStatistics, - getNoPassProjectStatistics, - getSampleOptions, -} from "@/api/experiment/passRateStatistics"; -import { dateFormat } from "../../../utils/dateUtil"; -import MyWorker from "comlink-loader!../../../worker/test"; +import * as echarts from 'echarts' +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 { @@ -181,35 +102,35 @@ type: null, supplier: null, sample: null, - code: null, + code: null }, options: [ { - label: "鍏ㄩ儴", - value: 3, + label: '鍏ㄩ儴', + value: 3 }, { - label: "鍘熸潗鏂�", - value: 0, + label: '鍘熸潗鏂�', + value: 0 }, { - label: "鎴愬搧", - value: 1, + label: '鎴愬搧', + value: 1 }, { - label: "濮旀墭鍝�", - value: 2, - }, + label: '濮旀墭鍝�', + value: 2 + } ], radiooptions: [ { - label: "鐜舰楗煎浘", - value: 0, + label: '鐜舰楗煎浘', + value: 0 }, { - label: "甯曠疮鎵樺浘", - value: 1, - }, + label: '甯曠疮鎵樺浘', + value: 1 + } ], type: 0, rules: { @@ -224,100 +145,100 @@ testSample: false, m1: null, m2: null, - m3: null, - }; + m3: null + } }, async mounted() { - await this.start(); - this.tableStart(); + await this.start() + this.tableStart() }, methods: { - testWork() { + testWork(){ const inst = new MyWorker(); - inst.test(); + inst.test() for (let index = 0; index < 100; index++) { - console.log("涓荤嚎绋�" + index); + console.log("涓荤嚎绋�"+index); } }, async search() { - this.testSampleStatistics = null; - this.supplierNoPassStatistics = null; - this.projectStatistics = null; - this.supplier = []; - this.sampleOptions = []; - await this.start(); - this.tableStart(); + 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)); + 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]); + data.beginDate = dateFormat(this.searchData.date[0]) + data.endDate = dateFormat(this.searchData.date[1]) } - if (data.supplier == "鍏ㄩ儴") { - data.supplier = null; + if (data.supplier == '鍏ㄩ儴') { + data.supplier = null } if (data.type === 3) { - data.type = null; + 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; + 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; + if (data.code == '鍏ㄩ儴') { + data.code = null + data.sample = null } - data.date = null; - return data; + 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 }); - }); + let res = await getSupplierList() + this.supplier.push({ label: '鍏ㄩ儴', value: '鍏ㄩ儴' }) + res.data.forEach(item => { + this.supplier.push({ label: item.supplier, value: item.supplier }) + }) }, async getTestSampleStatistics() { - let param = this.dateHandle(); - let res = await getTestSampleStatistics(param); - this.testSample = !res.data.noData; - this.testSampleStatistics = res.data; + let param = this.dateHandle() + let res = await getTestSampleStatistics(param) + this.testSample = !res.data.noData + this.testSampleStatistics = res.data }, async getSupplierNoPassStatistics() { - let param = this.dateHandle(); - let res = await getSupplierNoPassStatistics(param); - this.supplierData = !res.data.noData; - this.supplierNoPassStatistics = res.data; + 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; + 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(); + await this.getTestSampleStatistics() + await this.getSupplierNoPassStatistics() + await this.getNoPassProjectStatistics() + await this.getSupplierList() + await this.getSampleOptions() }, async getSampleOptions() { - let res = await getSampleOptions(); + let res = await getSampleOptions() this.sampleOptions.push({ - label: "鍏ㄩ儴", - value: "鍏ㄩ儴", - }); - res.data.forEach((item) => { + label: '鍏ㄩ儴', + value: '鍏ㄩ儴' + }) + res.data.forEach(item => { let data = { label: item.name, - value: item.code, - }; - this.sampleOptions.push(data); - }); + value: item.code + } + this.sampleOptions.push(data) + }) }, tableStart() { const chartDom_qualified = this.$refs.qualified; @@ -326,116 +247,108 @@ const myChart1 = echarts.init(chartDom_qualified); const myChart2 = echarts.init(chartDom_unqualified_provider, null, { - height: 300, + height: 300 }); const myChart3 = echarts.init(chartDom_unqualified_project, null, { - height: 268, + height: 268 }); - window.addEventListener("resize", function () { - myChart1.resize(); - myChart2.resize(); - myChart3.resize(); - }); - this.m1 = myChart1; - this.m2 = myChart2; - this.m3 = myChart3; + 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' - }, + trigger: 'axis', + axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 + type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' + } }, legend: { - data: ["鍚堟牸", "涓嶅悎鏍�"], + data: ['鍚堟牸', '涓嶅悎鏍�'] }, xAxis: [ { - type: "category", - data: this.testSampleStatistics.xAxis, - }, + type: 'category', + data: this.testSampleStatistics.xAxis + } ], yAxis: [ { - type: "value", + type: 'value', axisLabel: { - formatter: "{value}", - }, - }, + formatter: '{value}' + } + } ], - series: this.testSampleStatistics.series, + series: this.testSampleStatistics.series }; /** * 渚涘簲鍟� */ const option_unqualified1 = { tooltip: { - trigger: "axis", - axisPointer: { - // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 - type: "shadow", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' + trigger: 'axis', + axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 + type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' }, formatter: function (params) { - let tooltip = params[0].name + "<br/>"; + let tooltip = params[0].name + '<br/>'; params.forEach(function (item) { - tooltip += - item.marker + - " " + - item.seriesName + - ": " + - item.value.toFixed(2) + - "%<br/>"; // 灏嗘暟鎹繚鐣欎袱浣嶅皬鏁板苟杞负鐧惧垎姣斿舰寮� + tooltip += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>'; // 灏嗘暟鎹繚鐣欎袱浣嶅皬鏁板苟杞负鐧惧垎姣斿舰寮� }); return tooltip; - }, + } }, legend: { - data: ["鍚堟牸鏁伴噺", "涓嶅悎鏍兼暟閲�"], + data: ['鍚堟牸鏁伴噺', '涓嶅悎鏍兼暟閲�'] }, xAxis: { - data: this.supplierNoPassStatistics.xAxis, + data: this.supplierNoPassStatistics.xAxis }, yAxis: [ { - type: "value", + type: 'value', axisLabel: { - formatter: "{value}%", - }, - }, + formatter: '{value}%' + } + } ], - series: this.supplierNoPassStatistics.series, + series: this.supplierNoPassStatistics.series }; /** * 涓嶅悎鏍奸」鐩� */ const option_unqualified2 = { legend: { - orient: "vertical", - x: "left", - data: this.projectStatistics.legend, + orient: 'vertical', + x: 'left', + data: this.projectStatistics.legend }, title: { - text: "", - left: "center", - top: "center", + text: '', + left: 'center', + top: 'center' }, series: [ { - type: "pie", + type: 'pie', data: this.projectStatistics.series, - radius: ["40%", "70%"], + radius: ['40%', '70%'], label: { show: true, - formatter: "{b}: {c}%", + formatter: '{b}: {c}%' }, - }, - ], - }; + } + ] + } myChart1.setOption(option_qualified); myChart2.setOption(option_unqualified1); @@ -445,9 +358,9 @@ if (this.type === 1) { myChart3.setOption(option_unqualified2); } - }, - }, -}; + } + } +} </script> <style lang="scss" scoped> diff --git a/src/views/experiment/planAssignments/plan.vue b/src/views/experiment/planAssignments/plan.vue index 0907cbc..5eb0f53 100644 --- a/src/views/experiment/planAssignments/plan.vue +++ b/src/views/experiment/planAssignments/plan.vue @@ -44,16 +44,20 @@ <template> <div class="plan"> <div class="title"> - <span>椤圭洰鍚嶇О锛�</span> - <el-input v-model="search.name" size="medium" style="width: 200px;margin-right: 20px;"></el-input> + <span>鐢宠鍗曠紪鍙凤細</span> + <el-input v-model="search.code" size="medium" style="width: 200px;margin-right: 20px;"></el-input> <span>妫�楠屾椂闂达細</span> <el-date-picker v-model="search.date" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" size="medium" style="margin-right: 20px;"> + end-placeholder="缁撴潫鏃ユ湡" size="medium" value-format="yyyy-MM-dd" style="margin-right: 20px;"> </el-date-picker> - <span>妫�楠屼汉锛�</span> - <el-input v-model="search.userName" size="medium" style="width: 200px;margin-right: 20px;"></el-input> - <el-button size="small" type="primary">鏌ヨ</el-button> - <el-button size="small">閲嶇疆</el-button> + <span>妫�楠岀粨鏋滐細</span> + <el-select v-model="search.testValue" size="medium" style="width: 200px;margin-right: 20px;"> + <el-option label="鍏ㄩ儴" :value="null"></el-option> + <el-option label="鍚堟牸" :value="1"></el-option> + <el-option label="涓嶅悎鏍�" :value="0"></el-option> + </el-select> + <el-button size="small" type="primary" @click="selectDataList">鏌ヨ</el-button> + <el-button size="small" @click="cleanBtn">閲嶇疆</el-button> </div> <div class="thing"> <el-table :data="tableData" style="width: 100%;" row-key="code" default-expand-all @@ -207,9 +211,9 @@ data() { return { search: { - name: null, + code: null, date: [], - userName: null, + testValue: null, }, tableData: [], upDia: false, @@ -228,7 +232,16 @@ }, methods: { selectDataList() { - get(this.$url.selectAllPlan).then(res => { + var str = {} + str.code = this.search.code + str.status = this.search.testValue + try { + if (this.search.date.length != 0) { + str.beginTime = this.search.date[0] + str.endTime = this.search.date[1] + } + } catch (e) {} + get(this.$url.selectAllPlan, str).then(res => { this.tableData = JSON.parse(JSON.stringify(res.data).replaceAll('pid', 'code').replaceAll('samplename', 'name').replaceAll('inspectionStatus', 'testState')) this.tableData.forEach(a => { @@ -331,7 +344,7 @@ submitUpData2() { var data = [] this.upData.testValue.forEach(a => { - if(a.number!=''&&a.number!=null){ + if (a.number != '' && a.number != null) { data.push(a.number) } }) @@ -341,15 +354,23 @@ }).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(() => { - }) + 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(() => {}) }) + }, + cleanBtn(){ + this.search = { + code: null, + date: [], + testValue: null, + } + this.selectDataList() } } } diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 1730a72..9173448 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -4,47 +4,47 @@ <div class="echart1"> <el-row :gutter="10"> <el-col :span="16"> - <el-card class="box-card" :body-style="{ padding: '0px 10px',height:'120px' }"> + <el-card class="box-card" :body-style="{ padding: '0px 10px',height:'17vh' }"> <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> + <h3>妫�楠屽崟</h3> + <p><span>(宸叉楠屾�绘暟)</span>{{insNum}}</p> </div> </el-col> <el-col :span="6"> <img :src="imgSrc"/> <div class="card-text"> - <h6>妫�楠屽崟鏈楠屾�绘暟</h6> - <p>{{insUnNum}}</p> + <h3>妫�楠屽崟</h3> + <p><span>(鏈楠屾�绘暟)</span>{{insUnNum}}</p> </div> </el-col> <el-col :span="6"> <img :src="imgSrc"/> <div class="card-text"> - <h6>妫�楠岄」鐩凡妫�楠屾�绘暟</h6> - <p>{{insproNum}}</p> + <h3>妫�楠岄」鐩�</h3> + <p><span>(宸叉楠屾�绘暟)</span>{{insproNum}}</p> </div> </el-col> <el-col :span="6"> <img :src="imgSrc"/> <div class="card-text"> - <h6>妫�楠岄」鐩湭妫�楠屾�绘暟</h6> - <p>{{insproUnNum}}</p> + <h3>妫�楠岄」鐩�</h3> + <p><span>(鏈楠屾�绘暟)</span>{{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' }"> + <el-card class="box-card" :body-style="{ padding: '0px',height:'17vh' }"> <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'}" + :cell-style="cell" :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> @@ -58,23 +58,23 @@ <div class="echart2"> <el-row :gutter="10"> <el-col :span="6"> - <el-card :body-style="{ padding: '0px',height:'180px' }"> + <el-card :body-style="{ padding: '0px',height:'25vh' }"> <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' }"> + <el-card :body-style="{ padding: '0px',height:'25vh' }"> <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' }"> + <el-card :body-style="{ padding: '0px',height:'25vh' }"> <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'}" + :cell-style="cell" :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> @@ -88,7 +88,7 @@ </el-row> </div> <div class="echart3"> - <el-card :body-style="{ padding: '0px',height:'300px' }"> + <el-card :body-style="{ padding: '0px',height:'40vh' }"> <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> @@ -103,7 +103,8 @@ <script> import * as echarts from 'echarts'; -import { getVerifiedTop3,getUncheckedTop4,getMatAndFinshQualified,getCheckAndProjectNum +import { getVerifiedTop3,getUncheckedTop4,getMatAndFinshQualified, + getCheckAndProjectNum,getTurno } from '@/api/home' export default { name: "home", @@ -126,6 +127,20 @@ this.getPieChart(); }, methods: { + cell({ row, column, rowIndex, columnIndex }) { + if(rowIndex===0 && columnIndex===0){ + return "color: #ff0000;margin:0;padding:2px 0px"; + } + if(rowIndex===1 && columnIndex===0){ + return "color: #f0d357;margin:0;padding:2px 0px"; + } + if(rowIndex===2 && columnIndex===0){ + return "color: #37ff11;margin:0;padding:2px 0px"; + } + if(rowIndex>=0 && columnIndex>=0){ + return {"margin":"0","padding":"2px 0px"}; + } + }, async getcheckProjectNum(){ const {data} = await getCheckAndProjectNum(); this.insNum = data.insNum; @@ -166,12 +181,12 @@ } }, initPieChart(elementId,data){ - var chartDom = document.getElementById(elementId); - var myChart = echarts.init(chartDom); + let chartDom = document.getElementById(elementId); + let myChart = echarts.init(chartDom); window.addEventListener('resize', function() { myChart.resize(); }); - var option; + let option; option = { tooltip: { trigger: 'item' @@ -186,6 +201,11 @@ { type: 'pie', radius: ['40%', '70%'], + itemStyle: { + borderRadius: 6, + borderColor: '#fff', + borderWidth: 2 + }, tooltip: { valueFormatter: function(value){ return value + '%'; @@ -195,6 +215,13 @@ label: { show: false, position: 'center', + formatter: '{c}%' + }, + emphasis: { + label:{ + fontSize: 25, + show: true + } }, labelLine: { show: false @@ -209,49 +236,63 @@ 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: '寰呮楠�' }, + { value: data.material, name: '鍚堟牸',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#8ea9e0' },{offset: 1, color: '#106de7' }], false)}}}, + { value: data.unmaterial, name: '涓嶅悎鏍�',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#ed9031' },{offset: 1, color: '#feb855' }], false)}} }, + { value: data.notmaterial, name: '寰呮楠�',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#2ca4a0' },{offset: 1, color: '#3ad1cb' }], false)}} }, ] let finished = [ - { value: data.finished, name: '鍚堟牸',itemStyle:{color: '#91cc75'} }, - { value: data.unfinished, name: '涓嶅悎鏍�',itemStyle:{color: '#fac858'} }, - { value: data.notfinished, name: '寰呮楠�' }, + { value: data.finished, name: '鍚堟牸',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#8ea9e0' },{offset: 1, color: '#106de7' }], false)}} }, + { value: data.unfinished, name: '涓嶅悎鏍�',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#ed9031' },{offset: 1, color: '#feb855' }], false)}} }, + { value: data.notfinished, name: '寰呮楠�',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#2ca4a0' },{offset: 1, color: '#3ad1cb' }], false)}} }, ] //娓叉煋楗肩姸鍥� 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]; + let xAxis = ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀','鍏湀','涔濇湀','鍗佹湀','鍗佷竴鏈�','鍗佷簩鏈�'] + let bar1Data = []; + let bar2Data = []; + let line1Data = []; + let line2Data = []; switch(label){ case "鏈勾": - this.initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data); - break; + const byYear = await getTurno({type:3}); + bar1Data = byYear.data.series[0].data; + bar2Data = byYear.data.series[1].data; + line1Data = byYear.data.series[2].data; + line2Data = byYear.data.series[3].data; + break; case "鏈湀": - let arr = new Array(); - for(let i=1;i<=31;i++){ - arr.push(i); + const byMonth = await getTurno({type:2}); + bar1Data = byMonth.data.series[0].data; + bar2Data = byMonth.data.series[1].data; + line1Data = byMonth.data.series[2].data; + line2Data = byMonth.data.series[3].data; + let days = new Array(); + for(let i=1;i<=byMonth.data.xaxis.length;i++){ + days.push(i); } - this.initBarAndLineChart(arr,bar1Data,bar2Data,line1Data,line2Data); + xAxis = days; break; case "鏈懆": - let arr2 = new Array("鍛ㄤ竴","鍛ㄤ簩","鍛ㄤ笁","鍛ㄥ洓","鍛ㄤ簲","鍛ㄥ叚","鍛ㄦ棩"); - this.initBarAndLineChart(arr2,bar1Data,bar2Data,line1Data,line2Data); + const byWeek = await getTurno({type:1}); + bar1Data = byWeek.data.series[0].data; + bar2Data = byWeek.data.series[1].data; + line1Data = byWeek.data.series[2].data; + line2Data = byWeek.data.series[3].data; + xAxis = new Array("鍛ㄤ竴","鍛ㄤ簩","鍛ㄤ笁","鍛ㄥ洓","鍛ㄤ簲","鍛ㄥ叚","鍛ㄦ棩"); break } + this.initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data); }, initBarAndLineChart(xAxis,bar1Data,bar2Data,line1Data,line2Data){ - var chartDom = document.getElementById('barLineChart'); - var myChart = echarts.init(chartDom); + let chartDom = document.getElementById('barLineChart'); + let myChart = echarts.init(chartDom); window.addEventListener('resize', function() { myChart.resize(); }); - var option; + let option; option = { tooltip: { trigger: 'axis', @@ -262,9 +303,7 @@ } } }, - legend: { - data: ['鍘熸潗鏂欐楠�', '鎴愬搧妫�楠�', '鍘熸潗鏂欏悎鏍肩巼','鎴愬搧鍚堟牸鐜�'] - }, + legend: {data: ['鍘熸潗鏂欐楠�', '鎴愬搧妫�楠�', '鍘熸潗鏂欏悎鏍肩巼','鎴愬搧鍚堟牸鐜�']}, xAxis: [ { type: 'category', @@ -305,6 +344,20 @@ return value; } }, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#6694ff', + }, + { + offset: 1, + color: '#096ae4', + }, + ]), + } + }, data: bar1Data }, { @@ -313,6 +366,20 @@ tooltip: { valueFormatter: function (value) { return value ; + } + }, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#ffc16b', + }, + { + offset: 1, + color: '#fd8103', + }, + ]), } }, data: bar2Data @@ -327,6 +394,7 @@ return value + ' %'; } }, + itemStyle: {color: "#0166e2"}, data: line1Data }, { @@ -339,11 +407,17 @@ return value + ' %'; } }, + itemStyle: {color: "#ed7619"}, data: line2Data } ] }; option && myChart.setOption(option); + this.$on('hook:destroyed',()=>{ + window.removeEventListener("resize", function() { + myChart.resize(); + }); + }) } } } @@ -351,6 +425,8 @@ <style lang="scss" scoped> .home-main{ + width:100%; + height:82vh; .content-main{ .echart1{ .el-table{ @@ -359,6 +435,12 @@ height:100; padding:0px; margin-left:10px; + .el-table__body{ + .el-table_1_column_1 .cell{ + color: red; + } + } + } .box-card img{ width:100%; @@ -368,13 +450,19 @@ .box-card .card-text{ position: absolute; top:0px; - h6{ - margin:10px 15px; + h3{ + margin:20px 20px 0px 20px; } p{ width:100%; text-align: right; - font-size: 25px; + font-size: 50px; + margin: -20px 10px 0px 5px; + } + span{ + color: gray; + font-size: 10px; + margin-right: 80px; } } } @@ -386,6 +474,9 @@ padding:0px; margin-left:10px; padding-top:40px; + .el-table_2_column_5 div{ + color: red; + } } .el-col{ margin: 10px 0; diff --git a/src/views/laboratory/measure/index.vue b/src/views/laboratory/measure/index.vue index c32c063..0e01e41 100644 --- a/src/views/laboratory/measure/index.vue +++ b/src/views/laboratory/measure/index.vue @@ -118,11 +118,11 @@ </div> </div> <div - :style="`position: absolute;top:${addTop}px;left: 9px;transition: 1s;width: 99%;height: 82vh;background-color: #fff;z-index: 21;`"> + :style="`position: absolute;top:${addTop}vh;left: 9px;transition: 1s;width: 99%;height: 82vh;background-color: #fff;z-index: 21;`"> <Add ref="add" /> </div> <div id="myMOdel" - :style="`position: absolute;transition: 1s;top:${mymodelTop}px; left: 9px; width: 99%; height: 85vh; background-color: #fff;z-index: 20;`"> + :style="`position: absolute;transition: 1s;top:${mymodelTop}vh; left: 9px; width: 99%; height: 85vh; background-color: #fff;z-index: 20;`"> <el-col :span="10"> <p style="font-size: 13px;padding-left: 40px;">璁″垝淇℃伅</p> </el-col> @@ -329,8 +329,8 @@ createPerson: '鏌愭煇璐熻矗浜�', createTime: '2021-09-08' }, - mymodelTop: -700,//14 - addTop: -700, + mymodelTop: -85,//14 + addTop: -85, planId: 0 } }, @@ -372,7 +372,7 @@ measureAdd() { let add = this.$refs.add.add() if (add) { - this.addTop = -700 + this.addTop = -82 this.$message({ message: '鎿嶄綔鎴愬姛锛�', type: 'success' @@ -389,7 +389,7 @@ await this.limitGetPlanMeasureInstrument() }, addPlan() { - this.addTop = 14 + this.addTop = 2 this.lookVisible = true this.$parent.mainShowAdd() }, @@ -407,7 +407,7 @@ this.planId = id this.getPlanAndInfoAndIns(id) this.lookVisible = true - this.mymodelTop = 10 + this.mymodelTop = 2 this.$parent.triggerMainBtnPlan() }, async getPlanAndInfoAndIns(id) { @@ -428,7 +428,7 @@ }, combackLookPlan() { this.lookVisible = false - this.mymodelTop = -700 + this.mymodelTop = -85 }, blurSearch() { if (this.radioValue === 1) { -- Gitblit v1.9.3