mt-fe-group/mt-yd-ui
12
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

update 数据分析 #9

Merged
gtz217 merged 1 commits from lb into develop 2022-10-17 15:51:27 +08:00
Conversation 0 Commits 1 Files Changed 3 +69 -64
3 changed files with 69 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/modules/monitoring/equipmentEfficiency.vue
View File

@ -5,14 +5,15 @@
<!-- 工厂 --> <!-- 工厂 -->
<el-form-item> <el-form-item>
<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> --> <!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
<el-select v-model="dataForm.ftId" :placeholder="'工厂'" clearable> <el-select v-model="dataForm.ftId" :placeholder="'工厂'" clearable @change="handleFactoryChange">
<el-option v-for="factory in factoryList" :key="factory.id" :value="factory.id" :label="factory.name" /> <el-option v-for="factory in factoryList" :key="factory.id" :value="factory.id" :label="factory.name" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 产线 --> <!-- 产线 -->
<el-form-item> <el-form-item>
<el-select v-model="dataForm.productlines" :placeholder="'产线'" multiple clearable> <el-select v-model="dataForm.productlines" :placeholder="'产线'" multiple clearable>
<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" /> <el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id"
:label="productLine.name" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 时间类型 --> <!-- 时间类型 -->
@ -29,15 +30,8 @@
</el-form-item> </el-form-item>
<!-- 时间段选择 --> <!-- 时间段选择 -->
<el-form-item v-else> <el-form-item v-else>
<el-date-picker <el-date-picker key="time-picker" v-model="rawTime" type="daterange" :range-separator="'至'"
key="time-picker" :start-placeholder="'开始时间'" :end-placeholder="'结束时间'" format="yyyy-MM-dd" />
v-model="rawTime"
type="daterange"
:range-separator="'至'"
:start-placeholder="'开始时间'"
:end-placeholder="'结束时间'"
format="yyyy-MM-dd"
/>
</el-form-item> </el-form-item>
<!-- 按钮 --> <!-- 按钮 -->
<el-form-item> <el-form-item>
@ -48,7 +42,8 @@
<transition mode="out-in" name="slide-to-left"> <transition mode="out-in" name="slide-to-left">
<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" /> <equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
<base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" /> <base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)"
@operate-event="handleOperations" @refreshDataList="getDataList" />
<!-- v-loading="dataIsLoading " --> <!-- v-loading="dataIsLoading " -->
</transition> </transition>
<!-- <el-pagination <!-- <el-pagination
@ -66,11 +61,11 @@
<script> <script>
import i18n from '@/i18n' import i18n from '@/i18n'
import BaseTable from '@/components/base-table' import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent' // import TableOperateComponent from '@/components/base-table/components/operationComponent'
import TableTextComponent from '@/components/base-table/components/detailComponent' import TableTextComponent from '@/components/base-table/components/detailComponent'
import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue' import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue'
import { calcMaxHeight } from '@/utils' import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters' // import { timeFilter } from '@/utils/filters'
import moment from 'moment' import moment from 'moment'
const tableConfigs = [ const tableConfigs = [
@ -171,9 +166,10 @@ export default {
EquipmentEfficiencyGraph EquipmentEfficiencyGraph
}, },
created() { activated() {
this.getFactoryList() this.getFactoryList().then(() => {
this.getProductLineList() this.getProductLineList()
})
}, },
watch: { watch: {
timeType() { timeType() {
@ -184,12 +180,12 @@ export default {
methods: { methods: {
// 获取工厂列表 // 获取工厂列表
getFactoryList() { getFactoryList() {
this.$http({ return this.$http({
url: this.$http.adornUrl('/monitoring/factory/page'), url: this.$http.adornUrl('/monitoring/factory/list'),
method: 'get' method: 'get'
}).then(({ data }) => { }).then(({ data: res }) => {
if (data && data.code === 0) { if (res && res.code === 0) {
this.factoryList = data.data.list this.factoryList = res.data
/** set default */ /** set default */
if (this.factoryList.length) { if (this.factoryList.length) {
this.dataForm.ftId = this.factoryList[0].id this.dataForm.ftId = this.factoryList[0].id
@ -200,20 +196,31 @@ export default {
} }
}) })
}, },
// 选择工厂时
handleFactoryChange(val) {
this.getProductLineList()
},
// 获取产线列表 // 获取产线列表
getProductLineList() { getProductLineList() {
this.$http({ const query = {
url: this.$http.adornUrl('/monitoring/productionLine/page'), url: this.$http.adornUrl('/monitoring/productionLine/list'),
method: 'get' method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
this.productLineList = data.data.list
/** set default */
if (this.productLineList.length) {
this.dataForm.productlines = [this.productLineList[0].id]
} }
if (this.dataForm.ftId) {
query.params = this.$http.adornParams({
factoryId: this.dataForm.ftId
});
}
this.$http(query).then(({ data: res }) => {
if (res && res.code === 0 && res.data.length) {
this.productLineList = res.data
/** set default */
this.dataForm.productlines = [this.productLineList[0].id]
} else { } else {
this.productLineList = [] this.productLineList = []
this.dataForm.productlines = []
} }
}) })
}, },

11
src/views/modules/monitoring/equipmentException.vue
View File

@ -96,7 +96,7 @@ export default {
BaseTable BaseTable
}, },
created() { activated() {
// this.getFactoryList() // this.getFactoryList()
this.getProductLineList() this.getProductLineList()
}, },
@ -123,17 +123,18 @@ export default {
// 获取产线列表 // 获取产线列表
getProductLineList() { getProductLineList() {
this.$http({ this.$http({
url: this.$http.adornUrl('/monitoring/productionLine/page'), url: this.$http.adornUrl('/monitoring/productionLine/list'),
method: 'get' method: 'get'
}).then(({ data }) => { }).then(({ data: res }) => {
if (data && data.code === 0) { if (res && res.code === 0) {
this.productLineList = data.data.list this.productLineList = res.data
/** set default */ /** set default */
if (this.productLineList.length) { if (this.productLineList.length) {
this.dataForm.productlines = [this.productLineList[0].id] this.dataForm.productlines = [this.productLineList[0].id]
} }
} else { } else {
this.productLineList = [] this.productLineList = []
this.dataForm.productlines = []
} }
}) })
}, },

37
src/views/modules/monitoring/equipmentTimesequence.vue
View File

@ -5,7 +5,8 @@
<!-- 产线 --> <!-- 产线 -->
<el-form-item> <el-form-item>
<el-select v-model="dataForm.productlines" :placeholder="'产线'" @change="handleProductLineChange" clearable> <el-select v-model="dataForm.productlines" :placeholder="'产线'" @change="handleProductLineChange" clearable>
<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" /> <el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id"
:label="productLine.name" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 工序 --> <!-- 工序 -->
@ -30,14 +31,8 @@
</el-form> </el-form>
<div class="time-chart" style="margin-top: 10px;"> <div class="time-chart" style="margin-top: 10px;">
<div <div v-show="equipmentCount > 0" id="time-chart__inner" ref="time-chart__inner" class="time-chart__inner"
v-show="equipmentCount > 0" style="min-height: 50vh;" :style="{ height: autoHeight + 'px', width: '100%' }" />
id="time-chart__inner"
ref="time-chart__inner"
class="time-chart__inner"
style="min-height: 50vh;"
:style="{ height: autoHeight + 'px', width: '100%' }"
/>
<div v-show="equipmentCount === 0">请先查询数据</div> <div v-show="equipmentCount === 0">请先查询数据</div>
<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> --> <!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> -->
</div> </div>
@ -107,7 +102,7 @@ class ChartOption {
} }
} }
this.tooltip = { this.tooltip = {
formatter: function(params) { formatter: function (params) {
return moment(params.value[1]).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(params.value[2]).format('YYYY-MM-DD HH:mm:ss') + ' : ' + params.name return moment(params.value[1]).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(params.value[2]).format('YYYY-MM-DD HH:mm:ss') + ' : ' + params.name
} }
} }
@ -132,7 +127,7 @@ class ChartOption {
show: true show: true
}, },
axisLabel: { axisLabel: {
formatter: function(val) { formatter: function (val) {
const time = new Date(val) const time = new Date(val)
const hour = time.getHours() const hour = time.getHours()
const minute = time.getMinutes() const minute = time.getMinutes()
@ -223,17 +218,14 @@ export default {
BaseTable BaseTable
}, },
computed: { computed: {
autoHeight: function() { autoHeight: function () {
return Object.keys(this.equipments).length * 100 || 500 return Object.keys(this.equipments).length * 100 || 500
}, },
equipmentCount: function() { equipmentCount: function () {
return Object.keys(this.equipments).length return Object.keys(this.equipments).length
} }
}, },
created() { created() {
this.getProductLineList().then(() => {
this.getWorksetionList()
})
this.getEqList() this.getEqList()
}, },
mounted() { mounted() {
@ -241,6 +233,11 @@ export default {
this.initChart() this.initChart()
}) })
}, },
activated() {
this.getProductLineList().then(() => {
this.getWorksetionList()
})
},
updated() { updated() {
if (this.chart) this.chart.resize() if (this.chart) this.chart.resize()
}, },
@ -259,11 +256,11 @@ export default {
// 获取产线列表 // 获取产线列表
getProductLineList() { getProductLineList() {
return this.$http({ return this.$http({
url: this.$http.adornUrl('/monitoring/productionLine/page'), url: this.$http.adornUrl('/monitoring/productionLine/list'),
method: 'get' method: 'get'
}).then(({ data }) => { }).then(({ data: res }) => {
if (data && data.code === 0) { if (res && res.code === 0) {
this.productLineList = data.data.list this.productLineList = res.data
/** set default */ /** set default */
if (this.productLineList.length) { if (this.productLineList.length) {
this.dataForm.productlines = this.productLineList[0].id this.dataForm.productlines = this.productLineList[0].id