init
This commit is contained in:
@@ -0,0 +1,285 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-07-26 10:35:28
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:inline="true"
|
||||
size="medium"
|
||||
label-width="150px"
|
||||
>
|
||||
<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>
|
||||
@@ -0,0 +1,173 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-07-22 09:36:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:inline="true"
|
||||
size="medium"
|
||||
label-width="80px"
|
||||
>
|
||||
<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>
|
||||
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-card>
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
mode="horizontal"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="1">{{ $t('module.equipmentManager.equipmentVisualization.DataTable') }}</el-menu-item>
|
||||
<el-menu-item index="2">{{ $t('module.equipmentManager.equipmentVisualization.Histogram') }}</el-menu-item>
|
||||
</el-menu>
|
||||
</el-card>
|
||||
<EquipmentProcessingQuantity-table v-if="tableVisible" ref="tableRef" @refreshDataList="getList" />
|
||||
<echarts-bar
|
||||
v-if="BarVisible"
|
||||
ref="BarRef"
|
||||
:bar-style="barStyle"
|
||||
:title="barTitle"
|
||||
:legend="legend"
|
||||
:x-axis="xAxis"
|
||||
:y-axis="yAxis"
|
||||
:series="series"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EquipmentProcessingQuantityTable from './components/EquipmentProcessingQuantity-table'
|
||||
import echartsBar from './components/echarts-Bar.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'EquipmentProcessingQuantity',
|
||||
components: { EquipmentProcessingQuantityTable, echartsBar },
|
||||
data() {
|
||||
return {
|
||||
tableVisible: false,
|
||||
BarVisible: false,
|
||||
activeIndex: '1',
|
||||
formData: {
|
||||
timeSlot: [],
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
// 假数据
|
||||
barStyle: {
|
||||
height: '500px',
|
||||
width: '100%',
|
||||
margin: '20px'
|
||||
},
|
||||
barTitle: {
|
||||
text: '设备加工数量',
|
||||
subtext: '设备加工数量柱状图'
|
||||
},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['涂覆机', 'ACOAT Machine', '活化炉', 'Activation furnace', '退火炉', '仓储系统', '汇流条粘接机', 'CSS镀膜 CSS', '铜扩散', 'DOPE Machine', '热熔封边机', '终检仪(FL+HP)', '性能检测(EL+IV)', '磨边机', 'Grind Machine', '接线盒安装站', '层压机－01', '层压机－02', '清边机', '上片机械手', 'Loading Robot', '上片机械手', 'Loading Robot', '下片机械手', '合片封装站', 'ID打标机', 'Laser Mark', '刻蚀设备', '光刻胶显影机', 'RDEV machine', '光刻胶处理设备', 'RTREAT Machine', '刻线机', 'SCR Machine', '刻线机', 'SCR Machine', '刻线机', '磁控溅射设备', 'Sputtering machine', '磁控溅射设备', '玻璃检测仪', 'Glass detector', '膜层检测仪', 'SUBIN Detector', '缺陷检测仪', '传输系统', '清洗机', 'Cleaning machine', '涂层清洗机', 'Wash machine', '玻璃清洗机', '预清洗机', 'Pre cleaning machine', 'SUBIN_THK_01', 'SUBIN_THK_02'],
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
formatter: function(value) {
|
||||
return value.split('').join('\n')
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 150, 160, 140, 170, 155, 140, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 150, 160, 140, 170, 155, 140, 160, 140, 170, 155, 140, 167],
|
||||
type: 'scatter',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(220, 220, 220, 0.8)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.handleSelect('1')
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
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 = ''
|
||||
}
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
this.tableVisible = false
|
||||
this.BarVisible = false
|
||||
switch (key) {
|
||||
case '1':
|
||||
this.tableVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tableRef.init()
|
||||
})
|
||||
break
|
||||
case '2':
|
||||
this.BarVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.BarRef.init()
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
225
src/views/EquipmentManager/equipmentVisualization/Visualized.vue
Normal file
225
src/views/EquipmentManager/equipmentVisualization/Visualized.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-07-22 10:18:21
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:inline="true"
|
||||
size="medium"
|
||||
label-width="80px"
|
||||
>
|
||||
<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>
|
||||
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<echarts-pie-a
|
||||
id="pieA"
|
||||
ref="BarRef"
|
||||
:pie-style="pieStyle"
|
||||
:title="title1"
|
||||
:legend="legend"
|
||||
:name="name"
|
||||
:data="pieData"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<echarts-pie-b
|
||||
id="pieB"
|
||||
ref="BarRef"
|
||||
:pie-style="pieStyle"
|
||||
:title="title2"
|
||||
:legend="legend"
|
||||
:name="name"
|
||||
:data="pieData"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<echarts-pie-c
|
||||
id="pieC"
|
||||
ref="BarRef"
|
||||
:pie-style="pieStyle"
|
||||
:title="title3"
|
||||
:legend="legend"
|
||||
:name="name"
|
||||
:data="pieData"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<echarts-pie-d
|
||||
id="pieD"
|
||||
ref="BarRef"
|
||||
:pie-style="pieStyle"
|
||||
:title="title4"
|
||||
:legend="legend"
|
||||
:name="name"
|
||||
:data="pieData"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<echarts-pie-e
|
||||
id="pieE"
|
||||
ref="BarRef"
|
||||
:pie-style="pieStyle"
|
||||
:title="title5"
|
||||
:legend="legend"
|
||||
:name="name"
|
||||
:data="pieData"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<echarts-pie-f
|
||||
id="pieF"
|
||||
ref="BarRef"
|
||||
:pie-style="pieStyle"
|
||||
:title="title6"
|
||||
:legend="legend"
|
||||
:name="name"
|
||||
:data="pieData"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartsPieA from './components/echarts-Pie.vue'
|
||||
import echartsPieB from './components/echarts-Pie.vue'
|
||||
import echartsPieC from './components/echarts-Pie.vue'
|
||||
import echartsPieD from './components/echarts-Pie.vue'
|
||||
import echartsPieE from './components/echarts-Pie.vue'
|
||||
import echartsPieF from './components/echarts-Pie.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'EquipmentProcessingQuantity',
|
||||
components: { echartsPieA, echartsPieB, echartsPieC, echartsPieD, echartsPieE, echartsPieF },
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
timeSlot: [],
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
// 假数据
|
||||
pieStyle: {
|
||||
height: '350px',
|
||||
width: '100%',
|
||||
margin: '20px'
|
||||
},
|
||||
title1: {
|
||||
text: '涂覆机',
|
||||
subtext: '运行状态良好'
|
||||
},
|
||||
title2: {
|
||||
text: '活化炉',
|
||||
subtext: '运行状态良好'
|
||||
},
|
||||
title3: {
|
||||
text: '退火炉',
|
||||
subtext: '运行状态良好'
|
||||
},
|
||||
title4: {
|
||||
text: '仓储系统',
|
||||
subtext: '运行状态良好'
|
||||
},
|
||||
title5: {
|
||||
text: '汇流条粘接机',
|
||||
subtext: '运行状态良好'
|
||||
},
|
||||
title6: {
|
||||
text: '热熔封边机',
|
||||
subtext: '运行状态良好'
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
left: 'center'
|
||||
},
|
||||
name: '时间',
|
||||
pieData: [
|
||||
{ value: Math.round(Math.random() * 200), name: '运行时间' },
|
||||
{ value: Math.round(Math.random() * 200), name: '维修时间' },
|
||||
{ value: Math.round(Math.random() * 200), name: '维护时间' },
|
||||
{ value: Math.round(Math.random() * 200), name: '停机时间' }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
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 = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-04-22 14:54:30
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentCode'),
|
||||
align: 'center'
|
||||
}, {
|
||||
prop: 'ProcessingQuantity',
|
||||
label: i18n.t('module.equipmentManager.equipmentVisualization.ProcessingQuantity'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: { BaseTable },
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableProps,
|
||||
list: [],
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.listQuery = {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.list = [
|
||||
{
|
||||
'name': '设备1',
|
||||
'code': 'SB20210203000028',
|
||||
'ProcessingQuantity': '361'
|
||||
},
|
||||
{
|
||||
'name': '设备2',
|
||||
'code': 'SB20210203000105',
|
||||
'ProcessingQuantity': '2'
|
||||
},
|
||||
{
|
||||
'name': '设备3',
|
||||
'code': 'SB20210203000208',
|
||||
'ProcessingQuantity': '987'
|
||||
},
|
||||
{
|
||||
'name': '设备4',
|
||||
'code': 'SB20210203000450',
|
||||
'ProcessingQuantity': '65'
|
||||
},
|
||||
{
|
||||
'name': '设备5',
|
||||
'code': 'SB20210203000768',
|
||||
'ProcessingQuantity': '7645'
|
||||
}
|
||||
]
|
||||
// this.listLoading = true
|
||||
// staffList(this.listQuery).then(response => {
|
||||
// if (response.data.records) {
|
||||
// this.list = response.data.records
|
||||
// } else {
|
||||
// this.list.splice(0, this.list.length)
|
||||
// }
|
||||
// this.listLoading = false
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-03-03 16:39:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-07-23 10:26:44
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :id="id" :style="barStyle" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return 'barChart'
|
||||
}
|
||||
},
|
||||
barStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['#5470C6']
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
color: this.color,
|
||||
title: this.title,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: this.legend,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: this.xAxis,
|
||||
yAxis: this.yAxis,
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-03-03 16:39:34
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-04-22 18:06:50
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :id="id" :style="gaugeStyle" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return 'barChart'
|
||||
}
|
||||
},
|
||||
gaugeStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '实时能耗',
|
||||
subtext: 'Kwh'
|
||||
},
|
||||
series: [{
|
||||
type: 'gauge',
|
||||
center: ['50%', '70%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 500000,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
opacity: 0.5,
|
||||
color: [
|
||||
[0.4, '#1CB727'],
|
||||
[0.7, '#E0980C'],
|
||||
[1, '#fd666d']
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 10
|
||||
},
|
||||
axisTick: {
|
||||
distance: -45,
|
||||
splitNumber: 2,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
distance: -32,
|
||||
length: 20,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'auto',
|
||||
distance: -65,
|
||||
fontSize: 15
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: [0, '-15%'],
|
||||
formatter: function(value) {
|
||||
return '{value|' + value.toFixed(0) + 'Kwh}'
|
||||
},
|
||||
color: 'auto',
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value: 81175
|
||||
}]
|
||||
}]
|
||||
}, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-03-03 16:39:34
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-04-22 18:59:58
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :id="id" :style="pieStyle" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return 'barChart'
|
||||
}
|
||||
},
|
||||
pieStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
title: this.title,
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: this.legend,
|
||||
series: [
|
||||
{
|
||||
name: this.name,
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: Math.round(Math.random() * 200), name: '运行时间' },
|
||||
{ value: Math.round(Math.random() * 200), name: '维修时间' },
|
||||
{ value: Math.round(Math.random() * 200), name: '维护时间' },
|
||||
{ value: Math.round(Math.random() * 200), name: '停机时间' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user