From 738f76adfcbf102dfbf890b044ba9a25a034cb8c Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 27 三月 2024 16:17:38 +0800
Subject: [PATCH] 1、用户管理页面修改身份字段名称为首页权限并调整其选项值 2、按照新需求完成客户操作工进入后页面所有布局100% 3、调整全局页脚内容
---
src/views/dashboard/EquipmentSignage.vue | 695 +++++++++++++++++++++++++
src/views/dashboard/BranchFactorySignage.vue | 20
src/views/dashboard/IndexSignage.vue | 2
src/components/page/GlobalFooter.vue | 2
src/views/system/modules/UserModal.vue | 161 +++--
src/views/dashboard/Analysis.vue | 46
src/views/dashboard/WorkshopSectionSignage.vue | 640 +++++++++++++----------
7 files changed, 1,176 insertions(+), 390 deletions(-)
diff --git a/src/components/page/GlobalFooter.vue b/src/components/page/GlobalFooter.vue
index cadd33c..3a448f3 100644
--- a/src/components/page/GlobalFooter.vue
+++ b/src/components/page/GlobalFooter.vue
@@ -12,7 +12,7 @@
:style="{background:$route.meta.title==='棣栭〉'?'#0F103A':'',color:$route.meta.title==='棣栭〉'?'#fff':''}">
Copyright
<a-icon type="copyright"/>
- 2019 <span>2015-2020 鐏电鏅鸿兘</span>
+ 2024 <span>2015-2025 鐏电鏅鸿兘</span>
</div>
</div>
</template>
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 5ec7335..17ea563 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -1,10 +1,6 @@
<template>
- <Component :is="currentSignage" :productionCode="productionCode" @switchToBranchFactory="switchToBranchFactory">
- <template #back_nav>
- <div class="back-nav" @click="backToLastSignage" v-if="userType===4">
- <dv-decoration-7>涓婁竴绾�</dv-decoration-7>
- </div>
- </template>
+ <Component :is="currentSignage" :userType="userType" :productionCode="productionCode"
+ @switchToNextSignage="switchToNextSignage" @backToLastSignage="backToLastSignage">
</Component>
</template>
@@ -13,18 +9,22 @@
import IndexSignage from './IndexSignage.vue'
import BranchFactorySignage from './BranchFactorySignage.vue'
import WorkshopSectionSignage from './WorkshopSectionSignage.vue'
+ import EquipmentSignage from './EquipmentSignage.vue'
export default {
name: 'Analysis',
components: {
IndexSignage,
BranchFactorySignage,
- WorkshopSectionSignage
+ WorkshopSectionSignage,
+ EquipmentSignage
},
data() {
return {
currentSignage: '',
productionCode: '',
+ branchFactoryProductionCode: '',
+ workshopSectionProductionCode: '',
userType: ''
}
},
@@ -41,7 +41,7 @@
this.userType = res.userType
switch (this.userType) {
case 1:
- this.currentSignage = ''
+ this.currentSignage = 'EquipmentSignage'
break
case 2:
this.currentSignage = 'WorkshopSectionSignage'
@@ -60,28 +60,26 @@
},
- backToLastSignage() {
- this.currentSignage = 'IndexSignage'
+ backToLastSignage(signageName) {
+ if (signageName === 'Index') this.productionCode = ''
+ if (signageName === 'WorkshopSection') this.productionCode = this.workshopSectionProductionCode
+ if (signageName === 'BranchFactory') this.productionCode = this.branchFactoryProductionCode
+ this.currentSignage = signageName + 'Signage'
},
- switchToBranchFactory(value) {
- console.log('瀛愮粍浠秜alue', value)
- this.currentSignage = 'BranchFactorySignage'
- this.productionCode = value
+ switchToNextSignage(params) {
+ console.log('瀛愮粍浠秔arams', params)
+ if (params.signageName === 'WorkshopSection') this.branchFactoryProductionCode = this.productionCode
+ if (params.signageName === 'Equipment') this.workshopSectionProductionCode = this.productionCode
+ this.$nextTick(() => {
+ this.productionCode = params.productionCode
+ this.currentSignage = params.signageName + 'Signage'
+ })
}
}
}
</script>
<style lang="less" scoped>
- .back-nav {
- width: 100px;
- height: 30px;
- color: #ccc;
- position: absolute;
- top: 25px;
- left: 25px;
- cursor: pointer;
- z-index: 9999
- }
+
</style>
\ No newline at end of file
diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
index 5c2e663..4de1dc3 100644
--- a/src/views/dashboard/BranchFactorySignage.vue
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -8,7 +8,9 @@
<!--</div>-->
<div class="content-container">
<div style="width: 25%" class="left-col">
- <slot name="back_nav"></slot>
+ <div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4">
+ <dv-decoration-7>涓婁竴绾�</dv-decoration-7>
+ </div>
<dv-border-box-9 style="padding: 40px 20px 0">
<!--<div class="first-title">M D C 鍏� 缃� 鎬� 鏁� : 6 0 3 鍙�</div>-->
<div id="running_state_chart" style="width:100%;height: 400px;"></div>
@@ -79,6 +81,9 @@
productionCode: {
type: String,
default: ''
+ },
+ userType: {
+ type: Number
}
},
data() {
@@ -551,7 +556,7 @@
} else {
console.log('yAxisParams===========', params)
- this.$emit('switchToBranchFactory', params.value)
+ this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value })
}
})
},
@@ -1018,6 +1023,17 @@
justify-content: space-between;
.left-col {
+ .back-nav {
+ width: 100px;
+ height: 30px;
+ color: #eee;
+ position: absolute;
+ top: 25px;
+ left: 25px;
+ cursor: pointer;
+ z-index: 9999
+ }
+
.first-title {
color: #00A8AC;
font-size: 20px;
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
new file mode 100644
index 0000000..9b445fa
--- /dev/null
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -0,0 +1,695 @@
+<template>
+ <div class="page-container">
+ <div class="content-container">
+ <div style="width: 18%" class="left-col">
+ <!--杩斿洖涓婁竴绾�-->
+ <div class="back-nav" @click="$emit('backToLastSignage','WorkshopSection')" v-if="userType!==1">
+ <dv-decoration-7>涓婁竴绾�</dv-decoration-7>
+ </div>
+
+ <!--褰撳墠璁惧缂栧彿-->
+ <dv-border-box-12 style="height: 80px;padding: 0 10px 0">
+ <div class="equipmentId-container">
+ {{equipmentId}}
+ </div>
+ </dv-border-box-12>
+
+ <!--璁惧鍒楄〃-->
+ <div style="height: 721px;overflow: auto;margin-top: 20px;">
+ <table>
+ <tr>
+ <th>璁惧缂栧彿</th>
+ <th>鍨嬪彿</th>
+ </tr>
+ <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
+ <td>{{item.equipmentId}}</td>
+ <td>{{item.equipmentType}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+
+ <div style="width: 81.8%" class="right-col">
+ <!--鍙充笂璁惧鍚勯」淇℃伅鍖哄煙-->
+ <dv-border-box-12 style="height: 50%" class="right-top-row">
+ <!--鍚勯」淇℃伅灞曠ず鍖哄煙-->
+ <div style="display: flex;height: 70%">
+ <dv-border-box-11 title="璁惧淇℃伅" class="info-container" style="flex:5;">
+ <a-descriptions :column="3">
+ <a-descriptions-item label="缁熶竴缂栧彿">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="ABC鏍囪瘑">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="璁惧鍚嶇О">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鍨嬪彿">
+ {{equipmentInfo.equipmentType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="璁惧鍒嗙被">
+ {{equipmentInfo.equipmentCategory}}
+ </a-descriptions-item>
+ <a-descriptions-item label="宸ュ尯">
+ {{equipmentInfo.workArea}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎿嶄綔绯荤粺">
+ {{equipmentInfo.driveType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="瑙勬牸">
+ {{equipmentInfo.standard}}
+ </a-descriptions-item>
+ <a-descriptions-item label="缁存姢閮ㄩ棬">
+ {{equipmentInfo.depart}}
+ </a-descriptions-item>
+ <a-descriptions-item label="宸ユ">
+ {{equipmentInfo.workshopSection}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎿嶄綔宸�">
+ {{equipmentInfo.operator}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </dv-border-box-11>
+
+ <dv-border-box-11 title="鎿嶄綔璇佷俊鎭�" class="info-container" style="flex:2;">
+ <a-descriptions :column="1">
+ <a-descriptions-item label="鎿嶄綔璇佺紪鍙�">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="褰撳墠鍛ㄦ湡鍒嗘暟">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鍙戣瘉鏃ユ湡">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鍛ㄦ湡鎴鏃ユ湡">
+ {{equipmentInfo.equipmentType}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </dv-border-box-11>
+
+ <dv-border-box-11 title="缁存姢淇℃伅" class="info-container" style="flex:2;">
+ <a-descriptions :column="1">
+ <a-descriptions-item label="涓嬫涓変繚鏃ユ湡">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓嬫浜屼繚鏃ユ湡">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎶�鏈姸鎬�">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </dv-border-box-11>
+ </div>
+
+ <!--鍔熻兘鎸夐挳鍖哄煙-->
+ <div style="display: flex;height: 30%;align-items: center;padding: 0 20px;color: #eee;">
+ <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">20</div>
+ </div>
+
+ <div style="width: 45%;" class="info-card-container">
+ <div class="info-card-title">璁惧鐘舵�侊紙缁翠慨涓瓑锛�</div>
+ <div class="info-card-value">缁翠慨涓�</div>
+ </div>
+ </div>
+
+ <div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">澶囦欢淇℃伅</dv-decoration-11>
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">淇濆吇璁″垝</dv-decoration-11>
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">鎶ヤ慨</dv-decoration-11>
+ <dv-decoration-11 style="width: 200px;height: 70px;margin: 0 10px">璁惧鐝</dv-decoration-11>
+ </div>
+ </div>
+ </dv-border-box-12>
+
+ <!--鍙充笅鍚勯」鏁版嵁鍥捐〃鍖哄煙-->
+ <dv-border-box-12 style="height: 50%" class="right-bottom-row">
+ <div style="display: flex;justify-content:space-evenly;height: 100%">
+ <div style="display: flex;flex-wrap: wrap;width: 30%;height: 100%">
+ <div id="gauge_chart1" class="gauge-chart"></div>
+ <div id="gauge_chart2" class="gauge-chart"></div>
+ <div id="gauge_chart3" class="gauge-chart"></div>
+ <div id="gauge_chart4" class="gauge-chart"></div>
+ </div>
+ <div id="line_chart" style="width:40%;height: 100%;"></div>
+ <div style="width: 25%;height:100%;display: flex;align-items: center">
+ <a-descriptions :column="2">
+ <a-descriptions-item label="杩愯妯″紡">
+ {{equipmentInfo.equipmentId}}
+ </a-descriptions-item>
+ <a-descriptions-item label="绋嬪簭鍙�">
+ {{equipmentInfo.ABCSymbol}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱杞��">
+ {{equipmentInfo.equipmentName}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱璐熻嵎">
+ {{equipmentInfo.equipmentType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱杞��">
+ {{equipmentInfo.equipmentCategory}}
+ </a-descriptions-item>
+ <a-descriptions-item label="涓昏酱鍊嶇巼">
+ {{equipmentInfo.workArea}}
+ </a-descriptions-item>
+ <a-descriptions-item label="杩涚粰鍊嶇巼">
+ {{equipmentInfo.driveType}}
+ </a-descriptions-item>
+ <a-descriptions-item label="鎶ヨ淇℃伅">
+ {{equipmentInfo.standard}}
+ </a-descriptions-item>
+ </a-descriptions>
+ </div>
+ </div>
+ </dv-border-box-12>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import signageApi from '@/api/signage'
+ import moment from 'moment'
+
+ export default {
+ name: 'EquipmentSignage',
+ props: {
+ productionCode: {
+ type: String,
+ default: ''
+ },
+ userType: {
+ type: Number
+ }
+ },
+ data() {
+ return {
+ equipmentList: [
+ {
+ equipmentId: '2140223',
+ equipmentType: 'CV4160'
+ },
+ {
+ equipmentId: '2140224',
+ equipmentType: 'CV4161'
+ },
+ {
+ equipmentId: '2140225',
+ equipmentType: 'CV4162'
+ },
+ {
+ equipmentId: '2140226',
+ equipmentType: 'CV4163'
+ },
+ {
+ equipmentId: '2140227',
+ equipmentType: 'CV4164'
+ },
+ {
+ equipmentId: '2140227',
+ equipmentType: 'CV4165'
+ },
+ {
+ equipmentId: '2140228',
+ equipmentType: 'CV4166'
+ },
+ {
+ equipmentId: '2140229',
+ equipmentType: 'CV4167'
+ },
+ {
+ equipmentId: '2140230',
+ equipmentType: 'CV4168'
+ },
+ {
+ equipmentId: '2140231',
+ equipmentType: 'CV4169'
+ },
+ {
+ equipmentId: '2140232',
+ equipmentType: 'CV4170'
+ },
+ {
+ equipmentId: '2140233',
+ equipmentType: 'CV4171'
+ }
+ ],
+ equipmentInfo: {
+ equipmentId: '2511563154',
+ ABCSymbol: '3312321421',
+ equipmentName: '鏈烘涓績',
+ equipmentType: 'CV4160',
+ equipmentCategory: '杞ф満',
+ workArea: 'A鍒嗗尯',
+ driveType: 'JSOWJDF',
+ standard: '鏃�',
+ depart: '杞ф満涓績',
+ workshopSection: '407涓�宸ユ',
+ operator: 'admin'
+ },
+ lineChart: '',
+ lineChartData: [],
+ gaugeChart1: '',
+ gaugeChart2: '',
+ gaugeChart3: '',
+ gaugeChart4: '',
+ gaugeChartData1: [],
+ gaugeChartData2: [],
+ gaugeChartData3: [],
+ gaugeChartData4: [],
+ equipmentId: '2140223'
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.drawCharts()
+ this.getChartDataByApi()
+ },
+ activated() {
+ this.handleWindowResize()
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
+ },
+ methods: {
+ selectEquipment(record) {
+ this.equipmentId = record.equipmentId
+ },
+
+ getChartDataByApi() {
+
+ },
+
+ /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
+ drawCharts() {
+ this.drawGaugeChart()
+ this.drawLineChart()
+ },
+
+ /* 缁樺埗浠〃鐩樺浘琛� */
+ drawGaugeChart() {
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 10, // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC',
+ fontWeight: 'bold'
+ }
+ },
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ grid: {
+ left: '1%',
+ top: '1%',
+ right: '10%',
+ bottom: '1%'
+ },
+ series: [
+ {
+ name: '鍒╃敤鐜�',
+ type: 'gauge',
+ radius: '80%',
+ center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
+ pointer: {
+ width: 6,
+ length: '50%',
+ itemStyle: {
+ color: 'inherit'
+ }
+ },
+ splitLine: {
+ show: true,
+ length: 10,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ axisTick: {
+ length: 5,
+ lineStyle: {
+ color: '#fff',
+ width: 1
+ }
+ },
+ axisLabel: {
+ show: false,
+ fontSize: 18,
+ formatter: function(value) {
+ return value + '%'
+ }
+ },
+ axisLine: {
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [ //琛ㄧ洏棰滆壊
+ [0.3, '#E7781E'],//0-30%澶勭殑棰滆壊
+ [0.7, '#C5C039'],//30%-60%澶勭殑棰滆壊
+ [1, '#21C77F']//90%-100%澶勭殑棰滆壊
+ ],
+ width: 15//琛ㄧ洏瀹藉害
+ }
+ },
+ detail: {
+ formatter: '{score|{value}%}',
+ offsetCenter: [0, '50%'],
+ height: 30,
+ rich: {
+ score: {
+ fontSize: 20
+ }
+ }
+ },
+ data: [{ value: 100 }]
+ }
+ ]
+ }
+ this.drawGaugeChart1(option)
+ this.drawGaugeChart2(option)
+ this.drawGaugeChart3(option)
+ this.drawGaugeChart4(option)
+ },
+
+ /* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
+ drawGaugeChart1(opt) {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ const option = Object.assign({}, opt)
+ option.title.text = '鍒╃敤鐜�'
+ this.gaugeChart1.setOption(option, true)
+ },
+
+ /* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
+ drawGaugeChart2(opt) {
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ const option = Object.assign({}, opt)
+ option.title.text = '寮�鍔ㄧ巼'
+ this.gaugeChart2.setOption(option, true)
+ },
+
+ /* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
+ drawGaugeChart3(opt) {
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ const option = Object.assign({}, opt)
+ option.title.text = '寮�鏈虹巼'
+ this.gaugeChart3.setOption(option, true)
+ },
+
+ /* 缁樺埗OEE浠〃鐩樺浘琛� */
+ drawGaugeChart4(opt) {
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ const option = Object.assign({}, opt)
+ option.title.text = 'OEE'
+ this.gaugeChart4.setOption(option, true)
+ },
+
+ /* 缁樺埗鎶樼嚎鍥� */
+ drawLineChart() {
+ this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ const newData = {
+ xAxis: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ yAxis: [
+ {
+ name: '鍒╃敤鐜�',
+ value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
+ },
+ {
+ name: '寮�鍔ㄧ巼',
+ value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
+ },
+ {
+ name: 'OEE',
+ value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
+ }
+ ],
+ yAxisName: '鏁村勾搴﹀埄鐢ㄧ巼'
+ }
+ let legendData = []
+ let seriesData = []
+ let colorArr = ['#09F39E', '#A5F10D', '#09B3F6']
+ legendData = newData.yAxis.map((item) => item.name)
+ seriesData = newData.yAxis.map((item1, index1) => {
+ return {
+ name: item1.name,
+ type: 'line',
+ symbol: 'circle',
+ symbolSize: 8,
+ itemStyle: {
+ color: colorArr[index1]
+ },
+ lineStyle: {
+ width: 2
+ },
+ yAxisIndex: 1,
+ data: item1.value // 鎶樼嚎鍥剧殑鏁版嵁
+ }
+ })
+ const option = {
+ grid: {
+ containLabel: true,
+ bottom: '3%',
+ top: '15%',
+ left: '2%',
+ right: '1%'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ top: 20,
+ right: 'center',
+ data: legendData,
+ itemGap: 10,
+ textStyle: {
+ fontSize: 14,
+ color: '#ccc'
+ }
+ },
+ xAxis: {
+ triggerEvent: true,
+ data: newData.xAxis || [],
+ axisLabel: {
+ interval: 0,
+ show: true,
+ fontSize: 12,
+ color: '#50729A'
+ // rotate: -30,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisTick: {
+ show: true,
+ alignWithLabel: true
+ }
+ },
+ yAxis: [
+ {
+ name: newData.yAxisName,
+ nameTextStyle: {
+ color: '#00A8AC',
+ fontSize: 18,
+ padding: [0, 0, 0, 90]
+ },
+ nameGap: 25,
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#3E4A82'
+ }
+ }
+ },
+ {
+ type: 'value',
+ position: 'right',
+ splitNumber: 5,
+ axisLabel: {
+ show: true,
+ color: '#50729A'
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ axisTick: {
+ show: true
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#3E4A82'
+ }
+ }
+ }
+ ],
+ series: seriesData
+ }
+ this.lineChart.setOption(option, true)
+ },
+
+ /**
+ * 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
+ * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
+ */
+ handleWindowResize() {
+ if (this.gaugeChart1) this.gaugeChart1.resize()
+ if (this.gaugeChart2) this.gaugeChart2.resize()
+ if (this.gaugeChart3) this.gaugeChart3.resize()
+ if (this.gaugeChart4) this.gaugeChart4.resize()
+ if (this.lineChart) this.lineChart.resize()
+ }
+ }
+ }
+</script>
+
+<style lang="less" scoped>
+ .page-container {
+ .content-container {
+ padding-top: 5px;
+ display: flex;
+ justify-content: space-between;
+
+ .left-col {
+ padding: 0 10px 0;
+
+ .back-nav {
+ width: 100px;
+ height: 30px;
+ color: #eee;
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ cursor: pointer;
+ z-index: 9999
+ }
+
+ .equipmentId-container {
+ height: 100%;
+ color: #eee;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px
+ }
+
+ table {
+ color: #eee;
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ border: 1px dashed;
+
+ tr {
+ height: 60px;
+ text-align: center;
+ font-size: 18px;
+ position: relative;
+
+ th, td {
+ border: 1px dashed;
+ }
+
+ th {
+ font-weight: bold;
+ background-color: #10695D;
+ position: sticky;
+ z-index: 9999;
+ top: 0;
+ }
+
+ td {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .right-col {
+
+ .right-top-row {
+ .info-container {
+ margin: 5px;
+ padding: 70px 0 0 30px;
+ height: 100%
+ }
+
+ .info-card-container {
+ background-color: #67C23A;
+ padding: 5px;
+ border-radius: 3px;
+
+ .info-card-title {
+ font-weight: bold;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden
+ }
+
+ .info-card-value {
+ text-align: center;
+ font-size: 30px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden
+ }
+ }
+ }
+
+ .right-bottom-row {
+ .gauge-chart {
+ width: 50%;
+ height: 50%;
+ }
+ }
+ }
+ }
+ }
+
+ /deep/ .ant-descriptions {
+ font-size: 16px;
+ }
+
+ /deep/ .ant-descriptions-item {
+ 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 {
+ color: #eee;
+ font-size: 16px;
+ }
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 78d9352..d25dd30 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -532,7 +532,7 @@
console.log('seriesParams===========', params)
} else {
console.log('yAxisParams===========', params)
- this.$emit('switchToBranchFactory', params.value)
+ this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value })
}
})
},
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index be246d0..8c9094f 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -2,10 +2,12 @@
<div class="page-container">
<div class="content-container">
<div style="width: 30%" class="left-col">
- <slot name="back_nav"></slot>
+ <div class="back-nav" @click="$emit('backToLastSignage','BranchFactory')" v-if="userType>=3">
+ <dv-decoration-7>涓婁竴绾�</dv-decoration-7>
+ </div>
<dv-border-box-9 style="padding: 15px">
- <div id="tech_condition_chart" style="width:100%;height: 230px;"></div>
- <div id="warranty_malfunction_chart" style="width:100%;height: 230px;"></div>
+ <div id="tech_condition_chart" style="width:100%;height: 240px;"></div>
+ <div id="warranty_malfunction_chart" style="width:100%;height: 240px;"></div>
<div style="display: flex;">
<div style="flex:0.5;display: flex;flex-direction:column;align-items: center">
@@ -70,12 +72,25 @@
</dv-border-box-9>
</div>
<div style="width: 30%">
- <dv-border-box-9 style="padding: 30px 0">
- <div id="bar_chart" style="width:100%;height: 250px;"></div>
- <div id="double_bar_chart" style="width:100%;height: 300px;"></div>
- <div style="padding: 0 20px;">
- <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>
+ <dv-border-box-9 style="padding: 15px">
+ <a-form layout="inline" @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
+ <a-form-item label="璁惧缂栧彿">
+ <!--<a-input v-model="equipmentId" size="large"></a-input>-->
+ <a-auto-complete
+ v-model="equipmentId"
+ placeholder="鍥炶溅閿煡璇�"
+ :allowClear="true"
+ size="large"
+ />
+ </a-form-item>
+ </a-form>
+ <div style="display: flex;flex-wrap: wrap">
+ <div id="gauge_chart1" style="width:50%;height: 200px;"></div>
+ <div id="gauge_chart2" style="width:50%;height: 200px;"></div>
+ <div id="gauge_chart3" style="width:50%;height: 200px;"></div>
+ <div id="gauge_chart4" style="width:50%;height: 200px;"></div>
</div>
+ <div id="bar_chart" style="width:100%;height: 330px;"></div>
</dv-border-box-9>
</div>
</div>
@@ -84,6 +99,7 @@
<script>
import signageApi from '@/api/signage'
+ import moment from 'moment'
export default {
name: 'WorkshopSectionSignage',
@@ -91,6 +107,9 @@
productionCode: {
type: String,
default: ''
+ },
+ userType: {
+ type: Number
}
},
data() {
@@ -120,34 +139,58 @@
nextNextMonthMaintenancePlanNum: 0,
lineChart: '',
lineChartData: [],
+ gaugeChart1: '',
+ gaugeChart2: '',
+ gaugeChart3: '',
+ gaugeChart4: '',
+ gaugeChartData1: [],
+ gaugeChartData2: [],
+ gaugeChartData3: [],
+ gaugeChartData4: [],
barChart: '',
- barChartData: [],
- doubleBarChart: '',
- doubleBarChartData: {},
- supportPlanList: [
+ barChartData: [
{
- label: '鏈湀涓変繚璁″垝',
- value: 299,
- background: '#719D8E'
+ name: '2640221',
+ value: 20
},
{
- label: '鏈湀瀹屾垚',
- value: 229,
- background: '#409EFF'
+ name: '2640222',
+ value: 40
},
{
- label: '涓嬫湀涓変繚璁″垝',
- value: 319,
- background: '#A8985D'
+ name: '2640223',
+ value: 70
},
{
- label: '涓嬩笅鏈堜笁淇濊鍒�',
- value: 329,
- background: '#58D9F9'
+ name: '2640224',
+ value: 30
+ },
+ {
+ name: '2640225',
+ value: 35
+ },
+ {
+ name: '2640226',
+ value: 80
+ },
+ {
+ name: '2640227',
+ value: 40
+ },
+ {
+ name: '12640220',
+ value: 60
+ },
+ {
+ name: '12640221',
+ value: 40
+ },
+ {
+ name: '12640222',
+ value: 35
}
],
- maintenanceConfig: {},
- problemConfig: {}
+ equipmentId: ''
}
},
mounted() {
@@ -158,22 +201,18 @@
activated() {
console.log('瑙﹀彂activated')
this.handleWindowResize()
+ if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
+ if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
},
methods: {
- backToLastSignage() {
- console.log('瑙﹀彂涓婁竴绾�')
- },
-
getChartDataByApi() {
this.getTechConditionDataByApi()
this.getWarrantyMalfunctionDataByApi()
this.getRunningStateDataByApi()
this.getMonthMaintenanceNumByApi()
- this.getBarChartDataByApi()
- this.getDoubleBarChartDataByApi()
},
/* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
@@ -235,33 +274,14 @@
})
},
- /* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE缁熻 */
- getBarChartDataByApi() {
- signageApi.getEquipmentOEEStatistics(this.productionCode)
- .then(res => {
- if (res.success) this.barChartData = res.result
- this.drawBarChart()
- })
- },
-
- /* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮 */
- getDoubleBarChartDataByApi() {
- signageApi.getEquipmentMonthStatisticsApi(this.productionCode)
- .then(res => {
- if (res.success) this.doubleBarChartData = res.result
- this.drawDoubleBarChart()
- })
- },
-
/* 缁樺埗鍥捐〃姹囨�绘柟娉� */
drawCharts() {
this.drawRunningStateChart()
this.drawTechConditionChart()
this.drawWarrantyMalfunctionChart()
this.drawLineChart()
+ this.drawGaugeChart()
this.drawBarChart()
- this.drawDoubleBarChart()
- this.drawProblemChart()
},
/* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
@@ -311,7 +331,7 @@
{
type: 'pie',
// selectedMode: "single",
- radius: ['30%', '50%'],
+ radius: ['40%', '60%'],
center: ['50%', '50%'],
color: [
'#0AA012',
@@ -390,7 +410,7 @@
{
type: 'pie',
// selectedMode: "single",
- radius: ['30%', '50%'],
+ radius: ['40%', '60%'],
center: ['50%', '50%'],
color: [
'#00CED1',
@@ -468,9 +488,9 @@
series: [
{
type: 'pie',
- roseType: 'angle', // 鐜懓鍥�
+ // roseType: 'angle', // 鐜懓鍥�
// selectedMode: "single",
- radius: ['30%', '70%'],
+ radius: ['35%', '55%'],
center: ['50%', '50%'],
color: [
'#686869',
@@ -484,7 +504,7 @@
color: 'inherit',
// textBorderColor: 'inherit',
// textBorderWidth: 1,
- fontSize: 16,
+ fontSize: 30,
formatter: function(params) {
if (params.name !== '') {
return `${params.name}:${params.value}`
@@ -493,8 +513,8 @@
},
labelLine: {
show: true,
- length2: 10,
- length: 10
+ length2: 20,
+ length: 30
},
data: this.runningStateData
}
@@ -507,19 +527,19 @@
drawLineChart() {
this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
const newData = {
- xAxis: ['2640221', '2640223', '2640224', '2640225', '2640226', '2640227', '2640228', '2640229', '12640220', '12640221', '12640222'],
+ xAxis: ['3鏈�19鏃�', '3鏈�20鏃�', '3鏈�21鏃�', '3鏈�22鏃�', '3鏈�23鏃�', '3鏈�24鏃�', '3鏈�25鏃�'],
yAxis: [
{
name: '鍒╃敤鐜�',
- value: [20, 60, 55, 36, 52, 52, 63, 78, 23, 42, 65]
+ value: [200, 600, 550, 360, 520, 520, 630, 780, 230, 420, 650, 700]
},
{
name: '寮�鍔ㄧ巼',
- value: [23, 63, 44, 40, 74, 80, 60, 90, 70, 40, 70]
+ value: [230, 630, 440, 400, 740, 800, 600, 900, 700, 400, 700, 400]
},
{
name: '寮�鏈虹巼',
- value: [90, 70, 40, 70, 80, 65, 73, 60, 70, 90, 40]
+ value: [900, 700, 400, 700, 800, 605, 730, 600, 700, 900, 400, 605]
}
],
yAxisName: '鍓�7澶╁埄鐢ㄧ巼'
@@ -544,7 +564,6 @@
data: item1.value // 鎶樼嚎鍥剧殑鏁版嵁
}
})
-
const option = {
grid: {
containLabel: true,
@@ -565,7 +584,7 @@
data: legendData,
itemGap: 10,
textStyle: {
- fontSize: 16,
+ fontSize: 14,
color: '#ccc'
}
},
@@ -573,10 +592,10 @@
triggerEvent: true,
data: newData.xAxis || [],
axisLabel: {
- interval: 1,
+ interval: 0,
show: true,
fontSize: 12,
- color: '#50729A',
+ color: '#50729A'
// rotate: -30,
},
axisLine: {
@@ -587,7 +606,7 @@
},
axisTick: {
show: true,
- alignWithLabel:true,
+ alignWithLabel: true
}
},
yAxis: [
@@ -598,6 +617,7 @@
fontSize: 18,
padding: [0, 0, 0, 80]
},
+ nameGap: 30,
type: 'value',
position: 'left',
axisLine: {
@@ -622,7 +642,6 @@
splitNumber: 5,
axisLabel: {
show: true,
- fontSize: 16,
color: '#50729A'
},
axisLine: {
@@ -642,16 +661,166 @@
}
}
],
- series: seriesData
+ series: seriesData,
+ // dataZoom: {
+ // show: false,
+ // startValue: 0, // 浠庡ご寮�濮嬨��
+ // endValue: 5 // 涓�娆℃�у睍绀哄嚑涓�
+ // }
}
this.lineChart.setOption(option, true)
+ // if (newData.xAxis.length <= 6) return
+ // this.lineChartCarouselTime = setInterval(() => {
+ // this.barChartData.push(this.barChartData.shift())
+ // newData.xAxis.push(newData.xAxis.shift())
+ // newData.yAxis.forEach(item => item.value.push(item.value.shift()))
+ // this.$nextTick(() => {
+ // this.lineChart.setOption(option, true)
+ // })
+ // }, 3000)
+ },
+ /* 缁樺埗浠〃鐩樺浘琛� */
+ drawGaugeChart() {
+ const option = {
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC',
+ fontWeight: 'bold'
+ }
+ },
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ grid: {
+ left: '1%',
+ top: '1%',
+ right: '10%',
+ bottom: '1%'
+ },
+ series: [
+ {
+ name: '鍒╃敤鐜�',
+ type: 'gauge',
+ radius: '80%',
+ center: ['50%', '60%'], // 榛樿鍏ㄥ眬灞呬腑
+ pointer: {
+ width: 6,
+ length: '50%',
+ itemStyle: {
+ color: 'inherit'
+ }
+ },
+ splitLine: {
+ show: true,
+ length: 10,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ axisTick: {
+ length: 5,
+ lineStyle: {
+ color: '#fff',
+ width: 1
+ }
+ },
+ axisLabel: {
+ show: false,
+ fontSize: 18,
+ formatter: function(value) {
+ return value + '%'
+ }
+ },
+ axisLine: {
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [ //琛ㄧ洏棰滆壊
+ [0.3, '#E7781E'],//0-30%澶勭殑棰滆壊
+ [0.7, '#C5C039'],//30%-60%澶勭殑棰滆壊
+ [1, '#21C77F']//90%-100%澶勭殑棰滆壊
+ ],
+ width: 15//琛ㄧ洏瀹藉害
+ }
+ },
+ detail: {
+ formatter: '{score|{value}%}',
+ offsetCenter: [0, '50%'],
+ height: 30,
+ rich: {
+ score: {
+ fontSize: 20
+ }
+ }
+ },
+ data: [{ value: 100 }]
+ }
+ ]
+ }
+ this.drawGaugeChart1(option)
+ this.drawGaugeChart2(option)
+ this.drawGaugeChart3(option)
+ this.drawGaugeChart4(option)
+ },
+
+ /* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
+ drawGaugeChart1(opt) {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ const option = Object.assign({}, opt)
+ option.title.text = '鍒╃敤鐜�'
+ this.gaugeChart1.setOption(option, true)
+ },
+
+ /* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
+ drawGaugeChart2(opt) {
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ const option = Object.assign({}, opt)
+ option.title.text = '寮�鍔ㄧ巼'
+ this.gaugeChart2.setOption(option, true)
+ },
+
+ /* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
+ drawGaugeChart3(opt) {
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ const option = Object.assign({}, opt)
+ option.title.text = '寮�鏈虹巼'
+ this.gaugeChart3.setOption(option, true)
+ },
+
+ /* 缁樺埗OEE浠〃鐩樺浘琛� */
+ drawGaugeChart4(opt) {
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ const option = Object.assign({}, opt)
+ option.title.text = 'OEE'
+ this.gaugeChart4.setOption(option, true)
},
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ const xAisData = this.barChartData.map(item => item.name)
const option = {
+ height: 260,
+ title: {
+ show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ text: '涓婁釜鏈圤EE', // 涓绘爣棰樻枃鏈�
+ x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
+ y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
+ textStyle: {
+ // 涓绘爣棰樻枃鏈牱寮�
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: '#00A8AC',
+ fontWeight: 'bold'
+ }
+ },
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -666,186 +835,79 @@
},
grid: {
top: '15%',
- left: '10%'
+ left: '6%',
+ right: '3%'
},
- xAxis: [{
- name: 'OEE杞﹂棿',
- nameLocation: 'middle',
- nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
- type: 'category',
- data: this.barChartData.map(item => item.name),
- axisLine: {
- lineStyle: {
- color: '#FFFFFF'
- }
- },
- axisLabel: {
- margin: 10,
- color: '#e2e9ff',
- textStyle: {
- fontSize: 12
- }
- },
- axisTick: {
- show: false
- }
- }],
- yAxis: [{
- name: '鏁伴噺',
- nameLocation: 'middle',
- nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
- axisLabel: {
- formatter: '{value}',
- color: '#e2e9ff'
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#FFFFFF'
- }
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255,255,255,0.12)'
- }
- }
- }],
- series: [{
- type: 'bar',
- data: this.barChartData,
- barWidth: '15%',
- itemStyle: {
- color: '#7DB17F'
- },
- label: {
- show: true,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
+ xAxis: [
+ {
+ // name: '涓婁釜鏈圤EE',
+ // nameLocation: 'middle',
+ // nameGap: 40, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+ type: 'category',
+ data: xAisData,
+ axisLine: {
+ lineStyle: {
+ color: '#50729A'
+ }
},
- position: 'inside',
- textStyle: {
- color: '#fff',
- fontSize: 18
+ axisLabel: {
+ show: true, // 鏄惁鏄剧ず鍒诲害鏍囩锛岄粯璁ゆ樉绀�
+ interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆�
+ // rotate: this.barChartData.length >= 5 ? -30 : 0, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴�
+ inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶�
+ margin: 6 // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈
+ },
+ axisTick: {
+ show: true,
+ alignWithLabel: true
}
- }
- }]
- }
- this.barChart.setOption(option, true)
- },
-
- /* 缁樺埗鍙屾煴鍥� */
- drawDoubleBarChart() {
- this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
- const option = {
- color: ['#4992FF', '#4DC0B1'],
- tooltip: {
- confine: true,
- formatter: function(params) {
- return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
- '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%'
- }
- },
- grid: {
- left: '5%',
- right: '4%',
- bottom: '10%',
- top: '20%',
- containLabel: true
- },
- legend: {
- icon: 'roundRect',
- orient: 'horizontal',
- left: 'center',
- itemWidth: 14,
- itemHeight: 14,
- formatter: ['{a|{name}}'].join('\n'),
- textStyle: {
- fontSize: 14,
- color: '#6A93B9',
- height: 8,
- rich: {
- a: {
- verticalAlign: 'bottom'
+ }],
+ yAxis: [
+ {
+ // name: '鏁伴噺',
+ // nameLocation: 'middle',
+ // nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+ position: 'left',
+ axisLabel: {
+ formatter: '{value}',
+ color: '#50729A'
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: 'rgba(255,255,255,0.12)'
}
}
},
- data: ['OEE', '鍒╃敤鐜�']
- },
- xAxis: {
- type: 'category',
- data: this.doubleBarChartData.dateList,
- axisLine: {
- lineStyle: {
- color: 'rgba(255,255,255,0.45)'
+ {
+ position: 'right',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#50729A'
+ }
}
- },
- axisLabel: {
- fontSize: 12,
- color: '#6A93B9'
- },
- axisTick: {
- show: false
}
- },
- yAxis: [{
- name: '%',
- type: 'value',
- min: 0,
- minInterval: 1,
- splitArea: {
- show: false
- },
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.15)'
- // type: 'dashed', // dotted 铏氱嚎
- }
- },
- axisLabel: {
- fontSize: 12,
- color: '#6A93B9',
- fontFamily: 'Bebas'
- }
- }, {
- type: 'value',
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- splitLine: {
- show: false
- },
- axisLabel: {
- fontSize: 12,
- formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀�
- fontFamily: 'Bebas',
- color: '#6A93B9'
- },
- splitArea: {
- show: false
- }
- }],
+ ],
series: [{
type: 'bar',
- barWidth: 15,
- itemStyle: { barBorderRadius: [3, 3, 0, 0] },
- name: 'OEE',
- data: this.doubleBarChartData.oeeList,
+ data: this.barChartData,
+ barWidth: '25%',
+ itemStyle: {
+ color: '#129FC6',
+ barBorderRadius: [10, 10, 10, 10]
+ },
label: {
- show: true,
+ show: false,
lineHeight: 10,
formatter: params => {
if (+params.value === 0) return ''
@@ -853,48 +915,27 @@
},
position: 'inside',
textStyle: {
- color: '#fff',
- fontSize: 12
+ color: '#50729A',
+ fontSize: 18
}
}
- }, {
- type: 'bar',
- barWidth: 15,
- itemStyle: { barBorderRadius: [3, 3, 0, 0] },
- name: '鍒╃敤鐜�',
- data: this.doubleBarChartData.utilizationList,
- label: {
- show: true,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
- },
- position: 'inside',
- textStyle: {
- color: '#fff',
- fontSize: 12
- }
- }
+ }],
+ dataZoom: {
+ show: false,
+ startValue: 0, // 浠庡ご寮�濮嬨��
+ endValue: 5 // 涓�娆℃�у睍绀哄嚑涓�
}
- ]
}
- this.doubleBarChart.setOption(option, true)
- },
-
- /* 缁樺埗闂婊氬姩琛� */
- drawProblemChart() {
- this.problemConfig = {
- indexHeader: '搴忓彿',
- header: ['鏃堕棿', '闂鍐呭'],
- headerBGC: '#83B883',
- oddRowBGC: '#556955',
- evenRowBGC: '#556955',
- data: [],
- index: true,
- columnWidth: [100, 300, 300],
- align: ['center']
- }
+ option.title.text = `${moment().subtract(1, 'months').format('M')}鏈圤EE`
+ this.barChart.setOption(option, true)
+ if (this.barChartData.length <= 6) return
+ this.barChartCarouselTime = setInterval(() => {
+ this.barChartData.push(this.barChartData.shift())
+ xAisData.push(xAisData.shift())
+ this.$nextTick(() => {
+ this.barChart.setOption(option, true)
+ })
+ }, 3000)
},
/**
@@ -902,12 +943,15 @@
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
*/
handleWindowResize() {
- if (this.runningStateChart) this.runningStateChart.resize()
- if (this.efficiencyChart) this.efficiencyChart.resize()
if (this.techConditionChart) this.techConditionChart.resize()
if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
+ if (this.runningStateChart) this.runningStateChart.resize()
+ if (this.lineChart) this.lineChart.resize()
+ if (this.gaugeChart1) this.gaugeChart1.resize()
+ if (this.gaugeChart2) this.gaugeChart2.resize()
+ if (this.gaugeChart3) this.gaugeChart3.resize()
+ if (this.gaugeChart4) this.gaugeChart4.resize()
if (this.barChart) this.barChart.resize()
- if (this.doubleBarChart) this.doubleBarChart.resize()
}
}
}
@@ -936,6 +980,17 @@
justify-content: space-between;
.left-col {
+ .back-nav {
+ width: 100px;
+ height: 30px;
+ color: #eee;
+ position: absolute;
+ top: 50px;
+ left: 10px;
+ cursor: pointer;
+ z-index: 9999
+ }
+
.support-plan-container {
width: 100%;
display: flex;
@@ -977,7 +1032,28 @@
}
}
- /deep/ .dv-scroll-board .header {
- height: 35px;
+ /deep/ .ant-form.ant-form-inline {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ /deep/ .ant-form .ant-form-item-label label {
+ color: #fff;
+ font-size: 18px;
+ }
+
+ /deep/ .ant-select-selection {
+ background: transparent !important;
+ }
+
+ /deep/ .ant-select-selection__clear {
+ background: transparent !important;
+ color: #fff;
+ }
+
+ /deep/ .ant-input {
+ border: 1px solid #689ACA;
+ color: #fff;
+ background: transparent !important;
}
</style>
\ No newline at end of file
diff --git a/src/views/system/modules/UserModal.vue b/src/views/system/modules/UserModal.vue
index a1f4328..dc6a2a4 100644
--- a/src/views/system/modules/UserModal.vue
+++ b/src/views/system/modules/UserModal.vue
@@ -160,6 +160,15 @@
placeholder="璇烽�夋嫨璁惧" :disabled="!model.selectedProduction"/>
</a-form-model-item>
+ <a-form-model-item label="棣栭〉鏉冮檺" :labelCol="labelCol" :wrapperCol="wrapperCol">
+ <a-radio-group v-model="model.userType" :defaultValue="1">
+ <a-radio :value="4">鍏徃绾�</a-radio>
+ <a-radio :value="3">杞﹂棿绾�</a-radio>
+ <a-radio :value="2">宸ユ绾�</a-radio>
+ <a-radio :value="1">鎿嶄綔宸�</a-radio>
+ </a-radio-group>
+ </a-form-model-item>
+
<a-form-model-item
label="鐝粍鍒嗛厤"
:labelCol="labelCol"
@@ -201,91 +210,82 @@
</j-multi-select-tag>
</a-form-model-item>
- <a-form-model-item
- label="澶村儚"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <j-image-upload
- class="avatar-uploader"
- text="涓婁紶"
- v-model="model.avatar"
- ></j-image-upload>
- </a-form-model-item>
+ <!--<a-form-model-item-->
+ <!--label="澶村儚"-->
+ <!--:labelCol="labelCol"-->
+ <!--:wrapperCol="wrapperCol"-->
+ <!-->-->
+ <!--<j-image-upload-->
+ <!--class="avatar-uploader"-->
+ <!--text="涓婁紶"-->
+ <!--v-model="model.avatar"-->
+ <!--></j-image-upload>-->
+ <!--</a-form-model-item>-->
- <a-form-model-item
- label="鐢熸棩"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-date-picker
- style="width: 100%"
- placeholder="璇烽�夋嫨鐢熸棩"
- v-model="model.birthday"
- :format="dateFormat"
- :getCalendarContainer="node => node.parentNode"
- />
- </a-form-model-item>
+ <!--<a-form-model-item-->
+ <!--label="鐢熸棩"-->
+ <!--:labelCol="labelCol"-->
+ <!--:wrapperCol="wrapperCol"-->
+ <!-->-->
+ <!--<a-date-picker-->
+ <!--style="width: 100%"-->
+ <!--placeholder="璇烽�夋嫨鐢熸棩"-->
+ <!--v-model="model.birthday"-->
+ <!--:format="dateFormat"-->
+ <!--:getCalendarContainer="node => node.parentNode"-->
+ <!--/>-->
+ <!--</a-form-model-item>-->
- <a-form-model-item
- label="鎬у埆"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-select
- v-model="model.sex"
- placeholder="璇烽�夋嫨鎬у埆"
- :getPopupContainer="(target) => target.parentNode"
- >
- <a-select-option :value="1">鐢�</a-select-option>
- <a-select-option :value="2">濂�</a-select-option>
- </a-select>
- </a-form-model-item>
+ <!--<a-form-model-item-->
+ <!--label="鎬у埆"-->
+ <!--:labelCol="labelCol"-->
+ <!--:wrapperCol="wrapperCol"-->
+ <!-->-->
+ <!--<a-select-->
+ <!--v-model="model.sex"-->
+ <!--placeholder="璇烽�夋嫨鎬у埆"-->
+ <!--:getPopupContainer="(target) => target.parentNode"-->
+ <!-->-->
+ <!--<a-select-option :value="1">鐢�</a-select-option>-->
+ <!--<a-select-option :value="2">濂�</a-select-option>-->
+ <!--</a-select>-->
+ <!--</a-form-model-item>-->
- <a-form-model-item
- label="閭"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- prop="email"
- >
- <a-input
- placeholder="璇疯緭鍏ラ偖绠�"
- v-model="model.email"
- />
- </a-form-model-item>
+ <!--<a-form-model-item-->
+ <!--label="閭"-->
+ <!--:labelCol="labelCol"-->
+ <!--:wrapperCol="wrapperCol"-->
+ <!--prop="email"-->
+ <!-->-->
+ <!--<a-input-->
+ <!--placeholder="璇疯緭鍏ラ偖绠�"-->
+ <!--v-model="model.email"-->
+ <!--/>-->
+ <!--</a-form-model-item>-->
- <a-form-model-item
- label="鎵嬫満鍙风爜"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- prop="phone"
- >
- <a-input
- placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�"
- v-model="model.phone"
- />
- </a-form-model-item>
+ <!--<a-form-model-item-->
+ <!--label="鎵嬫満鍙风爜"-->
+ <!--:labelCol="labelCol"-->
+ <!--:wrapperCol="wrapperCol"-->
+ <!--prop="phone"-->
+ <!-->-->
+ <!--<a-input-->
+ <!--placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�"-->
+ <!--v-model="model.phone"-->
+ <!--/>-->
+ <!--</a-form-model-item>-->
- <a-form-model-item
- label="搴ф満"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- prop="telephone"
- >
- <a-input
- placeholder="璇疯緭鍏ュ骇鏈�"
- v-model="model.telephone"
- />
- </a-form-model-item>
-
- <a-form-model-item label="韬唤" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-radio-group v-model="model.userType">
- <a-radio :value="1">鏅�氱敤鎴�</a-radio>
- <a-radio :value="2">宸ユ涓荤</a-radio>
- <a-radio :value="3">杞﹂棿涓荤</a-radio>
- <a-radio :value="4">鍏徃涓荤</a-radio>
- </a-radio-group>
- </a-form-model-item>
+ <!--<a-form-model-item-->
+ <!--label="搴ф満"-->
+ <!--:labelCol="labelCol"-->
+ <!--:wrapperCol="wrapperCol"-->
+ <!--prop="telephone"-->
+ <!-->-->
+ <!--<a-input-->
+ <!--placeholder="璇疯緭鍏ュ骇鏈�"-->
+ <!--v-model="model.telephone"-->
+ <!--/>-->
+ <!--</a-form-model-item>-->
<!--<a-form-model-item label="宸ヤ綔娴佸紩鎿�" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--<j-dict-select-tag v-model="model.activitiSync" placeholder="璇烽�夋嫨鏄惁鍚屾宸ヤ綔娴佸紩鎿�" :type="'radio'" dictCode="activiti_sync"/>-->
<!--</a-form-model-item>-->
@@ -452,6 +452,7 @@
this.refresh()
this.edit({
activitiSync: '1',
+ userType: 1,
userIdentity: 1,
selectedroles: '',
selecteddeparts: '',
--
Gitblit v1.9.3