大屏添加标题

src/views/statisticView/100.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="view-container">
-    <div class="title">维保系统数据大屏展示平台</div>
+    <div class="title">
+      <div style="position: absolute;">
+        <img src="@/assets/22title.png" alt="">
+      </div>
+      <div class="text">
+        <div> 维保系统数据大屏展示平台</div>
+        <div style="font-size: 15px;color: #A7DBFF;">Maintain large screen display platform of system data</div>
+      </div>
+    </div>
     <div class="content">
       <div class="content-left">
         <div class="content-left-top">
@@ -500,7 +508,7 @@ export default {
 width:1920px;
 height:1080px;
 background-color: RGBA(0, 7, 73, 0.8);
-padding:42px 41px;
+padding:30px 41px;
 }
 .view-container::after {
   content: "";
@@ -516,11 +524,14 @@ padding:42px 41px;
 }
 .title{
   text-align: center;
-font-size: 32px;
+font-size: 28px;
 font-family: Microsoft YaHei;
 font-weight: bold;
 color: #BDE4FF;
 padding-bottom: 38px;
+  .text{
+padding-top: 10px;
+}
 }
 .content{
  width: 100%;

src/views/statisticView/22.vue

@@ -167,6 +167,27 @@ export default {
         { name: 'C', year: '2022', value: 11 },
         { name: 'D', year: '2022', value: 15 }
       ],
+      chart2: [
+        { name: 'A', year: '2019', value: 3 },
+        { name: 'B', year: '2019', value: 5 },
+        { name: 'C', year: '2019', value: 21 },
+        { name: 'D', year: '2019', value: 12 },
+
+        { name: 'A', year: '2020', value: 5 },
+        { name: 'B', year: '2020', value: 1 },
+        { name: 'C', year: '2020', value: 13 },
+        { name: 'D', year: '2020', value: 12 },
+
+        { name: 'A', year: '2021', value: 2 },
+        { name: 'B', year: '2021', value: 13 },
+        { name: 'C', year: '2021', value: 11 },
+        { name: 'D', year: '2021', value: 12 },
+
+        { name: 'A', year: '2022', value: 7 },
+        { name: 'B', year: '2022', value: 12 },
+        { name: 'C', year: '2022', value: 1 },
+        { name: 'D', year: '2022', value: 15 }
+      ],
       chart3: [
         { year: '2001', population: 54.8 },
         { year: '2002', population: 38 },
@@ -202,14 +223,14 @@ export default {
   methods: {
     getChart () {
       this.getChart1('chart1', this.chart1)
-      this.getChart2('chart2', this.chart1)
+      this.getChart2('chart2', this.chart2)
       this.getChart3('chart3', this.chart3)
       this.getChart4('chart4', this.chart4)
     },
     getChart1 (id, data) {
       registerTheme('myTheme', {
         columnWidthRatio: 0.2,
-        colors10: ['#FFDB5C', '#FF9F7F', '#FB7293', '#E7BCF3', '#E7BCF3', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4']
+        colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
       })
       const chart = new Chart({
         container: id,
@@ -291,13 +312,13 @@ export default {
         .color('name')
         .shape('smooth')
 
-      chart.theme({ 'styleSheet': { 'brandColor': '#  ', 'paletteQualitative10': ['#FFDB5C', '#FF9F7F', '#FB7293', '#E7BCF3', '#E7BCF3', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4'], 'paletteQualitative20': ['#5B8FF9', '#CDDDFD', '#61DDAA', '#CDF3E4', '#65789B', '#CED4DE', '#F6BD16', '#FCEBB9', '#7262fd', '#D3CEFD', '#78D3F8', '#D3EEF9', '#9661BC', '#DECFEA', '#F6903D', '#FFE0C7', '#008685', '#BBDEDE', '#F08BB4', '#FFE0ED'] } })
+      chart.theme({ 'styleSheet': { 'brandColor': '#  ', 'paletteQualitative10': ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4', '#F08BB4'], 'paletteQualitative20': ['#5B8FF9', '#CDDDFD', '#61DDAA', '#CDF3E4', '#65789B', '#CED4DE', '#F6BD16', '#FCEBB9', '#7262fd', '#D3CEFD', '#78D3F8', '#D3EEF9', '#9661BC', '#DECFEA', '#F6903D', '#FFE0C7', '#008685', '#BBDEDE', '#F08BB4', '#FFE0ED'] } })
       chart.render()
     },
     getChart3 (id, data) {
       registerTheme('myTheme', {
         columnWidthRatio: 0.2,
-        colors10: ['#FFDB5C', '#FF9F7F', '#FB7293', '#E7BCF3', '#E7BCF3', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4']
+        colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
       })
       const chart = new Chart({
         container: id,
@@ -411,7 +432,7 @@ export default {
 .view-container {
 width:1920px;
 height:1080px;
-background-color: rgba(4, 8, 20, 0.8);
+background-color: RGBA(0, 7, 73, 0.8);
 padding:35px 21px;
 }
 .view-container::after {
@@ -460,6 +481,7 @@ padding-top:35px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #A7DBFF;
+
   line-height: 25px;
   .box-title-text{
     position: relative;
@@ -471,7 +493,7 @@ padding-top:35px;
   position: absolute;
   top:0;left:0;right:0;bottom:0;
   z-index: -1;
-   background-color: #16171C;
+  background-color: rgb(46, 37, 77);
     border: 1px solid #0096FF;
     border-top: none;
    box-shadow: 0px 29px 30px 0px rgba(0, 128, 202, 0.3);
@@ -482,7 +504,7 @@ padding-top:35px;
    padding: 20px;
    .list{
      padding: 22px 16px;
-     background:RGBA(19, 42, 62, 1);
+     background:RGBA(12, 38, 70, 0.5);
      color:rgba(0, 190, 189, 1);
      border-bottom:1px solid RGBA(21, 72, 62, 1);
    }

src/views/statisticView/44.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="view-container">
+    <div class="title">
+      <div style="position: absolute;">
+        <img src="@/assets/22title.png" alt="">
+      </div>
+      <div class="text">
+        <div> 设备数据大屏展示平台</div>
+        <div style="font-size: 15px;color: #A7DBFF;">Large screen display platform for device data</div>
+      </div>
+    </div>
     <div style="display: flex; justify-content: space-between;">
       <div>
         <div style="display: flex;margin-bottom: 16px;">
@@ -10,7 +19,7 @@
                 设备信息
               </div>
               <br><br>
-              <div style="width: 335px;">
+              <div style="width: 300px;">
                 <img style="width: 100%;height: 100%;" src="@/assets/sb.png" alt="">
               </div>
             </div>
@@ -94,7 +103,7 @@
           <div class="sbHistory">
             <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
             <div>
-              <div style="font-size: 30px;font-weight: 800; padding-bottom: 29px;">维修历史</div>
+              <div style="font-size: 30px;font-weight: 800; padding-bottom: 29px;color: #BDE4FF;">维修历史</div>
               <thead>
                 <tr style="display: flex;justify-content: space-between;">
                   <th class="list-header">异常类别</th>
@@ -135,7 +144,7 @@
       </div>
       <div class="sb-proportion">
         <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
-        <div style="font-size: 30px;font-weight: 800;">设备部位维修占比</div>
+        <div style="font-size: 30px;font-weight: 800;color: #BDE4FF;">设备部位维修占比</div>
         <div id="chart3"></div>
         <div style="padding-top:70px">
           <a-row type="flex" justify="space-around" :gutter="[0,25]">
@@ -350,7 +359,7 @@ export default {
       this.chartPie = new Chart({
         container: id,
         autoFit: true,
-        height: 500
+        height: 435
       })
       this.chartPie.data(data)
       this.chartPie.scale('count', {
@@ -423,8 +432,24 @@ export default {
 .view-container {
 width:1920px;
 height:1080px;
-background-color: rgba(4, 8, 20, 0.8);
-padding:35px 21px;
+background-color: RGBA(0, 7, 73, 0.8);
+padding:10px 21px 35px 21px;
+.title{
+  height: 100px;
+  position: relative;
+  .text{
+height: 26px;
+font-size: 27px;
+display:flex;
+flex-direction: column;
+align-items: center;
+padding-top: 30px;
+font-family: Microsoft YaHei;
+font-weight: bold;
+color: #BDE4FF;
+line-height: 25px;
+}
+}
 }
 .view-container::after {
   content: "";
@@ -442,7 +467,7 @@ padding:35px 21px;
     position: relative;
 padding:34px;
 width: 597px;
-height:555px;
+height:505px;
 border: 2px solid #045693;
 margin-right:16px;
 display:flex;
@@ -453,7 +478,7 @@ height: 29px;
 font-size: 30px;
 font-family: Microsoft YaHei;
 font-weight: bold;
-color: #FFFFFF;
+color: #BDE4FF;
 line-height: 24px;
 }
 .sbInfo-info{
@@ -478,14 +503,14 @@ line-height: 13px;
   position: relative;
   border: 2px solid #045693;
 width: 485px;
-height:555px;
+height:505px;
 .sbStatus-title{
   width: 120px;
 height: 29px;
 font-size: 30px;
 font-family: Microsoft YaHei;
 font-weight: bold;
-color: #FFFFFF;
+color: #BDE4FF;
 line-height: 24px;
 }
 .sbStatus-info-bg{
@@ -504,7 +529,7 @@ line-height: 24px;
 }
 .sbHistory{
   width: 504px;
-   height:444px;
+   height:429px;
    color: #fff;
     border: 2px solid #045693;
    margin-right:16px;
@@ -514,7 +539,7 @@ line-height: 24px;
      margin:0;
      padding: 0;
       width: 142px;
-height: 39px;
+height: 35px;
 font-size: 16px;
 font-weight: bold;
 margin-bottom: 8px;
@@ -531,7 +556,7 @@ align-items: center;
 .sb-online{
   padding:46px;
   width: 578px;
-  height:444px;
+  height:429px;
   color: #fff;
     border: 2px solid #045693;
 position: relative;
@@ -542,14 +567,14 @@ align-items: center;
  justify-content:center;
  position: relative;
  width: 231px;
- height: 154px;
+ height: 140px;
  background: rgba(0, 186, 255, 0.1);
 }
 }
 .sb-proportion{
   color:#fff;
   width: 766px;
-   height:1015px;
+   height:950px;
    position: relative;
    border: 2px solid #045693;
    padding:30px;

src/views/statisticView/9.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="view-container">
+    <div class="titles">
+      <div style="position: absolute;">
+        <img src="@/assets/22title.png" alt="">
+      </div>
+      <div class="text">
+        <div> 仓库管理系统数据大屏展示平台</div>
+        <div style="font-size: 15px;color: #A7DBFF;">Warehouse management system data large screen display platform</div>
+      </div>
+    </div>
     <div class="top">
       <div class="top-left">
         <div class="top-left-top">
@@ -405,7 +414,7 @@ export default {
       const chart = new Chart({
         container: id,
         autoFit: true,
-        height: 300,
+        height: 240,
         width: 330
       })
       chart.data(data)
@@ -417,11 +426,11 @@ export default {
       })
       chart.legend('day', {
         position: 'right',
-        offsetY: -50,
+        offsetY: -40,
         itemName: {
           style: {
             fill: '#C3CAD9',
-            fontSize: 14
+            fontSize: 12
           }
         }
       })
@@ -498,7 +507,7 @@ export default {
       const chart = new Chart({
         container: id,
         autoFit: true,
-        height: 400
+        height: 320
       })
 
       chart.data(data)
@@ -545,6 +554,22 @@ color:white;
 font-family: Microsoft YaHei;
 background-color: RGBA(0, 7, 73, 0.8);
 padding:15px;
+.titles{
+  height: 100px;
+  position: relative;
+  .text{
+height: 26px;
+font-size: 27px;
+display:flex;
+flex-direction: column;
+align-items: center;
+padding-top: 30px;
+font-family: Microsoft YaHei;
+font-weight: bold;
+color: #BDE4FF;
+line-height: 25px;
+}
+}
 }
 .view-container::after {
   content: "";
@@ -565,14 +590,14 @@ padding:15px;
   .top-left{
     .top-left-top{
       width: 810px;
-height: 316px;
+height: 300px;
 background: #0B1A48;
 border-radius: 5px;
 margin-bottom: 15px;
     }
     .top-left-bottom{
       width: 810px;
-height: 394px;
+height: 330px;
 background: #0B1A48;
 border-radius: 5px;
     }
@@ -581,7 +606,7 @@ border-radius: 5px;
     .top-right-top{
       padding:0 50px;
       width: 1065px;
-height: 597px;
+height: 517px;
 background: #0B1A48;
 border-radius: 5px;
 margin-bottom: 15px;
@@ -605,7 +630,7 @@ border-radius: 5px;
   justify-content:space-between;
   .bottom-left{
     width: 1524px;
-height: 310px;
+height: 290px;
 background: #0B1A48;
 border-radius: 5px;
   }
@@ -614,7 +639,7 @@ border-radius: 5px;
     bottom: 0;
     right: 0;
     width: 351px;
-height: 438px;
+height: 418px;
 background: #0B1A48;
 border-radius: 5px;
   }