From 3c4c3b60f42e0ee32d6a95e0b94e4f80a20c7866 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 20 七月 2023 16:29:28 +0800
Subject: [PATCH] 统计图表界面的绘制和接口调取，渲染，调整
---
src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue | 648 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/mdc/base/StatisticalAnalysis.vue | 45 +++
2 files changed, 693 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/StatisticalAnalysis.vue b/src/views/mdc/base/StatisticalAnalysis.vue
new file mode 100644
index 0000000..c5b8308
--- /dev/null
+++ b/src/views/mdc/base/StatisticalAnalysis.vue
@@ -0,0 +1,45 @@
+<template>
+ <a-card :bordered="false">
+ <div style="width: 100%; height: 100%;overflow: hidden">
+ <a-row type="flex" :gutter="16">
+ <a-col :md="5" :sm="24">
+ <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
+ </a-col>
+ <a-col :md="24-5" :sm="24">
+ <statistical-analysis-main :equip="selectEquementnode"></statistical-analysis-main>
+ </a-col>
+ </a-row>
+ </div>
+ </a-card>
+</template>
+
+<script>
+ import BaseTree from '../common/BaseTree'
+ import StatisticalAnalysisMain from './modules/StatisticalAnalysis/StatisticalAnalysisMain'
+ export default {
+ name: 'StatisticalAnalysis',
+ components:{
+ BaseTree,
+ StatisticalAnalysisMain
+ },
+ data() {
+ return {
+ description: '璁惧淇℃伅',
+ selectEquementnode:{},
+ equipmentStatisticsInfo:{},
+ url:{
+ equipmentStatistics:"/mdc/equipment/equipmentStatistics"
+ }
+ }
+ },
+ methods: {
+ changeSelectionNode(val){
+ this.selectEquementnode = val
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
new file mode 100644
index 0000000..d5c8ead
--- /dev/null
+++ b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
@@ -0,0 +1,648 @@
+<template>
+ <div id="StatisticsLegend" style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper">
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-row :gutter="24">
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="鍚嶇О">
+ <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="鏃ユ湡">
+ <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="3" :sm="3" :xs="3">
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ </a-col>
+ <a-col :md="2" :sm="2" :xs="2">
+ <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-col>
+ </a-row>
+ </a-form>
+ </div>
+ <!--寮�鏈虹巼-->
+ <div class="PowerOnRate Line-box">
+ <!--<div class="title">-->
+ <!--<div class="circle"></div>-->
+ <!--<div class="text">鍒╃敤鐜�</div>-->
+ <!--</div>-->
+ <div class="PowerOnRate-box box-bottom">
+ <!--<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>-->
+ <div class="PowerOnRate_text" style="width: 8%;">
+ <p>寮�鏈虹巼</p>
+ <p>{{UtilizationHeight}}%</p>
+ <p>鍒╃敤鐜�</p>
+ <p>{{StatCharUsedRate}}%</p>
+ </div>
+ <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
+ <div class="PowerOnRate_text" style="width: 8%">
+ <table width="85px;" align="center">
+ <tr>
+ <td align="right"><div style="width: 15px;height: 15px;background-color: #4169E1;position: static;"/></td>
+ <td align="left">寮�鏈�</td>
+ </tr>
+ <tr>
+ <td align="right"><div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/></td>
+ <td align="left">鍏虫満</td>
+ </tr>
+ <tr>
+ <td align="right"><div style="width: 15px;height: 15px;background-color: #00ee00"/></td>
+ <td align="left">杩愯</td>
+ </tr>
+ <tr>
+ <td align="right"><div style="width: 15px;height: 15px;background-color: #FCCE10"/></td>
+ <td align="left">寰呮満</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼-->
+ <div class="UtilizationStartup">
+ <div class="Utilization Line-box">
+ <!--<div class="title">-->
+ <!--<div class="circle"></div>-->
+ <!--<div class="text">寮�鏈虹巼</div>-->
+ <!--</div>-->
+ <div class="Utilization-box box-bottom">
+ <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
+ </div>
+ </div>
+ <div class="Startup Line-box">
+ <!--<div class="title">-->
+ <!--<div class="circle"></div>-->
+ <!--<div class="text">寮�鍔ㄧ巼</div>-->
+ <!--</div>-->
+ <div class="Startup-box box-bottom">
+ <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import moment from 'moment'
+ import { putAction, getAction } from '@/api/manage'
+ import $ from 'jquery'
+ import AFormItem from 'ant-design-vue/es/form/FormItem'
+ import * as echarts from 'echarts'
+ export default {
+ name: 'StatisticalAnalysisMain',
+ components:{
+ AFormItem
+
+ },
+ props: { equip: {} },
+ data(){
+ return{
+ readOnly:true,
+ showday:true,
+ StatCharOpeningRate:0,
+ StatCharUsedRate:0,
+ StatCharUsedopeningRate:0,
+ openingLong:0,
+ waitingLong:0,
+ processLong:0,
+ closedLong:0,
+ totalLong:0,
+ UtilizationHeight:0,
+ StartupHeight:0,
+ quip:{},
+ dates: [],
+ queryParam: {},
+ queryParams:{
+ collectTime:undefined,
+ },
+ shiftSubList: [],
+ shiftList: [],
+ url: {
+ getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
+ dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
+ getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
+ },
+ }
+ },
+ created(){
+
+
+ let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
+
+
+ this.queryParams.collectTime = collectTime;
+
+ this.queryParams.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
+ this.initEquipmentNode('-1')
+ this.queryStatistical();
+ // this.getTime(37800);
+ },
+
+ methods:{
+ disabledDate(current){
+ //Can not slect days before today and today
+ return current && current > moment().subtract('days', 1);
+ },
+ //鎶婄璁＄畻鎴愬搴旂殑鏃跺垎绉掔殑鍑芥暟
+ getTime(time){
+ //杞崲涓烘椂鍒嗙
+ let h = Math.round(time / 60 / 60)
+ h = h <10 ? '0' + h : h
+ //浣滀负杩斿洖鍊艰繑鍥�
+ // console.log(h);
+ return h;
+ },
+ moment,
+ draw(){
+ //寮�濮嬫椂闂碶鍏虫満鏃堕棿\杩愯鏃堕棿\寰呮満鏃堕棿
+ let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons');
+ let PowerOnRateLine_option = {
+ tooltip:{
+ trigger: 'axis',
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: 60,
+ containLabel: true
+ },
+ toolbox: {
+ show : true,
+ padding: 15,
+ feature : {
+ saveAsImage : {show: true,title:'淇濆瓨鍥剧墖',name :'璁惧鏁堢巼缁熻鎶ヨ〃'}
+ }
+ },
+ xAxis :{
+ type : 'category',
+ data:['寮�鏈烘椂闀�','鍏虫満鏃堕暱','杩愯鏃堕暱','寰呮満鏃堕暱'],
+ axisLabel:{ //鍧愭爣杞村瓧浣撻鑹�
+ textStyle:{
+ color: '#000'
+ }
+ },
+ axisLine:{
+ lineStyle:{
+ color:"#e5e5e5"
+ }
+ },
+ axisTick:{ //y杞村埢搴︾嚎
+ show:false
+ },
+ splitLine:{ //缃戞牸
+ show: false,
+ },
+ boundaryGap: true,
+ },
+ yAxis :{
+ name: '鏃堕棿/灏忔椂',
+ type : 'value',
+ axisLabel:{ //鍧愭爣杞村瓧浣撻鑹�
+ textStyle:{
+ color: '#000'
+ }
+ },
+ axisLine:{
+ show:false,
+ },
+ axisTick:{ //y杞村埢搴︾嚎
+ show:false
+ },
+ splitLine:{ //缃戞牸
+ show: true,
+ color:'#dadde4',
+ lineStyle:{
+ type:"dashed"
+ }
+ }
+ },
+ series:[
+ // {
+ // name:'鏇茬嚎',
+ // type: 'line',
+ // smooth:true,
+ // symbol: 'circle',
+ // symbolSize: 8,
+ // label:{
+ // show:true,
+ // position:"top",
+ // textStyle:{
+ // color:'#000',
+ // },
+ // formatter:"鏃堕暱锛歿c}H"
+ // },
+ // itemStyle: {
+ // color: "rgb(87, 120, 225)",
+ // borderColor: "#fff",
+ // borderWidth: 2,
+ // shadowColor: 'rgba(0, 0, 0, .3)',
+ // },
+ // lineStyle: {
+ // normal: {
+ // color:"rgb(87, 120, 225)",
+ // shadowColor: 'rgba(87, 120, 225, .4)',
+ // shadowBlur: 8,
+ // shadowOffsetY: 10,
+ // shadowOffsetX: 0,
+ // },
+ // },
+ // areaStyle: {
+ // normal: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(87, 120, 225, .6)'
+ // }, {
+ // offset: 1,
+ // color: 'rgba(87, 120, 225, .3)'
+ // }]),
+ // }
+ // },
+ // data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
+ // },
+ {
+ name:'鏌辩姸鍥�',
+ type: 'bar',
+ data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
+ barWidth: 25,
+ label:{
+ show:true,
+ position:"top",
+ textStyle:{
+ color:'#000',
+ },
+ formatter:"鏃堕暱锛歿c}H"
+ },
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ["#6496e9","#6bded3"],
+ ["#ffbb65","#fdc68b"],
+ ["#4fe1c5","#4ecee1"],
+ ["#9978fa","#88a1fa"],
+ ];
+ // return colorList[params.dataIndex];
+ let colorItem = colorList[params.dataIndex];
+ return new echarts.graphic.LinearGradient(0,0,0,1,[{
+ offset:0,
+ color:colorItem[0]
+ },
+ {
+ offset:1,
+ color:colorItem[1]
+ }],false)
+ },
+ barBorderRadius: [5, 5, 0, 0],
+ }
+ },
+ }]
+ }
+ PowerOnRateLine.setOption(PowerOnRateLine_option);
+ //寮�鏈烘椂闂碶鍏虫満鏃堕棿
+ let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
+ let statChartPieOption1 = {
+ title: {
+ x: 'left',
+ subtext: '寮�鏈烘晥鐜�'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
+ },
+ legend: {
+ orient: 'vertical',
+ x: 'left',
+ y: 'bottom',
+ data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿']
+ },
+ calculable: true,
+ series: [{
+ name: '寮�鏈烘晥鐜�',
+ type: 'pie',
+ radius: '70%',
+ /*center: ['55%', '55%'],*/
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ let colorList = ['#4169E1', '#A8A8A8'];
+ return colorList[params.dataIndex]
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: '{b}\n{c}'
+ }
+ }
+ },
+ data: [{value: this.openingLong, name: '寮�鏈烘椂闂�'},
+ {value: this.closedLong, name: '鍏虫満鏃堕棿'}]
+ }]
+ };
+ UtilizationLine.setOption(statChartPieOption1);
+
+ //杩愯鏃堕棿\寰呮満鏃堕棿
+ let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
+ let statChartPieOption2 = {
+ title: {
+ x: 'left',
+ subtext: '杩愯鏁堢巼'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b} : {c} ({d}%)"
+ },
+ legend: {
+ orient: 'vertical',
+ x: 'left',
+ y: 'bottom',
+ data: ['杩愯鏃堕棿', '寰呮満鏃堕棿']
+ },
+ calculable: true,
+ series: [{
+ name: '杩愯鏁堢巼',
+ type: 'pie',
+ radius: '70%',
+ center: ['55%', '55%'],
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ var colorList = ['#00ee00', '#FCCE10'];
+ return colorList[params.dataIndex]
+ },
+ label: {
+ show: true,
+ position: 'top',
+ formatter: '{b}\n{c}'
+ }
+ }
+ },
+ data: [{value: this.processLong, name: '杩愯鏃堕棿'},
+ {value: this.waitingLong, name: '寰呮満鏃堕棿'}]
+ }]
+ };
+ StartupLine.setOption(statChartPieOption2);
+ },
+ queryStatistical(){
+ getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
+ if(res.success){
+ // console.log(res);
+ this.StatCharOpeningRate = res.result.openRate;
+ //鍒╃敤鐜�
+ this.StatCharUsedRate = res.result.utilizationRate;
+ //寮�鏈虹巼
+ this.UtilizationHeight = res.result.openRate;
+ this.StatCharUsedopeningRate = res.result.StartupHeight;
+ this.StartupHeight = res.result.StartupHeight;
+ this.openingLong = this.getTime(res.result.openLong)
+ this.waitingLong = this.getTime(res.result.waitLong);
+ this.processLong = this.getTime(res.result.processLong);
+ this.closedLong = this.getTime(res.result.closeLong);
+ this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong);
+ this.draw();
+ }
+ })
+ },
+ dataChange(val) {
+ this.queryParam.collectTime1 = "";
+ this.queryParams.dateTime = val.format('YYYYMMDD')
+ this.queryParams.collectTime = val.format('YYYY-MM-DD');
+
+ },
+ initEquipmentNode(id) {
+ let _this = this
+ getAction(this.url.getBaseTree).then((res) => {
+ if (res.success) {
+ // console.log(res.result[0].entity.tierName)
+ _this.$set(this.queryParam, 'tierName', res.result[0].title)
+ } else {
+ this.$message.warn(res.message)
+ }
+ }).finally(() => {
+ this.loading = false
+ this.cardLoading = false
+ })
+ // getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
+ // if (res.success) {
+ // if (res.result) {
+ // _this.$set(this.queryParam, 'tierName', res.result.tierName)
+ // _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId)
+ // // _this.quip = res.result
+ // _this.searchQuery()
+ // } else {
+ // _this.$message.warning('璇烽厤缃澶囷紒')
+ // }
+ // }
+ // })
+ },
+ searchReset() {
+ this.queryParam = {}
+ this.queryParams = {}
+ // this.dates = []
+ this.queryStatistical()
+ // this.onClearSelected()
+ },
+ searchQuery(){
+ this.queryStatistical();
+ }
+ },
+ watch: {
+ equip(val) {
+ // console.log(val);
+ if (val && val.equipmentId) {
+ this.$set(this.queryParam, 'tierName', val.title)
+ this.$set(this.queryParam, 'equipmentId', val.equipmentId)
+ this.queryParams.parentId = ''
+ this.queryParams.equipmentIds = val.equipmentId
+ this.searchQuery()
+ }else{
+ this.queryParams.parentId = val.key
+ this.queryParams.equipmentIds = ''
+ this.$set(this.queryParam, 'tierName', val.title)
+ this.searchQuery()
+ }
+ this.searchQuery()
+ }
+ // this.searchQuery();
+
+
+ }
+
+ }
+</script>
+
+<style scoped>
+ .charContent{
+ display: flex;
+ }
+ @media screen and (min-width: 1920px){
+ #StatisticsLegend{
+ height: 748px!important;
+ overflow: scroll;
+ }
+ }
+ @media screen and (min-width: 1680px) and (max-width: 1920px){
+ #StatisticsLegend{
+ height: 748px!important;
+ overflow: scroll;
+ }
+ }
+ @media screen and (min-width: 1400px) and (max-width: 1680px){
+ #StatisticsLegend{
+ height: 600px!important;
+ overflow: scroll;
+ }
+ }
+ @media screen and (min-width: 1280px) and (max-width: 1400px){
+ #StatisticsLegend{
+ height: 501px!important;
+ overflow: scroll;
+ }
+ }
+ @media screen and (max-width: 1280px){
+ #StatisticsLegend{
+ height: 501px!important;
+ overflow: scroll;
+ }
+ }
+ #StatisticsLegend .PowerOnRate{
+ flex: 1;
+ margin-bottom: 15px;
+ background-color: #fff;
+ }
+ #StatisticsLegend .UtilizationStartup{
+ flex: 1;
+ display: flex;
+ }
+ #StatisticsLegend .UtilizationStartup>div{
+ flex: 1;
+ background-color: #fff;
+ }
+ #StatisticsLegend .UtilizationStartup .Utilization{
+ margin-right: 15px;
+ }
+ .title{
+ display: flex;
+ align-items: center;
+ padding-left: 15px;
+ padding-top: 5px;
+ }
+ .title .circle{
+ width: 15px;
+ height: 15px;
+ background-color: #7282ec;
+ border-radius: 100%;
+ margin-right: 10px;
+ }
+ .title .text{
+ font-size: 2vh;
+ }
+ .Line-box{
+ display: flex;
+ flex-direction: column;
+ }
+ .Line-box .box-bottom{
+ flex: 1;
+ }
+ .PowerOnRate-box{
+ display: flex;
+ }
+ .PowerOnRate-box .PowerOnRate-left{
+ width: 25%;
+ }
+ .PowerOnRate-box .PowerOnRate_text{
+ width: 10%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-weight: 800;
+ }
+ .PowerOnRate-box .PowerOnRate-right{
+ flex: 1;
+ }
+ .Utilization-box{
+ display: flex;
+ }
+ .Utilization-box .Utilization-left{
+ width: 25%;
+ }
+ .Utilization-box .Utilization-right{
+ flex: 1;
+ }
+ .Startup-box{
+ display: flex;
+ }
+ .Startup-box .Startup-left{
+ width: 25%;
+ }
+ .Startup-box .Startup-right{
+ flex: 1;
+ }
+ .left{
+ display: flex;
+ align-items: center;
+ }
+ .left .left-box{
+ width: 65%;
+ height: 60%;
+ margin: 0 auto;
+ overflow: hidden;
+ border-radius: 8px;
+
+ /*border: 6px solid red;*/
+ /*!*background-color: yellow;*!*/
+ /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
+ }
+ .left-box-con{
+ width: 100%;
+ height: 100%;
+ position: relative;
+ text-align: center;
+ border: 6px solid red;
+ /*background-color: yellow;*/
+ border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
+ }
+ .left .left-box .Rate-box-kong{
+ width: 100%;
+ background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
+ background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#b5dec2), color-stop(100%,#f4f5ba));
+ background: -webkit-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
+ background: -o-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
+ background: -ms-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
+ background: linear-gradient(to top, #b5dec2 0%,#f4f5ba 100%);
+ }
+ .left .left-box .Rate-box{
+ position: absolute;
+ text-align: center;
+ bottom: 0;
+ width: 100%;
+ height: 89%;
+ /*background-color: green;*/
+ background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
+ background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#06a8f8), color-stop(100%,#2bf3c7));
+ background: -webkit-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
+ background: -o-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
+ background: -ms-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
+ background: linear-gradient(to top, #06a8f8 0%,#2bf3c7 100%);
+ }
+ .left .left-box .Rate-box p{
+ position: absolute;
+ bottom: 0;
+ color: #fff;
+ width: 100%;
+ text-align: center;
+ }
+ .con-left{
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ }
+ .con-left>span{
+ flex: 1;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3