From e07e6af94e8df05f4f5331c631e18e265d7174ca Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 05 九月 2023 16:52:27 +0800
Subject: [PATCH] modified: src/router/index.js
---
src/views/home/index.vue | 552 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 477 insertions(+), 75 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8415e5c..d7201cd 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,97 +1,499 @@
<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:'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">
+ <h3>妫�楠屽崟</h3>
+ <p><span>(宸叉楠屾�绘暟)</span>{{insNum}}</p>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <img :src="imgSrc"/>
+ <div class="card-text">
+ <h3>妫�楠屽崟</h3>
+ <p><span>(鏈楠屾�绘暟)</span>{{insUnNum}}</p>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <img :src="imgSrc"/>
+ <div class="card-text">
+ <h3>妫�楠岄」鐩�</h3>
+ <p><span>(宸叉楠屾�绘暟)</span>{{insproNum}}</p>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <img :src="imgSrc"/>
+ <div class="card-text">
+ <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:'17vh' }">
+ <p style="font-size: 10px;margin-left: 10px;color: #2fcf10;">宸叉楠�</p>
+ <el-table
+ :data="verifiedData"
+ :default-sort = "{prop: 'date', order: 'descending'}"
+ :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>
+ <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:'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:'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:'25vh' }">
+ <p style="z-index: 2;position: absolute;font-size: 10px;margin-left: 10px;color: #ff0000;">鏈楠�</p>
+ <el-table
+ :data="uncheckedData"
+ :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>
+ <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:'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>
+ <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,getTurno
+} from '@/api/home/index'
export default {
+ name: "home",
+ data() {
+ return {
+ insNum: 0,
+ insUnNum: 0,
+ insproNum: 0,
+ insproUnNum: 0,
+ radioType: "鏈勾",
+ imgSrc: require("@/assets/404_images/bg.png"),
+ verifiedData: new Array(),
+ uncheckedData: new Array(),
+ }
+ },
+ mounted(){
+ this.getcheckProjectNum();
+ this.getVerifiedData();
+ this.getUncheckedData();
+ 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;
+ 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){
+ let chartDom = document.getElementById(elementId);
+ let myChart = echarts.init(chartDom);
+ window.addEventListener('resize', function() {
+ myChart.resize();
+ });
+ let option;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ right: 'right',
+ top: 'center',
+ left: 20
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['40%', '70%'],
+ itemStyle: {
+ borderRadius: 6,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ tooltip: {
+ valueFormatter: function(value){
+ return value + '%';
+ }
+ },
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
+ formatter: '{c}%'
+ },
+ emphasis: {
+ label:{
+ fontSize: 25,
+ show: true
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: data
+ }
+ ]
+ };
+ option && myChart.setOption(option);
+ },
+ async getPieChart(){
+ const {data} = await getMatAndFinshQualified();
+ let material = [
+ { 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: {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){
+ let xAxis = ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀','鍏湀','涔濇湀','鍗佹湀','鍗佷竴鏈�','鍗佷簩鏈�']
+ let bar1Data = [];
+ let bar2Data = [];
+ let line1Data = [];
+ let line2Data = [];
+ switch(label){
+ case "鏈勾":
+ 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 "鏈湀":
+ 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);
+ }
+ xAxis = days;
+ break;
+ case "鏈懆":
+ 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){
+ let chartDom = document.getElementById('barLineChart');
+ let myChart = echarts.init(chartDom);
+ window.addEventListener('resize', function() {
+ myChart.resize();
+ });
+ let 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;
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#6694ff',
+ },
+ {
+ offset: 1,
+ color: '#096ae4',
+ },
+ ]),
+ }
+ },
+ data: bar1Data
+ },
+ {
+ name: '鎴愬搧妫�楠�',
+ type: 'bar',
+ 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
+ },
+ {
+ name: '鍘熸潗鏂欏悎鏍肩巼',
+ smooth: true,
+ type: 'line',
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' %';
+ }
+ },
+ itemStyle: {color: "#0166e2"},
+ data: line1Data
+ },
+ {
+ name: '鎴愬搧鍚堟牸鐜�',
+ smooth: true,
+ type: 'line',
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' %';
+ }
+ },
+ itemStyle: {color: "#ed7619"},
+ data: line2Data
+ }
+ ]
+ };
+ option && myChart.setOption(option);
+ this.$on('hook:destroyed',()=>{
+ window.removeEventListener("resize", function() {
+ myChart.resize();
+ });
+ })
+ }
+ }
}
</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%;
+ width:100%;
+ height:82vh;
+ .content-main{
+ .echart1{
+ .el-table{
+ font-weight: bold;
+ width: 100%;
+ height:100;
+ padding:0px;
+ margin-left:10px;
+ .el-table__body{
+ .el-table_1_column_1 .cell{
+ color: red;
+ }
+ }
+
+ }
+ .box-card img{
+ width:100%;
+ height:100px;
+ border-radius: 10px;
+ }
+ .box-card .card-text{
+ position: absolute;
+ top:0px;
+ h3{
+ margin:20px 20px 0px 20px;
+ }
+ p{
+ width:100%;
+ text-align: right;
+ font-size: 50px;
+ margin: -20px 10px 0px 5px;
+ }
+ span{
+ color: gray;
+ font-size: 10px;
+ margin-right: 80px;
+ }
+ }
+ }
+ .echart2 {
+ .el-table{
+ font-weight: bold;
+ width: 100%;
+ height:100;
+ padding:0px;
+ margin-left:10px;
+ padding-top:40px;
+ .el-table_2_column_5 div{
+ color: red;
+ }
}
- .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;
}
}
}
-</style>
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3