From 2b6c67c330d86e84dfbeec9b7b66a45567aaeb00 Mon Sep 17 00:00:00 2001
From: Lius <Lius2225@163.com>
Date: 星期二, 05 八月 2025 17:11:46 +0800
Subject: [PATCH] MDC设备车间树改造，设备权限改造
---
src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue | 671 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 671 insertions(+), 0 deletions(-)
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..2a3ad68
--- /dev/null
+++ b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
@@ -0,0 +1,671 @@
+<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" :allowClear="false"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="2" :sm="2" :xs="2">
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-space>
+ </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: #6496e9;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: #4ecee1"/></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 * as echarts from 'echarts'
+ export default {
+ name: 'StatisticalAnalysisMain',
+ 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:null,
+ },
+ 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 = moment().add(-1,'d').format('YYYY-MM-DD')
+ this.queryParams.dateTime = moment().add(-1,'d').format('YYYYMMDD')
+ this.initEquipmentNode()
+ // 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],
+ // data:[22,3,4,5],
+ barWidth: 25,
+ label:{
+ show:true,
+ position:"top",
+ textStyle:{
+ color:'#000',
+ },
+ // formatter:"鏃堕暱锛歿c}H",
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?`鏃堕暱锛�${value.slice(1)}H`:`鏃堕暱锛�${value}H`
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ["#6496e9","#6bded3"],
+ ["#849db8","#b4b8cc"],
+ ["#4fe1c5","#4ecee1"],
+ // ["#9978fa","#88a1fa"],
+ ["#ffbb65","#fdc68b"],
+ ];
+ // 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: '寮�鏈烘晥鐜�',
+ // textStyle: {
+ // color: '#268e80',
+ // fontSize: 20,
+ //
+ // },
+ // },
+ tooltip: {
+ trigger: 'item',
+ // formatter: "{a} <br/>{b} : {c} ({d}%)"锛�
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦:`${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ x: '85%',
+ y: '50%',
+ data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿']
+ },
+ calculable: true,
+ series: [{
+ name: '寮�鏈烘晥鐜�',
+ type: 'pie',
+ radius: '70%',
+ /*center: ['55%', '55%'],*/
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ let colorList = [ '#6496e9','#849db8'];
+ return colorList[params.dataIndex]
+ },
+ label: {
+ show: true,
+ position: 'top',
+ // formatter: '{b}\n{c}',
+ // formatter:params=>String(params.value).length==2?params.name+String(params.value).slice(1):params.name+String(params.value)
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
+ }
+ }
+ }
+ },
+ 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}%)",
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦:`${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ x: '85%',
+ y: '50%',
+ data: ['杩愯鏃堕棿', '寰呮満鏃堕棿']
+ },
+ calculable: true,
+ series: [{
+ name: '杩愯鏁堢巼',
+ type: 'pie',
+ radius: '70%',
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ var colorList = ['#4ecee1', '#FCCE10'];
+ return colorList[params.dataIndex]
+ },
+ label: {
+ show: true,
+ position: 'top',
+ // formatter: '{b}\n{c}',
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
+ }
+ }
+ }
+ },
+ 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 = "";
+ if(val){
+ this.queryParams.dateTime = val.format('YYYYMMDD')
+ this.queryParams.collectTime = val.format('YYYY-MM-DD');
+ }
+ },
+ initEquipmentNode() {
+ let _this = this
+ getAction(this.url.getBaseTree).then((res) => {
+ if (res.success) {
+ if(res.result[0]){
+ _this.$set(this.queryParam, 'tierName', res.result[0].title)
+ _this.$set(this.queryParams, 'parentId', res.result[0].key)
+ }
+ // console.log(res.result[0].entity.tierName)
+ _this.queryStatistical()
+ } else {
+ // this.$message.warn(res.message)
+ this.$notification.warning({
+ message:'娑堟伅',
+ description: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 = {
+ collectTime:moment().add(-1,'d').format('YYYY-MM-DD'),
+ dateTime:moment().add(-1,'d').format('YYYYMMDD')
+ }
+ this.initEquipmentNode()
+ // this.dates = []
+ // this.queryStatistical()
+ // this.onClearSelected()
+ },
+ searchQuery(){
+ this.queryStatistical();
+ }
+ },
+ watch: {
+ equip(val) {
+ if (val && val.equipmentId) {
+ this.$set(this.queryParam, 'tierName', val.title)
+ this.$set(this.queryParam, 'equipmentId', val.equipmentId)
+ this.queryParams.parentId = ''
+ this.queryParams.equipmentId = val.equipmentId
+ }else{
+ this.queryParams.parentId = val.key
+ this.queryParams.equipmentId = ''
+ this.$set(this.queryParam, 'tierName', val.title)
+ }
+ 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