From 8f4d079c073edd5d95118158fc60800473026073 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 09 五月 2024 14:51:31 +0800
Subject: [PATCH] 1、首页调整技术状态图表禁用显示颜色 2、首页设备级看板操作证信息增加操作工字段 3、全局设备组选择设备增加按照设备编号查询功能
---
src/views/dashboard/EquipmentSignage.vue | 44 ++++--
src/views/dashboard/BranchFactorySignage.vue | 6
src/views/dashboard/IndexSignage.vue | 206 ++++++++++++++++++++++++-----
src/views/system/modules/SelectDeviceDrawer.vue | 115 +++++++++++-----
src/views/dashboard/WorkshopSectionSignage.vue | 2
5 files changed, 279 insertions(+), 94 deletions(-)
diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
index 6c47a0c..2fc68ac 100644
--- a/src/views/dashboard/BranchFactorySignage.vue
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -561,7 +561,7 @@
}
]
}
- option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
+ option.title.text = `${moment().subtract(1, 'days').format('M鏈圖鏃�')}鍒╃敤鐜嘸
this.efficiencyChart.setOption(option, true)
this.efficiencyChart.hideLoading()
@@ -640,7 +640,7 @@
center: ['50%', '60%'],
color: [
'#0FC61A',
- '#0DAF15',
+ '#F56436',
'#8B8B8B'
],
label: {
@@ -759,7 +759,7 @@
rowNum: 1,
data: this.twoMaintenanceChartData,
index: true,
- columnWidth: [100],
+ columnWidth: [100, 300, 300, 300],
align: ['center', 'center', 'center', 'center']
}
},
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 1917eca..e0aa148 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -67,9 +67,6 @@
<a-descriptions-item label="宸ユ">
{{equipmentInfo.workShopName|equipmentInfoDisplay}}
</a-descriptions-item>
- <a-descriptions-item label="鎿嶄綔宸�">
- {{operationCertificateInfo.realname|equipmentInfoDisplay}}
- </a-descriptions-item>
<a-descriptions-item label="璁惧鐘舵��">
{{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
</a-descriptions-item>
@@ -79,16 +76,26 @@
<dv-border-box-11 title="鎿嶄綔璇佷俊鎭�" class="info-container" style="flex:2;">
<a-descriptions :column="1">
<a-descriptions-item label="鎿嶄綔璇佺紪鍙�">
- {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ <a-tooltip>
+ <template slot="title">
+ {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ </template>
+ {{operationCertificateInfo.num|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="褰撳墠鍛ㄦ湡鍒嗘暟">
{{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
</a-descriptions-item>
- <a-descriptions-item label="鍙戣瘉鏃ユ湡">
- {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}
+ <a-descriptions-item label="鍙戣瘉/鎴鏃ユ湡">
+ <a-tooltip>
+ <template slot="title" v-if="operationCertificateInfo.issueDate||operationCertificateInfo.endTime">
+ {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ </template>
+ {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
- <a-descriptions-item label="鍛ㄦ湡鎴鏃ユ湡">
- {{operationCertificateInfo.endTime|equipmentInfoDisplay}}
+ <a-descriptions-item label="鎿嶄綔宸�">
+ {{operationCertificateInfo.realname|equipmentInfoDisplay}}
</a-descriptions-item>
</a-descriptions>
</dv-border-box-11>
@@ -96,10 +103,20 @@
<dv-border-box-11 title="缁存姢淇℃伅" class="info-container" style="flex:2;">
<a-descriptions :column="1">
<a-descriptions-item label="涓嬫涓変繚鏃ユ湡">
- {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
+ <a-tooltip>
+ <template slot="title" v-if="equipmentInfo.nextThirdMaintenanceTime">
+ {{equipmentInfo.nextThirdMaintenanceTime}}
+ </template>
+ {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="涓嬫浜屼繚鏃ユ湡">
- {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ <a-tooltip>
+ <template slot="title" v-if="equipmentInfo.nextSecondMaintenanceTime">
+ {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ </template>
+ {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
+ </a-tooltip>
</a-descriptions-item>
<a-descriptions-item label="鎶�鏈姸鎬�">
{{equipmentInfo.technology_status|equipmentInfoDisplay}}
@@ -113,7 +130,8 @@
<div style="display: flex;justify-content:space-evenly;flex: 1">
<div style="width: 45%;" class="info-card-container">
<div class="info-card-title">鏈湀鎶ヤ慨娆℃暟</div>
- <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}</div>
+ <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}
+ </div>
</div>
<div style="width: 45%;" class="info-card-container">
@@ -434,7 +452,7 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
+ color: '#1AD8DE'
}
},
tooltip: {
@@ -875,8 +893,6 @@
padding-bottom: 25px;
white-space: nowrap;
overflow: hidden;
- -ms-text-overflow: ellipsis;
- text-overflow: ellipsis;
}
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 334ba0d..8681db6 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -15,39 +15,11 @@
<div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div>
</div>
<div class="support-plan-container">
- <!--<div v-for="item in supportPlanList" class="support-plan-item"-->
- <!--:style="{background:item.background}">-->
- <!--<div>{{item.label}}</div>-->
- <!--<div class="plan-value-container">-->
- <!--<div class="plan-value">{{item.value}}</div>-->
- <!--<div>鍙�</div>-->
- <!--</div>-->
- <!--</div>-->
- <div class="support-plan-item" style="background:#5FE0AF">
- <div>鏈湀涓変繚璁″垝</div>
+ <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item"
+ :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)">
+ <div>{{item.planTime}}</div>
<div class="plan-value-container">
- <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
- <div>鍙�</div>
- </div>
- </div>
- <div class="support-plan-item" style="background:#409EFF">
- <div>鏈湀瀹屾垚</div>
- <div class="plan-value-container">
- <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
- <div>鍙�</div>
- </div>
- </div>
- <div class="support-plan-item" style="background:#D6BC52">
- <div>涓嬫湀涓変繚璁″垝</div>
- <div class="plan-value-container">
- <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
- <div>鍙�</div>
- </div>
- </div>
- <div class="support-plan-item" style="background:#58D9F9">
- <div>涓嬩笅鏈堜笁淇濊鍒�</div>
- <div class="plan-value-container">
- <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
+ <div class="plan-value">{{$data[item.planValueLabel]}}</div>
<div>鍙�</div>
</div>
</div>
@@ -68,15 +40,21 @@
</dv-border-box-9>
</div>
</div>
+
+ <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
+ :modalTableColumns="modalTableColumns"
+ @closeModal="modalVisible=false"/>
</div>
</template>
<script>
import signageApi from '@/api/signage'
import moment from 'moment'
+ import SignageModal from './modules/SignageModal'
export default {
name: 'IndexSignage',
+ components: { SignageModal },
data() {
return {
runningStateChart: '',
@@ -100,6 +78,28 @@
{ value: '10', name: '鍋滄満' },
{ value: '8', name: '杩愯' }
],
+ supportPlanList: [
+ {
+ planTime: '鏈湀涓変繚璁″垝',
+ planValueLabel: 'thisMonthMaintenancePlanNum',
+ backgroundColor: '#5FE0AF'
+ },
+ {
+ planTime: '鏈湀瀹屾垚',
+ planValueLabel: 'thisMonthMaintenanceRealNum',
+ backgroundColor: '#409EFF'
+ },
+ {
+ planTime: '涓嬫湀涓変繚璁″垝',
+ planValueLabel: 'nextMonthMaintenancePlanNum',
+ backgroundColor: '#D6BC52'
+ },
+ {
+ planTime: '涓嬩笅鏈堜笁淇濊鍒�',
+ planValueLabel: 'nextNextMonthMaintenancePlanNum',
+ backgroundColor: '#58D9F9'
+ }
+ ],
thisMonthMaintenancePlanNum: 0,
thisMonthMaintenanceRealNum: 0,
nextMonthMaintenancePlanNum: 0,
@@ -111,7 +111,11 @@
doubleBarChartData: {},
efficiencyChartConfig: {},
maintenanceConfig: {},
- problemConfig: {}
+ problemConfig: {},
+ modalVisible: false,
+ modalTitle: '',
+ modalDataApiUrl: '',
+ modalTableColumns: []
}
},
mounted() {
@@ -431,7 +435,7 @@
}
},
xAxis: {
- name: '鍗曚綅',
+ name: '',
nameTextStyle: {
color: '#fff'
},
@@ -558,7 +562,7 @@
}
]
}
- option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
+ option.title.text = `${moment().subtract(1, 'days').format('M鏈圖鏃�')}鍒╃敤鐜嘸
this.efficiencyChart.setOption(option, true)
this.efficiencyChart.hideLoading()
this.efficiencyChart.on('click', params => {
@@ -638,7 +642,7 @@
center: ['45%', '60%'],
color: [
'#0FC61A',
- '#0DAF15',
+ '#F56436',
'#8B8B8B'
],
label: {
@@ -665,6 +669,50 @@
}
this.techConditionChart.setOption(option, true)
this.techConditionChart.hideLoading()
+
+ // this.techConditionChart.on('click', params => {
+ // console.log('params', params)
+ // this.modalTitle = '鎶�鏈姸鎬�'
+ // this.modalTableColumns = [
+ // {
+ // title: '#',
+ // dataIndex: '',
+ // key: 'rowIndex',
+ // width: 60,
+ // align: 'center',
+ // customRender: function(t, r, index) {
+ // return parseInt(index) + 1
+ // }
+ // },
+ // {
+ // title: '璁惧缂栧彿',
+ // dataIndex: 'equipmentId',
+ // key: 'equipmentId'
+ // },
+ // {
+ // title: '璁惧鍚嶇О',
+ // dataIndex: 'equipmentName',
+ // key: 'equipmentName'
+ // },
+ // {
+ // title: '璁惧鍨嬪彿',
+ // dataIndex: 'equipmentModel',
+ // key: 'equipmentModel'
+ // },
+ // {
+ // title: '璁惧绫诲瀷',
+ // key: 'equipmentType',
+ // dataIndex: 'equipmentType'
+ // },
+ // {
+ // title: '椹卞姩绫诲瀷',
+ // key: 'driveType',
+ // dataIndex: 'driveType'
+ // }
+ // ]
+ // this.modalDataApiUrl = '/mdc/mdcEquipment/list'
+ // this.modalVisible = true
+ // })
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
@@ -744,6 +792,45 @@
}
this.warrantyMalfunctionChart.setOption(option, true)
this.warrantyMalfunctionChart.hideLoading()
+
+ // this.warrantyMalfunctionChart.on('click', params => {
+ // console.log('params', params)
+ // this.modalTitle = '鎶ヤ慨鏁呴殰'
+ // this.modalTableColumns = [
+ // {
+ // title: '#',
+ // dataIndex: '',
+ // key: 'rowIndex',
+ // width: 60,
+ // align: 'center',
+ // customRender: function(t, r, index) {
+ // return parseInt(index) + 1
+ // }
+ // },
+ // {
+ // title: '绫诲瀷',
+ // align: 'center',
+ // dataIndex: 'planCloseType'
+ // },
+ // {
+ // title: '鏃堕棿绫诲瀷',
+ // align: 'center',
+ // dataIndex: 'planCloseTimeType'
+ // },
+ // {
+ // title: '鏃堕暱锛堝垎閽燂級',
+ // align: 'center',
+ // dataIndex: 'planCloseTimeLong'
+ // },
+ // {
+ // title: '澶囨敞',
+ // align: 'center',
+ // dataIndex: 'remark'
+ // }
+ // ]
+ // this.modalDataApiUrl = '/mdc/mdcPlanClose/list'
+ // this.modalVisible = true
+ // })
},
/* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -756,7 +843,7 @@
evenRowBGC: '#295562',
data: this.twoMaintenanceChartData,
index: true,
- columnWidth: [100],
+ columnWidth: [100, 300, 300, 300],
align: ['center', 'center', 'center', 'center']
}
},
@@ -836,7 +923,7 @@
interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
- color: '#e2e9ff'
+ color: '#fff'
},
axisTick: {
show: false
@@ -1083,6 +1170,48 @@
},
/**
+ * 鐐瑰嚮涓変繚灞曠ず鏍忓悗鎵撳紑寮圭獥
+ * @param record 鐐瑰嚮褰撳墠涓変繚淇℃伅
+ */
+ openMaintenanceModal(record) {
+ this.modalTitle = record.planTime
+ this.modalTableColumns = [
+ {
+ title: '#',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 60,
+ align: 'center',
+ customRender: function(t, r, index) {
+ return parseInt(index) + 1
+ }
+ },
+ {
+ title: '绫诲瀷',
+ align: 'center',
+ dataIndex: 'planCloseType'
+ },
+ {
+ title: '鏃堕棿绫诲瀷',
+ align: 'center',
+ dataIndex: 'planCloseTimeType'
+ },
+ {
+ title: '鏃堕暱锛堝垎閽燂級',
+ align: 'center',
+ dataIndex: 'planCloseTimeLong'
+ },
+ {
+ title: '澶囨敞',
+ align: 'center',
+ dataIndex: 'remark'
+ }
+ ]
+ this.modalDataApiUrl = '/mdc/mdcPlanClose/list'
+ // this.modalVisible = true
+ },
+
+ /**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
*/
@@ -1127,6 +1256,7 @@
padding: 5px 20px;
font-size: 20px;
margin-bottom: 10px;
+ cursor: pointer;
.plan-value-container {
display: flex;
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index ea84836..e967cf7 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -393,7 +393,7 @@
center: ['50%', '50%'],
color: [
'#0FC61A',
- '#0DAF15',
+ '#F56436',
'#8B8B8B'
],
label: {
diff --git a/src/views/system/modules/SelectDeviceDrawer.vue b/src/views/system/modules/SelectDeviceDrawer.vue
index 5d49708..6015831 100644
--- a/src/views/system/modules/SelectDeviceDrawer.vue
+++ b/src/views/system/modules/SelectDeviceDrawer.vue
@@ -2,7 +2,7 @@
<a-drawer
:title="title"
:visible="visible"
- width="650"
+ width="500"
@ok="handleOk"
@close="handleCancel"
>
@@ -10,10 +10,21 @@
<a-spin :spinning="loading">
<!-- showLine -->
<a-form>
+ <a-form-item>
+ <a-input-search @search="handleSearch" style="width:100%;" placeholder="妫�绱� 绫诲埆缂栫爜/鍚嶇О" allowClear
+ v-model="searchInput" @change="handleChange"/>
+ </a-form-item>
<a-form-item label="杞﹂棿灞傜骇锛�">
- <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
+ <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys" :autoExpandParent="autoExpandParent"
:treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
@expand="onExpand">
+ <template slot="title" slot-scope="{ title, parentId, entity, key}">
+ <span v-if="title.indexOf(searchValue) > -1">{{ title.substr(0, title.indexOf(searchValue)) }}
+ <span class="replaceSearch">{{ searchValue }}</span>
+ {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+ </span>
+ <span v-else>{{ title }}</span>
+ </template>
</a-tree>
</a-form-item>
</a-form>
@@ -78,11 +89,13 @@
},
data() {
return {
+ searchInput: '',
cardLoading: false,
loading: false,
treeDataSource: [],
expandedKeys: [],
checkedKeys: [],
+ autoExpandParent: true,
url: {
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
},
@@ -110,7 +123,7 @@
if (res.success) {
this.dataList = []
this.allTreeKeys = []
- this.getTreeDataSouce(res.result)
+ this.getTreeDataSource(res.result)
this.treeDataSource = res.result
this.generateList(this.treeDataSource)
console.log('treeDataSource', this.treeDataSource)
@@ -140,10 +153,65 @@
}
},
- getTreeDataSouce(data) {
+ handleChange() {
+ let search = this.searchInput
+ let expandedKeys = this.dataList
+ .map(item => {
+ if (item.title != null) {
+ if (item.title.indexOf(search) > -1) {
+ return this.getParentKey(item.key, this.treeDataSource)
+ }
+ return null
+ }
+ })
+ .filter((item, i, self) => item && self.indexOf(item) === i)
+ Object.assign(this, {
+ expandedKeys,
+ searchValue: search,
+ autoExpandParent: true
+ })
+ },
+
+ handleSearch(value) {
+ let search = value
+ let expandedKeys = this.dataList
+ .map(item => {
+
+ if (item.title != null) {
+ if (item.title.indexOf(search) > -1) {
+ return this.getParentKey(item.key, this.treeDataSource)
+ }
+ return null
+ }
+ })
+ .filter((item, i, self) => item && self.indexOf(item) === i)
+ Object.assign(this, {
+ expandedKeys,
+ searchValue: search,
+ autoExpandParent: true
+ })
+ },
+
+ getParentKey(key, tree) {
+ let parentKey
+ for (let i = 0; i < tree.length; i++) {
+ const node = tree[i]
+ if (node.children) {
+ if (node.children.some(item => item.key === key)) {
+ parentKey = node.key
+ } else if (
+ this.getParentKey(key, node.children)) {
+ parentKey = this.getParentKey(key, node.children)
+ }
+ }
+ }
+ return parentKey
+ },
+
+ getTreeDataSource(data) {
data.forEach(item => {
if (item.children && item.children.length > 0) {
- this.getTreeDataSouce(item.children)
+ this.getTreeDataSource(item.children)
}
item.key = item.equipmentId ? item.equipmentId : item.key
item.value = item.equipmentId ? item.equipmentId : item.value
@@ -176,39 +244,10 @@
}
</script>
<style lang="less" scoped>
- /deep/ .ant-modal {
- /*transform-origin: 337px 50px;*/
- }
-
- .ant-card-body .table-operator {
- margin-bottom: 18px;
- }
-
- .ant-table-tbody .ant-table-row td {
- padding-top: 15px;
- padding-bottom: 15px;
- }
-
- .anty-row-operator button {
- margin: 0 5px
- }
-
- .ant-btn-danger {
- background-color: #ffffff
- }
-
- .ant-modal-cust-warp {
- height: 100%
- }
-
- .ant-modal-cust-warp .ant-modal-body {
- height: calc(100% - 110px) !important;
- overflow-y: auto
- }
-
- .ant-modal-cust-warp .ant-modal-content {
- height: 90% !important;
- overflow-y: hidden
+ .replaceSearch {
+ color: #40a9ff;
+ font-weight: bold;
+ background-color: rgb(204, 204, 204);
}
.drawer-bottom-button {
--
Gitblit v1.9.3