修改了首页图表

src/views/dashboard/editor/index.vue

@@ -26,7 +26,7 @@
                 <b>迄今预算</b><br>
                 <span>{{ row2.chart1.list.budget }}万元</span>
               </dv-border-box-8>
-            </el-col> 
+            </el-col>
             <el-col :span="6">
               <dv-border-box-8 :dur="-1" class="news">
                 <b>设备指标实际</b><br>
@@ -56,37 +56,17 @@
         <el-row>
           <el-col :span="12">
             <dv-border-box-8 :dur="-1" style="height:500px;">
-              <div class="Title">设备状态统计</div>
+              <div class="Title">集团分项总指标</div>
               <div id="row2Chart2" style="width: 100%;height:480px;" />
-              <div class="Indexbutton">
+              <!-- <div class="Indexbutton">
                 <a @click="form_seeDetails('row2Chart2')">查看详情</a>
-              </div>
+              </div> -->
             </dv-border-box-8>
           </el-col>
           <el-col :span="12">
             <dv-border-box-8 :dur="-1" style="height:500px;">
-              <div class="Title">保养完成率</div>
-              <div class="IndexTable">
-                <el-table
-                  :key="row2.chart3.tableKey"
-                  v-loading="row2.chart3.listLoading"
-                  element-loading-text="给我一点时间"
-                  :data="row2.chart3.list"
-                  fit
-                  style="width: 100%;"
-                  :cell-style="cellStyle"
-                  :row-style="rowStyle"
-                  class="table-fixed Indextable"
-                  :height="480"
-                  :header-cell-style="{background:'#003366',color:'#fff',fontSize:'8px',lineHeight:'12px'}"
-                >
-                  <el-table-column v-if="row2.chart3.isPasture" label="牧场" min-width="80px" align="center" prop="name" />
-                  <el-table-column v-if="row2.chart3.isType" label="设备类型" min-width="80px" align="center" prop="typeName" />
-                  <el-table-column label="保养计划" min-width="70px" align="center" prop="totaluk" />
-                  <el-table-column label="完成数" min-width="60px" align="center" prop="doneuk" />
-                  <el-table-column label="保养完成率" min-width="80px" align="center" prop="donerate" />
-                </el-table>
-              </div>
+              <div class="Title">各中心总指标</div>
+              <div id="row2Chart3" style="width: 100%;height:480px;" />
               <div class="Indexbutton">
                 <a @click="form_seeDetails('row2Chart3')">查看详情</a>
               </div>
@@ -116,8 +96,11 @@
                   <svg-icon icon-class="维修成本分析" />
                   维修费
                 </div>
+                <div class="small-title">
+                  单头牛实际:  一中心:<span>0.62</span>   二中心:<span>0.62</span> 三中心:<span>0.62</span>
+                </div>
                 <el-row :gutter="5" style="height:260px;color: #fff;">
-                  <el-col :span="8" style="padding:0 0 0 10px;">
+                  <!-- <el-col :span="8" style="padding:0 0 0 10px;">
                     <div class="contentLeft">
                       <div>
                         <b>预算</b><span>{{ row3.chart1.list.data1 }}元</span>
@@ -128,11 +111,15 @@
                     <div class="Indexbutton">
                       <a @click="form_seeDetails('row3Chart1')">查看详情</a>
                     </div>
-                  </el-col>
-                  <el-col :span="16" style="padding:0 10px 0 0 ;">
-                    <dv-border-box-8 :dur="-1" style="height:200px;">
-                      <div id="row3Chart1" style="width: 100%;height:200px;" />
-                    </dv-border-box-8>
+                  </el-col> -->
+
+                  <el-col :span="24" style="padding:0 10px 0 10px ;">
+                    <dv-border-box-12 :dur="-1" style="height:200px;">
+                      <div id="row3Chart1" style="width: 98%;height:200px;" />
+                    </dv-border-box-12>
+                    <div class="Indexbutton">
+                      <a @click="form_seeDetails('row3Chart1')">查看详情</a>
+                    </div>
                   </el-col>
                 </el-row>
               </dv-border-box-8>
@@ -143,8 +130,11 @@
                   <svg-icon icon-class="水量分析" />
                   水费
                 </div>
+                <div class="small-title">
+                  单头牛实际:  一中心:<span>0.62</span>   二中心:<span>0.62</span> 三中心:<span>0.62</span>
+                </div>
                 <el-row :gutter="5" style="height:260px;color: #fff;">
-                  <el-col :span="8" style="padding:0 0 0 10px;">
+                  <!-- <el-col :span="8" style="padding:0 0 0 10px;">
                     <div class="contentLeft">
                       <div>
                         <b>预算</b><span>{{ row3.chart2.list.data1 }}元</span>
@@ -155,11 +145,14 @@
                     <div class="Indexbutton">
                       <a @click="form_seeDetails('row3Chart2')">查看详情</a>
                     </div>
-                  </el-col>
-                  <el-col :span="16" style="padding:0 10px 0 0 ;">
+                  </el-col> -->
+                  <el-col :span="24" style="padding:0 10px 0 10px ;">
                     <dv-border-box-8 :dur="-1" style="height:200px;">
-                      <div id="row3Chart2" style="width: 100%;height:200px;" />
+                      <div id="row3Chart2" style="width: 98%;height:200px;" />
                     </dv-border-box-8>
+                    <div class="Indexbutton">
+                      <a @click="form_seeDetails('row3Chart2')">查看详情</a>
+                    </div>
                   </el-col>
                 </el-row>
               </dv-border-box-8>
@@ -378,8 +371,8 @@ export default {
         console.log('设备状态统计')
         this.$router.push('/report/EquipmentOverview')
       } else if (item == 'row2Chart3') {
-        console.log('保养完成率')
-        this.$router.push('/report/CompletionRateMaintenance')
+        console.log('​各中心总指标')
+        this.$router.push('/report/EquipmentIndex')
       } else if (item == 'row2Chart4') {
         console.log('资产运转率')
         this.$router.push('/report/EquipmentOperation')
@@ -644,12 +637,19 @@ export default {
       })
     },
 
-    // 设备状态统计
+    // 集团分项总指标
     getRow2Chart2() {
       GetReportform(this.row2.chart2.getdataListParm).then(response => {
         console.log('row2图2', response)
         if (response.data !== null) {
           this.row2.chart2.data = response.data
+          this.row2.chart2.data = {
+            data1:['维修','水','电','燃动'],
+            data2:[200,100,70,50],
+            data3:[190,90,60,40],
+            data4:[180,80,70,50],
+            data5:[160,80,70,50]
+          }
         } else {
           this.row2.chart2.data = []
         }
@@ -665,17 +665,18 @@ export default {
       var option = {
         title: { text: '', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
-        color: ['#769cfc'],
+        color: ['#769cfc','#19FA60','#FF9733','	#FFFF00'],
         grid: { left: '3%', right: '13%', top: '15%', bottom: '4%', containLabel: true },
-        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' }}}],
+        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' }}}],
         series: [
-          {
-            type: 'bar',
-            barWidth: 30,
-            data: chart_data1.data2,
-            emphasis: { label: { show: true, position: 'inside' }}
-          }
+          { type: 'bar', barWidth: 20, data: chart_data1.data2, name:'迄今预算', emphasis: { label: { show: true, position: 'inside' }} },
+          { type: 'bar', barWidth: 20, data: chart_data1.data3, name:'今年实际', emphasis: { label: { show: true, position: 'inside' }} },
+          { type: 'bar', barWidth: 20, data: chart_data1.data4, name:'去年同期实际', emphasis: { label: { show: true, position: 'inside' }} },
+          { type: 'line', data: chart_data1.data5, name:'单头牛实际', emphasis: { label: { show: true, position: 'inside' }} }
         ]
       }
       this.row2.chart2.Chart.setOption(option)
@@ -688,18 +689,53 @@ export default {
     getRow2Chart3() {
       this.row2.chart3.listLoading = true
       GetDataByName(this.row2.chart3.getdataListParm).then(response => {
-        if (response.data.list !== null) {
-          this.row2.chart3.list = response.data.list
+        if (response.data !== null) {
+          this.row2.chart3.data = response.data
+          this.row2.chart3.data = {
+            data1:['一中心','二中心','三中心'],
+            data2:[200,100,70],
+            data3:[190,90,60],
+            data4:[10,80,70]
+          }
         } else {
-          this.row2.chart3.list = []
+          this.row2.chart3.data = []
         }
         this.getRow2Chart4()
+        this.roadRow2Chart3(this.row2.chart3.data)
         setTimeout(() => {
           this.row2.chart3.listLoading = false
         }, 100)
       })
     },
-
+    roadRow2Chart3(chart_data1) {
+      if (this.row2.chart3.Chart != null) {
+        this.row2.chart3.Chart.dispose()
+      }
+      this.row2.chart3.Chart = echarts.init(document.getElementById('row2Chart3'))
+      var option = {
+        title: { text: '', textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        color: ['#769cfc','#19FA60','	#FFFF00'],
+        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: '', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value} %' },axisLine: { lineStyle: { color: '#fff' }} }
+        ],
+        series: [
+          { type: 'bar', barWidth: 20, data: chart_data1.data2, name:'设备指标迄今预算', emphasis: { label: { show: true, position: 'inside' }} },
+          { type: 'bar', barWidth: 20, data: chart_data1.data3, name:'设备指标迄今实际', emphasis: { label: { show: true, position: 'inside' }} },
+          { type: 'line', data: chart_data1.data4, name:'完成率', emphasis: { label: { show: true, position: 'inside' }} }
+        ]
+      }
+      this.row2.chart3.Chart.setOption(option)
+      window.onresize = function() {
+        this.row2.chart3.Chart.resize()
+      }
+    },
     // 资产运转率
     getRow2Chart4() {
       GetReportform(this.row2.chart4.getdataListParm).then(response => {
@@ -1165,4 +1201,11 @@ export default {
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
       background-color: rgba(85, 85, 85, 0.25);
   }
+  .small-title{
+    font-size: 12px;padding-left: 10px;
+    span{
+      margin: 0 5px;
+    }
+  }
+
 </style>