From b70dab217e5ebcab6d98196cc2d4b2ffb842c3a1 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期日, 08 十月 2023 17:33:34 +0800
Subject: [PATCH] 1、优化车间看板四色灯状态展示以及限制拖拽区域 2、部分页面右侧区域元素位置离顶过高，调整布局 3、增加设备日志页面增加点击表格行数据展示当前行工作曲线功能 4、优化设备日志页面切换时间，工作曲线弹窗中的时间随之切换 5、优化设备日志页面加载后首次点击工作曲线后无法查询到数据问题（同时发送异步请求，先后顺序影响）
---
src/views/mdc/base/modules/deviceLog/WorkChartModel.vue | 796 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 431 insertions(+), 365 deletions(-)
diff --git a/src/views/mdc/base/modules/deviceLog/WorkChartModel.vue b/src/views/mdc/base/modules/deviceLog/WorkChartModel.vue
index 686e4f6..aefcf42 100644
--- a/src/views/mdc/base/modules/deviceLog/WorkChartModel.vue
+++ b/src/views/mdc/base/modules/deviceLog/WorkChartModel.vue
@@ -1,6 +1,7 @@
<template>
<div ref="workChart">
- <a-modal :title="title" :getContainer="() => this.$refs.workChart" width="80%" wrap-class-name="full-modal" :footer="null" :visible="visible"
+ <a-modal :title="title" :getContainer="() => this.$refs.workChart" width="80%" wrap-class-name="full-modal"
+ :footer="null" :visible="visible"
@cancel="handleCancel" cancelText="鍏抽棴">
<div>
<div>
@@ -12,7 +13,7 @@
</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-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/>
</a-form-item>
</a-col>
<a-col :span="6">
@@ -69,166 +70,206 @@
</template>
<script>
-import moment from 'moment'
-import * as echarts from 'echarts'
-import {
- getAction,
- postAction
-} from '@/api/manage'
-import {
- duplicateCheck
-} from '@/api/api'
+ 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: {},
- data() {
- return {
- spinning:false,
- labelCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 6
- }
+ export default {
+ name: 'WorkChartModel',
+ components: {},
+ props: {
+ collectTime: {
+ type: Object
},
- wrapperCol: {
- xs: {
- span: 24
+ equipment: {
+ type: Object
+ }
+ },
+ watch: {
+ // 鐩戞帶鐖剁粍浠剁偣鍑诲乏鍙崇澶村垏鎹㈢殑鏃堕棿鍊煎皢鍏惰祴缁欑偣鍑诲伐浣滄洸绾垮悗鐨勬椂闂撮�夋嫨鍣ㄧ殑鍊�
+ collectTime: {
+ handler(newVal) {
+ this.currentToggledTime = newVal
+ }
+ }
+ },
+ data() {
+ return {
+ spinning: false,
+ labelCol: {
+ xs: {
+ span: 24
+ },
+ sm: {
+ span: 6
+ }
},
- sm: {
- span: 18
- }
+ 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')
},
- 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'
- }
- }
- },
- 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 })
+ 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)
+ }
}
- that.plainOptions = temp
- if(temp.length>0){
- that.option = [temp[0].value]
- }
- }
- })
- },
- 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
- let paramDate = moment()
- let start = moment('0:0', 'HH:mm')
- let end = moment(moment().format('HH:mm'), 'HH:mm')
- this.queryParams = {
- equipmentId: node.equipmentId,
- equipmentName: node.equipmentName,
- period: 1000,
- 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)
+ })
+ },
+ 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: node.driveType, equipmentId: node.equipmentId,
- date: _this.queryParams.paramDateStr, start: _this.queryParams.startStr,
- end: _this.queryParams.endStr, interval: _this.queryParams.period,
- codeTypeId: _this.option.join(',')
+ 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)
- })
- },
- 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'))
- }
+ 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: 1000,
+ 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',
@@ -237,7 +278,7 @@
}
},
legend: {
- data:[],
+ data: []
},
title: {
left: 'center',
@@ -252,12 +293,12 @@
saveAsImage: {}
}
},
- grid:{
- left:'8%',
- top:'10%',
- right:'2%',
- bottom:'14%',
- containLabel:true
+ grid: {
+ left: '8%',
+ top: '10%',
+ right: '2%',
+ bottom: '14%',
+ containLabel: true
},
xAxis: {
type: 'time',
@@ -265,44 +306,44 @@
},
yAxis: [
{
- yAxisIndex:0,
- type: 'value',
- offset:0,
- position:'left',
- boundaryGap: [0, '15%'],
- axisLine:{
- show:true,
- // lineStyle:{
- // color:'#000000'
- // }
- }
- },
- {
- yAxisIndex:1,
+ yAxisIndex: 0,
type: 'value',
- offset:60,
- position:'left',
+ offset: 0,
+ position: 'left',
boundaryGap: [0, '15%'],
- axisLine:{
- show:true,
+ axisLine: {
+ show: true
// lineStyle:{
// color:'#000000'
// }
}
},
{
- yAxisIndex:2,
+ yAxisIndex: 1,
type: 'value',
- offset:120,
- position:'left',
+ offset: 60,
+ position: 'left',
boundaryGap: [0, '15%'],
- axisLine:{
- show:true,
+ axisLine: {
+ show: true
// lineStyle:{
// color:'#000000'
// }
}
},
+ {
+ yAxisIndex: 2,
+ type: 'value',
+ offset: 120,
+ position: 'left',
+ boundaryGap: [0, '15%'],
+ axisLine: {
+ show: true
+ // lineStyle:{
+ // color:'#000000'
+ // }
+ }
+ }
],
dataZoom: [
{
@@ -315,211 +356,236 @@
end: 20
}
],
- series:[
+ series: [
{
- showSymbol:true,
- symbolSize:20,
- label:'show',
- name:'',
- type:'line',
- data:[],
- smooth:true,
- symbol:'none',
+ 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)
- }
- }
- 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);
-
+ 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)
}
- // option.yAxis = Yarr;
- option.series = result;
- option.legend = lengenddata;
- // console.log(option);
- _this.workChart.setOption(option,true)
- window.addEventListener('resize', function() {
- _this.workChart.resize()
- })
}
+ 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)
+
+ }
+ // 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;
+ .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;
+ }
}
- .ant-modal-content {
+
+ /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;
- height: calc(100vh);
}
- .ant-modal-body {
- flex: 1;
+
+ /deep/ .ant-checkbox-group .ant-checkbox-wrapper {
+ padding: 10px;
}
-}
-/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;
+ }
-.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;
-}
+ .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-btn {
+ padding: 0 10px;
+ margin-left: 3px;
+ }
-.ant-form-item-control {
- line-height: 0px;
-}
+ .ant-form-item-control {
+ line-height: 0px;
+ }
-/** 涓昏〃鍗曡闂磋窛 */
-.ant-form .ant-form-item {
- margin-bottom: 10px;
-}
+ /** 涓昏〃鍗曡闂磋窛 */
+ .ant-form .ant-form-item {
+ margin-bottom: 10px;
+ }
-/** Tab椤甸潰琛岄棿璺� */
-.ant-tabs-content .ant-form-item {
- margin-bottom: 0px;
-}
+ /** Tab椤甸潰琛岄棿璺� */
+ .ant-tabs-content .ant-form-item {
+ margin-bottom: 0px;
+ }
</style>
--
Gitblit v1.9.3