From 2d93721c3758621a6b9a7eff038a8d6eac4fda24 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 26 六月 2025 15:30:26 +0800
Subject: [PATCH] 1、调整设备打卡率页面查询区域样式 2、对比分析页面新增图表数据加载提示以及优化整体页面图表展示及代码 3、调整班次班制管理页面左侧新增班制后刷新列表逻辑以及右侧配置按钮展示条件
---
src/views/mdc/base/EfficiencyPunchReport.vue | 250 ++---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue | 273 ++----
src/views/mdc/base/ContrastiveAnalysis.vue | 45
/dev/null | 214 -----
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue | 732 +++++++++---------
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue | 526 +++---------
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue | 128 +-
src/mixins/JeecgListMixin.js | 1
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 10
src/views/mdc/base/modules/shift/ShiftSystem.vue | 156 ++-
src/views/mdc/base/modules/shift/ShiftInfo.vue | 2
11 files changed, 885 insertions(+), 1,452 deletions(-)
diff --git a/src/mixins/JeecgListMixin.js b/src/mixins/JeecgListMixin.js
index 4d7ebe2..f19dddc 100644
--- a/src/mixins/JeecgListMixin.js
+++ b/src/mixins/JeecgListMixin.js
@@ -380,6 +380,7 @@
this.loadData()
} else {
// this.$message.error(`${info.file.name} ${info.file.response.message}.`);
+ this.loading = false
this.$notification.error({
message:'娑堟伅',
description:`${info.file.name} ${info.file.response.message}.`
diff --git a/src/views/mdc/base/ContrastiveAnalysis.vue b/src/views/mdc/base/ContrastiveAnalysis.vue
index 5688466..96dbcf8 100644
--- a/src/views/mdc/base/ContrastiveAnalysis.vue
+++ b/src/views/mdc/base/ContrastiveAnalysis.vue
@@ -1,6 +1,6 @@
<template>
<a-card :bordered="false">
- <div style="width: 100%; height: 100%;overflow: hidden">
+ <div>
<a-row type="flex" :gutter="16">
<a-col :md="5">
<a-tabs :activeKey="activeKey" @change="tabChange">
@@ -13,7 +13,8 @@
</a-tabs>
</a-col>
<a-col :md="24-5" :sm="24">
- <ComparativeAnalysisMain ref="ComparativeAnalysisMain" :nodeTree='selectEquement' :nodePeople='selectPeople' :Type="slectTypeTree"></ComparativeAnalysisMain>
+ <ComparativeAnalysisMain ref="ComparativeAnalysisMain" :nodeTree='selectEquipment' :nodePeople='selectPeople'
+ :Type="selectTypeTree"/>
</a-col>
</a-row>
</div>
@@ -24,10 +25,11 @@
import BaseTree from '../common/BaseTree'
import ComparativeAnalysisMain from './modules/comparativeAnalysis/ComparativeAnalysisMain'
import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
- import {mapActions} from 'vuex'
+ import { mapActions } from 'vuex'
+
export default {
name: 'comparativeAnalysis',
- components:{
+ components: {
BaseTree,
ComparativeAnalysisMain,
DepartTree
@@ -35,15 +37,11 @@
data() {
return {
activeKey: '1',
- description: '璁惧淇℃伅',
- selectEquementId: '',
- selectEquement: {},
- selectPeople:{},
- slectTypeTree: '',
- url: {
- equipmentStatistics: '/mdc/equipment/equipmentStatistics'
- },
- isDepartType:'',
+ selectEquipmentId: '',
+ selectEquipment: {},
+ selectPeople: {},
+ selectTypeTree: '',
+ isDepartType: ''
}
},
created() {
@@ -56,31 +54,26 @@
if (res.success) {
this.isDepartType = res.result[0].value
} else {
- // this.$message.warn(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
- }).finally(() =>{
+ }).finally(() => {
})
},
tabChange(val) {
// console.log(val)
this.activeKey = val
- this.slectTypeTree = val
+ this.selectTypeTree = val
},
- /* changeSelection(val) {
- this.selectEquementId = val
- this.$refs.DeviceRepairList.pQuery(val)
- },*/
changeSelectionNode(val) {
- this.selectEquement = val
- this.slectTypeTree = '1'
+ this.selectEquipment = val
+ this.selectTypeTree = '1'
},
changeSelectionNodedd(val) {
this.selectPeople = val
- this.slectTypeTree = '2'
+ this.selectTypeTree = '2'
}
}
}
diff --git a/src/views/mdc/base/EfficiencyPunchReport.vue b/src/views/mdc/base/EfficiencyPunchReport.vue
index e90b63d..a67850d 100644
--- a/src/views/mdc/base/EfficiencyPunchReport.vue
+++ b/src/views/mdc/base/EfficiencyPunchReport.vue
@@ -5,23 +5,23 @@
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
- <a-col :xl="6" :lg="7" :md="8" :sm="24">
+ <a-col :xl="4" :lg="5" :md="6" :sm="24">
<a-form-item label="璁板綍鏃堕棿">
- <a-date-picker format="YYYY-MM-DD" :allowClear="false" v-model="queryParam.theDate"
- @change="dateParamChange"></a-date-picker>
+ <a-date-picker value-format="YYYYMMDD" :allowClear="false" v-model="queryParam.theDate"
+ style="width: 100%"/>
</a-form-item>
</a-col>
- <a-col :xl="6" :lg="7" :md="8" :sm="24">
+ <a-col :xl="4" :lg="5" :md="6" :sm="24">
<a-form-item label="鐝">
<j-dict-select-tag v-model="queryParam.shiftSchedule" dictCode="shift_schedule"
placeholder="璇烽�夋嫨鐝"></j-dict-select-tag>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+ <a-space>
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button>
- </span>
+ <a-button type="info" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-space>
</a-col>
</a-row>
</a-form>
@@ -30,7 +30,6 @@
<!-- 鎿嶄綔鎸夐挳鍖哄煙 -->
<div class="table-operator">
<a-button type="primary" icon="download" @click="handleExportXls('璁惧鎵撳崱鐜囨姤琛�')">瀵煎嚭</a-button>
-
</div>
<!-- table鍖哄煙-begin -->
@@ -59,158 +58,107 @@
</a-table>
</div>
<!-- table鍖哄煙-end -->
- <efficiency-punch-report-modal ref="modalForm" @ok="modalFormOk"></efficiency-punch-report-modal>
</a-card>
</template>
<script>
-import '@/assets/less/TableExpand.less'
+ import moment from 'moment'
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import EfficiencyPunchReportModal from '@views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue'
-
-export default {
- name: 'EfficiencyPunchReport',
- mixins: [JeecgListMixin],
- components: {
- EfficiencyPunchReportModal
- },
- data() {
- return {
- queryParam: {
- theDate: this.formatDate(new Date(new Date().setDate(new Date().getDate() - 1))), // 榛樿璁剧疆涓烘槰澶�
- shiftSchedule: ''
- },
-
- dataSource: [], // 纭繚鍒濆鍖栦负绌烘暟缁�
- description: '璁惧鎵撳崱鐜�',
- // 琛ㄥご
- columns: [
- {
- title: '#',
- dataIndex: '',
- key: 'rowIndex',
- width: 60,
- align: 'center',
- customRender: function(t, r, index) {
- return parseInt(index) + 1
- }
+ export default {
+ name: 'EfficiencyPunchReport',
+ mixins: [JeecgListMixin],
+ data() {
+ return {
+ queryParam: {
+ theDate: moment().add(-1, 'days').format('YYYYMMDD') // 榛樿璁剧疆涓烘槰澶�
},
-
- {
- title: '璁板綍鏃堕棿',
- align: 'center',
- dataIndex: 'theDate'
- },
- {
- title: '鐝',
- align: 'center',
- dataIndex: 'shiftSchedule_dictText'
- },
-
- {
- title: '鏃╃彮涓婄彮鎵撳崱璁惧鏁伴噺',
- align: 'center',
- dataIndex: 'mornShiftInNum'
- },
- {
- title: '鏃╀笅鐝墦鍗¤澶囨暟閲�',
- align: 'center',
- dataIndex: 'mornShiftOutNum'
- },
- {
- title: '鏅氱彮涓婄彮鎵撳崱璁惧鏁伴噺',
- align: 'center',
- dataIndex: 'evenShiftInNum'
- },
- {
- title: '鏅氱彮涓嬬彮鎵撳崱璁惧鏁伴噺',
- align: 'center',
- dataIndex: 'evenShiftOutNum'
- },
- {
- title: '璁惧鎬绘暟',
- align: 'center',
- dataIndex: 'deviceCountNum'
- },
- {
- title: '鏃╃彮涓婄彮鎵撳崱鐜�(%)',
- align: 'center',
- dataIndex: 'mornShiftInRate'
- },
- {
- title: '鏃╃彮涓嬬彮鎵撳崱鐜�(%)',
- align: 'center',
- dataIndex: 'mornShiftOutRate'
-
- },
- {
- title: '鏅氱彮涓婄彮鎵撳崱鐜�(%)',
- align: 'center',
- dataIndex: 'evenShiftInRate',
- customRender: (text) => {
- if (text !== null && text !== undefined) {
- return parseFloat(text).toFixed(2);
+ description: '璁惧鎵撳崱鐜�',
+ // 琛ㄥご
+ columns: [
+ {
+ title: '#',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function(t, r, index) {
+ return parseInt(index) + 1
}
- return text;
+ },
+ {
+ title: '璁板綍鏃堕棿',
+ align: 'center',
+ dataIndex: 'theDate'
+ },
+ {
+ title: '鐝',
+ align: 'center',
+ dataIndex: 'shiftSchedule_dictText'
+ },
+ {
+ title: '鏃╃彮涓婄彮鎵撳崱璁惧鏁伴噺',
+ align: 'center',
+ dataIndex: 'mornShiftInNum'
+ },
+ {
+ title: '鏃╀笅鐝墦鍗¤澶囨暟閲�',
+ align: 'center',
+ dataIndex: 'mornShiftOutNum'
+ },
+ {
+ title: '鏅氱彮涓婄彮鎵撳崱璁惧鏁伴噺',
+ align: 'center',
+ dataIndex: 'evenShiftInNum'
+ },
+ {
+ title: '鏅氱彮涓嬬彮鎵撳崱璁惧鏁伴噺',
+ align: 'center',
+ dataIndex: 'evenShiftOutNum'
+ },
+ {
+ title: '璁惧鎬绘暟',
+ align: 'center',
+ dataIndex: 'deviceCountNum'
+ },
+ {
+ title: '鏃╃彮涓婄彮鎵撳崱鐜�(%)',
+ align: 'center',
+ dataIndex: 'mornShiftInRate'
+ },
+ {
+ title: '鏃╃彮涓嬬彮鎵撳崱鐜�(%)',
+ align: 'center',
+ dataIndex: 'mornShiftOutRate'
+ },
+ {
+ title: '鏅氱彮涓婄彮鎵撳崱鐜�(%)',
+ align: 'center',
+ dataIndex: 'evenShiftInRate',
+ customRender: (text) => {
+ if (text !== null && text !== undefined) {
+ return parseFloat(text).toFixed(2)
+ }
+ return text
+ }
+ },
+ {
+ title: '鏅氱彮涓嬬彮鎵撳崱鐜�(%)',
+ align: 'center',
+ dataIndex: 'evenShiftOutRate'
+ },
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ align: 'center',
+ scopedSlots: { customRender: 'action' }
}
- },
- {
- title: '鏅氱彮涓嬬彮鎵撳崱鐜�(%)',
- align: 'center',
- dataIndex: 'evenShiftOutRate'
- },
- {
- title: '鎿嶄綔',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: { customRender: 'action' }
- }
- ],
- url: {
- list: '/mdcEquipmentPunchRate/queryPageList',
- exportXlsUrl: '/mdcEquipmentPunchRate/exportXls'
- }
- }
- },
- methods: {
- searchQuery() {
- if (this.queryParam.theDate) {
- // 纭繚 queryParam.recordDate 鏄竴涓湁鏁堢殑 Date 瀵硅薄
- const date = new Date(this.queryParam.recordDate)
- if (!isNaN(date.getTime())) { // 妫�鏌ユ槸鍚︿负鏈夋晥鏃ユ湡
- const formattedDate = this.formatDate(date)
- this.queryParam.theDate = formattedDate
- console.log('Formatted theDate:', this.queryParam.theDate) // 楠岃瘉鏍煎紡
- } else {
- console.error('Invalid date format')
+ ],
+ url: {
+ list: '/mdcEquipmentPunchRate/queryPageList',
+ exportXlsUrl: '/mdcEquipmentPunchRate/exportXls'
}
}
-
- this.loadData()
},
-
- formatDate(date) {
- const year = date.getFullYear()
- const month = String(date.getMonth() + 1).padStart(2, '0')
- const day = String(date.getDate()).padStart(2, '0')
- return `${year}${month}${day}`
- },
-
- dateParamChange(value) {
- // value 鏄竴涓椂鍒诲璞★紙moment object锛夛紝闇�瑕佽浆鎹负 Date 瀵硅薄
- if (value) {
- const date = value.toDate() // 杞崲涓� Date 瀵硅薄
- const formattedDate = this.formatDate(date)
- this.queryParam.theDate = formattedDate
- } else {
- this.queryParam.theDate = null
- }
- }
-
}
-}
-</script>
-<style scoped>
-@import '~@assets/less/common.less';
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue b/src/views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue
deleted file mode 100644
index 9924fae..0000000
--- a/src/views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<template>
- <a-modal :title="title" :width="1500" :height="1500" :visible="visible" :maskClosable="false"
- cancelText="鍏抽棴"
- @cancel="handleCancel" :confirmLoading="confirmLoading">
-
- <a-spin :spinning="confirmLoading">
- <a-form :form="form">
- <a-row>
- <a-col :span="12">
- <a-form-model-item label="璁板綍鏃ユ湡" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="theDate">
- <a-input :disabled="true" v-model="model.theDate" placeholder="璇疯緭鍏ヨ褰曟棩鏈�"></a-input>
- </a-form-model-item>
- </a-col>
-
- <a-col :span="12">
- <a-form-model-item label="鐝" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shiftSchedule">
- <j-dict-select-tag dictCode="shift_schedule" placeholder="璇烽�夋嫨鐝" v-model="model.shiftSchedule"
- :disabled="disableSubmit" />
- </a-form-model-item>
- </a-col>
-
- <a-col :span="12">
- <a-form-model-item label="鏃╃彮涓婄彮鎵撳崱鐜�" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="mornShiftInRate">
- <a-input v-model="model.mornShiftInRate" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="鏃╃彮涓嬬彮鎵撳崱鐜�" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="mornShiftOutRate">
- <a-input v-model="model.mornShiftOutRate" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="鏅氱彮涓婄彮鎵撳崱鐜�" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="evenShiftInRate">
- <a-input v-model="model.evenShiftInRate" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item v-show="addShow" label="鏅氱彮涓嬬彮鎵撳崱鐜�" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="evenShiftOutRate">
- <a-input v-model="model.evenShiftOutRate" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item v-show="addShow" label="鏃╃彮涓婄彮鎵撳崱璁惧鏁伴噺" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="mornShiftInDeviceNum">
- <a-input v-model="model.mornShiftInNum" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item v-show="addShow" label="鏃╀笅鐝墦鍗¤澶囨暟閲�" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="mornShiftOutNum">
- <a-input v-model="model.mornShiftOutNum" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item v-show="addShow" label="鏅氱彮涓婄彮鎵撳崱璁惧鏁伴噺" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="evenShiftInNum">
- <a-input v-model="model.evenShiftInNum" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item v-show="addShow" label="鏅氫笅鐝墦鍗¤澶囨暟閲�" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="evenShiftOutNum">
- <a-input v-model="model.evenShiftOutNum" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item v-show="addShow" label="璁惧鎬绘暟" :labelCol="labelCol" :wrapperCol="wrapperCol"
- prop="deviceCountNum">
- <a-input v-model="model.deviceCountNum" placeholder="璇疯緭鍏�"></a-input>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form>
- </a-spin>
-
- <template slot="footer">
- <a-button :style="{ marginRight: '8px' }" @click="handleCancel()">
- 鍏抽棴
- </a-button>
-
-<!-- <a-button @click="handleOk()" :disabled="disableSubmit" type="primary" :loading="confirmLoading">纭畾</a-button>-->
- </template>
- </a-modal>
-
-</template>
-
-<script>
-import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
-import Tooltip from 'ant-design-vue/es/tooltip'
-
-export default {
- name: 'EfficiencyPunchReportModal',
- components: {
- JMultiSelectTag,
- Tooltip
- },
- data() {
-
- return {
- addShow: true,
- model: {},
- formDisabled: false,
- pagination: {
- current: 1,
- pageSize: 10,
- total: 0
- },
-
- title: '鎿嶄綔',
- visible: false,
- disableSubmit: false,
- codeDisable: true,
-
- labelCol: {
- xs: { span: 24 },
- sm: { span: 6 }
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 18 }
- },
- confirmLoading: false,
- form: this.$form.createForm(this),
- validatorRules: {
- // orderCode: [
- // { required: true, message: '璇疯緭鍏ョ洏鐐瑰崟鍙�!' }
- // ],
- // handler: [
- // { required: true, message: '璇疯緭鍏ョ粡鎵嬩汉!' }
- // ],
- // stocktakingName: [
- // { required: true, message: '璇疯緭鍏ョ洏鐐瑰悕绉�!' }
- // ],
- // approvalStatus: [
- // { required: true, message: '璇疯緭鍏ュ鏍哥姸鎬�!' }
- // ],
- // inventoryTime: [
- // { required: true, message: '璇疯緭鍏ョ洏鐐规椂闂�!' }
- // ]
- },
- url: {
-
-
-
- },
- dataSource: []
- }
- },
-
- mounted() {
-
- },
-
- methods: {
-
- add() {
- this.addShow = false
- this.edit()
- },
-
- edit(record) {
- this.model = Object.assign({}, record)
- this.visible = true
- },
-
-
-
- close() {
- this.$emit('close')
- this.visible = false
- },
-
- handleCancel() {
- this.model = {}
- this.dataSource = []
- this.close()
- },
- }
-
-}
-</script>
-
-<style lang="less" scoped>
-.frozenRowClass {
- color: #c9c9c9;
-}
-
-.fontweight {
- font-weight: bold;
-}
-
-.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>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
index b75ed56..2af7c5d 100644
--- a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
+++ b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
@@ -27,7 +27,7 @@
</div>
<a-spin :spinning="spinning">
- <!--寮�鏈虹巼-->
+ <!--鍒╃敤鐜�-->
<div class="PowerOnRate Line-box">
<div class="title">
<div class="circle"></div>
@@ -38,7 +38,7 @@
<div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
</div>
</div>
- <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼-->
+ <!--寮�鏈虹巼鍜屽紑鍔ㄧ巼-->
<div class="UtilizationStartup">
<div class="Utilization Line-box">
<div class="title">
@@ -634,13 +634,13 @@
}
#StatisticsLegend .PowerOnRate {
- flex: 1;
+ height: 50%;
margin-bottom: 15px;
background-color: #fff;
}
#StatisticsLegend .UtilizationStartup {
- flex: 1;
+ height: 50%;
display: flex;
}
@@ -690,7 +690,7 @@
}
.PowerOnRate-box .PowerOnRate-right {
- flex: 1;
+ width: 75%;
}
.Utilization-box {
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
index 2cedc86..b8e1c50 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisBar.vue
@@ -1,51 +1,52 @@
<template>
- <div class="comparative_Bar" style="width: 100%;height: 900px;display: flex;flex-direction: column;overflow: scroll">
- <div id="compAnalBar1" style="flex: 1;"></div>
- <div id="compAnalBar2" style="flex: 1;"></div>
- </div>
+ <div style="height: 100%;overflow: auto">
+ <div id="compAnalBar1" style="height: 400px"></div>
+ <div id="compAnalBar2" style="height: 400px"></div>
+ </div>
</template>
<script>
import * as echarts from 'echarts'
+
export default {
name: 'comparativeAnalysisBar',
- props:{
- dataList:''
+ props: {
+ dataList: ''
},
- data(){
- return{
- OpenCloseList:[],
- openRate:[],
- utilizationRate:[],
- openLong:[],
- closeLong:[],
- equipmentList:[]
+ data() {
+ return {
+ OpenCloseList: [],
+ openRate: [],
+ utilizationRate: [],
+ openLong: [],
+ closeLong: [],
+ equipmentList: []
}
},
- created(){
+ created() {
},
- watch:{
- dataList(val){
+ watch: {
+ dataList(val) {
this.OpenCloseList = val
this.drawTu()
- },
+ }
},
mounted() {
this.drawTu()
},
- methods:{
- drawTu(){
- let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons');
- let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons');
- let compAnalBarOption1 = {
+ methods: {
+ drawTu() {
+ let compAnalBar1 = this.$echarts.init(document.getElementById('compAnalBar1'), 'macarons')
+ let compAnalBar2 = this.$echarts.init(document.getElementById('compAnalBar2'), 'macarons')
+ let compAnalBarOption1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
textStyle: {
- color: "#fff"
+ color: '#fff'
}
}
@@ -60,48 +61,42 @@
data: ['寮�鏈虹巼', '鍒╃敤鐜�']
},
toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true,name:'璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�'}
+ show: true,
+ feature: {
+ mark: { show: true },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true, name: '璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�' }
}
},
calculable: true,
grid: {
borderWidth: 0,
top: 110,
- bottom: 95,
+ bottom: 110,
textStyle: {
- color: "#fff"
+ color: '#fff'
}
},
xAxis: [
{
type: 'category',
splitLine: {
- "show": false
+ 'show': false
},
axisTick: {
- "show": false
+ 'show': false
},
splitArea: {
show: false
},
- boundaryGap : true,
- axisLabel : {
- interval : 0,
- rotate : 0,
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ rotate: 45,
show: true,
- wigth:20,
- splitNumber: 8,
- textStyle: {
- fontFamily: "寰蒋闆呴粦",
- fontSize: 12
- }
},
- data : [0]
+ data: [0]
}
],
yAxis: [
@@ -137,14 +132,14 @@
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
- color: "#d3dee5"
+ color: '#d3dee5'
},
textStyle: {
- color: "#fff"
+ color: '#fff'
},
- borderColor: "#90979c"
+ borderColor: '#90979c'
}, {
- type: "inside",
+ type: 'inside',
show: true,
height: 15,
start: 1,
@@ -160,274 +155,80 @@
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:'#6496e9'
+ ['#6496e9', '#6bded3']
+ ]
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#6496e9'
},
{
- offset:1,
- color:"#6bded3"
- }],false)
+ offset: 1,
+ color: '#6bded3'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- // barCategoryGap: '20%',
- // barGap : '-10%',
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
},
{
name: '鍒╃敤鐜�',
type: 'bar',
- //barWidth: 30,
barWidth: 25,
- // barCategoryGap: '20%',
- // barGap : '-10%',
itemStyle: {
normal: {
color: function(params) {
let colorList = [
- // ["#6496e9","#6bded3"],
- // ["#849db8","#b4b8cc"],
- ["#4fe1c5","#4ecee1"],
- // ["#9978fa","#88a1fa"],
- // ["#ffbb65","#fdc68b"],
- ];
+ ['#4fe1c5', '#4ecee1']
+ ]
// return colorList[params.dataIndex];
- let colorItem = colorList[params.dataIndex];
- return new echarts.graphic.LinearGradient(0,0,0,1,[{
- offset:0,
- color:"#4fe1c5"
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#4fe1c5'
},
{
- offset:1,
- color:"#4ecee1"
- }],false)
+ offset: 1,
+ color: '#4ecee1'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
}
]
- };
- // let compAnalBarOption2 = {
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: "shadow",
- // textStyle: {
- // color: "#fff"
- // }
- //
- // }
- // },
- // legend: {
- // x: '4%',
- // top: '11%',
- // textStyle: {
- // color: '#90979c'
- // },
- // data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿'],
- // color:['#6496e9','#b4b8cc']
- // },
- // toolbox: {
- // show : true,
- // feature : {
- // mark : {show: true},
- // magicType : {show: true, type: ['line', 'bar']},
- // restore : {show: true},
- // saveAsImage : {show: true,name:'璁惧杩愯鏃堕棿瀵规瘮鍒嗘瀽鍥�'}
- // }
- // },
- // calculable: true,
- // grid: {
- // borderWidth: 0,
- // top: 110,
- // bottom: 95,
- // textStyle: {
- // color: "#fff"
- // }
- // },
- // xAxis: [
- // {
- // type: 'category',
- // splitLine: {
- // "show": false
- // },
- // axisTick: {
- // "show": false
- // },
- // splitArea: {
- // show: false
- // },
- // boundaryGap : true,
- // axisLabel : {
- // interval : 0,
- // rotate : 0,
- // show: true,
- // wigth:20,
- // splitNumber: 8,
- // textStyle: {
- // fontFamily: "寰蒋闆呴粦",
- // fontSize: 12
- // }
- // },
- // data : [0]
- // }
- // ],
- // yAxis: [
- // {
- // type: 'value',
- // splitLine: {
- // show: false
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#90979c'
- // }
- // },
- // axisTick: {
- // show: false
- // },
- // axisLabel: {
- // interval: 0
- //
- // },
- // splitArea: {
- // show: false
- // }
- // }
- // ],
- // dataZoom: [{
- // show: true,
- // height: 30,
- // xAxisIndex: [0],
- // bottom: 30,
- // start: 0,
- // end: 100,
- // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
- // handleSize: '110%',
- // handleStyle: {
- // color: "#d3dee5"
- // },
- // textStyle: {
- // color: "#fff"
- // },
- // borderColor: "#90979c"
- // }, {
- // type: "inside",
- // show: true,
- // height: 15,
- // start: 1,
- // end: 35
- // }],
- // series: [
- // {
- // name: '寮�鏈烘椂闂�',
- // type: 'bar',
- // //barWidth: 30,
- // barWidth: 25,
- // // stack: 'sum',
- // // barCategoryGap: '20%',
- // 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:'#6496e9'
- // },
- // {
- // offset:1,
- // color:"#6bded3"
- // }],false)
- // },
- // barBorderRadius: [5, 5, 0, 0],
- // }
- // },
- // data: [0]
- // },
- // {
- // name: '鍏虫満鏃堕棿',
- // type: 'bar',
- // //barWidth: 30,
- // barWidth: 25,
- // // stack: 'sum',
- // // barCategoryGap: '20%',
- // 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:'#849db8'
- // },
- // {
- // offset:1,
- // color:"#b4b8cc"
- // }],false)
- // },
- // barBorderRadius: [5, 5, 0, 0],
- // }
- // },
- // data: [0]
- // }
- // ]
- // };
+ }
let compAnalBarOption2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
- type: "shadow",
+ type: 'shadow',
textStyle: {
- color: "#fff"
+ color: '#fff'
}
}
@@ -438,52 +239,46 @@
textStyle: {
color: '#90979c'
},
- color:['#6496e9','#b4b8cc'],
+ color: ['#6496e9', '#b4b8cc'],
data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿']
},
toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true,name:'璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�'}
+ show: true,
+ feature: {
+ mark: { show: true },
+ magicType: { show: true, type: ['line', 'bar'] },
+ restore: { show: true },
+ saveAsImage: { show: true, name: '璁惧杩愯鏁堢巼瀵规瘮鍒嗘瀽鍥�' }
}
},
calculable: true,
grid: {
borderWidth: 0,
top: 110,
- bottom: 95,
+ bottom: 110,
textStyle: {
- color: "#fff"
+ color: '#fff'
}
},
xAxis: [
{
type: 'category',
splitLine: {
- "show": false
+ 'show': false
},
axisTick: {
- "show": false
+ 'show': false
},
splitArea: {
show: false
},
- boundaryGap : true,
- axisLabel : {
- interval : 0,
- rotate : 0,
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ rotate: 45,
show: true,
- wigth:20,
- splitNumber: 8,
- textStyle: {
- fontFamily: "寰蒋闆呴粦",
- fontSize: 12
- }
},
- data : [0]
+ data: [0]
}
],
yAxis: [
@@ -519,14 +314,14 @@
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
- color: "#d3dee5"
+ color: '#d3dee5'
},
textStyle: {
- color: "#fff"
+ color: '#fff'
},
- borderColor: "#90979c"
+ borderColor: '#90979c'
}, {
- type: "inside",
+ type: 'inside',
show: true,
height: 15,
start: 1,
@@ -542,100 +337,84 @@
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:'#6496e9'
+ ['#6496e9', '#6bded3']
+ ]
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#6496e9'
},
{
- offset:1,
- color:"#6bded3"
- }],false)
+ offset: 1,
+ color: '#6bded3'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- // barCategoryGap: '20%',
- // barGap : '-10%',
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
},
{
name: '鍏虫満鏃堕棿',
type: 'bar',
- //barWidth: 30,
barWidth: 25,
- // barCategoryGap: '20%',
- // barGap : '-10%',
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:"#849db8"
+ ['#849db8', '#b4b8cc']
+ ]
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#849db8'
},
{
- offset:1,
- color:"#b4b8cc"
- }],false)
+ offset: 1,
+ color: '#b4b8cc'
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
},
data: [0],
- markPoint : {
- data : [
- {type : 'max', name: '鏈�澶у��',symbolSize:70},
- {type : 'min', name: '鏈�灏忓��',symbolSize:70}
+ markPoint: {
+ data: [
+ { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
+ { type: 'min', name: '鏈�灏忓��', symbolSize: 70 }
]
},
- markLine : {
- data : [
- {type : 'average', name: '骞冲潎鍊�'}
+ markLine: {
+ data: [
+ { type: 'average', name: '骞冲潎鍊�' }
]
}
}
]
- };
- if(this.OpenCloseList != null){
+ }
+ if (this.OpenCloseList != null) {
this.equipmentList = []
- this.openRate =[]
- this.utilizationRate =[]
+ this.openRate = []
+ this.utilizationRate = []
this.openLong = []
this.closeLong = []
- for(var i = 0;i<this.OpenCloseList.length;i++){
- this.equipmentList.push(this.OpenCloseList[i].equipmentId)
- this.openRate.push((this.OpenCloseList[i].openRate*100).toFixed(2))
- // (this.openRate * 100).toFixed(2)
- this.utilizationRate.push((this.OpenCloseList[i].utilizationRate*100).toFixed(2))
- this.openLong.push(this.OpenCloseList[i].openLong)
- this.closeLong.push(this.OpenCloseList[i].closeLong)
+ for (var i = 0; i < this.OpenCloseList.length; i++) {
+ this.equipmentList.push(this.OpenCloseList[i].equipmentId)
+ this.openRate.push((this.OpenCloseList[i].openRate * 100).toFixed(2))
+ this.utilizationRate.push((this.OpenCloseList[i].utilizationRate * 100).toFixed(2))
+ this.openLong.push(this.OpenCloseList[i].openLong)
+ this.closeLong.push(this.OpenCloseList[i].closeLong)
}
compAnalBarOption1.xAxis[0].data = this.equipmentList
compAnalBarOption1.series[0].data = this.openRate
@@ -643,12 +422,9 @@
compAnalBarOption2.xAxis[0].data = this.equipmentList
compAnalBarOption2.series[0].data = this.openLong
compAnalBarOption2.series[1].data = this.closeLong
- compAnalBar1.setOption(compAnalBarOption1);
- compAnalBar2.setOption(compAnalBarOption2);
- }else{
- compAnalBar1.setOption(compAnalBarOption1);
- compAnalBar2.setOption(compAnalBarOption2);
}
+ compAnalBar1.setOption(compAnalBarOption1)
+ compAnalBar2.setOption(compAnalBarOption2)
window.addEventListener('resize', function() {
compAnalBar1.resize()
compAnalBar2.resize()
@@ -656,8 +432,4 @@
}
}
}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
index 1fa304c..d01c305 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
@@ -1,9 +1,9 @@
<template>
- <div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
- <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
- <h3 style="height: 18px;margin: 0 auto;">鍒╃敤鐜� Top 5</h3>
+ <div class="outer-container">
+ <div>
+ <h3 style="margin: 0 auto;">鍒╃敤鐜� Top 5</h3>
- <div style="flex: 1;display: flex;">
+ <div style="flex: 1;display: flex">
<div id="top1Gauge" class="div-inline"></div>
<div id="top2Gauge" class="div-inline"></div>
<div id="top3Gauge" class="div-inline"></div>
@@ -11,10 +11,11 @@
<div id="top5Gauge" class="div-inline"></div>
</div>
</div>
- <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
- <h3 style="height: 18px; margin: 0 auto;">鍒╃敤鐜� Last 5</h3>
- <div style="flex: 1;display: flex;">
+ <div>
+ <h3 style="margin: 0 auto;">鍒╃敤鐜� Last 5</h3>
+
+ <div style="flex: 1;display: flex">
<div id="last1Gauge" class="div-inline"></div>
<div id="last2Gauge" class="div-inline"></div>
<div id="last3Gauge" class="div-inline"></div>
@@ -26,80 +27,79 @@
</template>
<script>
- import * as echarts from 'echarts'
export default {
name: 'comparativeAnalysisGauge',
- props:{dataList:''},
- data(){
- return{
- utilizationRateTopOne:0,
- utilizationRateTopOneEquipment:0,
- utilizationRateTopTwo:0,
- utilizationRateTopTwoEquipment:0,
- utilizationRateTopThree:0,
- utilizationRateTopThreeEquipment:0,
- utilizationRateTopFour:0,
- utilizationRateTopFourEquipment:0,
- utilizationRateTopFive:0,
- utilizationRateTopFiveEquipment:0,
- utilizationRateLastOne:0,
- utilizationRateLastOneEquipment:0,
- utilizationRateLastTwo:0,
- utilizationRateLastTwoEquipment:0,
- utilizationRateLastThree:0,
- utilizationRateLastThreeEquipment:0,
- utilizationRateLastFour:0,
- utilizationRateLastFourEquipment:0,
- utilizationRateLastFive:0,
- utilizationRateLastFiveEquipment:0,
- TopLastList:[]
+ props: { dataList: '' },
+ data() {
+ return {
+ utilizationRateTopOne: 0,
+ utilizationRateTopOneEquipment: 0,
+ utilizationRateTopTwo: 0,
+ utilizationRateTopTwoEquipment: 0,
+ utilizationRateTopThree: 0,
+ utilizationRateTopThreeEquipment: 0,
+ utilizationRateTopFour: 0,
+ utilizationRateTopFourEquipment: 0,
+ utilizationRateTopFive: 0,
+ utilizationRateTopFiveEquipment: 0,
+ utilizationRateLastOne: 0,
+ utilizationRateLastOneEquipment: 0,
+ utilizationRateLastTwo: 0,
+ utilizationRateLastTwoEquipment: 0,
+ utilizationRateLastThree: 0,
+ utilizationRateLastThreeEquipment: 0,
+ utilizationRateLastFour: 0,
+ utilizationRateLastFourEquipment: 0,
+ utilizationRateLastFive: 0,
+ utilizationRateLastFiveEquipment: 0,
+ TopLastList: []
}
},
- watch:{
- dataList(val){
- console.log(val);
+ watch: {
+ dataList(val) {
+ console.log(val)
this.TopLastList = val
this.draw()
- },
+ }
},
- mounted(){
- this.draw();
+ mounted() {
+ this.draw()
},
- methods:{
- draw(){
- let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons');
- let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons');
- let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons');
- let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons');
- let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons');
- let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons');
- let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons');
- let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons');
- let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons');
- let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons');
+ methods: {
+ draw() {
+ let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'), 'macarons')
+ let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'), 'macarons')
+ let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'), 'macarons')
+ let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'), 'macarons')
+ let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'), 'macarons')
+ let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'), 'macarons')
+ let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'), 'macarons')
+ let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'), 'macarons')
+ let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'), 'macarons')
+ let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'), 'macarons')
let gaugeTopOption1 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP1'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP1'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP1',
- type:'gauge',
+ name: 'TOP1',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -111,57 +111,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
- let gaugeTopOption2 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP2'
+ }
+ let gaugeTopOption2 = {
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP2'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP2',
- type:'gauge',
+ name: 'TOP2',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -173,57 +173,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeTopOption3 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP3'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP3'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP3',
- type:'gauge',
+ name: 'TOP3',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -235,57 +235,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeTopOption4 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP4'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP4'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP4',
- type:'gauge',
+ name: 'TOP4',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -297,57 +297,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeTopOption5 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP5'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP5'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP5',
- type:'gauge',
+ name: 'TOP5',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -359,57 +359,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption1 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST1'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST1'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST1',
- type:'gauge',
+ name: 'LAST1',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -421,57 +421,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption2 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST2'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST2'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST2',
- type:'gauge',
+ name: 'LAST2',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -483,57 +483,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption3 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST3'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST3'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST3',
- type:'gauge',
+ name: 'LAST3',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -545,57 +545,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption4 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST4'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST4'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST4',
- type:'gauge',
+ name: 'LAST4',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -607,57 +607,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption5 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST5'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST5'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST5',
- type:'gauge',
+ name: 'LAST5',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -669,148 +669,148 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
- if(this.TopLastList != null){
- this.utilizationRateTopOne=0
- this.utilizationRateTopOneEquipment = 'TOP1'
- this.utilizationRateTopTwo=0
- this.utilizationRateTopTwoEquipment = 'TOP2'
- this.utilizationRateTopThree=0
- this.utilizationRateTopThreeEquipment = 'TOP3'
- this.utilizationRateTopFour =0
- this.utilizationRateTopFourEquipment = 'TOP4'
- this.utilizationRateTopFive=0
- this.utilizationRateTopFiveEquipment = 'TOP5'
- this.utilizationRateLastOne=0
- this.utilizationRateLastOneEquipment = 'LAST1'
- this.utilizationRateLastTwo=0
- this.utilizationRateLastTwoEquipment = 'LAST2'
- this.utilizationRateLastThree=0
- this.utilizationRateLastThreeEquipment = 'LAST3'
- this.utilizationRateLastFour=0
- this.utilizationRateLastFourEquipment = 'LAST4'
- this.utilizationRateLastFive=0
- this.utilizationRateLastFiveEquipment = 'LAST5'
- if(this.TopLastList.tops){
- for(var i = 0;i<this.TopLastList.tops.length;i++){
- if(i == 0){
- this.utilizationRateTopOneEquipment=this.TopLastList.tops[0].equipmentId
- this.utilizationRateTopOne=this.TopLastList.tops[0].utilizationRate
- }else if(i == 1){
- this.utilizationRateTopTwoEquipment=this.TopLastList.tops[1].equipmentId
- this.utilizationRateTopTwo=this.TopLastList.tops[1].utilizationRate
- }else if(i == 2){
- this.utilizationRateTopThreeEquipment=this.TopLastList.tops[2].equipmentId
- this.utilizationRateTopThree=this.TopLastList.tops[2].utilizationRate
- }else if(i == 3){
- this.utilizationRateTopFourEquipment=this.TopLastList.tops[3].equipmentId
- this.utilizationRateTopFour=this.TopLastList.tops[3].utilizationRate
- }else if(i == 4){
- this.utilizationRateTopFiveEquipment=this.TopLastList.tops[4].equipmentId
- this.utilizationRateTopFive=this.TopLastList.tops[4].utilizationRate
+ }
+ if (this.TopLastList != null) {
+ this.utilizationRateTopOne = 0
+ this.utilizationRateTopOneEquipment = 'TOP1'
+ this.utilizationRateTopTwo = 0
+ this.utilizationRateTopTwoEquipment = 'TOP2'
+ this.utilizationRateTopThree = 0
+ this.utilizationRateTopThreeEquipment = 'TOP3'
+ this.utilizationRateTopFour = 0
+ this.utilizationRateTopFourEquipment = 'TOP4'
+ this.utilizationRateTopFive = 0
+ this.utilizationRateTopFiveEquipment = 'TOP5'
+ this.utilizationRateLastOne = 0
+ this.utilizationRateLastOneEquipment = 'LAST1'
+ this.utilizationRateLastTwo = 0
+ this.utilizationRateLastTwoEquipment = 'LAST2'
+ this.utilizationRateLastThree = 0
+ this.utilizationRateLastThreeEquipment = 'LAST3'
+ this.utilizationRateLastFour = 0
+ this.utilizationRateLastFourEquipment = 'LAST4'
+ this.utilizationRateLastFive = 0
+ this.utilizationRateLastFiveEquipment = 'LAST5'
+ if (this.TopLastList.tops) {
+ for (var i = 0; i < this.TopLastList.tops.length; i++) {
+ if (i == 0) {
+ this.utilizationRateTopOneEquipment = this.TopLastList.tops[0].equipmentId
+ this.utilizationRateTopOne = this.TopLastList.tops[0].utilizationRate
+ } else if (i == 1) {
+ this.utilizationRateTopTwoEquipment = this.TopLastList.tops[1].equipmentId
+ this.utilizationRateTopTwo = this.TopLastList.tops[1].utilizationRate
+ } else if (i == 2) {
+ this.utilizationRateTopThreeEquipment = this.TopLastList.tops[2].equipmentId
+ this.utilizationRateTopThree = this.TopLastList.tops[2].utilizationRate
+ } else if (i == 3) {
+ this.utilizationRateTopFourEquipment = this.TopLastList.tops[3].equipmentId
+ this.utilizationRateTopFour = this.TopLastList.tops[3].utilizationRate
+ } else if (i == 4) {
+ this.utilizationRateTopFiveEquipment = this.TopLastList.tops[4].equipmentId
+ this.utilizationRateTopFive = this.TopLastList.tops[4].utilizationRate
}
}
}
- if(this.TopLastList.lasts){
- for(var j = 0;j<this.TopLastList.lasts.length;j++){
- if(j == 0){
- this.utilizationRateLastOneEquipment=this.TopLastList.lasts[0].equipmentId
- this.utilizationRateLastOne=this.TopLastList.lasts[0].utilizationRate
- }else if(j == 1){
- this.utilizationRateLastTwoEquipment=this.TopLastList.lasts[1].equipmentId
- this.utilizationRateLastTwo=this.TopLastList.lasts[1].utilizationRate
- }else if(j == 2){
- this.utilizationRateLastThreeEquipment=this.TopLastList.lasts[2].equipmentId
- this.utilizationRateLastThree=this.TopLastList.lasts[2].utilizationRate
- }else if(j == 3){
- this.utilizationRateLastFourEquipment=this.TopLastList.lasts[3].equipmentId
- this.utilizationRateLastFour=this.TopLastList.lasts[3].utilizationRate
- }else if(j == 4){
- this.utilizationRateLastFiveEquipment=this.TopLastList.lasts[4].equipmentId
- this.utilizationRateLastFive=this.TopLastList.lasts[4].utilizationRate
+ if (this.TopLastList.lasts) {
+ for (var j = 0; j < this.TopLastList.lasts.length; j++) {
+ if (j == 0) {
+ this.utilizationRateLastOneEquipment = this.TopLastList.lasts[0].equipmentId
+ this.utilizationRateLastOne = this.TopLastList.lasts[0].utilizationRate
+ } else if (j == 1) {
+ this.utilizationRateLastTwoEquipment = this.TopLastList.lasts[1].equipmentId
+ this.utilizationRateLastTwo = this.TopLastList.lasts[1].utilizationRate
+ } else if (j == 2) {
+ this.utilizationRateLastThreeEquipment = this.TopLastList.lasts[2].equipmentId
+ this.utilizationRateLastThree = this.TopLastList.lasts[2].utilizationRate
+ } else if (j == 3) {
+ this.utilizationRateLastFourEquipment = this.TopLastList.lasts[3].equipmentId
+ this.utilizationRateLastFour = this.TopLastList.lasts[3].utilizationRate
+ } else if (j == 4) {
+ this.utilizationRateLastFiveEquipment = this.TopLastList.lasts[4].equipmentId
+ this.utilizationRateLastFive = this.TopLastList.lasts[4].utilizationRate
}
}
}
gaugeTopOption1.title.text = this.utilizationRateTopOneEquipment
- gaugeTopOption1.series[0].data = [{value : (this.utilizationRateTopOne * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption1.series[0].data = [{ value: (this.utilizationRateTopOne * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeTopOption2.title.text = this.utilizationRateTopTwoEquipment
- gaugeTopOption2.series[0].data = [{value : (this.utilizationRateTopTwo * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption2.series[0].data = [{ value: (this.utilizationRateTopTwo * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeTopOption3.title.text = this.utilizationRateTopThreeEquipment
- gaugeTopOption3.series[0].data = [{value : (this.utilizationRateTopThree * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption3.series[0].data = [{ value: (this.utilizationRateTopThree * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeTopOption4.title.text = this.utilizationRateTopFourEquipment
- gaugeTopOption4.series[0].data = [{value : (this.utilizationRateTopFour * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption4.series[0].data = [{ value: (this.utilizationRateTopFour * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeTopOption5.title.text = this.utilizationRateTopFiveEquipment
- gaugeTopOption5.series[0].data = [{value : (this.utilizationRateTopFive * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption5.series[0].data = [{ value: (this.utilizationRateTopFive * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeLessOption1.title.text = this.utilizationRateLastOneEquipment
- gaugeLessOption1.series[0].data = [{value : (this.utilizationRateLastOne * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption1.series[0].data = [{ value: (this.utilizationRateLastOne * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeLessOption2.title.text = this.utilizationRateLastTwoEquipment
- gaugeLessOption2.series[0].data = [{value : (this.utilizationRateLastTwo * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption2.series[0].data = [{ value: (this.utilizationRateLastTwo * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeLessOption3.title.text = this.utilizationRateLastThreeEquipment
- gaugeLessOption3.series[0].data = [{value : (this.utilizationRateLastThree * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption3.series[0].data = [{ value: (this.utilizationRateLastThree * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeLessOption4.title.text = this.utilizationRateLastFourEquipment
- gaugeLessOption4.series[0].data = [{value : (this.utilizationRateLastFour * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption4.series[0].data = [{ value: (this.utilizationRateLastFour * 100).toFixed(2), name: '鍒╃敤鐜�' }]
gaugeLessOption5.title.text = this.utilizationRateLastFiveEquipment
- gaugeLessOption5.series[0].data = [{value : (this.utilizationRateLastFive * 100).toFixed(2), name : '鍒╃敤鐜�'}];
- gaugeTopChart1.setOption(gaugeTopOption1);
- gaugeTopChart2.setOption(gaugeTopOption2);
- gaugeTopChart3.setOption(gaugeTopOption3);
- gaugeTopChart4.setOption(gaugeTopOption4);
- gaugeTopChart5.setOption(gaugeTopOption5);
- gaugeLastChart1.setOption(gaugeLessOption1);
- gaugeLastChart2.setOption(gaugeLessOption2);
- gaugeLastChart3.setOption(gaugeLessOption3);
- gaugeLastChart4.setOption(gaugeLessOption4);
- gaugeLastChart5.setOption(gaugeLessOption5);
- }else{
- gaugeTopChart1.setOption(gaugeTopOption1);
- gaugeTopChart2.setOption(gaugeTopOption2);
- gaugeTopChart3.setOption(gaugeTopOption3);
- gaugeTopChart4.setOption(gaugeTopOption4);
- gaugeTopChart5.setOption(gaugeTopOption5);
- gaugeLastChart1.setOption(gaugeLessOption1);
- gaugeLastChart2.setOption(gaugeLessOption2);
- gaugeLastChart3.setOption(gaugeLessOption3);
- gaugeLastChart4.setOption(gaugeLessOption4);
- gaugeLastChart5.setOption(gaugeLessOption5);
+ gaugeLessOption5.series[0].data = [{ value: (this.utilizationRateLastFive * 100).toFixed(2), name: '鍒╃敤鐜�' }]
+ gaugeTopChart1.setOption(gaugeTopOption1)
+ gaugeTopChart2.setOption(gaugeTopOption2)
+ gaugeTopChart3.setOption(gaugeTopOption3)
+ gaugeTopChart4.setOption(gaugeTopOption4)
+ gaugeTopChart5.setOption(gaugeTopOption5)
+ gaugeLastChart1.setOption(gaugeLessOption1)
+ gaugeLastChart2.setOption(gaugeLessOption2)
+ gaugeLastChart3.setOption(gaugeLessOption3)
+ gaugeLastChart4.setOption(gaugeLessOption4)
+ gaugeLastChart5.setOption(gaugeLessOption5)
+ } else {
+ gaugeTopChart1.setOption(gaugeTopOption1)
+ gaugeTopChart2.setOption(gaugeTopOption2)
+ gaugeTopChart3.setOption(gaugeTopOption3)
+ gaugeTopChart4.setOption(gaugeTopOption4)
+ gaugeTopChart5.setOption(gaugeTopOption5)
+ gaugeLastChart1.setOption(gaugeLessOption1)
+ gaugeLastChart2.setOption(gaugeLessOption2)
+ gaugeLastChart3.setOption(gaugeLessOption3)
+ gaugeLastChart4.setOption(gaugeLessOption4)
+ gaugeLastChart5.setOption(gaugeLessOption5)
}
- gaugeTopChart1.setOption(gaugeTopOption1);
- gaugeTopChart2.setOption(gaugeTopOption2);
- gaugeTopChart3.setOption(gaugeTopOption3);
- gaugeTopChart4.setOption(gaugeTopOption4);
- gaugeTopChart5.setOption(gaugeTopOption5);
- gaugeLastChart1.setOption(gaugeLessOption1);
- gaugeLastChart2.setOption(gaugeLessOption2);
- gaugeLastChart3.setOption(gaugeLessOption3);
- gaugeLastChart4.setOption(gaugeLessOption4);
- gaugeLastChart5.setOption(gaugeLessOption5);
+ gaugeTopChart1.setOption(gaugeTopOption1)
+ gaugeTopChart2.setOption(gaugeTopOption2)
+ gaugeTopChart3.setOption(gaugeTopOption3)
+ gaugeTopChart4.setOption(gaugeTopOption4)
+ gaugeTopChart5.setOption(gaugeTopOption5)
+ gaugeLastChart1.setOption(gaugeLessOption1)
+ gaugeLastChart2.setOption(gaugeLessOption2)
+ gaugeLastChart3.setOption(gaugeLessOption3)
+ gaugeLastChart4.setOption(gaugeLessOption4)
+ gaugeLastChart5.setOption(gaugeLessOption5)
window.addEventListener('resize', function() {
gaugeTopChart1.resize()
gaugeTopChart2.resize()
@@ -829,8 +829,20 @@
}
</script>
-<style scoped>
- .div-inline{
- flex: 1;
+<style lang="less" scoped>
+ .outer-container {
+ height: 100%;
+ overflow: auto;
+
+ > div {
+ height: 320px;
+ display: flex;
+ flex-direction: column
+ }
+
+ .div-inline {
+ width: 20%;
+ height: 100%;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
index e04a1b7..ceae2a0 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
@@ -1,101 +1,81 @@
<template>
- <div :bordered="false" class="device_list">
- <div class="com_box">
- <!-- 鏌ヨ鍖哄煙 -->
- <div style="width: 100%; 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">
- <a-form-item label="璁惧">
- <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch" @click="deviceSearch"
- placeholder='璇烽�夋嫨璁惧'/>
- </a-form-item>
- </a-col>
+ <div class="device_list">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div style="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">
+ <a-form-item label="璁惧">
+ <a-input-search readOnly v-model="queryParam.equipmentId" @search="deviceSearch"
+ @click="deviceSearch"
+ placeholder='璇烽�夋嫨璁惧'/>
+ </a-form-item>
+ </a-col>
- <a-col :md="5" :sm="5">
- <a-form-item label="椹卞姩绫诲瀷">
- <a-auto-complete
- v-model="queryParam.driveType"
- :data-source="driveTypeList"
- placeholder="椹卞姩绫诲瀷"
- :filter-option="filterOption"
- :allowClear="true"
- />
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="6" :xs="6">
- <a-form-item label="鏃堕棿">
- <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
- </a-form-item>
- </a-col>
- <a-col :md="3" :sm="3" :xs="3">
- <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>
- <!-- table鍖哄煙-begin -->
- <div id="DeviceList">
- <a-tabs :activeKey="activeKey" @change="tabChange" tabPosition="top">
- <a-tab-pane key="1" tab="鍥惧舰">
- <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'></ComparativeAnalysisBar>
- </a-tab-pane>
- <a-tab-pane key="2" tab="浠〃" forceRender>
- <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"></ComparativeAnalysisGauge>
- </a-tab-pane>
- <a-tab-pane key="3" tab="楗煎浘" forceRender>
- <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"></ComparativeAnalysisPie>
- </a-tab-pane>
- </a-tabs>
- </div>
- <!-- table鍖哄煙-end -->
+ <a-col :md="5" :sm="5">
+ <a-form-item label="椹卞姩绫诲瀷">
+ <a-auto-complete
+ v-model="queryParam.driveType"
+ :data-source="driveTypeList"
+ placeholder="椹卞姩绫诲瀷"
+ :filter-option="filterOption"
+ :allowClear="true"
+ />
+ </a-form-item>
+ </a-col>
+ <a-col :md="6" :sm="6" :xs="6">
+ <a-form-item label="鏃堕棿">
+ <a-range-picker @change="dateParamChange" v-model="dates" format="YYYYMMDD" :allow-clear="false"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="3" :sm="3" :xs="3">
+ <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>
- <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"></SelectDeviceDrawer>
+ <a-spin :spinning="spinning">
+ <a-tabs tabPosition="top" id="custom-tabs">
+ <a-tab-pane key="1" tab="鍥惧舰">
+ <ComparativeAnalysisBar ref="AnalysisBar" :dataList='AnalysisBarList'/>
+ </a-tab-pane>
+ <a-tab-pane key="2" tab="浠〃" forceRender>
+ <ComparativeAnalysisGauge ref="AnalysisGauge" :dataList="AnalysisGauge"/>
+ </a-tab-pane>
+ <a-tab-pane key="3" tab="楗煎浘" forceRender>
+ <ComparativeAnalysisPie ref="AnalysisPie" :dataList="AnalysisPie"/>
+ </a-tab-pane>
+ </a-tabs>
+ </a-spin>
+
+ <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'閫夋嫨璁惧'"/>
</div>
</template>
<script>
import moment from 'moment'
- import $ from 'jquery'
- import JDictSelectTag from '@/components/dict/JDictSelectTag'
- import JDate from '../../../../../components/jeecg/JDate'
- import {
- requestPut,
- deleteAction,
- getAction
- } from '@/api/manage'
+ import { getAction } from '@/api/manage'
+ import api from '@/api/mdc'
import ComparativeAnalysisBar from './ComparativeAnalysisBar'
import ComparativeAnalysisGauge from './ComparativeAnalysisGauge'
import ComparativeAnalysisPie from './ComparativeAnalysisPie'
- import '@/components/table2excel/table2excel'
- import JInput from '@/components/jeecg/JInput'
- import JEllipsis from '@/components/jeecg/JEllipsis'
- import Tooltip from 'ant-design-vue/es/tooltip'
- import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
- import api from '@/api/mdc'
import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue'
export default {
name: 'ComparativeAnalysisMain',
components: {
- Tooltip,
ComparativeAnalysisBar,
ComparativeAnalysisGauge,
ComparativeAnalysisPie,
- JDictSelectTag,
- JInput,
- JDate,
- JEllipsis,
SelectDeviceDrawer
},
props: { nodeTree: '', Type: '', nodePeople: '' },
data() {
return {
- activeKey: '1',
typeTree: '',
typeParent: 1,
typeEquipment: 1,
@@ -103,38 +83,31 @@
AnalysisGauge: [],
AnalysisPie: [],
dates: [],
- xianshi: '',
- readOnly: true,
queryParam: {
equipmentId: ''
},
queryParams: {},
queryParamEquip: {},
- queryParamPeople: {},
- dataStartsoucre: [],
url: {
comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis'
},
AnalysisList: {},
- driveTypeList: []
+ driveTypeList: [],
+ spinning: false
}
},
watch: {
Type(valmath) {
this.dataList = []
this.queryParams.typeTree = valmath
- // console.log(this.queryParams.typeTree)
},
nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = ''
- // this.queryParams.equipmentId = val.equipmentId
this.queryParam.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
} else {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = val.key
this.queryParams.equipmentId = ''
}
@@ -144,12 +117,10 @@
nodePeople(val) {
if (JSON.stringify(val) != '{}') {
if (val.equipmentId) {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = ''
this.queryParams.equipmentId = val.equipmentId
this.queryParamEquip.equipmentId = val.equipmentId
} else {
- // this.$set(this.queryParam, 'tierName', val.title)
this.queryParamEquip.parentId = val.key
this.queryParams.equipmentId = ''
}
@@ -157,19 +128,29 @@
}
}
},
+ created() {
+ this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
+ this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
+ this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
+ this.queryParam.typeTree = '1'
+ this.loadAnalysis()
+ this.getDriveTypeByApi()
+ },
+ mounted() {
+ const tabsBar = document.querySelector('#custom-tabs .ant-tabs-bar')
+ const tabsContent = document.querySelector('#custom-tabs .ant-tabs-content')
+ const tabsBarHeight = window.getComputedStyle(tabsBar).height
+ const tabsBarMarginBottom = window.getComputedStyle(tabsBar).marginBottom
+ tabsContent.style.height = `calc(100% - ${tabsBarHeight} - ${tabsBarMarginBottom})`
+ },
methods: {
- tabChange(val) {
- this.activeKey = val
- },
-
dateParamChange(v1, v2) {
- // console.log(v1,v2)
this.queryParam.startTime = v2[0]
this.queryParam.endTime = v2[1]
- console.log(v2[0], v2[1])
},
loadAnalysis() {
+ this.spinning = true
getAction(this.url.comparativeAnalysis, this.queryParam).then(res => {
if (res.success) {
this.AnalysisList = res.result
@@ -180,7 +161,7 @@
this.$message.warning(res.message)
}
}).finally(() => {
- this.loading = false
+ this.spinning = false
})
},
@@ -191,32 +172,14 @@
this.AnalysisPie = []
if (this.queryParams.typeTree == '1') {
this.queryParams.parentId = this.queryParamEquip.parentId
- // this.queryParams.equipmentId = this.queryParamEquip.equipmentId
} else {
this.queryParams.parentId = this.queryParamEquip.parentId
- // this.queryParams.equipmentId = ""
}
this.AnalysisList = []
//鑾峰彇鏌ヨ鏉′欢
this.queryParam.parentId = this.queryParams.parentId
- // this.queryParam.equipmentId = this.queryParams.equipmentId
this.queryParam.typeTree = this.queryParams.typeTree
- getAction(this.url.comparativeAnalysis, this.queryParam).then((res) => {
- if (res.success) {
- this.AnalysisList = res.result
- this.AnalysisBarList = res.result.graphics
- this.AnalysisGauge = res.result.meters
- this.AnalysisPie.push(res.result.pieCharts)
- } else {
- // this.$message.warning(res.message)
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- }).finally(() => {
- this.loading = false
- })
+ this.loadAnalysis()
},
searchReset() {
@@ -246,21 +209,6 @@
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => {
- if (res.success) {
- this.AnalysisList = res.result
- this.AnalysisBarList = res.result.graphics
- this.AnalysisGauge = res.result.meters
- this.AnalysisPie.push(res.result.pieCharts)
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- }).finally(() => {
- this.loading = false
- })
} else {
this.typeTree = this.queryParams.typeTree
this.typeParent = this.queryParams.parentId
@@ -283,22 +231,8 @@
this.queryParams.equipmentId = this.queryParamEquip.equipmentId
}
}
- getAction(this.url.comparativeAnalysis, this.queryParams).then((res) => {
- if (res.success) {
- this.AnalysisList = res.result
- this.AnalysisBarList = res.result.graphics
- this.AnalysisGauge = res.result.meters
- this.AnalysisPie.push(res.result.pieCharts)
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- }).finally(() => {
- this.loading = false
- })
}
+ this.loadAnalysis()
},
/**
@@ -334,81 +268,60 @@
* @param data 宸查�夋嫨鐨勮澶�
*/
selectOK(data) {
- console.log('data=', data)
this.queryParam.equipmentId = data.join(',')
- console.log('queryParam', this.queryParam.equipmentId)
}
- },
- created() {
- this.dates = [moment().subtract('days', 7), moment().subtract('days', 0)]
- this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
- this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
- this.queryParam.typeTree = '1'
- this.loadAnalysis()
- this.getDriveTypeByApi()
}
}
</script>
<style lang="less" scoped>
- /*@import '~@assets/less/common.less';*/
+ .device_list {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ /deep/ .ant-spin-nested-loading {
+ flex: 1;
+ overflow: hidden;
+
+ .ant-spin-container {
+ height: 100%;
+
+ .ant-tabs {
+ height: 100%;
+ overflow: hidden;
+ }
+ }
+ }
+ }
@media screen and (min-width: 1920px) {
.device_list {
height: 811px !important;
- overflow: scroll;
}
}
@media screen and (min-width: 1680px) and (max-width: 1920px) {
.device_list {
height: 811px !important;
- overflow: scroll;
}
}
@media screen and (min-width: 1400px) and (max-width: 1680px) {
.device_list {
height: 663px !important;
- overflow: scroll;
}
}
@media screen and (min-width: 1280px) and (max-width: 1400px) {
.device_list {
height: 564px !important;
- overflow: scroll;
}
}
@media screen and (max-width: 1280px) {
.device_list {
height: 564px !important;
- overflow: scroll;
}
- }
-
- /*.device_list{*/
- /*display: flex;*/
- /*}*/
- /*.device_list .table-page-search-wrapper{*/
- /**/
- /*}*/
- /deep/ .ant-card-body {
- height: 100% !important;
- }
-
- .device_list .com_box {
- display: flex !important;
- height: 100% !important;
- flex-direction: column !important;
- }
-
- .device_list .table-page-search-wrapper {
- height: 6% !important;
- }
-
- .device_list #DeviceList {
- height: 90% !important;
}
</style>
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue
index 70872cb..f5db383 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisPie.vue
@@ -1,49 +1,44 @@
<template>
- <div class="comparative_pie" style="width: 100%;height: 600px;display: flex;overflow: scroll">
- <div id="compAnalPie1" style="flex: 1;"></div>
- <div id="compAnalPie2" style="flex: 1;"></div>
+ <div style="display: flex;height: 100%;overflow: auto">
+ <div id="compAnalPie1" style="width:50%;height:600px"></div>
+ <div id="compAnalPie2" style="width:50%;height:600px"></div>
</div>
</template>
<script>
- import * as echarts from 'echarts'
export default {
- name: 'conparativeAnalysisPie',
- props:{ dataList:''},
- data(){
- return{
- closeRate:0,
- openRate:0,
- usedRate:0,
- waitRate:0,
- RateList:[]
+ name: 'comparativeAnalysisPie',
+ props: { dataList: '' },
+ data() {
+ return {
+ closeRate: 0,
+ openRate: 0,
+ usedRate: 0,
+ waitRate: 0,
+ RateList: []
}
},
- created(){
-
- },
- watch:{
- dataList(val){
+ watch: {
+ dataList(val) {
this.RateList = val
- console.log(val)
this.drawTu()
- },
+ }
},
mounted() {
this.drawTu()
},
- methods:{
- drawTu(){
- let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'),'macarons');
- let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'),'macarons');
- let pieCompChartOption1 = {
+ methods: {
+ drawTu() {
+ let pieCompChart1 = this.$echarts.init(document.getElementById('compAnalPie1'), 'macarons')
+ let pieCompChart2 = this.$echarts.init(document.getElementById('compAnalPie2'), 'macarons')
+ let pieCompChartOption1 = {
title: {
x: 'center',
subtext: '寮�鏈烘晥鐜�'
},
tooltip: {
trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
@@ -59,8 +54,8 @@
center: ['55%', '55%'],
itemStyle: {
normal: {
- color: function (params) {
- var colorList = ['#4169E1', '#A8A8A8'];
+ color: function(params) {
+ var colorList = ['#4169E1', '#A8A8A8']
return colorList[params.dataIndex]
},
label: {
@@ -70,18 +65,18 @@
}
}
},
- data: [{value: 0, name: '寮�鏈虹巼'},
- {value: 0, name: '鍏虫満鐜�'}]
+ data: [{ value: 0, name: '寮�鏈虹巼' },
+ { value: 0, name: '鍏虫満鐜�' }]
}]
- };
- let pieCompChartOption2 = {
+ }
+ let pieCompChartOption2 = {
title: {
x: 'center',
subtext: '杩愯鏁堢巼'
},
tooltip: {
trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
@@ -97,8 +92,8 @@
center: ['55%', '55%'],
itemStyle: {
normal: {
- color: function (params) {
- var colorList = ['#00ee00', '#FCCE10', '#A8A8A8'];
+ color: function(params) {
+ var colorList = ['#00ee00', '#FCCE10', '#A8A8A8']
return colorList[params.dataIndex]
},
label: {
@@ -108,37 +103,46 @@
}
}
},
- data: [{value: 0, name: '鍔犲伐鐜�'},
- {value: 0, name: '寰呮満鐜�'},
- {value: 0, name: '鍏虫満鐜�'}]
+ data: [{ value: 0, name: '鍔犲伐鐜�' },
+ { value: 0, name: '寰呮満鐜�' },
+ { value: 0, name: '鍏虫満鐜�' }]
}]
- };
- if(this.RateList != null){
- this.closeRate =[]
- this.openRate =[]
+ }
+ if (this.RateList != null) {
+ this.closeRate = []
+ this.openRate = []
this.usedRate = []
this.waitRate = []
- if(this.RateList.length>0){
- this.closeRate=this.RateList[0].closeRate
- this.openRate=this.RateList[0].openRate
- this.usedRate=this.RateList[0].processRate
- this.waitRate=this.RateList[0].waitRate
- pieCompChartOption1.series[0].data = [{value:(this.openRate * 100).toFixed(2), name:'寮�鏈虹巼'},{value:(this.closeRate * 100).toFixed(2), name:'鍏虫満鐜�'}];
- pieCompChartOption2.series[0].data = [{value:(this.usedRate * 100).toFixed(2), name:'鍔犲伐鐜�'},{value:(this.waitRate * 100).toFixed(2), name:'寰呮満鐜�'},{value:(this.closeRate * 100).toFixed(2), name:'鍏虫満鐜�'}];
- pieCompChart1.setOption(pieCompChartOption1);
- pieCompChart2.setOption(pieCompChartOption2);
- }else{
- pieCompChart1.setOption(pieCompChartOption1);
- pieCompChart2.setOption(pieCompChartOption2);
+ if (this.RateList.length > 0) {
+ this.closeRate = this.RateList[0].closeRate
+ this.openRate = this.RateList[0].openRate
+ this.usedRate = this.RateList[0].processRate
+ this.waitRate = this.RateList[0].waitRate
+ pieCompChartOption1.series[0].data = [{
+ value: (this.openRate * 100).toFixed(2),
+ name: '寮�鏈虹巼'
+ }, { value: (this.closeRate * 100).toFixed(2), name: '鍏虫満鐜�' }]
+ pieCompChartOption2.series[0].data = [{
+ value: (this.usedRate * 100).toFixed(2),
+ name: '鍔犲伐鐜�'
+ }, { value: (this.waitRate * 100).toFixed(2), name: '寰呮満鐜�' }, {
+ value: (this.closeRate * 100).toFixed(2),
+ name: '鍏虫満鐜�'
+ }]
+ pieCompChart1.setOption(pieCompChartOption1)
+ pieCompChart2.setOption(pieCompChartOption2)
+ } else {
+ pieCompChart1.setOption(pieCompChartOption1)
+ pieCompChart2.setOption(pieCompChartOption2)
}
- }else{
- pieCompChart1.setOption(pieCompChartOption1);
- pieCompChart2.setOption(pieCompChartOption2);
+ } else {
+ pieCompChart1.setOption(pieCompChartOption1)
+ pieCompChart2.setOption(pieCompChartOption2)
}
- pieCompChart1.setOption(pieCompChartOption1);
- pieCompChart2.setOption(pieCompChartOption2);
+ pieCompChart1.setOption(pieCompChartOption1)
+ pieCompChart2.setOption(pieCompChartOption2)
window.addEventListener('resize', function() {
pieCompChart1.resize()
pieCompChart2.resize()
@@ -146,8 +150,4 @@
}
}
}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/shift/ShiftInfo.vue b/src/views/mdc/base/modules/shift/ShiftInfo.vue
index e6d104e..f8299ca 100644
--- a/src/views/mdc/base/modules/shift/ShiftInfo.vue
+++ b/src/views/mdc/base/modules/shift/ShiftInfo.vue
@@ -2,7 +2,7 @@
<div class="shift_info">
<!-- 鎿嶄綔鎸夐挳鍖哄煙 -->
<div class="table-operator">
- <a-button type="primary" v-if="Object.keys(shiftSystemRow).length>0" @click="handleAdd" icon="plus">閰嶇疆</a-button>
+ <a-button type="primary" :disabled="Object.keys(shiftSystemRow).length===0" @click="handleAdd" icon="plus">閰嶇疆</a-button>
</div>
<!-- table鍖哄煙-begin -->
<div style="width: 100%;flex: 1;overflow: auto">
diff --git a/src/views/mdc/base/modules/shift/ShiftSystem.vue b/src/views/mdc/base/modules/shift/ShiftSystem.vue
index 7197ad4..857cf18 100644
--- a/src/views/mdc/base/modules/shift/ShiftSystem.vue
+++ b/src/views/mdc/base/modules/shift/ShiftSystem.vue
@@ -6,7 +6,7 @@
</div>
<!-- table鍖哄煙-begin -->
<div style="flex: 1;overflow: auto">
- <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
+ <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :customRow="customRow"
:dataSource="dataSource" :pagination="false" :loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}">
<span
@@ -21,7 +21,7 @@
slot-scope="text, record"
>
<span v-if="text == 'true'">鏄�</span>
- <span v-else-if="text == 'false'" >鍚�</span>
+ <span v-else-if="text == 'false'">鍚�</span>
<span v-else-if="text == null">鍚�</span>
</span>
<span
@@ -45,7 +45,7 @@
<a-menu-item v-if="record.shiftStatus == 1">
<a key="3" @click="handleStatus(record.id,0)">鍋滅敤</a>
</a-menu-item>
- <a-menu-item >
+ <a-menu-item>
<a key="4" @click="handleDelete(record.id)">鍒犻櫎</a>
</a-menu-item>
</a-menu>
@@ -54,18 +54,14 @@
</a-table>
</div>
- <shift-system-model ref="modalForm" @ok="modalFormOk"></shift-system-model>
+ <shift-system-model ref="modalForm" @ok="loadData"></shift-system-model>
</div>
</template>
<script>
import qs from 'qs'
- import {
- requestPut, putAction, deleteAction,postAction
- } from '@/api/manage'
- import {
- JeecgListMixin
- } from '@/mixins/JeecgListMixin'
+ import { putAction, deleteAction, postAction } from '@/api/manage'
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ShiftSystemModel from './ShiftSystemModel'
export default {
@@ -76,15 +72,7 @@
},
data() {
return {
- statusName: '',
- disabled: true,
disableMixinCreated: false,
- url: {
- list: '/mdc/mdcMdcShift/queryPageList',
- changeStatus: '/mdc/mdcMdcShift/changeStatus',
- deleteBatch:'/mdc/mdcMdcShift/deleteShift',
- changeDefaultShift: '/mdc/mdcMdcShift/changeDefaultShift'
- },
columns: [
{
title: '鐝埗',
@@ -109,7 +97,13 @@
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
- ]
+ ],
+ url: {
+ list: '/mdc/mdcMdcShift/queryPageList',
+ changeStatus: '/mdc/mdcMdcShift/changeStatus',
+ deleteBatch: '/mdc/mdcMdcShift/deleteShift',
+ changeDefaultShift: '/mdc/mdcMdcShift/changeDefaultShift'
+ }
}
},
methods: {
@@ -118,15 +112,15 @@
putAction(this.url.changeStatus, { id: id, status: status }).then((res) => {
if (res.success) {
_this.$notification.success({
- message:'娑堟伅',
- description:res.message
+ message: '娑堟伅',
+ description: res.message
})
_this.loadData()
} else {
_this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
},
@@ -135,46 +129,46 @@
this.$refs.modalForm.title = '鐝埗閰嶇疆'
this.$refs.modalForm.disableSubmit = false
},
- handleDefault:function(record){
- postAction(this.url.changeDefaultShift,qs.stringify({id:record.id})).then((res) =>{
- if(res.success){
- // this.$message.success(res.message);
- this.$notification.success({
- message:'娑堟伅',
- description:res.message
- });
- this.loadData()
- }else{
- // this.$message.success(res.message);
- this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
- }
+ handleDefault: function(record) {
+ postAction(this.url.changeDefaultShift, qs.stringify({ id: record.id })).then((res) => {
+ if (res.success) {
+ // this.$message.success(res.message);
+ this.$notification.success({
+ message: '娑堟伅',
+ description: res.message
+ })
+ this.loadData()
+ } else {
+ // this.$message.success(res.message);
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
})
},
- handleDelete: function(record){
- if(!this.url.deleteBatch){
- this.$message.error("璇疯缃畊rl.delete灞炴��!")
+ handleDelete: function(record) {
+ if (!this.url.deleteBatch) {
+ this.$message.error('璇疯缃畊rl.delete灞炴��!')
return
}
- var that = this;
- deleteAction(that.url.deleteBatch, {id: record}).then((res) => {
+ var that = this
+ deleteAction(that.url.deleteBatch, { id: record }).then((res) => {
if (res.success) {
// that.$message.success(res.message);
that.$notification.success({
- message:'娑堟伅',
- description:res.message
- });
- that.loadData();
+ message: '娑堟伅',
+ description: res.message
+ })
+ that.loadData()
} else {
// that.$message.warning(res.message);
that.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
- });
+ })
},
handleEdit(record) {
this.$refs.modalForm.edit(record)
@@ -183,47 +177,61 @@
},
onSelectChange(selectedRowKeys, selectionRows) {
- this.selectedRowKeys = selectedRowKeys;
- this.selectionRows = selectionRows;
+ this.selectedRowKeys = selectedRowKeys
+ this.selectionRows = selectionRows
this.$emit('selectionShiftRow', this.selectionRows[0])
},
- },
- created() {
- }
+ customRow(record) {
+ return {
+ style: {
+ cursor: 'pointer'
+ },
+ on: {
+ click: () => {
+ this.onSelectChange([record.id], [record])
+ }
+ }
+ }
+ }
+ }
}
</script>
<style lang="less" scoped>
- .shift_system{
+ .shift_system {
overflow: auto;
display: flex;
flex-direction: column;
}
- @media screen and (min-width: 1920px){
- .shift_system{
- height: 748px!important;
+ @media screen and (min-width: 1920px) {
+ .shift_system {
+ height: 748px !important;
}
}
- @media screen and (min-width: 1680px) and (max-width: 1920px){
- .shift_system{
- height: 748px!important;
+
+ @media screen and (min-width: 1680px) and (max-width: 1920px) {
+ .shift_system {
+ height: 748px !important;
}
}
- @media screen and (min-width: 1400px) and (max-width: 1680px){
- .shift_system{
- height: 600px!important;
+
+ @media screen and (min-width: 1400px) and (max-width: 1680px) {
+ .shift_system {
+ height: 600px !important;
}
}
- @media screen and (min-width: 1280px) and (max-width: 1400px){
- .shift_system{
- height: 501px!important;
+
+ @media screen and (min-width: 1280px) and (max-width: 1400px) {
+ .shift_system {
+ height: 501px !important;
}
}
- @media screen and (max-width: 1280px){
- .shift_system{
- height: 501px!important;
+
+ @media screen and (max-width: 1280px) {
+ .shift_system {
+ height: 501px !important;
}
}
</style>
--
Gitblit v1.9.3