From e51a8bda1e15ad30654c5f90f5591f240a5ec3de Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 22 八月 2023 18:02:09 +0800
Subject: [PATCH] modified: .env.development new file: src/api/home.js new file: src/assets/404_images/bg.png modified: src/main.js modified: src/views/home/index.vue modified: src/views/standardLibrary/index.vue
---
src/views/home/index.vue | 458 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 384 insertions(+), 74 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f876061..1730a72 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,96 +1,406 @@
<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锛屾杩庝娇鐢╖T-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;
}
}
}
--
Gitblit v1.9.3