From c58faef08795d83d4e284f3bc8acfed5df33f028 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 十二月 2023 16:23:06 +0800
Subject: [PATCH] 设备负荷组件

---
 src/views/cockpitPage/components/DeviceChart.vue |  200 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/cockpitPage/index.vue                  |    5 +
 2 files changed, 205 insertions(+), 0 deletions(-)

diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue
new file mode 100644
index 0000000..8e65081
--- /dev/null
+++ b/src/views/cockpitPage/components/DeviceChart.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="bar-chart">
+    <ChartTitle name="璁惧璐熻嵎瀵规瘮鍒嗘瀽"></ChartTitle>
+    <div class="bar-contents">
+      <div class="chart" ref="chart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
+//寮曞叆echart
+import * as echarts from 'echarts'
+export default {
+  components: {
+    ChartTitle,
+  },
+  props: {},
+  data() {
+    return {
+      chartData:{
+        datax:['浜у搧1', '浜у搧2', '浜у搧3', '浜у搧4','浜у搧5', '浜у搧6'],
+        datay:[120, 200, 150, 380, 470, 150, 230],
+      }
+    };
+  },
+  mounted() {
+    this.pieChart('chart',this.chartData)
+  },
+  watch: {},
+  methods: {
+    //鍦ㄨ亴
+    pieChart(chartName,data){
+          let chartDom = this.$refs[chartName]
+          let myChart = echarts.init(chartDom);
+          let option;
+          let lineColor='#35ddc74d'
+          if(data){
+            option = {
+              color:['#00FFFF','#dcb018'],
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'none'
+                },
+              },
+              grid: {
+                right: "80px",
+                bottom:'60px',
+                left:'60px',
+                top:'30px',
+              },
+              dataZoom: [
+                {
+                  type: 'inside',
+                  // show: true, //鏄剧ず婊氬姩鏉�
+                  start:0,
+                  end: 100,
+                  xAxisIndex: 0,
+                  minSpan:20,
+                  maxSpan:100,
+                  // handleSize: 8
+                },
+                {
+                  //   type: 'slider', //涓や釜涓�涓槸slider锛屼竴涓槸inside锛宻lider鏄鍔犳粴鍔ㄦ潯浠ュ強榧犳爣鎷栧姩婊氬姩鏉″姛鑳斤紝inside鍒欐槸榧犳爣婊氳疆婊氬姩婊氬姩鏉°��
+                  type: 'inside',
+                  // show: true,
+                  // realtime : true,
+                  xAxisIndex: 0,
+                  minSpan:20,
+                  maxSpan:100,
+                  start: 0,
+                  end: 100
+                },
+              ],
+              legend: {
+                itemWidth: 8,
+                itemHeight: 8,
+                itemGap: 35,//闂磋窛
+                bottom:'5px',
+                left:'center',
+              },
+              yAxis: [
+                {
+                  type: 'category',
+                  axisTick: {
+                    show: false
+                  },
+                  axisLine: {
+                    show: true,
+                    lineStyle: {
+                      color:lineColor,
+                    }
+                  },
+                  axisLabel:{
+                    // rotate:45,
+                    margin: 10,
+                    show: true,
+                    textStyle: {
+                      color:function(params,index){
+                        let colorList=['#dcb018','#00FFFF']
+                        if(index % 2 == 0){
+                          return colorList[0]
+                        }else{
+                          return colorList[1]
+                        }
+                      }
+                    },
+                  },
+                  data: data.datax?data.datax:[],
+                }
+              ],
+              xAxis: [
+                {
+                  type: '',
+                  name: '鍗曚綅锛氫欢',
+                  // min: data.yAxis[0].min?data.yAxis.min:0,
+                  minInterval: 1,//鍧愭爣杞存槸鏁存暟
+                  max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3
+                  interval: Math.ceil(eval( `Math.max(${data.datay})`)/7)*7 / 7,
+                  position: 'left',
+                  axisLine: {
+                    show: true,
+                    lineStyle: {
+                      color:'#0a112B',
+                    }
+                  },
+                  nameTextStyle:{
+                    color:"#00FFFF",
+                  },
+                  splitLine: {
+                    show: true,
+                    lineStyle: {
+                      // 浣跨敤娣辨祬鐨勯棿闅旇壊
+                      color: lineColor,
+                    }
+                  },
+                  axisTick: {
+                    show: false
+                  },
+                
+                  axisLabel: {
+                    textStyle: {
+                      color: '#00FFFF'
+                    },
+                    
+                  }
+                },
+              ],
+              series:[
+                {
+                  type: 'bar',
+                  name: '',
+                  barWidth: '20%',
+                  itemStyle: {
+                    normal: {
+                      //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+                      barBorderRadius:[4, 4, 0, 0],
+                      color:function(params){
+                        let colorList=['#dcb018','#00FFFF']
+                        if(params.dataIndex % 2 == 0){
+                          return colorList[0]
+                        }else{
+                          return colorList[1]
+                        }
+                      }
+                    },
+                  },
+                  data: data.datay,
+                },
+              ]
+            };
+
+            option && myChart.setOption(option);
+          }else{
+            option={};
+            myChart.setOption(option,true);
+          }
+        },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart{
+  width:100%;
+  height:calc(100% - 0px);
+  padding:0px 0 0;
+  .bar-contents{
+    width:100%;
+    height:calc(100% - 60px);
+    border:1px solid #00FFFF;
+    box-sizing: border-box;
+    .chart{
+        width: 100%;
+        height:100%;
+      }
+  }
+}
+</style>
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index f0ce3f4..f5b44ca 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -9,6 +9,9 @@
     <template #leftBlock3>
       <CountView></CountView>
     </template>
+    <template #rightBlock1>
+      <DeviceChart @should-reload="reloadAllData"></DeviceChart>
+    </template>
     <template #rightBlock2>
       <MaterialChart @should-reload="reloadAllData"></MaterialChart>
     </template>
@@ -23,12 +26,14 @@
 import MachineStartupRate from "@/views/cockpitPage/components/MachineStartupRate";
 import CountView from "@/views/cockpitPage/components/CountView";
 import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
+import DeviceChart from "@/views/cockpitPage/components/DeviceChart.vue";
 import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
 import BarChart from "@/views/cockpitPage/components/BarChart.vue";
 export default {
   components: {
     StatisticalBox,
     BackgroundBoardLayout,
+    DeviceChart,
     MaterialChart,
     BarChart,
     MachineStartupRate,

--
Gitblit v1.8.0