286 lines
8.6 KiB
Vue
286 lines
8.6 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2020-12-29 15:41:11
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2021-07-21 14:17:27
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<el-form
|
|
:model="formData"
|
|
:inline="true"
|
|
size="medium"
|
|
label-width="80px"
|
|
>
|
|
<el-form-item>
|
|
<el-radio-group v-model="formData.timeType">
|
|
<el-radio-button label="Year">{{ $t('module.equipmentManager.equipmentVisualization.Year') }}</el-radio-button>
|
|
<el-radio-button label="Quarter">{{ $t('module.equipmentManager.equipmentVisualization.Quarter') }}</el-radio-button>
|
|
<el-radio-button label="Month">{{ $t('module.equipmentManager.equipmentVisualization.Month') }}</el-radio-button>
|
|
<el-radio-button label="Week">{{ $t('module.equipmentManager.equipmentVisualization.Week') }}</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
|
|
<el-date-picker
|
|
v-model="formData.timeSlot"
|
|
type="daterange"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
:start-placeholder="$t('module.orderManage.order.StartTime')"
|
|
:end-placeholder="$t('module.orderManage.order.StartTime')"
|
|
:range-separator="$t('module.orderManage.order.To')"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
|
|
<el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
|
|
<el-option
|
|
v-for="item in WorkOrderList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-radio-group v-model="barType" @change="setBarType">
|
|
<el-radio-button label="Electric">{{ $t('module.equipmentManager.equipmentVisualization.Electric') }}</el-radio-button>
|
|
<el-radio-button label="Water">{{ $t('module.equipmentManager.equipmentVisualization.Water') }}</el-radio-button>
|
|
<el-radio-button label="Gas">{{ $t('module.equipmentManager.equipmentVisualization.Gas') }}</el-radio-button>
|
|
</el-radio-group>
|
|
<el-card style="margin-top:10px">
|
|
<echarts-bar
|
|
v-if="BarVisible"
|
|
ref="BarRef"
|
|
:color="color"
|
|
:bar-style="barStyle"
|
|
:title="barTitle"
|
|
:legend="legend"
|
|
:x-axis="xAxis"
|
|
:y-axis="yAxis"
|
|
:series="series"
|
|
@refreshDataList="getList"
|
|
/>
|
|
</el-card>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-card style="margin-top:10px;width:100%">
|
|
<echarts-bar-one
|
|
v-if="BarVisible1"
|
|
:id="bar1"
|
|
ref="BarRef1"
|
|
:bar-style="barStyle1"
|
|
:title="barTitle1"
|
|
:legend="legend1"
|
|
:x-axis="xAxis1"
|
|
:y-axis="yAxis1"
|
|
:series="series1"
|
|
@refreshDataList="getList"
|
|
/>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card style="margin-top:10px;width:100%,">
|
|
<echarts-gauge
|
|
:id="gauge"
|
|
:gauge-style="gaugeStyle"
|
|
@refreshDataList="getList"
|
|
/>
|
|
<div style="height:115px">
|
|
<el-row :gutter="10">
|
|
<el-col :span="8"><div class="grid-content bg-purple">今日用电:10837</div></el-col>
|
|
<el-col :span="8"><div class="grid-content bg-purple">昨日用电:18832</div></el-col>
|
|
<el-col :span="8"><div class="grid-content bg-purple">前日用电:10837</div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col :span="8"><div class="grid-content bg-purple">本周用电:80237</div></el-col>
|
|
<el-col :span="8"><div class="grid-content bg-purple">上周用电:17552</div></el-col>
|
|
<el-col :span="8"><div class="grid-content bg-purple">前周用电:657828</div></el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col :span="8"><div class="grid-content bg-purple">本月用电:767837</div></el-col>
|
|
<el-col :span="8"><div class="grid-content bg-purple">上月用电:785879</div></el-col>
|
|
<el-col :span="8"><div class="grid-content bg-purple">前月用电:765868</div></el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
|
|
import echartsBar from './components/echarts-Bar.vue'
|
|
import echartsBarOne from './components/echarts-Bar.vue'
|
|
import echartsGauge from './components/echarts-Gauge.vue'
|
|
/**
|
|
* 表格表头配置项 TypeScript接口注释
|
|
* tableConfig<ConfigItem> = []
|
|
*
|
|
* Interface ConfigItem = {
|
|
* prop: string,
|
|
* label: string,
|
|
* width: string,
|
|
* align: string,
|
|
* subcomponent: function,
|
|
* filter: function
|
|
* }
|
|
*
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
name: 'EquipmentEnergyMonitor',
|
|
components: { echartsBar, echartsBarOne, echartsGauge },
|
|
data() {
|
|
return {
|
|
BarVisible: false,
|
|
BarVisible1: true,
|
|
WorkOrderList: [],
|
|
barType: 'Electric',
|
|
formData: {
|
|
WorkOrderId: '',
|
|
timeType: 'Month',
|
|
timeSlot: []
|
|
},
|
|
// 假数据
|
|
barStyle: {
|
|
height: '400px',
|
|
width: '100%',
|
|
margin: '20px'
|
|
},
|
|
color: [
|
|
'#5470C6', '#91CC75'
|
|
],
|
|
barTitle: {
|
|
text: '能耗数据',
|
|
subtext: '同环能耗数据'
|
|
},
|
|
legend: {
|
|
data: ['综合线', '镀膜线']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
name: '综合线',
|
|
data: [],
|
|
type: 'bar'
|
|
}, {
|
|
name: '镀膜线',
|
|
data: [],
|
|
type: 'bar'
|
|
}],
|
|
// 假数据
|
|
bar1: 'barChart1',
|
|
barStyle1: {
|
|
height: '515px',
|
|
width: '100%',
|
|
margin: '20px'
|
|
},
|
|
barTitle1: {
|
|
text: '设备加工数量',
|
|
subtext: '设备加工数量柱状图'
|
|
},
|
|
legend1: {
|
|
data: []
|
|
},
|
|
xAxis1: {
|
|
type: 'value'
|
|
},
|
|
yAxis1: {
|
|
type: 'category',
|
|
data: ['磨片机', '转片台', '磨边机', '清洗机', '钻孔机', '翻板机', '清洗机']
|
|
},
|
|
series1: [{
|
|
name: '电量消耗',
|
|
data: [323.234, 323.841, 755.45, 251.453, 454.786, 484.786, 154.786],
|
|
barWidth: '60%',
|
|
type: 'bar'
|
|
}],
|
|
gauge: 'gauge1',
|
|
gaugeStyle: {
|
|
height: '400px',
|
|
width: '100%',
|
|
margin: '20px'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
this.setBarType()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
const listQuery = {
|
|
current: 1,
|
|
size: 500
|
|
}
|
|
this.WorkOrderList.splice(0, this.WorkOrderList.length)
|
|
workOrderList(listQuery).then(response => {
|
|
if (response.data.records) {
|
|
this.WorkOrderList = response.data.records
|
|
}
|
|
})
|
|
if (this.formData.timeSlot) {
|
|
this.formData.startTime = this.formData.timeSlot[0]
|
|
this.formData.endTime = this.formData.timeSlot[1]
|
|
} else {
|
|
this.formData.startTime = ''
|
|
this.formData.endTime = ''
|
|
}
|
|
},
|
|
setBarData() {
|
|
this.series[0].data.splice(0, this.series[0].data.length)
|
|
this.series[1].data.splice(0, this.series[1].data.length)
|
|
for (let i = 0; i < 12; i++) {
|
|
this.series[0].data.push(Math.round(Math.random() * 1500))
|
|
this.series[1].data.push(Math.round(Math.random() * 1500))
|
|
}
|
|
},
|
|
setBarType() {
|
|
this.setBarData()
|
|
this.BarVisible = true
|
|
// 获取柱状图数据
|
|
// getBarData(Object.assign(this.formData, { barType: this.barType })).then(response => {
|
|
// if (response.data.records) {
|
|
// this.getBarData = response.data.records
|
|
// }
|
|
// })
|
|
this.$nextTick(() => {
|
|
this.$refs.BarRef.init()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.edit-input {
|
|
padding-right: 100px;
|
|
}
|
|
.cancel-btn {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 10px;
|
|
}
|
|
.bg-purple {
|
|
background: #d3dce6;
|
|
}
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|