From 0503db82345547e24dc5dc19fcf39a30b2c9a6bc Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期三, 23 八月 2023 15:37:57 +0800
Subject: [PATCH] 首页
---
src/views/home/index.vue | 187 ++++++++++++++++++++++++++++++++++------------
1 files changed, 139 insertions(+), 48 deletions(-)
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;
--
Gitblit v1.9.3