From fb8806b3a20959980dc4b4fe603b8fdf50d1e731 Mon Sep 17 00:00:00 2001
From: yjl <1490736767@qq.com>
Date: Tue, 21 Mar 2023 16:33:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80-=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E7=AE=A1=E7=90=86-=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
 =?UTF-8?q?=E9=87=8D=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fourEngin/sourse/rightTop.vue             | 355 +++++++++++++-----
 1 file changed, 259 insertions(+), 96 deletions(-)

diff --git a/src/views/projectAdmin/fourEngin/sourse/rightTop.vue b/src/views/projectAdmin/fourEngin/sourse/rightTop.vue
index 46ffa4d5..f059a5ad 100644
--- a/src/views/projectAdmin/fourEngin/sourse/rightTop.vue
+++ b/src/views/projectAdmin/fourEngin/sourse/rightTop.vue
@@ -31,7 +31,9 @@
           </el-date-picker>
         </div>
       </div>
-      <div class="myChart">
+      <div class="myChart" ref="myChart"></div>
+
+      <!-- <div class="myChart">
         <JBarChart
           v-if="isblock"
           :grid="grid"
@@ -40,7 +42,7 @@
           :series="series"
           :tooltip="tooltip"
         />
-      </div>
+      </div> -->
       <!-- <div class="dataImg" >
         <img src="@/assets/images/noData3.png" alt srcset />
         <p>{{ $t("message.dataBoard.nodata") }}</p>
@@ -51,7 +53,7 @@
 
 <script>
 import Card from '../components/Card.vue'
-import JBarChart from '../../common/jChart/bar/JBarChart.vue'
+// import JBarChart from '../../common/jChart/bar/JBarChart.vue'
 import echarts from 'echarts4'
 // import {
 //   getMaterialRequisitionTrendChart,
@@ -65,7 +67,10 @@ import {
 } from '@/assets/js/api/zhongjianFourth.js'
 
 export default {
-  components: { Card, JBarChart },
+  components: {
+    Card
+    // JBarChart
+  },
   data() {
     return {
       // checkImg:false,
@@ -87,95 +92,95 @@ export default {
           label: '日'
         }
       ],
-      legend: ['BIM模型用量', '实际用量', '偏差比例'],
-      // value1: '1',
-      // value2: '1',
-      grid: ['18%', '2%', '2%', '2%'],
+      // legend: ['BIM模型用量', '实际用量', '偏差比例'],
+      // // value1: '1',
+      // // value2: '1',
+      // grid: ['18%', '2%', '2%', '2%'],
 
-      xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
-      yAxis: {
-        type: 'log'
-      },
-      series: [
-        {
-          name: 'BIM模型用量',
-          type: 'bar',
-          data: [],
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#6de1ee' },
-              { offset: 1, color: '#6de1ee24' }
-            ])
-          }
-        },
-        {
-          name: '实际用量',
-          type: 'bar',
-          data: [],
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#DE5F2A' },
-              { offset: 1, color: '#DE5F2A24' }
-            ])
-          }
-        },
-        {
-          name: '偏差比例',
-          type: 'line',
-          symbolSize: 10,
-          symbol: 'circle',
-          smooth: true,
-          yAxisIndex: 1,
-          itemStyle: {
-            normal: {
-              color: 'rgb(206, 190, 69)',
-              barBorderRadius: 0
-            }
-          },
-          lineStyle: {
-            normal: {
-              width: 4,
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(255, 195, 3, 1)' // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(255, 195, 3, 1)' // 100% 处的颜色
-                  }
-                ],
-                global: false // 缺省为 false
-              }
-            }
-          },
-          data: []
-        }
-      ],
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow'
-        },
+      // xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
+      // yAxis: {
+      //   type: 'log'
+      // },
+      // series: [
+      //   {
+      //     name: 'BIM模型用量',
+      //     type: 'bar',
+      //     data: [],
+      //     itemStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: '#6de1ee' },
+      //         { offset: 1, color: '#6de1ee24' }
+      //       ])
+      //     }
+      //   },
+      //   {
+      //     name: '实际用量',
+      //     type: 'bar',
+      //     data: [],
+      //     itemStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: '#DE5F2A' },
+      //         { offset: 1, color: '#DE5F2A24' }
+      //       ])
+      //     }
+      //   },
+      //   {
+      //     name: '偏差比例',
+      //     type: 'line',
+      //     symbolSize: 10,
+      //     symbol: 'circle',
+      //     smooth: true,
+      //     yAxisIndex: 1,
+      //     itemStyle: {
+      //       normal: {
+      //         color: 'rgb(206, 190, 69)',
+      //         barBorderRadius: 0
+      //       }
+      //     },
+      //     lineStyle: {
+      //       normal: {
+      //         width: 4,
+      //         color: {
+      //           type: 'linear',
+      //           x: 0,
+      //           y: 0,
+      //           x2: 0,
+      //           y2: 1,
+      //           colorStops: [
+      //             {
+      //               offset: 0,
+      //               color: 'rgba(255, 195, 3, 1)' // 0% 处的颜色
+      //             },
+      //             {
+      //               offset: 1,
+      //               color: 'rgba(255, 195, 3, 1)' // 100% 处的颜色
+      //             }
+      //           ],
+      //           global: false // 缺省为 false
+      //         }
+      //       }
+      //     },
+      //     data: []
+      //   }
+      // ],
+      // tooltip: {
+      //   trigger: 'axis',
+      //   axisPointer: {
+      //     type: 'shadow'
+      //   },
 
-        formatter: function (params) {
-          var str = params[0].name + '<br>'
-          for (let item of params) {
-            if (item.seriesName === '偏差比例') {
-              str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
-            } else {
-              str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
-            }
-          }
-          return str
-        }
-      },
+      //   formatter: function (params) {
+      //     var str = params[0].name + '<br>'
+      //     for (let item of params) {
+      //       if (item.seriesName === '偏差比例') {
+      //         str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
+      //       } else {
+      //         str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
+      //       }
+      //     }
+      //     return str
+      //   }
+      // },
       sn: '',
       plan: [],
       actual: [],
@@ -186,11 +191,166 @@ export default {
       year: ''
     }
   },
+  mounted() {},
   created() {
     // this.getList();
     this.getgetMaterialTypeApi()
+    // this.getgetPassConsumeRatioList()
   },
   methods: {
+    getEcharts(passList, consumeList, deviationRatioList) {
+      let myChart = echarts.init(this.$refs.myChart)
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '10%',
+          top: '16%',
+          containLabel: true
+        },
+        legend: {
+          data: ['BIM模型用量', '实际用量', '偏差比率'],
+          left: '7%',
+          top: '5%',
+          icon: 'circle',
+          textStyle: {
+            color: '#fff'
+          },
+          itemWidth: 15,
+          itemHeight: 10,
+          itemGap: 25,
+          padding: [-20, 100, 0, 0]
+        },
+        xAxis: {
+          type: 'category',
+          data: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
+          axisLine: {
+            show: true,
+            type: 'dashed',
+            lineStyle: {
+              color: '#323D50'
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#000'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: [5, 10],
+                color: '#323D50'
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            axisLine: {
+              show: true,
+              type: 'dashed',
+
+              lineStyle: {
+                color: '#323D50'
+              }
+            }
+          },
+          {
+            type: 'value',
+            name: '百分比(%)',
+            nameTextStyle: {
+              color: '#fff'
+            },
+            position: 'right',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+            },
+            axisLine: {
+              show: true,
+              type: 'dashed',
+              lineStyle: {
+                color: '#323D50'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '偏差比率',
+            type: 'line',
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: true, //平滑曲线显示
+            symbol: 'circle', //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: '#ffa43a',
+                borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框
+                borderWidth: 5
+              }
+            },
+            lineStyle: {
+              color: '#ffa43a'
+            },
+
+            data: deviationRatioList
+          },
+          {
+            name: 'BIM模型用量',
+            type: 'bar',
+            barWidth: '20%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#6de1ee' },
+                { offset: 1, color: '#6de1ee24' }
+              ])
+            },
+            data: passList
+          },
+          {
+            name: '实际用量',
+            type: 'bar',
+            barWidth: '20%',
+
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#DE5F2A' },
+                { offset: 1, color: '#DE5F2A24' }
+              ])
+            },
+
+            data: consumeList
+          }
+        ]
+      }
+      myChart.setOption(option)
+    },
+
     getgetMaterialTypeApi() {
       getMaterialTypeApi({ projectSn: this.$store.state.projectSn }).then(
         (res) => {
@@ -219,18 +379,21 @@ export default {
         typeId: this.typeId,
         year: this.checkDate
       }).then((res) => {
+        console.log('查询g============================== ： ', res)
+
         let passList = []
         let consumeList = []
         let deviationRatioList = []
         res.result.forEach((element) => {
           passList.push(element.plan)
-          consumeList.push(element.pass)
+          consumeList.push(element.consume)
           deviationRatioList.push(element.deviationRatio)
         })
-        this.series[0].data = passList //计划用量  pass
-        this.series[1].data = consumeList //实际用量  consume
-        this.series[2].data = deviationRatioList //偏差比例  deviationRatio
+        // this.series[0].data = passList //计划用量  pass
+        // this.series[1].data = consumeList //实际用量  consume
+        // this.series[2].data = deviationRatioList //偏差比例  deviationRatio
         console.log('查询getgetPassConsumeRatioList ： ', this.series)
+        this.getEcharts(passList, consumeList, deviationRatioList)
       })
     },
     checkTypes(val) {
@@ -308,7 +471,7 @@ export default {
   }
   .myChart {
     width: 100%;
-    height: 90%;
+    height: 100%;
   }
 }
 // .dataImg{