From 2249f5fc3edd0194e0b0fb09b54ca6fad8d02348 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 8 Nov 2023 09:03:05 +0800
Subject: [PATCH] shujukanbancolorsChange

---
 src/views/bigScreen/textIndex.vue | 231 ++++++++++++++++++++++++------
 1 file changed, 185 insertions(+), 46 deletions(-)

diff --git a/src/views/bigScreen/textIndex.vue b/src/views/bigScreen/textIndex.vue
index df80d7aa..abfe8661 100644
--- a/src/views/bigScreen/textIndex.vue
+++ b/src/views/bigScreen/textIndex.vue
@@ -1,7 +1,11 @@
 <template>
     <el-container class="container">
-      <el-header class="pageHeader"><span class="top-line top-line-left"></span>光子科技<span class="top-line top-line-right"></span></el-header>
-      <el-main style="padding:0">
+      <el-header class="pageHeader">
+        <span class="top-line top-line-left"></span>
+        光子科技
+        <span class="top-line top-line-right"></span>
+    </el-header>
+      <el-main style="padding:0" id="mainBlock">
         <el-row style="height:100%">
             <el-col :span="6">
                 <div style="display:flex;flex-direction: column;height:100%;padding:20px">
@@ -19,7 +23,7 @@
                     </div>
                 </div>
             </el-col>
-            <el-col :span="12">12</el-col>
+            <el-col :span="12"></el-col>
             <el-col :span="6">
                 <div style="display:flex;flex-direction: column;height:100%;padding:20px">
                     <div class="flexItem" style="flex:1">
@@ -32,7 +36,7 @@
                     </div>
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div>
-                        <dv-scroll-board id="scrollTable" :config="taskBoard" style="width:100%;height:92%"/>
+                        <dv-scroll-board id="scrollTable" :config="taskBoard"  :style="{'width':'100%','height':blockHeight}"/>
                     </div>
                 </div>
             </el-col>
@@ -45,7 +49,9 @@ import * as echarts from 'echarts';
 export default {
     data() {
         return {
+            blockHeight:null,
             taskBoard: {
+                headerBGC:'#0a3f44',
                 header: ['列1', '列2', '列3'],
                 data: [
                     ['行1列1', '行1列2', '行1列3'],
@@ -66,10 +72,14 @@ export default {
         }
     },
     mounted() {
+        let height = document.getElementById('mainBlock').clientHeight;
+        let height0 = height/3-50;
+        this.blockHeight = height0+'px'
+        //左1
         let chartDom = document.getElementById('line1');
+        chartDom.style.height = height0+'px';
         let myChart = echarts.init(chartDom);
         let option = {
-            color: ['#FF0087', '#FFBF00'],
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
@@ -83,14 +93,40 @@ export default {
                 icon: "stack",
                 right:0,
                 data: [{
+                    backgroundColor:'rgb(1,235,239)',
                     name:'Line 1',
+                    itemStyle:{
+                        // color:'rgb(1,235,239)',
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(1,235,239)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(5, 158, 163)'
+                        }])
+                    },
                     textStyle:{
                         color:'#fff'
                     }
                 }, {
-                    name:'Line 2',textStyle:{
+                    name:'Line 2',
+                    textStyle:{
                         color:'#fff'
                     }}],
+                    itemStyle:{
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(250,205,0)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(254,129,0)'
+                    }
+                    ])
+                }
             },
             toolbox: {
                 feature: {
@@ -126,6 +162,9 @@ export default {
                     axisLabel: {  
                         color:'#ffffff'
                     }, 
+                    splitLine: {
+                        show: false,
+                    },
                     splitLine: {
                         show: true,
                         lineStyle: {
@@ -143,19 +182,20 @@ export default {
                 stack: 'Total',
                 smooth: true,
                 lineStyle: {
-                    width: 0
+                    width: 1,color:'rgb(1,235,239)'
                 },
+                
                 showSymbol: false,
                 areaStyle: {
                     opacity: 0.8,
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: 'rgb(128, 255, 165)'
+                        color: 'rgba(1,235,239)'
                     },
                     {
                         offset: 1,
-                        color: 'rgb(1, 191, 236)'
+                        color: 'rgb(5, 158, 163)'
                     }
                     ])
                 },
@@ -170,7 +210,7 @@ export default {
                 stack: 'Total',
                 smooth: true,
                 lineStyle: {
-                    width: 0
+                    width: 1,color:'rgb(250,205,0)'
                 },
                 showSymbol: false,
                 areaStyle: {
@@ -178,11 +218,11 @@ export default {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: 'rgb(0, 221, 255)'
+                        color: 'rgb(254,129,0)'
                     },
                     {
                         offset: 1,
-                        color: 'rgb(77, 119, 255)'
+                        color: 'rgb(250,205,0)'
                     }
                     ])
                 },
@@ -194,8 +234,9 @@ export default {
             ]
         };
         myChart.setOption(option);
-        
+        //左边2
         let bar1 = document.getElementById('bar1');
+        bar1.style.height = height0+'px';
         let bar1Chart = echarts.init(bar1);
         let bar1option = {
             tooltip: {
@@ -208,13 +249,40 @@ export default {
                 right:0,
                 data:[
                 {
-                    name:'棒',textStyle:{
+                    name:'棒',
+                    textStyle:{
                         color:'#fff'
-                    }
+                    },
+                    itemStyle:{
+                        // color:'rgb(1,235,239)',
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(1,235,239)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(5, 158, 163)'
+                        }])
+                    },
                 }, {
-                    name:'管',textStyle:{
+                    name:'管',
+                    textStyle:{
                         color:'#fff'
-                    }}
+                    },
+                    itemStyle:{
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(250,205,0)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(254,129,0)'
+                    }
+                    ])
+                    }
+                }
                 ]
             },
             grid: {
@@ -263,7 +331,19 @@ export default {
                 emphasis: {
                     focus: 'series'
                 },
-                barWidth:20,
+                itemStyle:{
+                        // color:'rgb(1,235,239)',
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(1,235,239)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(5, 158, 163)'
+                        }])
+                    },
+                barWidth:15,
                 data: [120, 132, 101, 134, 90, 230]
                 },
                 {
@@ -274,20 +354,48 @@ export default {
                 emphasis: {
                     focus: 'series'
                 },
+                itemStyle:{
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(250,205,0)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(254,129,0)'
+                    }
+                    ])
+                    },
                 data: [220, 182, 191, 234, 290, 330]
                 }
             ]
         };
         bar1Chart.setOption(bar1option);
-
+        //左3
         let line2Dom = document.getElementById('line2');
+        line2Dom.style.height = height0+'px';
         let line2Chart = echarts.init(line2Dom);
         let line2option =  {
         tooltip: {
             trigger: 'axis'
         },
         legend: {
-            data: ['温度'],
+            color: ['rgb(250,205,0)'],
+            data: [{
+                name:'温度',
+                itemStyle:{
+                    // color:'rgb(1,235,239)',
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'orange'
+                    },
+                    {
+                        offset: 1,
+                        color: 'yellow'
+                    }])
+                },
+            }],
         },
         grid: {
             left: '3%',
@@ -303,7 +411,7 @@ export default {
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['1', '2', '3', '4', '5', '6'],
+            data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
             nameTextStyle: {
                 color:'#ffffff'
             },
@@ -332,33 +440,48 @@ export default {
         },
         
         series: {
-            name: 'Email',
+            name: '温度',
             type: 'line',
             stack: 'Total',
             symbolSize:8,  //设置折线上圆点大小
             symbol:'circle', 
-            smooth: 0.5, // 设置折线弧度
-            data: [10, 10, 0, 0, -2, -2, 0],
-            lineStyle: {
-            color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 1,
-                y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#FF0000' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#ffa500' // 100% 处的颜色
-                }],
-                globalCoord: false // 缺省为 false
+            itemStyle: {
+            // 设置symbol的颜色
+            normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'orange'
+                    },
+                    {
+                        offset: 1,
+                        color: 'yellow'
+                    }])
             }
-        },
+            },
+            smooth: 0.5, // 设置折线弧度
+            data: [10, 10, 0, 0, -10, -8, 0,10, 10, 0, 0, -10, -8, 0],
+            lineStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [{
+                        offset: 0, color: 'orange' // 0% 处的颜色
+                    }, {
+                        offset: 1, color: 'yellow' // 100% 处的颜色
+                    }],
+                    globalCoord: false // 缺省为 false
+                }
+            },
             }
         };
         line2Chart.setOption(line2option);
-
+        //柱状图折线
         let line3Dom = document.getElementById('line3');
+        line3Dom.style.height = height0+'px';
         let line3Chart = echarts.init(line3Dom);
         let line3option =  {
             tooltip: {
@@ -451,12 +574,26 @@ export default {
                     return value;
                     }
                 },
-                data: [120, 132, 101, 134, 90, 230]
+                barWidth:15,
+                data: [120, 132, 101, 134, 90, 230],
+                itemStyle:{
+                    borderRadius: [5, 5, 0, 0],
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(13,176,176)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(246,163,58)'
+                        }])
+                    },
                 },
                 {
                 name: '合格率',
                 type: 'line',
                 yAxisIndex: 1,
+                // 255,120,0
                 tooltip: {
                     valueFormatter: function (value) {
                     return value ;
@@ -467,10 +604,12 @@ export default {
             ]
         };
         line3Chart.setOption(line3option);
-
+        //饼状图
         let pieDom = document.getElementById('pie');
+        pieDom.style.height = height0+'px';
         let pieChart = echarts.init(pieDom);
         let pieoption =   {
+            color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'],
             legend: {
                 top: 'bottom',
                 textStyle:{
@@ -496,7 +635,7 @@ export default {
                 {
                 name: '完成率',
                 type: 'pie',
-                radius: [40, 90],
+                radius: [20, 60],
                 center: ['50%', '50%'],
                 roseType: 'area',
                 itemStyle: {
@@ -504,8 +643,8 @@ export default {
                 },
                 data: [
                     { value: 40, name: '棒' },
-                    { value: 38, name: '管' },
-                    { value: 32, name: 'AVG' },
+                    { value: 20, name: '管' },
+                    { value: 10, name: 'AVG' },
                 ]
                 }
             ]
@@ -578,10 +717,10 @@ export default {
 .row-item{
     height:40px!important;
     line-height:40px!important;
-    background-color:rgb(10,63,68)!important;
+    /* background-color:rgb(10,63,68)!important; */
 }
 #scrollTable>.hader{
     background:rgb(10,63,68)!important;
-    background-color:rgb(10,63,68)!important;
+    background-color:#0a3f44!important;
 }
 </style>
\ No newline at end of file