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