From dc4997f1cadb128fc1461732f469391e282ac26e Mon Sep 17 00:00:00 2001 From: zhuzhuanzhuan Date: 星期四, 07 九月 2023 16:14:40 +0800 Subject: [PATCH] 报警分析界面的绘制,功能的完成,接口的获取,渲染,测试 --- src/views/mdc/base/alarmAnalysis.vue | 139 ++++++++++ src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue | 4 src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue | 5 src/views/mdc/base/openRateFractionAnalysis.vue | 2 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 602 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 749 insertions(+), 3 deletions(-) diff --git a/src/views/mdc/base/alarmAnalysis.vue b/src/views/mdc/base/alarmAnalysis.vue new file mode 100644 index 0000000..c25bc0c --- /dev/null +++ b/src/views/mdc/base/alarmAnalysis.vue @@ -0,0 +1,139 @@ +<template> + <div style="width: 100%; height: 100%;"> + <a-card :bordered="false"> + <a-row type="flex" :gutter="16"> + <a-col :md="4"> + <a-tabs :activeKey="activeKey" @change="tabChange"> + <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render> + <base-tree @getCurrSelected="changeSelectionNode"></base-tree> + </a-tab-pane> + <a-tab-pane v-if="isDepartType == 0" key="2" tab="閮ㄩ棬灞傜骇">, + <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree> + </a-tab-pane> + </a-tabs> + </a-col> + <a-col :md="20"> + <alarm-analysis-main ref="alarmAnalysisMain" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></alarm-analysis-main> + </a-col> + </a-row> + </a-card> + </div> + +</template> + +<script> + import { putAction, getAction } from '@/api/manage' + import { frozenBatch } from '@/api/api' + import { JeecgListMixin } from '@/mixins/JeecgListMixin' + import JInput from '@/components/jeecg/JInput' + import BaseTree from '../common/BaseTree' + import alarmAnalysisMain from './modules/alarmAnalysis/alarmAnalysisMain' + import JSuperQuery from '@/components/jeecg/JSuperQuery' + import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton' + import DepartTree from './modules/DepartList/DepartListTree/DepartTree' + import {mapActions} from 'vuex' + export default { + name: 'alarmAnalysis', + components: { + JThirdAppButton, + JInput, + BaseTree, + JSuperQuery, + DepartTree, + alarmAnalysisMain + }, + data() { + return { + activeKey: '1', + description: '璁惧淇℃伅', + selectEquementId: '', + selectEquement: {}, + selectPeople:{}, + slectTypeTree:"", + url: { + equipmentStatistics: '/mdc/equipment/equipmentStatistics' + }, + isDepartType:'', + } + }, + created() { + this.queryTreeData() + }, + methods: { + ...mapActions(['QueryDepartTree']), + queryTreeData() { + this.QueryDepartTree().then(res => { + if (res.success) { + this.isDepartType = res.result[0].value + } else { + // this.$message.warn(res.message) + this.$notification.warning({ + message:'娑堟伅', + description:res.message + }); + } + }).finally(() =>{ + }) + }, + tabChange(val) { + // console.log(val); + this.activeKey = val + this.slectTypeTree = val + }, + // changeSelection(val) { + // this.selectEquementId = val + // this.$refs.efficiencyList.pQuery(val) + // this.$refs.efficiencyList.searchQuery() + // }, + changeSelectionNode(val) { + this.selectEquement = val + this.slectTypeTree = "1" + }, + changeSelectionNodedd(val) { + this.selectPeople = val + this.slectTypeTree = "2" + } + } + + } +</script> +<style scoped> + @import '~@assets/less/common.less'; + + .equipMessage { + width: 100%; + height: 10%; + } + + .equipMessage table { + width: 60%; + height: 100%; + line-height: 50%; + } + + .equipMessage table td { + text-align: center; + } + + .equipMessage table td span { + display: inline-block; + width: 15px; + height: 15px; + } + + .equipMessage table td .equipShutdown { + background-color: #808080; + } + + .equipMessage table td .equipStandby { + background-color: #ffbf37; + } + + .equipMessage table td .equipRun { + background-color: #19FE01; + } + + .equipMessage table td .equipAlarm { + background-color: #FD0008; + } +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue new file mode 100644 index 0000000..fd7c515 --- /dev/null +++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue @@ -0,0 +1,602 @@ +<template> + <div class="efficiency_list" style="width: 100%;height: 100%;"> + <a-card :bordered="false"> + <!-- 鏌ヨ鍖哄煙 --> + <div class="table-page-search-wrapper"> + <a-form layout="inline" @keyup.enter.native="searchQuery"> + <a-row :gutter="24"> + <a-col :md="6" :sm="6"> + <a-form-item label="鏃堕棿"> + <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/> + </a-form-item> + </a-col> + <a-col :lg="2" :md="3" :sm="3" :xs="3"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + </a-col> + </a-row> + </a-form> + </div> + <div id="DeviceList"> + <div class="openRateTrendDg"> + <div id="Efficiency" class="container" style="margin-top: 20px;"> + <div class="table2"> + <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap;text-align: left;"> + <thead> + <tr class="thead fixed equipname"> + <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鎶ヨ鍙�</th> + <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鍑虹幇娆℃暟</th> + <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鍚堣鎸佺画鏃堕棿锛堢锛�</th> + <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">鎶ヨ淇℃伅</th> + <!--<template v-for="(tableHead, index) in tableHeads">--> + <!--<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>--> + <!--</template>--> + </tr> + </thead> + <tbody> + <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)"> + <td class="tdgu kaitou">{{item.alarmCode}}</td> + <td class="tdgu1 kaitou">{{item.count}}</td> + <td class="tdgu2 kaitou">{{item.timeCount}}</td> + <td class="tdgu3 kaitou">{{item.alarmContent}}</td> + <!--<template v-for="(tableHead, index) in item.dataList">--> + <!--<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>--> + <!--</template>--> + </tr> + </tbody> + </table> + </div> + </div> + </div> + <div style="width: 100%;height: 60%;display: flex;"> + <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div> + <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div> + </div> + </div> + </a-card> + </div> +</template> + +<script> + import moment from 'moment' + import { putAction, getAction } from '@/api/manage' + import $ from 'jquery' + import '@/components/table2excel/table2excel' + import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' + import { + JeecgListMixin + } from '@/mixins/JeecgListMixin' + export default { + // mixins: [JeecgListMixin], + name: 'alarmAnalysisMain', + components: {}, + data() { + return { + dataSource: [], + /* table鍔犺浇鐘舵�� */ + loading: false, + typeTree: "", + typeParent: 1, + typeEquipment: 1, + TreeIDOne: 1, + TreeIDTwo: 2, + deviceTypeDict: '', + dates: [], + identifying: [], + queryParam: {}, + queryParams: {}, + queryParamEquip: {}, + queryParamPeople: {}, + efficiencyOptions: [ + { label: '鍒╃敤鐜�', value: 'lyl' }, + { label: '寮�鏈虹巼', value: 'kjl' }, + { label: '寮�鏈烘椂闂�', value: 'kjsj' }, + { label: '鍔犲伐鏃堕棿', value: 'jgsj' }, + { label: '寰呮満鏃堕棿', value: 'djsj' }, + { label: '鍏虫満鏃堕棿', value: 'gjsj' } + ], + checkedList: ['lyl'], + dataList: [], + url: { + efficiencyList: '/mdc/alarmAnalyze/alarmList', + listByType: '/mdc/MdcUtilizationRate/getByType', + alarmTrend: '/mdc/alarmAnalyze/alarmTrend' + }, + tableHeads: [], + pieDate:[0], + XData:[0], + YData:[0], + } + }, + props: { nodeTree: '', Type: '', nodePeople: '' }, + /** + * 鐢熷懡鍛ㄦ湡 鎸傝浇鍓� + * */ + created() { + this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)] + this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD') + this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD') + this.queryParam.typeTree = "1" + this.loadData1() + + }, + mounted(){ + this.drawWrin() + }, + watch: { + Type(valmath) { + this.dataList = []; + this.queryParam.typeTree = valmath + }, + nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParamEquip.parentId = '' + this.queryParamEquip.equipmentId = val.equipmentId + } else { + this.queryParamEquip.parentId = val.key + this.queryParamEquip.equipmentId = '' + } + /*杩欓噷浣犳槸鐩戝惉鍒版爲寰楀彉鍖� 鏄笉鏄姹備竴娆�*/ + this.searchQuery() + } + }, + nodePeople(val) { + if (JSON.stringify(val) != '{}') { + if (val.equipmentId != null) { + this.queryParamPeople.parentId = val.equipmentId + this.queryParamPeople.equipmentId = '' + } else { + this.queryParamPeople.parentId = val.key + this.queryParamPeople.equipmentId = '' + } + this.searchQuery() + } + } + }, + filters: { + numFilter(value) { + if (value) { + return parseFloat((value * 100).toFixed(2)) + } else { + return '0' + } + } + }, + methods: { + numBerTwo(value){ + if (value) { + return parseFloat((value * 100).toFixed(2)) + } else { + return '0' + } + }, + TableDraw(key,val) { + let that = this + that.queryParam.alarmCode = val.alarmCode + console.log(this.queryParam) + that.pieDate = [] + that.XData = [] + that.YData = [] + getAction(that.url.alarmTrend, that.queryParam).then(res => { + if (res.success) { + for (var i = 0;i<res.result.equipmentCountList.length;i++){ + that.pieDate.push({name:res.result.equipmentCountList[i].key,value:res.result.equipmentCountList[i].count}) + } + for (var j = 0;j<res.result.dateCountList.length;j++){ + that.XData.push(res.result.dateCountList[j].key) + that.YData.push(res.result.dateCountList[j].count) + } + // this.tableHeads = res.result.dates + // this.dataList = res.result + // this.draw() + // this.checkSameData(this.dataList) + // this.checkSameData1(this.dataList) + // this.checkSameData2(this.dataList) + // this.combineCell(); + // this.initDeviceType(this.dataList) + that.drawWrin() + } + }) + console.log(this.YData) + + }, + disabledDate(current) { + //Can not slect days before today and today + return current && current > moment().subtract('days', 1); + }, + initDeviceType(deviceList) { + let dictCode = 'mdc_equipmentType' + let items = [] + items = getDictItemsFromCache(dictCode) + if (deviceList && items.length > 0) { + for (let a = 0; a < deviceList.length; a++) { + if (items && items.length > 0) { + for (let i = 0; i < items.length; i++) { + if (deviceList[a].equipmentType == items[i].value) { + deviceList[a].equipmentType = items[i].title + } + } + } else { + ajaxGetDictItems(dictCode, null).then((res) => { + if (res.success) { + let items = res.result + for (let i = 0; i < items.length; i++) { + if (deviceList[a].equipmentType == items[i].value) { + deviceList[a].equipmentType = items[i].title + } + } + } + }) + } + } + } + }, + dateParamChange(v1, v2) { + this.queryParam.startDate = v2[0] + this.queryParam.endDate = v2[1] + }, + searchQuery() { + if (this.queryParam.typeTree == "1") { + this.queryParam.parentId = this.queryParamEquip.parentId + this.queryParam.equipmentId = this.queryParamEquip.equipmentId + } else { + this.queryParam.parentId = this.queryParamPeople.parentId + this.queryParam.equipmentId = "" + } + this.loadData1() + // this.onClearSelected() + }, + // searchReset() { + // this.typeTree = this.queryParam.typeTree + // this.typeParent = this.queryParam.parentId + // this.typeEquipment = this.queryParam.equipmentId + // this.queryParam = {} + // this.dates = [] + // this.queryParam.typeTree = this.typeTree + // this.queryParam.parentId = this.typeParent + // this.queryParam.equipmentId = this.typeEquipment + // // this.ipagination.current = 1 + // this.loadData1(); + // // this.queryParam = {} + // // this.dates = [] + // // this.loadData() + // // this.onClearSelected() + // }, + // loadData1() { + // let that = this + // that.columns=[ + // { + // title: '璁惧缂栧彿', + // align: 'center', + // dataIndex: 'equipmentId', + // width:'150px' + // }, + // { + // title: '璁惧鍚嶇О', + // align: 'center', + // dataIndex: 'equipmentName', + // width:'150px' + // }, + // ] + // that.tableHeads = [] + // that.dataList = [] + // getAction(this.url.efficiencyList, that.queryParam).then(res => { + // var tmp = {} + // console.log(res) + // if (res.success) + // + // that.dataSource = res.result.mdcEfficiencyList + // for(var k = 0;k<that.dataSource[0].dataList.length;k++){ + // that.columns.push( + // { + // title:that.dataSource[0].dataList.theDate, + // align: 'center', + // width:'120px', + // // dataIndex:'utilizationRate', + // } + // ) + // } + // for(var i = 0;i<that.dataSource.length;i++){ + // for (var j = 0; j < that.dataSource[i].dataList.length;j++){ + // // that.columns.push( + // // { + // // title:that.dataSource[0].dataList[j].theDate, + // // align: 'center', + // // width:'120px', + // // dataIndex:'utilizationRate', + // // } + // // ) + // } + // + // } + // console.log(that.columns) + // console.log(that.dataSource) + // // this.initDeviceType(this.dataList) + // this.draw() + // } + // } + loadData1() { + this.tableHeads = [] + this.dataList = [] + getAction(this.url.efficiencyList, this.queryParam).then(res => { + if (res.success) { + // this.tableHeads = res.result.dates + this.dataList = res.result + // this.draw() + // this.checkSameData(this.dataList) + // this.checkSameData1(this.dataList) + // this.checkSameData2(this.dataList) + // this.combineCell(); + // this.initDeviceType(this.dataList) + + } + }) + }, + drawWrin(){ + let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons'); + let equipmentWarningPieOption = { + title: { + text: '鍚勮澶囧嚭鐜版鎶ヨ鐨勬瘮渚�', + x: 'center', + y: 'bottom' + }, + tooltip: { + trigger: 'item', + formatter: "<br/>{b} : {c} ({d}%)" + }, + calculable: true, + series: [{ + type: 'pie', + radius: '60%', + center: ['55%', '55%'], + itemStyle: { + normal: { + /*color: function (params) { + var colorList = ['#4169E1', '#A8A8A8']; + return colorList[params.dataIndex] + },*/ + label: { + show: true, + position: 'top', + formatter: '{b}\n{c}' + } + } + }, + data:this.pieDate + // data:[{name:'jjjjjjj',value:'2'}] + }] + }; + equipmentWarningPie.setOption(equipmentWarningPieOption,true); + let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons'); + let equipmentWarningLineOption = { + title : { + text: '姣忓ぉ鍑虹幇姝ゆ姤璀︾殑鏁伴噺璧板娍', + x: 'center', + y: 'bottom' + }, + tooltip:{ + trigger: 'item' + }, + calculable: true, + xAxis: [ + { + type: 'category', + show: true, + data:this.XData + /*axisLabel :{ + interval:0 + }*/ + } + ], + yAxis: [ + { + type: 'value', + name: '娆℃暟' + } + ], + series: [ + { + name: '鎶ヨ鏁伴噺', + type: 'line', + data: this.YData, + markPoint : { + data : [ + {type : 'max', name: '鏈�澶у��'}, + {type : 'min', name: '鏈�灏忓��'} + ] + } + } + ] + }; + equipmentWarningLine.setOption(equipmentWarningLineOption,true); + } + } + } +</script> +<style scoped> + .dataContent { + white-space: nowrap; + /*margin: 0;*/ + /*border: none;*/ + border-collapse: separate; + border-spacing: 0; + /*table-layout: fixed;*/ + border: 1px solid #ccc; + /*border: 1px solid #ccc;*/ + width: 100%; + /*height: 100%;*/ + /*overflow: hidden;*/ + /*overflow-y: auto;*/ + text-align: center; + } + + /*.dataContent .fixed th {*/ + /*width: 50px;*/ + /*}*/ + + .dataContent .thead th { + background-color: #fafafa; + text-align: center; + height: 30px; + padding: 5px; + } + + .dataContent .notfixed th { + /*width: auto;*/ + } + + .dataContent tr td { + height: 35px; + } + .dataContent .mathData:hover td{ + background-color: #e6f7ff; + } + .dataContent .mathData td { + padding: 10px; + /*display: none;*/ + } + + .dataContent .mathData .td { + /*background-color: #ff9bd2;*/ + display: inline-block; + padding: 10px; + } + + .dataContent .mathData .tdd { + /*display: none;*/ + } + .table2{ + width: 100%; + height: 100%; + overflow: auto; + } + /*tr th {*/ + /*height: 50px!important;*/ + /*}*/ + /*tr td{*/ + /*height: 50px!important;*/ + /*}*/ + .table2 thead tr th:first-child, + .table tbody tr .tdgu{ + position: sticky; + left: 0; + z-index: 1; + } + .table tbody tr .kaitou{ + z-index: 1; + background-color: white; + } + .table tbody tr .tdgu1{ + position: sticky; + left: 150px; + z-index: 2; + } + .table tbody tr .tdgu2{ + position: sticky; + left: 300px; + z-index: 2; + } + .table tbody tr .tdgu3{ + position: sticky; + left: 450px; + z-index: 2; + } + .table tbody tr .tdgu4{ + position: sticky; + left: 550px; + z-index: 2; + } + .table tbody tr .tdgu5{ + position: sticky; + left: 700px; + z-index: 2; + } + .table2 thead tr .timeth, + .table2 thead tr .thgu { + position: sticky; + top:0; + z-index: 3; + } + .table2 thead .gudingth th{ + position: sticky; + top: 32px; + z-index: 6!important; + } + .table2 thead .equipname .name{ + z-index: 3; + } + .table2 thead .equipname .dong1{ + z-index: 4; + left: 0; + /*border: 1px solid #000;*/ + } + .table2 thead .equipname .dong2{ + z-index: 5; + left: 150px; + } + .table2 thead .equipname .dong3{ + z-index: 5; + left: 300px; + } + .table2 thead .equipname .dong4{ + z-index: 5; + left: 450px; + } + .table2 thead .equipname .dong5{ + z-index: 5; + left: 550px; + } + .table2 thead .equipname .dong6{ + z-index: 5; + left: 700px; + } + + @media screen and (min-width: 1920px){ + #Efficiency{ + height: 337px!important; + overflow: scroll; + } + } + @media screen and (min-width: 1680px) and (max-width: 1920px){ + #Efficiency{ + height: 337px!important; + overflow: scroll; + } + } + @media screen and (min-width: 1400px) and (max-width: 1680px){ + #Efficiency{ + height: 190px!important; + overflow: scroll; + } + } + @media screen and (min-width: 1280px) and (max-width: 1400px){ + #Efficiency{ + height: 90px!important; + overflow: scroll; + } + } + @media screen and (max-width: 1280px){ + #Efficiency{ + height: 90px!important; + overflow: scroll; + } + } + #Efficiency .table_guding1{ + position: absolute; + overflow: hidden; + width: 500px; + } + #Efficiency .table_guding2{ + overflow-x: scroll; + width: 500px; + } + /deep/ .ant-card{ + height: 100%!important; + } + /deep/ .ant-card .ant-card-body{ + height: 100%!important; + } + .efficiency_list #DeviceList{ + height: 90%!important; + } +</style> \ No newline at end of file diff --git a/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue b/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue index f6fd29a..0fe423b 100644 --- a/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue +++ b/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue @@ -119,6 +119,7 @@ this.queryParam.endTime = "08:00" this.queryParam.typeTree = "1" this.loadData1() + }, watch: { Type(valmath) { @@ -400,7 +401,9 @@ padding: 10px; /*display: none;*/ } - + .dataContent .mathData:hover td{ + background-color: #e6f7ff; + } .dataContent .mathData .td { /*background-color: #ff9bd2;*/ display: inline-block; diff --git a/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue b/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue index 97efeec..56024fc 100644 --- a/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue +++ b/src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue @@ -409,7 +409,9 @@ padding: 10px; /*display: none;*/ } - + .dataContent .mathData:hover td{ + background-color: #e6f7ff; + } .dataContent .mathData .td { /*background-color: #ff9bd2;*/ display: inline-block; diff --git a/src/views/mdc/base/openRateFractionAnalysis.vue b/src/views/mdc/base/openRateFractionAnalysis.vue index 26d3ed1..3d0ce5c 100644 --- a/src/views/mdc/base/openRateFractionAnalysis.vue +++ b/src/views/mdc/base/openRateFractionAnalysis.vue @@ -13,7 +13,7 @@ </a-tabs> </a-col> <a-col :md="20"> - <open-rate-fraction-analysis-main ref="EfficiencyList" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></open-rate-fraction-analysis-main> + <open-rate-fraction-analysis-main ref="openRateFractionAnalysisMain" :nodePeople='selectPeople' :nodeTree = 'selectEquement' :Type="slectTypeTree"></open-rate-fraction-analysis-main> </a-col> </a-row> </a-card> -- Gitblit v1.9.3