From ba77fdc6a30c9ad0941e40319f8c4f6fe6fdf9f1 Mon Sep 17 00:00:00 2001 From: cuilei <ray_tsu1@163.com> Date: 星期四, 07 八月 2025 10:30:42 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue | 592 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 592 insertions(+), 0 deletions(-) diff --git a/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue b/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue new file mode 100644 index 0000000..9779f63 --- /dev/null +++ b/src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue @@ -0,0 +1,592 @@ +<template> + <div ref="workChart"> + <a-modal :title="title" :getContainer="() => this.$refs.workChart" width="80%" wrap-class-name="full-modal" + :footer="null" :visible="visible" + @cancel="handleCancel" cancelText="鍏抽棴"> + <div> + <div> + <a-row :gutter="24"> + <a-col :span="6"> + <a-form-item label="璁惧缂栧彿" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input> + </a-form-item> + </a-col> + <a-col :span="6"> + <a-form-item label="鏃ユ湡" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/> + </a-form-item> + </a-col> + <a-col :span="6"> + <a-form-item label="閲囨牱鍛ㄦ湡" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input-number v-model="queryParams.period" :min="100"/> + </a-form-item> + </a-col> + </a-row> + <a-row :gutter="24"> + <a-col :span="6"> + <a-form-item label="瀹夎浣嶇疆" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-input placeholder="杈撳叆瀹夎浣嶇疆鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input> + </a-form-item> + + </a-col> + <a-col :span="10"> + <a-form-item label="鏃堕棿" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <div class="params_time"> + <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')" + v-model="queryParams.start"> + <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')"> + 纭畾 + </a-button> + </a-time-picker> + <a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')" + v-model="queryParams.end"> + <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')"> + 纭畾 + </a-button> + </a-time-picker> + </div> + </a-form-item> + </a-col> + <a-col :span="4"> + <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button> + </a-col> + </a-row> + + </div> + <div class="checkboxgroup"> + <p>缁熻鍙傛暟</p> + <div class="checkboxgroup_con"> + <a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/> + </div> + </div> + + + <a-spin :spinning="spinning"> + <div id="workChart" style="width:85%;height: 500px;"/> + </a-spin> + </div> + </a-modal> + </div> +</template> + +<script> + import moment from 'moment' + import * as echarts from 'echarts' + import { + getAction, + postAction + } from '@/api/manage' + import { + duplicateCheck + } from '@/api/api' + + export default { + name: 'WorkChartModel', + components: {}, + props: { + collectTime: { + type: Object + }, + equipment: { + type: Object + } + }, + watch: { + // 鐩戞帶鐖剁粍浠剁偣鍑诲乏鍙崇澶村垏鎹㈢殑鏃堕棿鍊煎皢鍏惰祴缁欑偣鍑诲伐浣滄洸绾垮悗鐨勬椂闂撮�夋嫨鍣ㄧ殑鍊� + collectTime: { + handler(newVal) { + this.currentToggledTime = newVal + } + } + }, + data() { + return { + spinning: false, + labelCol: { + xs: { + span: 24 + }, + sm: { + span: 6 + } + }, + wrapperCol: { + xs: { + span: 24 + }, + sm: { + span: 18 + } + }, + readOnly: true, + title: '', + plainOptions: [], + option: [], + workChart: '', + node: {}, + stratOpen: false, + endOpen: false, + visible: false, + show: false, + queryParams: {}, + panduanResult: [], + url: { + initPlainOptions: '/mdc/mdcDriveTypeParamConfig/findWorkCurveParamList', + workChart: '/mdc/mdcEquipmentRunningSection/workChart' + }, + currentToggledTime: '', + isClicklogListRow: false + } + }, + created() { + this.$bus.$on('tableRowRecord', this.getLogListRowRecord) + }, + mounted() { + + }, + methods: { + disabledDate(current) { + //Can not slect days before today and today + return current && current > moment().endOf('day') + }, + initPlainOptions(param) { + let that = this + let equipment = param.equipmentId + getAction(this.url.initPlainOptions, { equipmentId: equipment }).then((res) => { + if (res.success) { + let temp = [] + // debugger + for (var item of res.result) { + temp.push({ label: item.chineseName, value: item.id, englishName: item.englishName }) + } + that.plainOptions = temp + if (temp.length > 0) { + that.option = [temp[0].value] + } + let param = { + driveType: that.node.driveType, + equipmentId: that.node.equipmentId, + date: that.queryParams.paramDateStr, + start: that.queryParams.startStr, + end: that.queryParams.endStr, + interval: that.queryParams.period, + codeTypeId: that.option.join(',') + } + that.initChart(param) + } + }) + }, + searchQuery() { + this.queryParams.paramDateStr = this.queryParams.paramDate.format('yyyy-MM-DD') + this.queryParams.startStr = this.queryParams.start.format('HH:mm') + this.queryParams.endStr = this.queryParams.end.format('HH:mm') + let param = { + driveType: this.node.driveType, equipmentId: this.node.equipmentId, + date: this.queryParams.paramDateStr, start: this.queryParams.startStr, + end: this.queryParams.endStr, interval: this.queryParams.period, + codeTypeId: this.option.join(',') + } + this.initChart(param) + this.spinning = true + }, + timeHandleChange(val) { + if (val == 'start') { + this.stratOpen = true + } else { + this.endOpen = true + } + }, + timeHandleClose(val) { + if (val == 'start') { + this.stratOpen = false + this.endOpen = true + } else { + this.endOpen = false + } + }, + add(node) { + let _this = this + this.visible = true + this.node = node + this.spinning = true + let paramDate + let start + let end + // 褰撴病鏈夊垏鎹㈣繃鏃堕棿currentToggledTime鐨勫�间负绌哄�硷紝濡傛灉鐢变簬鐐瑰嚮宸﹀彸绠ご鍒囨崲杩囨椂闂达紝鍒檆urrentToggledTime涓哄垏鎹㈠悗鐨勬椂闂� + if (!this.currentToggledTime) { + paramDate = moment() + } else { + paramDate = this.currentToggledTime + } + // 鍒ゆ柇鏄惁鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛岀殑鏁版嵁锛岃嫢鐐瑰嚮琛ㄦ牸鏁版嵁鍒欐樉绀鸿〃鏍兼暟鎹腑鐨勬椂闂达紝鑻ョ偣鍑诲伐浣滄洸绾垮浘鐗囧垯鏄剧ず0鐐硅嚦褰撳墠鏃堕棿鏁版嵁 + if (this.isClicklogListRow) { + start = node.start + end = node.end + } else { + start = moment('0:0', 'HH:mm') + end = moment(moment().format('HH:mm'), 'HH:mm') + } + this.queryParams = { + equipmentId: node.equipmentId, + equipmentName: node.equipmentName, + period: 100, + paramDate: paramDate, + paramDateStr: paramDate.format('yyyy-MM-DD'), + start: start, + startStr: start.format('HH:mm'), + end: end, + endStr: end.format('HH:mm') + } + this.$nextTick(() => { + _this.initPlainOptions(node) + }) + }, + handleCancel() { + this.visible = false + this.stratOpen = false + this.endOpen = false + }, + checkboxOnChange(e) { + if (e.length <= 3) { + this.option = e + } else { + // this.$message.warn('鏈�澶氬彧鑳介�夋嫨3涓�') + this.$notification.warning({ + message: '娑堟伅', + description: '鏈�澶氬彧鑳介�夋嫨涓変釜' + }) + return false + } + }, + close() { + this.visible = false + this.show = false + }, + getYAxisOffset(index) { + return index * 50 + 10 + }, + initChart(param) { + if (!this.workChart) { + this.workChart = echarts.init(document.getElementById('workChart')) + } + let option = { + tooltip: { + trigger: 'axis', + position: function(pt) { + return [pt[0], '10%'] + } + }, + legend: { + data: [] + }, + title: { + left: 'center', + text: '' + }, + toolbox: { + feature: { + dataZoom: { + yAxisIndex: 'none' + }, + restore: {}, + saveAsImage: {} + } + }, + grid: { + left: '8%', + top: '10%', + right: '2%', + bottom: '14%', + containLabel: true + }, + xAxis: { + type: 'time', + boundaryGap: false + }, + yAxis: [ + { + yAxisIndex: 0, + type: 'value', + offset: 0, + position: 'left', + boundaryGap: [0, '15%'], + axisLine: { + show: true, + lineStyle:{ + color:'#5470C6' + } + } + }, + { + yAxisIndex: 1, + type: 'value', + offset: 60, + position: 'left', + boundaryGap: [0, '15%'], + axisLine: { + show: true, + lineStyle:{ + color:'#91CC75' + } + } + }, + { + yAxisIndex: 2, + type: 'value', + offset: 120, + position: 'left', + boundaryGap: [0, '15%'], + axisLine: { + show: true, + lineStyle:{ + color:'#FAC858' + } + } + } + ], + dataZoom: [ + { + type: 'inside', + start: 0, + end: 20 + }, + { + start: 0, + end: 20 + } + ], + series: [ + { + showSymbol: true, + symbolSize: 20, + label: 'show', + name: '', + type: 'line', + data: [], + smooth: true, + symbol: 'none' + } + ] + } + let _this = this + let temp = [] + for (let i = 0; i < this.plainOptions.length; i++) { + let item = this.plainOptions[i] + if (this.option.indexOf(item.value) > -1) { + temp.push(item) + } + } + console.log('temp',temp) + getAction(this.url.workChart, param).then((res) => { + if (JSON.stringify(res.result) == '[]' || res.result == null) { + // this.$message.warning('鏃犳暟鎹紒') + this.$notification.warning({ + message: '娑堟伅', + description: '鏃犳暟鎹�!' + }) + this.spinning = false + _this.workChart.setOption(option, true) + } else { + this.spinning = false + // debugger + let result = [] + let itemLine = [] + //y杞存暟缁� + var Yarr = [] + var lengenddata = [] + for (let i = 0; i < temp.length; i++) { + let item = temp[i] + itemLine = [] + for (let m = 0; m < res.result.length; m++) { + let d = [] + d.push(res.result[m].collectTime) + // debugger + d.push(res.result[m][item.englishName]) + itemLine.push(d) + } + var lll = { + name: item.label + } + lengenddata.push(lll) + var Yline = { + name: item.label, + type: 'value', + yAxisIndex: i, + boundaryGap: [0, '100%'] + } + Yarr.push(Yline) + var line = { + name: item.label, + type: 'line', + // areaStyle:{}, + smooth: true, + symbol: 'circle', + symbolSize: 10, + yAxisIndex: i, + data: itemLine + } + result.push(line) + + } + console.log('result===========',result) + console.log('legend=============',lengenddata) + // option.yAxis = Yarr; + option.series = result + option.legend = lengenddata + // console.log(option); + _this.workChart.setOption(option, true) + window.addEventListener('resize', function() { + _this.workChart.resize() + }) + } + + }) + }, + /** + * 鑾峰彇鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛屽悗浠庡厔寮熺粍浠朵紶鏉ョ殑鏃堕棿瀵硅薄 + * @param timeObj 褰撳墠琛岀殑寮�濮嬫椂闂翠笌缁撴潫鏃堕棿缁勬垚鐨勫璞� + */ + getLogListRowRecord(timeObj) { + // 鍒ゆ柇鏄惁鐐瑰嚮璁惧鏃ュ織琛ㄦ牸琛岀殑鏁版嵁锛屾鏃朵负鐐瑰嚮琛ㄦ牸鏁版嵁涓簍rue + this.isClicklogListRow = true + // 鍚堝苟鐖剁粍浠朵紶鏉ョ殑褰撳墠璁惧淇℃伅瀵硅薄涓庡厔寮熺粍浠朵紶鏉ョ殑褰撳墠琛岀殑鏃堕棿瀵硅薄 + const newQueryParams = Object.assign(this.equipment, timeObj) + this.add(newQueryParams) + this.title = '宸ヤ綔鏇茬嚎' + } + } + } +</script> + +<style scoped lang="less"> + .full-modal { + .ant-modal { + max-width: 100%; + top: 0; + padding-bottom: 0; + margin: 0; + } + .ant-modal-content { + display: flex; + flex-direction: column; + height: calc(100vh); + } + .ant-modal-body { + flex: 1; + } + } + + /deep/ .ant-modal { + /*background-color: #000;*/ + /*color: #fff;*/ + } + + /deep/ .ant-modal-header { + /*background-color: #000;*/ + } + + /deep/ .ant-modal-title { + /*color: #fff;*/ + } + + /deep/ .ant-modal-close { + color: #1191b0; + font-size: 24px; + } + + /deep/ .ant-modal-content { + /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/ + /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/ + /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ + /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ + /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ + /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/ + /*background-color: #000;*/ + /*color: #fff;*/ + position: relative; + } + + /deep/ .ant-modal-header { + /*border-bottom: none!important;*/ + } + + /deep/ .ant-checkbox-wrapper { + /*color: #fff;*/ + } + + /deep/ .ant-form-item-label label { + /*color: #fff;*/ + } + + /deep/ .ant-btn { + /*position: absolute;*/ + + } + + .checkboxgroup { + position: absolute; + right: 5%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + /deep/ .ant-checkbox-group { + display: flex; + flex-direction: column; + } + + /deep/ .ant-checkbox-group .ant-checkbox-wrapper { + padding: 10px; + } + + .con_btn { + display: flex; + align-items: center; + } + + .workChart_params { + display: flex; + /*align-items: center;*/ + flex-direction: column; + float: left; + } + + .workChart_params .params_one { + display: flex; + justify-content: space-between; + } + + .workChart_params .params_two { + display: flex; + justify-content: space-between; + } + + /deep/ .workChart_params .ant-form-item { + display: flex; + } + + /deep/ .workChart_params .ant-form-item .ant-form-item-control-wrapper { + margin: 0 10px; + } + + .ant-btn { + padding: 0 10px; + margin-left: 3px; + } + + .ant-form-item-control { + line-height: 0px; + } + + /** 涓昏〃鍗曡闂磋窛 */ + .ant-form .ant-form-item { + margin-bottom: 10px; + } + + /** Tab椤甸潰琛岄棿璺� */ + .ant-tabs-content .ant-form-item { + margin-bottom: 0px; + } +</style> -- Gitblit v1.9.3