修改了首页样式

.env.development

@@ -6,9 +6,9 @@ ENV = 'development'
 # 线上正式地址
 #  VUE_APP_BASE_API = 'http://eam.modernfarming.cn:8000/'
 # 白少后台本地
-VUE_APP_BASE_API = 'http://192.168.1.77:8082/'
+# VUE_APP_BASE_API = 'http://192.168.1.77:8082/'
 # 线上测试
-# VUE_APP_BASE_API = 'http://tmrwatch.cn:8082/'
+VUE_APP_BASE_API = 'http://tmrwatch.cn:8082/'
 # VUE_APP_BASE_API = 'http://tmrwatch.cn:8082/'
 # VUE_APP_BASE_API = 'http://127.0.0.1:8082/'
 

src/views/dashboard/editor/index.vue

@@ -9,9 +9,9 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="5" class="row2">
+    <el-row :gutter="10" class="row2">
       <el-col :span="10">
-        <dv-border-box-8 :dur="3" :reverse="true" style="height:500px;">
+        <dv-border-box-10 :color="['#163DA1','#163DA1']" :reverse="true" style="height:500px;">
           <!-- <div class="Title">费用统计</div> -->
           <div id="row2Chart1" style="width: 100%;height:450px;" />
           <el-row :gutter="5" class="groupNews">
@@ -50,27 +50,27 @@
               </div>
             </dv-border-box-8>
           </div>
-        </dv-border-box-8>
+        </dv-border-box-10>
       </el-col>
       <el-col :span="14">
-        <el-row>
+        <el-row :gutter="10" >
           <el-col :span="12">
-            <dv-border-box-8 :dur="-1" style="height:500px;">
+            <dv-border-box-10 :color="['#163DA1','#163DA1']" style="height:500px;">
               <div class="Title">集团分项总指标</div>
               <div id="row2Chart2" style="width: 100%;height:480px;" />
               <!-- <div class="Indexbutton">
                 <a @click="form_seeDetails('row2Chart2')">查看详情</a>
               </div> -->
-            </dv-border-box-8>
+            </dv-border-box-10>
           </el-col>
           <el-col :span="12">
-            <dv-border-box-8 :dur="-1" style="height:500px;">
+            <dv-border-box-10 :color="['#163DA1','#163DA1']" style="height:500px;">
               <div class="Title">各中心总指标</div>
               <div id="row2Chart3" style="width: 100%;height:480px;" />
               <div class="Indexbutton">
                 <a @click="form_seeDetails('row2Chart3')">查看详情</a>
               </div>
-            </dv-border-box-8>
+            </dv-border-box-10>
           </el-col>
           <el-col :span="24" style="display:none">
             <dv-border-box-8 :dur="-1" style="height:250px;">
@@ -87,11 +87,11 @@
 
     <el-row :gutter="5" style="height:300px;color: #fff;">
       <el-col :span="24">
-        <dv-border-box-8 :dur="-1" style="height:300px;">
+        <div style="height:300px;">
           <div class="Title">费用统计</div>
           <div class="costStatistics">
             <div class="content">
-              <dv-border-box-8 :dur="-1" style="height:260px;">
+              <dv-border-box-10 :color="['#163DA1','#163DA1']" style="height:260px; ">
                 <div class="title">
                   <svg-icon icon-class="维修成本分析" />
                   维修费
@@ -101,18 +101,18 @@
                 </div>
                 <el-row :gutter="5" style="height:260px;color: #fff;">
                   <el-col :span="24" style="padding:0 10px 0 10px ;">
-                    <dv-border-box-12 :dur="-1" :reverse="true" style="height:200px;">
+                    <dv-border-box-8 :dur="-1" :reverse="true" style="height:200px;">
                       <div id="row3Chart1" style="width: 98%;height:200px;" />
-                    </dv-border-box-12>
+                    </dv-border-box-8>
                     <div class="Indexbutton">
                       <a @click="form_seeDetails('row3Chart1')">查看详情</a>
                     </div>
                   </el-col>
                 </el-row>
-              </dv-border-box-8>
+              </dv-border-box-10>
             </div>
             <div class="content">
-              <dv-border-box-8 :dur="-1" style="height:260px;">
+              <dv-border-box-10 :color="['#163DA1','#163DA1']" :dur="-1" style="height:260px;">
                 <div class="title">
                   <svg-icon icon-class="水量分析" />
                   水费
@@ -122,18 +122,18 @@
                 </div>
                 <el-row :gutter="5" style="height:260px;color: #fff;">
                   <el-col :span="24" style="padding:0 10px 0 10px ;">
-                    <dv-border-box-12 :dur="-1" :reverse="true" style="height:200px;">
+                    <dv-border-box-8 :dur="-1" :reverse="true" style="height:200px;">
                       <div id="row3Chart2" style="width: 98%;height:200px;" />
-                    </dv-border-box-12>
+                    </dv-border-box-8>
                     <div class="Indexbutton">
                       <a @click="form_seeDetails('row3Chart2')">查看详情</a>
                     </div>
                   </el-col>
                 </el-row>
-              </dv-border-box-8>
+              </dv-border-box-10>
             </div>
             <div class="content">
-              <dv-border-box-8 :dur="-1" style="height:260px;">
+              <dv-border-box-10 :color="['#163DA1','#163DA1']" style="height:260px;">
                 <div class="title">
                   <svg-icon icon-class="电量分析" />
                   电费
@@ -143,18 +143,18 @@
                 </div>
                 <el-row :gutter="5" style="height:260px;color: #fff;">
                   <el-col :span="24" style="padding:0 10px 0 10px ;">
-                    <dv-border-box-12 :dur="-1" :reverse="true" style="height:200px;">
+                    <dv-border-box-8 :dur="-1" :reverse="true" style="height:200px;">
                       <div id="row3Chart3" style="width: 98%;height:200px;" />
-                    </dv-border-box-12>
+                    </dv-border-box-8>
                     <div class="Indexbutton">
                       <a @click="form_seeDetails('row3Chart3')">查看详情</a>
                     </div>
                   </el-col>
                 </el-row>
-              </dv-border-box-8>
+              </dv-border-box-10>
             </div>
             <div class="content">
-              <dv-border-box-8 :dur="-1" style="height:260px;">
+              <dv-border-box-10 :color="['#163DA1','#163DA1']" style="height:260px;">
                 <div class="title">
                   <svg-icon icon-class="燃动分析" />
                   燃动费
@@ -164,18 +164,18 @@
                 </div>
                 <el-row :gutter="5" style="height:260px;color: #fff;">
                   <el-col :span="24" style="padding:0 10px 0 10px;">
-                    <dv-border-box-12 :dur="-1" style="height:200px;" :reverse="true">
+                    <dv-border-box-8 :dur="-1" style="height:200px;" :reverse="true">
                       <div id="row3Chart4" style="width: 98%;height:200px;" />
-                    </dv-border-box-12>
+                    </dv-border-box-8>
                     <div class="Indexbutton">
                       <a @click="form_seeDetails('row3Chart4')">查看详情</a>
                     </div>
                   </el-col>
                 </el-row>
-              </dv-border-box-8>
+              </dv-border-box-10>
             </div>
           </div>
-        </dv-border-box-8>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -632,13 +632,25 @@ export default {
       var option = {
         title: { text: '', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
-        color: ['#769cfc','#19FA60','#FF9733','	#FFFF00'],
+        color: ['#1890FF','#F14863','#FFC432','#4CF0A7'],
         grid: { left: '3%', right: '13%', top: '15%', bottom: '4%', containLabel: true },
         legend: {
           data: ['迄今预算', '今年实际', '去年同期实际', '单头牛实际'], textStyle: { color: '#fff' }
         },
         xAxis: [{ type: 'category', name: '设备类别', data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
-        yAxis: [{ type: 'value', name: '费用/百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}}],
+        yAxis: [
+          {
+            type: 'value', name: '费用/百万',
+            axisLabel: { formatter: '{value}' },
+            axisLine: { lineStyle: { color: '#fff' }},
+            splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#102A6C'], width: 1, type: 'solid'
+              }
+            }
+          },
+        ],
         series: [
           { type: 'bar', barWidth: 20, data: chart_data1.data2, name:'迄今预算' },
           { type: 'bar', barWidth: 20, data: chart_data1.data3, name:'今年实际' },
@@ -694,14 +706,23 @@ export default {
       var option = {
         title: { text: '', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
-        color: ['#769cfc','#19FA60','	#FFFF00'],
+        color: ['#1890FF','#F14863','#4CF0A7'],
         grid: { left: '3%', right: '13%', top: '15%', bottom: '4%', containLabel: true },
         legend: {
           data: ['设备指标迄今预算', '设备指标迄今实际', '完成率'], textStyle: { color: '#fff'}
         },
         xAxis: [{ type: 'category', name: '', data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
         yAxis: [
-          { type: 'value', name: '费用/百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}},
+          {
+            type: 'value', name: '费用/百万', axisLabel: { formatter: '{value}' },
+            axisLine: { lineStyle: { color: '#fff' }},
+            splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#102A6C'], width: 1, type: 'solid'
+              }
+            }
+          },
           { type: 'value', name: '', min: 0, max: 100, interval: 20, splitLine:{show: false}, axisLabel: { formatter: '{value} %' }, axisLine: { lineStyle: { color: '#fff' }} }
         ],
         series: [
@@ -834,10 +855,15 @@ export default {
           y: 10,
           textStyle: { color: '#fff', fontSize: '10' }
         },
-        color: ['#769cfc','#19FA60','#FF9733'],
+        color: ['#1890FF','#F14863','#FFC432','#4CF0A7'],
         grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
         xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
-        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
+        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }},splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#102A6C'], width: 1, type: 'solid'
+              }
+            }}],
         series: [
           {
             name: '迄今预算',
@@ -889,10 +915,15 @@ export default {
           y: 10,
           textStyle: { color: '#fff', fontSize: '10' }
         },
-        color: ['#769cfc','#19FA60','#FF9733'],
+        color: ['#1890FF','#F14863','#FFC432','#4CF0A7'],
         grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
         xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
-        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
+        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }},splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#102A6C'], width: 1, type: 'solid'
+              }
+            }}],
         series: [
           {
             name: '迄今预算',
@@ -944,10 +975,15 @@ export default {
           y: 10,
           textStyle: { color: '#fff', fontSize: '10' }
         },
-        color: ['#769cfc','#19FA60','#FF9733'],
+        color: ['#1890FF','#F14863','#FFC432','#4CF0A7'],
         grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
         xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
-        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
+        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }},splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#102A6C'], width: 1, type: 'solid'
+              }
+            }}],
         series: [
           {
             name: '迄今预算',
@@ -999,10 +1035,15 @@ export default {
           y: 10,
           textStyle: { color: '#fff', fontSize: '10' }
         },
-        color: ['#769cfc','#19FA60','#FF9733'],
+        color: ['#1890FF','#F14863','#FFC432','#4CF0A7'],
         grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
         xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
-        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
+        yAxis: [{ type: 'value', name: '百万', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }},splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#102A6C'], width: 1, type: 'solid'
+              }
+            }}],
         series: [
           {
             name: '迄今预算',
@@ -1038,7 +1079,7 @@ export default {
 </script>
 <style lang="scss" scoped>
   .app-container {
-    background-color: #003366; color: #fff;min-height: 100vh;
+    background-color: #031951; color: #fff;min-height: 100vh;
     .Title{height: 30px;line-height: 30px;text-align: left;padding-left: 10px;}
     .title{height: 30px;line-height: 30px;text-align: center;}
     .generalTitle{width: 100%;margin-left:150px;text-align: right;font-size: 30px;line-height: 60px;font-weight: 600;}
@@ -1077,7 +1118,7 @@ export default {
     .costStatistics{
       display: flex;justify-content: space-between;margin: 0 5px;
       .content{
-        flex: 1 1 1 1 auto;
+        flex: 1 1 1 1 auto;margin: 0 5px;
         width: 100%;
         .contentLeft{
           height: 200px;position:relative;
@@ -1116,7 +1157,7 @@ export default {
       background-color: rgba(85, 85, 85, 0.25);
   }
   .small-title{
-    font-size: 12px;padding-left: 10px;
+    font-size: 12px;padding-left: 10px;text-align: center;
     span{
       margin: 0 5px;
     }