Merge branch 'projects/mesxc-test' into projects/mesxc-zhp
This commit is contained in:
commit
d06784c2c3
4
.env.dev
4
.env.dev
@ -21,9 +21,11 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
|||||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
||||||
|
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||||
# socket地址
|
|
||||||
|
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||||
# dcs地址
|
# dcs地址
|
||||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||||
# socket地址
|
# socket地址
|
||||||
|
@ -7,6 +7,11 @@ VUE_APP_TITLE = MES系统
|
|||||||
# 芋道管理系统/生产环境
|
# 芋道管理系统/生产环境
|
||||||
VUE_APP_BASE_API = '/prod-api'
|
VUE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
|
# dcs地址
|
||||||
|
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||||
|
# socket地址
|
||||||
|
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||||
|
|
||||||
# 积木报表指向地址
|
# 积木报表指向地址
|
||||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@ import store from './store';
|
|||||||
import router from './router';
|
import router from './router';
|
||||||
import directive from './directive'; // directive
|
import directive from './directive'; // directive
|
||||||
import plugins from './plugins'; // plugins
|
import plugins from './plugins'; // plugins
|
||||||
// import { scrollBoard } from '@jiaminghi/data-view'
|
import { scrollBoard } from '@jiaminghi/data-view'
|
||||||
|
|
||||||
import './assets/icons'; // icon
|
import './assets/icons'; // icon
|
||||||
import './permission'; // permission control
|
import './permission'; // permission control
|
||||||
@ -79,7 +79,7 @@ Vue.use(CodeBrickZj)
|
|||||||
Vue.use(directive);
|
Vue.use(directive);
|
||||||
Vue.use(plugins);
|
Vue.use(plugins);
|
||||||
Vue.use(VueMeta);
|
Vue.use(VueMeta);
|
||||||
// Vue.use(scrollBoard)
|
Vue.use(scrollBoard)
|
||||||
// Vue.use(hljs.vuePlugin);
|
// Vue.use(hljs.vuePlugin);
|
||||||
import scroll from 'vue-seamless-scroll'
|
import scroll from 'vue-seamless-scroll'
|
||||||
Vue.use(scroll)
|
Vue.use(scroll)
|
||||||
|
@ -62,7 +62,7 @@ export default {
|
|||||||
url,
|
url,
|
||||||
method,
|
method,
|
||||||
params: (method === 'get' || method === 'delete') ? payload : null,
|
params: (method === 'get' || method === 'delete') ? payload : null,
|
||||||
data: method !== 'get' ? payload : null,
|
data: (method === 'get' || method === 'delete') ? null : payload
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
put(payload) {
|
put(payload) {
|
||||||
|
266
src/views/base/coreEquipmentLineBind/dialogForm.vue
Normal file
266
src/views/base/coreEquipmentLineBind/dialogForm.vue
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
<!--
|
||||||
|
filename: dialogForm.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-11 15:55:13
|
||||||
|
description: DialogForm for equipmentBindSection only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="form"
|
||||||
|
:model="dataForm"
|
||||||
|
label-width="128px"
|
||||||
|
v-loading="formLoading">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="产线"
|
||||||
|
prop="productionLineId"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '产线不能为空', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-select
|
||||||
|
v-model="dataForm.productionLineId"
|
||||||
|
placeholder="请选择产线"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
@change="handleProductlineChange">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in productionLineList"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="工段"
|
||||||
|
prop="workshopSectionId"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '工段不能为空', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-select
|
||||||
|
v-model="dataForm.workshopSectionId"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
placeholder="请选择工段"
|
||||||
|
@change="$emit('update', dataForm)">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in worksectionList"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="设备"
|
||||||
|
prop="equipmentId"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '设备不能为空', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-select
|
||||||
|
v-model="dataForm.equipmentId"
|
||||||
|
filterable
|
||||||
|
placeholder="请选择设备"
|
||||||
|
@change="$emit('update', dataForm)">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in equipmentList"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="工段排序"
|
||||||
|
prop="sort"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
trigger: 'change',
|
||||||
|
message: '请输入正确的数字类型',
|
||||||
|
transform: (val) => Number(val),
|
||||||
|
},
|
||||||
|
]">
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.sort"
|
||||||
|
clearable
|
||||||
|
@change="$emit('update', dataForm)"
|
||||||
|
placeholder="请输入工段排序" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="产线统计类型"
|
||||||
|
prop="lineDataType"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '产线统计类型不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
]">
|
||||||
|
<el-select
|
||||||
|
v-model="dataForm.lineDataType"
|
||||||
|
placeholder="请选择产线统计类型"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
@change="$emit('update', dataForm)">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in [
|
||||||
|
{ label: '无类型', value: 0 },
|
||||||
|
{ label: '进口统计', value: 1 },
|
||||||
|
{ label: '出口统计', value: 2 },
|
||||||
|
]"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="工段统计类型"
|
||||||
|
prop="sectionDataType"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '工段统计类型不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
]">
|
||||||
|
<el-select
|
||||||
|
v-model="dataForm.sectionDataType"
|
||||||
|
placeholder="请选择工段统计类型"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
@change="$emit('update', dataForm)">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in [
|
||||||
|
{ label: '无类型', value: 0 },
|
||||||
|
{ label: '进口统计', value: 1 },
|
||||||
|
{ label: '出口统计', value: 2 },
|
||||||
|
]"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DialogForm',
|
||||||
|
model: {
|
||||||
|
prop: 'dataForm',
|
||||||
|
event: 'update',
|
||||||
|
},
|
||||||
|
emits: ['update'],
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dataForm: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formLoading: true,
|
||||||
|
productionLineList: [],
|
||||||
|
equipmentList: [],
|
||||||
|
worksectionList: [],
|
||||||
|
dataFormCache: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
Promise.all([this.getProductLineList(), this.getEquipmentList()]).then(
|
||||||
|
() => {
|
||||||
|
this.formLoading = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'dataForm.productionLineId': {
|
||||||
|
handler: async function (plId) {
|
||||||
|
if (plId) await this.getWorksectionList(plId);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 模拟透传 ref */
|
||||||
|
validate(cb) {
|
||||||
|
return this.$refs.form.validate(cb);
|
||||||
|
},
|
||||||
|
resetFields(args) {
|
||||||
|
return this.$refs.form.resetFields(args);
|
||||||
|
},
|
||||||
|
async handleProductlineChange(id) {
|
||||||
|
await this.getWorksectionList(id);
|
||||||
|
this.dataForm.workshopSectionId = null;
|
||||||
|
this.$emit('update', this.dataForm);
|
||||||
|
},
|
||||||
|
// getCode
|
||||||
|
async getCode(url) {
|
||||||
|
const response = await this.$axios(url);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
// 获取产线列表
|
||||||
|
async getProductLineList() {
|
||||||
|
const response = await this.$axios('/base/core-production-line/listAll');
|
||||||
|
this.productionLineList = response.data.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
// 获取设备列表
|
||||||
|
async getEquipmentList() {
|
||||||
|
const response = await this.$axios(
|
||||||
|
// '/base/core-equipment/page?pageNo=1&pageSize=100'
|
||||||
|
'/base/core-equipment/listAll'
|
||||||
|
);
|
||||||
|
this.equipmentList = response.data.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
// 获取工段列表
|
||||||
|
async getWorksectionList(plId) {
|
||||||
|
const response = await this.$axios(
|
||||||
|
'/base/core-workshop-section/listByParentId',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
id: plId,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.worksectionList = response.data.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.el-date-editor,
|
||||||
|
.el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -50,12 +50,13 @@
|
|||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
|
import DialogForm from './dialogForm.vue';
|
||||||
|
|
||||||
// import { getAccessToken } from '@/utils/auth';
|
// import { getAccessToken } from '@/utils/auth';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EquipmentLineBind',
|
name: 'EquipmentLineBind',
|
||||||
components: {},
|
components: { DialogForm },
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -149,7 +150,9 @@ export default {
|
|||||||
select: true,
|
select: true,
|
||||||
label: '产线',
|
label: '产线',
|
||||||
prop: 'productionLineId',
|
prop: 'productionLineId',
|
||||||
rules: [{ required: true, message: '产线名不能为空', trigger: 'blur' }],
|
rules: [
|
||||||
|
{ required: true, message: '产线名不能为空', trigger: 'blur' },
|
||||||
|
],
|
||||||
url: '/base/core-production-line/listAll',
|
url: '/base/core-production-line/listAll',
|
||||||
bind: { clearable: true, filterable: true },
|
bind: { clearable: true, filterable: true },
|
||||||
// watch: 'workshopSectionId'
|
// watch: 'workshopSectionId'
|
||||||
@ -159,7 +162,9 @@ export default {
|
|||||||
label: '工段',
|
label: '工段',
|
||||||
prop: 'workshopSectionId',
|
prop: 'workshopSectionId',
|
||||||
depends: 'productionLineId',
|
depends: 'productionLineId',
|
||||||
rules: [{ required: true, message: '工段不能为空', trigger: 'blur' }],
|
rules: [
|
||||||
|
{ required: true, message: '工段不能为空', trigger: 'blur' },
|
||||||
|
],
|
||||||
bind: { clearable: true, filterable: true },
|
bind: { clearable: true, filterable: true },
|
||||||
url: '/base/core-workshop-section/listByParentId',
|
url: '/base/core-workshop-section/listByParentId',
|
||||||
},
|
},
|
||||||
@ -169,7 +174,9 @@ export default {
|
|||||||
select: true,
|
select: true,
|
||||||
label: '设备',
|
label: '设备',
|
||||||
prop: 'equipmentId',
|
prop: 'equipmentId',
|
||||||
rules: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
|
rules: [
|
||||||
|
{ required: true, message: '设备名不能为空', trigger: 'blur' },
|
||||||
|
],
|
||||||
bind: { clearable: true, filterable: true },
|
bind: { clearable: true, filterable: true },
|
||||||
url: '/base/core-equipment/listAll',
|
url: '/base/core-equipment/listAll',
|
||||||
},
|
},
|
||||||
@ -190,9 +197,16 @@ export default {
|
|||||||
label: '产线统计类型',
|
label: '产线统计类型',
|
||||||
prop: 'lineDataType',
|
prop: 'lineDataType',
|
||||||
bind: {
|
bind: {
|
||||||
clearable: true, filterable: true
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
rules: [{ required: true, message: '产线统计类型不能为空', trigger: 'change' }],
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '产线统计类型不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
select: true,
|
select: true,
|
||||||
@ -204,9 +218,16 @@ export default {
|
|||||||
label: '工段统计类型',
|
label: '工段统计类型',
|
||||||
prop: 'sectionDataType',
|
prop: 'sectionDataType',
|
||||||
bind: {
|
bind: {
|
||||||
clearable: true, filterable: true
|
clearable: true,
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
rules: [{ required: true, message: '工段统计类型不能为空', trigger: 'change' }],
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '工段统计类型不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
@ -335,15 +356,21 @@ export default {
|
|||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
const id = row.id;
|
const id = row.id;
|
||||||
this.$modal
|
this.$modal
|
||||||
.confirm('是否确认删除绑定"' + row.name + '"?')
|
.confirm(
|
||||||
.then(function () {
|
'是否确认删除绑定"' +
|
||||||
return deleteEquipmentType(id);
|
(row.equipmentName == null ? '这条记录' : row.equipmentName) +
|
||||||
|
'"?'
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
return this.del({ id });
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.$modal.msgSuccess('删除成功');
|
this.$modal.msgSuccess('删除成功');
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
/** 导出按钮操作 */
|
/** 导出按钮操作 */
|
||||||
handleExport() {
|
handleExport() {
|
||||||
|
@ -16,7 +16,9 @@
|
|||||||
<el-form-item
|
<el-form-item
|
||||||
label="产线"
|
label="产线"
|
||||||
prop="productionLineId"
|
prop="productionLineId"
|
||||||
:rules="[{ required: true, message: '产线不能为空', trigger: 'blur' }]">
|
:rules="[
|
||||||
|
{ required: true, message: '产线不能为空', trigger: 'blur' },
|
||||||
|
]">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.productionLineId"
|
v-model="dataForm.productionLineId"
|
||||||
placeholder="请选择产线"
|
placeholder="请选择产线"
|
||||||
@ -35,7 +37,9 @@
|
|||||||
<el-form-item
|
<el-form-item
|
||||||
label="工段"
|
label="工段"
|
||||||
prop="workshopSectionId"
|
prop="workshopSectionId"
|
||||||
:rules="[{ required: true, message: '工段不能为空', trigger: 'blur' }]">
|
:rules="[
|
||||||
|
{ required: true, message: '工段不能为空', trigger: 'blur' },
|
||||||
|
]">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.workshopSectionId"
|
v-model="dataForm.workshopSectionId"
|
||||||
filterable
|
filterable
|
||||||
@ -55,7 +59,9 @@
|
|||||||
<el-form-item
|
<el-form-item
|
||||||
label="设备"
|
label="设备"
|
||||||
prop="equipmentId"
|
prop="equipmentId"
|
||||||
:rules="[{ required: true, message: '设备不能为空', trigger: 'blur' }]">
|
:rules="[
|
||||||
|
{ required: true, message: '设备不能为空', trigger: 'blur' },
|
||||||
|
]">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.equipmentId"
|
v-model="dataForm.equipmentId"
|
||||||
filterable
|
filterable
|
||||||
|
@ -1,19 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="defect-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id="defectChart" style="width:600px;height:238px;" v-show="!notMsg"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
export default {
|
export default {
|
||||||
name: 'DefectChart',
|
name: 'DefectChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
|
components:{ NotMsg },
|
||||||
props: {
|
props: {
|
||||||
chartTime: ''
|
chartTime: ''
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
tempData: []
|
tempData: [],
|
||||||
|
notMsg:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -65,6 +71,26 @@ export default {
|
|||||||
this.updateChart()
|
this.updateChart()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
chartTime: {// 监听类型变化,更新图
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
switch(this.chartTime){
|
||||||
|
case '日':
|
||||||
|
this.tempData = this.israDayStatistic
|
||||||
|
break;
|
||||||
|
case '周':
|
||||||
|
this.tempData = this.israWeekStatistic
|
||||||
|
break;
|
||||||
|
case '月':
|
||||||
|
this.tempData = this.israMonthStatistic
|
||||||
|
break;
|
||||||
|
case '年':
|
||||||
|
this.tempData = this.israYearStatistic
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
this.updateChart()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -75,6 +101,12 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
|
if (!this.tempData || this.tempData.length == 0) {
|
||||||
|
this.notMsg = true
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.notMsg = false
|
||||||
|
}
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
@ -82,7 +114,7 @@ export default {
|
|||||||
) {
|
) {
|
||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$el);
|
this.chart = echarts.init(document.getElementById('defectChart'));
|
||||||
let xData = []
|
let xData = []
|
||||||
let seriesData = []
|
let seriesData = []
|
||||||
for (let i = 0;i < this.israCheckType.length; i++) {
|
for (let i = 0;i < this.israCheckType.length; i++) {
|
||||||
@ -95,12 +127,25 @@ export default {
|
|||||||
obj.name = this.israCheckType[i]
|
obj.name = this.israCheckType[i]
|
||||||
obj.barWidth = 12
|
obj.barWidth = 12
|
||||||
obj.data = []
|
obj.data = []
|
||||||
|
if (i === this.israCheckType.length-1) {
|
||||||
|
obj.label = {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: "#fffc",
|
||||||
|
formatter: (params)=>this.tempData[params.dataIndex].sum
|
||||||
|
}
|
||||||
|
}
|
||||||
for (let j = 0;j < this.tempData.length; j++) {
|
for (let j = 0;j < this.tempData.length; j++) {
|
||||||
|
let num = 0
|
||||||
for (let k = 0; k < this.tempData[j].data.length; k++) {
|
for (let k = 0; k < this.tempData[j].data.length; k++) {
|
||||||
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
|
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
|
||||||
obj.data.push(this.tempData[j].data[k].checkNum)
|
obj.data.push(this.tempData[j].data[k].checkNum)
|
||||||
|
num++
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (num === 0) {
|
||||||
|
obj.data.push(0)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
seriesData.push(obj)
|
seriesData.push(obj)
|
||||||
}
|
}
|
||||||
@ -110,10 +155,10 @@ export default {
|
|||||||
})
|
})
|
||||||
var option = {
|
var option = {
|
||||||
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
|
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
|
||||||
grid: { top: 80, right: 12, bottom: 20, left: 48 },
|
grid: { top: 90, right: 12, bottom: 20, left: 70 },
|
||||||
legend: {
|
legend: {
|
||||||
top: 10,
|
top: 0,
|
||||||
left: 80,
|
left: 100,
|
||||||
padding: 5,
|
padding: 5,
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 12,
|
itemHeight: 12,
|
||||||
@ -179,12 +224,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
|
||||||
.defect-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
<style>
|
||||||
.defect-chart-tooltip {
|
.defect-chart-tooltip {
|
||||||
background: #0a2b4f77 !important;
|
background: #0a2b4f77 !important;
|
||||||
|
@ -1,18 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="defect-class-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id="defectClassChart" class="defect-class-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
export default {
|
export default {
|
||||||
name: 'DefectClassChart',
|
name: 'DefectClassChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
|
components:{ NotMsg },
|
||||||
props: {
|
props: {
|
||||||
chartType: ''
|
chartType: ''
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
notMsg:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -43,6 +49,12 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
|
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
|
||||||
|
this.notMsg = true
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.notMsg = false
|
||||||
|
}
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
@ -50,7 +62,7 @@ export default {
|
|||||||
) {
|
) {
|
||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$el);
|
this.chart = echarts.init(document.getElementById('defectClassChart'));
|
||||||
let tempData = []
|
let tempData = []
|
||||||
let xData = []
|
let xData = []
|
||||||
let yData = []
|
let yData = []
|
||||||
@ -66,28 +78,14 @@ export default {
|
|||||||
})
|
})
|
||||||
var option = {
|
var option = {
|
||||||
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
||||||
grid: { top: 40, right: 12, bottom: 80, left: 60 },
|
grid: { top: 40, right: 12, bottom: 65, left: 70 },
|
||||||
// legend: {
|
|
||||||
// top: 10,
|
|
||||||
// left: 80,
|
|
||||||
// padding: 5,
|
|
||||||
// itemWidth: 12,
|
|
||||||
// itemHeight: 12,
|
|
||||||
// itemGap: 12,
|
|
||||||
// height: 12,
|
|
||||||
// textStyle: {
|
|
||||||
// color: "#DFF1FE",
|
|
||||||
// fontSize: 12,
|
|
||||||
// },
|
|
||||||
// data:['a','b','c','d','e'],
|
|
||||||
// },
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: xData,
|
data: xData,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fffc",
|
color: "#fffc",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
rotate: 45
|
rotate: 25
|
||||||
},
|
},
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
@ -98,7 +96,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: "单位/次",
|
name: "单位/个",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
@ -136,7 +134,9 @@ export default {
|
|||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'top'
|
position: 'top',
|
||||||
|
distance: 10,
|
||||||
|
color: "#fffc"
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
@ -1,15 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="energe-monitoring-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:370px;" v-show='!notMsg'></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
export default {
|
export default {
|
||||||
name: 'EnergeMonitoringChart',
|
name: 'EnergeMonitoringChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
|
components:{ NotMsg },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
notMsg:true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -42,16 +48,22 @@ export default {
|
|||||||
) {
|
) {
|
||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$el);
|
this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
|
||||||
let xData = []
|
let xData = []
|
||||||
let yData = []
|
let yData = []
|
||||||
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
|
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
|
||||||
xData.push(item.lineName)
|
xData.push(item.lineName)
|
||||||
yData.push(item.useQuantity)
|
yData.push(item.useQuantity)
|
||||||
})
|
})
|
||||||
var option = option = {
|
if (yData.length === 0) {
|
||||||
|
this.notMsg = true
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.notMsg = false
|
||||||
|
}
|
||||||
|
var option = {
|
||||||
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
grid: { top: 32, right: 12, bottom: 20, left: 90 },
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
@ -91,11 +103,13 @@ export default {
|
|||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
|
name: '单位kwh',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '单位',
|
|
||||||
// min: 0,
|
|
||||||
// max: 250,
|
|
||||||
// interval: 50,
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@ -121,7 +135,7 @@ export default {
|
|||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
valueFormatter: function (value) {
|
valueFormatter: function (value) {
|
||||||
return value + ' ml';
|
return value;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
@ -1,15 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="gas-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id='flueGasChart' class="flue-gas-chart" style="width:600px;height:250px;" v-show='!notMsg'></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasChart',
|
name: 'FlueGasChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components: {},
|
components:{ NotMsg },
|
||||||
props: {
|
props: {
|
||||||
chartType: '',
|
chartType: '',
|
||||||
chartTime: ''
|
chartTime: ''
|
||||||
@ -26,7 +30,8 @@ export default {
|
|||||||
'#2aa1ff',
|
'#2aa1ff',
|
||||||
];
|
];
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
notMsg:false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -126,7 +131,7 @@ export default {
|
|||||||
temp2 = temp1?.SO2_float || []
|
temp2 = temp1?.SO2_float || []
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case '一氧化氮':{
|
case '氮氧化物':{
|
||||||
temp2 = temp1?.NOX_float || []
|
temp2 = temp1?.NOX_float || []
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -136,7 +141,13 @@ export default {
|
|||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
temp2.length > 0 && temp2.map(i => {
|
if (temp2.length === 0) {
|
||||||
|
this.notMsg = true
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.notMsg = false
|
||||||
|
}
|
||||||
|
temp2.map(i => {
|
||||||
xData.push(i.time)
|
xData.push(i.time)
|
||||||
yData.push(i.value)
|
yData.push(i.value)
|
||||||
})
|
})
|
||||||
@ -172,10 +183,10 @@ export default {
|
|||||||
) {
|
) {
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$el);
|
this.chart = echarts.init(document.getElementById('flueGasChart'));
|
||||||
var option = {
|
var option = {
|
||||||
color: colors,
|
color: colors,
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData,
|
data: xData,
|
||||||
@ -192,7 +203,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '单位m³/h',
|
name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
@ -218,6 +229,7 @@ export default {
|
|||||||
series: seriesData,
|
series: seriesData,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
className: "gas-chart-tooltip"
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
option && this.chart.setOption(option)
|
option && this.chart.setOption(option)
|
||||||
@ -227,8 +239,18 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.gas-chart {
|
.flue-gas-chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.gas-chart-tooltip {
|
||||||
|
background: #0a2b4f77 !important;
|
||||||
|
border: none !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.gas-chart-tooltip * {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,22 +1,19 @@
|
|||||||
<!--
|
|
||||||
filename: GasChart.vue
|
|
||||||
author: liubin
|
|
||||||
date: 2023-12-12 10:53:49
|
|
||||||
description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="gas-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasChart',
|
name: 'GasChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components: {},
|
components:{ NotMsg },
|
||||||
props: {
|
props: {
|
||||||
chartType: '', // 能源类型
|
chartType: '', // 能源类型
|
||||||
chartTime: ''
|
chartTime: ''
|
||||||
@ -33,7 +30,8 @@ export default {
|
|||||||
'#2aa1ff',
|
'#2aa1ff',
|
||||||
];
|
];
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
notMsg:false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -142,6 +140,12 @@ export default {
|
|||||||
yData = this.gasChartMsg.sumGas2ForYear || []
|
yData = this.gasChartMsg.sumGas2ForYear || []
|
||||||
}
|
}
|
||||||
xData = this.getXdata()
|
xData = this.getXdata()
|
||||||
|
}
|
||||||
|
if (yData.length === 0) {
|
||||||
|
this.notMsg = true
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.notMsg = false
|
||||||
}
|
}
|
||||||
if (yData.length == 0) {
|
if (yData.length == 0) {
|
||||||
seriesData = []
|
seriesData = []
|
||||||
@ -175,7 +179,7 @@ export default {
|
|||||||
) {
|
) {
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$el);
|
this.chart = echarts.init(document.getElementById('gasChart'));
|
||||||
var option = {
|
var option = {
|
||||||
color: colors,
|
color: colors,
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||||
@ -195,7 +199,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '单位m³/h',
|
name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
|
@ -1,56 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="isra-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ISRAChart',
|
name: 'ISRAChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components: {},
|
components:{ NotMsg },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
|
notMsg:true,
|
||||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||||
chartData: [],
|
chartData: []
|
||||||
option: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
bottom: '3%',
|
|
||||||
left: 'center',
|
|
||||||
icon: 'circle',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 0,
|
|
||||||
subtext: '总数',
|
|
||||||
top: '43%',
|
|
||||||
left: '49%',
|
|
||||||
textAlign: 'center',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 32,
|
|
||||||
lineHeight: 16,
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
subtextStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#fff00',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: []
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.initChart();
|
|
||||||
},
|
|
||||||
activated() {
|
activated() {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -61,23 +33,33 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
israChartMsg: {
|
israChartMsg: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
this.chartData = newVal
|
this.chartData = newVal || []
|
||||||
this.updateChart()
|
this.updateChart()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
this.chart.setOption(this.option);
|
|
||||||
},
|
|
||||||
updateChart() {
|
updateChart() {
|
||||||
console.log('update')
|
console.log('update')
|
||||||
let num = 0
|
let num = 0
|
||||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||||
num+=i.num
|
num+=i.num
|
||||||
})
|
})
|
||||||
this.chart.setOption({
|
if (
|
||||||
|
this.chart !== null &&
|
||||||
|
this.chart !== '' &&
|
||||||
|
this.chart !== undefined
|
||||||
|
) {
|
||||||
|
this.chart.dispose()
|
||||||
|
}
|
||||||
|
if (this.chartData && this.chartData.length > 0) {
|
||||||
|
this.notMsg = false
|
||||||
|
} else {
|
||||||
|
this.notMsg = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart = echarts.init(document.getElementById('israChart'));
|
||||||
|
var option = {
|
||||||
title:{
|
title:{
|
||||||
text: num,
|
text: num,
|
||||||
subtext: '总数',
|
subtext: '总数',
|
||||||
@ -94,6 +76,14 @@ export default {
|
|||||||
color: '#fff00',
|
color: '#fff00',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: '3%',
|
||||||
|
left: 'center',
|
||||||
|
icon: 'circle',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
series:[{
|
series:[{
|
||||||
name: 'ISRA缺陷检测',
|
name: 'ISRA缺陷检测',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@ -126,8 +116,13 @@ export default {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}))}]
|
}))}],
|
||||||
})
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
className: "isra-chart-tooltip"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.chart.setOption(option);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -139,3 +134,13 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.isra-chart-tooltip {
|
||||||
|
background: #0a2b4f77 !important;
|
||||||
|
border: none !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.isra-chart-tooltip * {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
27
src/views/databoard/components/NotMsg.vue
Normal file
27
src/views/databoard/components/NotMsg.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div class="notmsg">暂无数据</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'NotMsg',
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.notmsg {
|
||||||
|
padding-top: 72px;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,15 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="num-rate-chart"></div>
|
<div>
|
||||||
|
<NotMsg v-show="notMsg"/>
|
||||||
|
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import resize from './../mixins/resize'
|
import resize from './../mixins/resize'
|
||||||
|
import NotMsg from './../components/NotMsg'
|
||||||
export default {
|
export default {
|
||||||
name: 'NumRateChart',
|
name: 'NumRateChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
|
components:{ NotMsg },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
notMsg:true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -23,7 +29,7 @@ export default {
|
|||||||
if (newVal === oldVal) {
|
if (newVal === oldVal) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
this.updateChart()
|
// this.updateChart()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -35,14 +41,12 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateChart() {
|
updateChart() {
|
||||||
if (
|
if (this.productline && this.productline.length > 0) {
|
||||||
this.chart !== null &&
|
this.notMsg = false
|
||||||
this.chart !== '' &&
|
} else {
|
||||||
this.chart !== undefined
|
this.notMsg = true
|
||||||
) {
|
return
|
||||||
this.chart.dispose()
|
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$el);
|
|
||||||
let xData = []
|
let xData = []
|
||||||
let outputNum = []
|
let outputNum = []
|
||||||
let passRate = []
|
let passRate = []
|
||||||
@ -51,6 +55,14 @@ export default {
|
|||||||
outputNum.push(item.outputNum)
|
outputNum.push(item.outputNum)
|
||||||
passRate.push(item.passRate*100)
|
passRate.push(item.passRate*100)
|
||||||
})
|
})
|
||||||
|
if (
|
||||||
|
this.chart !== null &&
|
||||||
|
this.chart !== '' &&
|
||||||
|
this.chart !== undefined
|
||||||
|
) {
|
||||||
|
this.chart.dispose()
|
||||||
|
}
|
||||||
|
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||||
var option = {
|
var option = {
|
||||||
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@ -61,7 +73,7 @@ export default {
|
|||||||
className: "num-rate-chart-tooltip"
|
className: "num-rate-chart-tooltip"
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['产线产量', '合格率'],
|
data: ['产线产量', '良品率'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#DFF1FE",
|
color: "#DFF1FE",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@ -91,6 +103,11 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '产量/片',
|
name: '产量/片',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@ -111,6 +128,11 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '良品率',
|
name: '良品率',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'LEFT',
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@ -148,7 +170,7 @@ export default {
|
|||||||
data: outputNum
|
data: outputNum
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '合格率',
|
name: '良品率',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
@ -49,16 +49,18 @@ export default {
|
|||||||
.switcher {
|
.switcher {
|
||||||
:deep(.el-switch__core) {
|
:deep(.el-switch__core) {
|
||||||
border: none;
|
border: none;
|
||||||
background-color:rgba(3, 35, 60, 1);
|
background-color:#02457e;
|
||||||
|
height: 18px;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: #02457e;
|
background-color: #03233c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.is-checked) {
|
:deep(.is-checked) {
|
||||||
.el-switch__core {
|
.el-switch__core {
|
||||||
border: none;
|
border: none;
|
||||||
|
height: 18px;
|
||||||
background-color: rgba(180, 255, 252, 0.71);
|
background-color: rgba(180, 255, 252, 0.71);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
@ -65,8 +65,6 @@ export default {
|
|||||||
},
|
},
|
||||||
chartTime: {
|
chartTime: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
console.log("===================")
|
|
||||||
console.log(newVal)
|
|
||||||
this.updateChart()
|
this.updateChart()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -111,14 +109,14 @@ export default {
|
|||||||
}else{
|
}else{
|
||||||
xData.push((item.dataTime).slice(0,10))
|
xData.push((item.dataTime).slice(0,10))
|
||||||
}
|
}
|
||||||
dayArr.push((item.day * 100).toFixed(2))
|
dayArr.push(item.day?(item.day * 100).toFixed(2):null)
|
||||||
nightArr.push((item.night * 100).toFixed(2))
|
nightArr.push(item.night?(item.night * 100).toFixed(2):null)
|
||||||
sumArr.push((item.sum * 100).toFixed(2))
|
sumArr.push(item.sum?(item.sum * 100).toFixed(2):null)
|
||||||
})
|
})
|
||||||
if (this.chartType) {
|
if (this.chartType) {
|
||||||
seriesData = [{
|
seriesData = [{
|
||||||
color: '#ff9e00',
|
color: '#ff9e00',
|
||||||
name: 'sum',
|
name: '总量',
|
||||||
data: sumArr,
|
data: sumArr,
|
||||||
type: "line",
|
type: "line",
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
@ -138,7 +136,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#08d8cd',
|
color: '#08d8cd',
|
||||||
name: 'day',
|
name: '白班',
|
||||||
data: dayArr,
|
data: dayArr,
|
||||||
type: "line",
|
type: "line",
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
@ -158,7 +156,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#0b58ff',
|
color: '#0b58ff',
|
||||||
name: 'night',
|
name: '夜班',
|
||||||
data: nightArr,
|
data: nightArr,
|
||||||
type: "line",
|
type: "line",
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
@ -179,7 +177,7 @@ export default {
|
|||||||
}else{
|
}else{
|
||||||
seriesData = [{
|
seriesData = [{
|
||||||
color: '#ff9e00',
|
color: '#ff9e00',
|
||||||
name: 'sum',
|
name: '总量',
|
||||||
data: sumArr,
|
data: sumArr,
|
||||||
type: "line",
|
type: "line",
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 462px;
|
grid-template-rows: 462px;
|
||||||
">
|
">
|
||||||
<EnergyMonitoring />
|
<WorkOrderMonitoring />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-side" style="flex: 1">
|
<div class="right-side" style="flex: 1">
|
||||||
@ -25,10 +25,10 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import NumRate from './NumRate';
|
import NumRate from './NumRate';
|
||||||
import EnergyMonitoring from './EnergyMonitoring';
|
import WorkOrderMonitoring from './WorkOrderMonitoring';
|
||||||
export default {
|
export default {
|
||||||
name: 'BottomTwo',
|
name: 'BottomTwo',
|
||||||
components: { NumRate, EnergyMonitoring },
|
components: { NumRate, WorkOrderMonitoring },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<Container name="各工序缺陷汇总" size="small" style="">
|
<Container name="各工序缺陷汇总" size="middle" style="">
|
||||||
<div style="padding: 5px 10px;">
|
<div style="padding: 5px 10px;">
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
||||||
</div>
|
</div>
|
||||||
@ -21,13 +21,12 @@ export default {
|
|||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [60],
|
columnWidth: [60],
|
||||||
align: ['center'],
|
align: ['center'],
|
||||||
data: [],
|
data: [[1, 'Y61', '破损','10','气泡']],
|
||||||
rowNum: 10
|
rowNum: 10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<Container name="能源监控" size="large" style="">
|
||||||
<Container name="能源监控" size="small" style="">
|
|
||||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||||
<EnergeMonitoringChart/>
|
<EnergeMonitoringChart/>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container.vue';
|
import Container from '../components/Container.vue';
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<Container name="设备报警" size="small" style="">
|
<Container name="设备报警" size="middle" style="">
|
||||||
<div style="padding: 5px 10px;">
|
<div style="padding: 5px 10px;">
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
|
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
|
||||||
</div>
|
</div>
|
||||||
@ -19,26 +19,24 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// config:{}
|
|
||||||
config: {
|
config: {
|
||||||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [60],
|
columnWidth: [60, 150, 190],
|
||||||
align: ['center'],
|
align: ['center'],
|
||||||
data: [
|
data: [
|
||||||
[1, '设备1', '行1列3', '', ''],
|
[1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
|
||||||
[2, '设备2', '行2列3', '', ''],
|
[2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
|
||||||
[3, '设备3', '行3列3', '', ''],
|
[3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
|
||||||
[4, '设备4', '行4列3', '', ''],
|
[4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
|
||||||
[5, '设备5', '行5列3', '', ''],
|
[5, '11线下片台', ' EQ20240110130743000250', '正常', '否'],
|
||||||
[6, '设备6', '行6列3', '', ''],
|
[6, '10线下片台', ' EQ20240110130743000250', '正常', '否'],
|
||||||
[7, '设备7', '行7列3', '', ''],
|
[7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
|
||||||
[8, '设备8', '行8列3', '', ''],
|
[8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
|
||||||
[9, '设备9', '行9列3', '', ''],
|
[9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
|
||||||
[10, '设备10', '行10列3', '', '']
|
[10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
|
||||||
],
|
],
|
||||||
rowNum: 10
|
rowNum: 10
|
||||||
}
|
}
|
||||||
@ -46,20 +44,20 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
},
|
},
|
||||||
watch:{
|
// watch:{
|
||||||
sjgEquipment: {
|
// sjgEquipment: {
|
||||||
handler(newVal, oldVal) {
|
// handler(newVal, oldVal) {
|
||||||
let outArr = this.sjgEquipment.map((item, index) => [
|
// let outArr = this.sjgEquipment.map((item, index) => [
|
||||||
index+1,
|
// index+1,
|
||||||
item.name,
|
// item.name,
|
||||||
item.code,
|
// item.code,
|
||||||
item.status,
|
// item.status,
|
||||||
item.error? '是': '否'
|
// item.error? '是': '否'
|
||||||
]);
|
// ]);
|
||||||
this.config.data = outArr
|
// this.config.data = outArr
|
||||||
this.$refs['eqScrollBoard'].updateRows(outArr)
|
// this.$refs['eqScrollBoard'].updateRows(outArr)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<Container name="产线产量及良品率" size="large" style="">
|
||||||
<Container name="产线产量及良品率" size="small" style="">
|
|
||||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||||
<NumRateChart />
|
<NumRateChart />
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container';
|
||||||
|
@ -26,19 +26,19 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 462px;
|
grid-template-rows: 462px;
|
||||||
">
|
">
|
||||||
<WorkOrderMonitoring />
|
<EnergyMonitoring />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import WorkOrderMonitoring from './WorkOrderMonitoring';
|
|
||||||
import EqAlarm from './EqAlarm'
|
import EqAlarm from './EqAlarm'
|
||||||
import DefectSum from './DefectSum'
|
import DefectSum from './DefectSum'
|
||||||
|
import EnergyMonitoring from './EnergyMonitoring';
|
||||||
export default {
|
export default {
|
||||||
name: 'TopThree',
|
name: 'TopThree',
|
||||||
components: { EqAlarm, DefectSum, WorkOrderMonitoring },
|
components: { EqAlarm, DefectSum, EnergyMonitoring },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
|
@ -1,14 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<Container name="工单监控" size="middle" style="">
|
||||||
<Container name="工单监控" size="small" style="">
|
<div style="padding: 5px 10px;" class="WOMonitoring">
|
||||||
<div style="padding: 5px 10px;">
|
<dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/>
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container.vue';
|
import Container from '../components/Container.vue';
|
||||||
|
import { formatDate } from '@/utils'
|
||||||
export default {
|
export default {
|
||||||
name: 'WorkOrderMonitoring',
|
name: 'WorkOrderMonitoring',
|
||||||
components: { Container },
|
components: { Container },
|
||||||
@ -21,28 +20,18 @@ export default {
|
|||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
|
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [60, 120, 80, 60, 80, 120, 120, 120],
|
columnWidth: [60, 120, 120, 60, 100, 150],
|
||||||
align: ['center'],
|
align: ['center'],
|
||||||
data: [
|
data: [],
|
||||||
[1, '工单1', '行1列3', '', '','','',''],
|
|
||||||
[2, '工单2', '行2列3', '', '','','',''],
|
|
||||||
[3, '工单3', '行3列3', '', '','','',''],
|
|
||||||
[4, '工单4', '行4列3', '', '','','',''],
|
|
||||||
[5, '工单5', '行5列3', '', '','','',''],
|
|
||||||
[6, '工单6', '行6列3', '', '','','',''],
|
|
||||||
[7, '工单7', '行7列3', '', '','','',''],
|
|
||||||
[8, '工单8', '行8列3', '', '','','',''],
|
|
||||||
[9, '工单9', '行9列3', '', '','','',''],
|
|
||||||
[10, '工单10', '行10列3', '', '','','','']
|
|
||||||
],
|
|
||||||
rowNum:10
|
rowNum:10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
methods:{
|
||||||
|
},
|
||||||
watch:{
|
watch:{
|
||||||
order: {
|
order: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
@ -51,8 +40,8 @@ export default {
|
|||||||
item.name,
|
item.name,
|
||||||
item.specifications,
|
item.specifications,
|
||||||
item.lines,
|
item.lines,
|
||||||
item.status,
|
['等待','已下发','已完成'][item.status],
|
||||||
item.planFinishTime,
|
formatDate(item.planFinishTime),
|
||||||
item.planQuantity,
|
item.planQuantity,
|
||||||
item.planAssignQuantity
|
item.planAssignQuantity
|
||||||
]);
|
]);
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
style="
|
style="
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 2fr 3fr 3fr;
|
||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@ -34,6 +34,7 @@
|
|||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
color: #3ce8ff
|
||||||
">
|
">
|
||||||
{{energyInfo.elecQty1}}kwh
|
{{energyInfo.elecQty1}}kwh
|
||||||
</span>
|
</span>
|
||||||
@ -51,7 +52,7 @@
|
|||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">水耗量</p>
|
<p style="margin: 0; line-height: inherit">水耗量</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.waterQty}}m³</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@ -66,7 +67,7 @@
|
|||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">天然气I</p>
|
<p style="margin: 0; line-height: inherit">天然气I</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{sumGasInfo.sumGas1Now}}</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@ -81,7 +82,7 @@
|
|||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">电耗量</p>
|
<p style="margin: 0; line-height: inherit">电耗量</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.elecQty2}}kwh</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
|
|
||||||
<ShadowRect>
|
<ShadowRect>
|
||||||
@ -96,7 +97,7 @@
|
|||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">天然气II</p>
|
<p style="margin: 0; line-height: inherit">天然气II</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
|
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{sumGasInfo.sumGas2Now}}</span>
|
||||||
</ShadowRect>
|
</ShadowRect>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.24;
|
line-height: 1.24;
|
||||||
flex: 1.2;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
@ -30,12 +30,12 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
flex: 1.2;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
">
|
">
|
||||||
<p style="margin: 0; line-height: inherit">一氧化氮</p>
|
<p style="margin: 0; line-height: inherit">氮氧化物</p>
|
||||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||||
</div>
|
</div>
|
||||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
|
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
|
||||||
@ -46,7 +46,7 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
flex: 1.2;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
@ -62,7 +62,7 @@
|
|||||||
style="
|
style="
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1.24;
|
line-height: 1.24;
|
||||||
flex: 1.2;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
@ -95,11 +95,11 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
">
|
">
|
||||||
<SelectorBtnGroup
|
<SelectorBtnGroup
|
||||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
||||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
<div class="chart" style="height: 250px;margin-top: 10px;">
|
||||||
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
|
<FlueGasChart :chartType='chartType' :chartTime='chartTime'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
@ -112,7 +112,7 @@ import ShadowRect from '../components/ShadowRect.vue';
|
|||||||
import KilnLine from '../components/line';
|
import KilnLine from '../components/line';
|
||||||
// import Switcher from '../components/Switcher';
|
// import Switcher from '../components/Switcher';
|
||||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||||
import FlueGas from '../components/FlueGas';
|
import FlueGasChart from '../components/FlueGasChart';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GasHandle',
|
name: 'GasHandle',
|
||||||
@ -121,7 +121,7 @@ export default {
|
|||||||
ShadowRect,
|
ShadowRect,
|
||||||
KilnLine,
|
KilnLine,
|
||||||
SelectorBtnGroup,
|
SelectorBtnGroup,
|
||||||
FlueGas,
|
FlueGasChart,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
|
@ -1,12 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<Container name="产线当日缺陷分类" size="middle">
|
||||||
<Container name="产线当日缺陷分类" size="small">
|
|
||||||
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
|
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
|
||||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
<div class="chart" style="height: 375px; margin-top: 8px;">
|
||||||
<DefectClassChart :chartType='chartType'/>
|
<DefectClassChart :chartType='chartType'/>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container';
|
import Container from '../components/Container';
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;" class="orderContainer">
|
||||||
<Container name="订单完成情况" size="small" style="">
|
<Container name="订单完成情况" size="small" style="">
|
||||||
<div style="padding: 5px 10px;">
|
<div style="padding: 5px 10px;">
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
|
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
|
||||||
@ -9,6 +9,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container'
|
import Container from '../components/Container'
|
||||||
|
import { formatDate } from '@/utils'
|
||||||
export default {
|
export default {
|
||||||
name: 'OrderStatus',
|
name: 'OrderStatus',
|
||||||
components: { Container },
|
components: { Container },
|
||||||
@ -21,36 +22,30 @@ export default {
|
|||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
header: ['上线时间', '客户名称', '规格','完成度'],
|
header: ['上线时间', '客户名称', '规格','完成度'],
|
||||||
// headerHeight: '17',
|
|
||||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
// columnWidth: [60],
|
columnWidth: [155, 180, 150],
|
||||||
align: ['center'],
|
data: [],
|
||||||
data: [
|
|
||||||
['2023-12-01', '客户1', '行1列3', ''],
|
|
||||||
['2023-12-01', '客户2', '行2列3', ''],
|
|
||||||
['2023-12-01', '客户3', '行3列3', ''],
|
|
||||||
['2023-12-01', '客户4', '行4列3', ''],
|
|
||||||
['2023-12-01', '客户5', '行5列3', ''],
|
|
||||||
['2023-12-01', '客户6', '行6列3', ''],
|
|
||||||
['2023-12-01', '客户7', '行7列3', ''],
|
|
||||||
['2023-12-01', '客户8', '行8列3', ''],
|
|
||||||
['2023-12-01', '客户9', '行9列3', ''],
|
|
||||||
['2023-12-01', '客户10', '行10列3', '']
|
|
||||||
],
|
|
||||||
rowNum: 6
|
rowNum: 6
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
watch:{
|
watch:{
|
||||||
order: {
|
order: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
let outArr = this.order.map((item) => [
|
let outArr = this.order.map((item) => [
|
||||||
item.startProduceTime,
|
formatDate(item.planStartTime) || '',
|
||||||
item.name,
|
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
|
||||||
item.specifications,
|
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
|
||||||
item.completeRate
|
`<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
|
||||||
|
<div class="box" style="display:inline-block;">
|
||||||
|
<div class="bg"></div>
|
||||||
|
<div class="rount" style="-webkit-transform:rotate(${(item.completeRate?(item.completeRate*100).toFixed(2):0)<=50?3.6*item.completeRate*100:180}deg)"></div>
|
||||||
|
<div class="bg2"></div>
|
||||||
|
<div style="${item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'}" class="rount2"></div>
|
||||||
|
</div>`
|
||||||
]);
|
]);
|
||||||
this.config.data = outArr
|
this.config.data = outArr
|
||||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
this.$refs['orderScrollBoard'].updateRows(outArr)
|
||||||
@ -59,3 +54,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang='scss'>
|
||||||
|
.orderContainer {
|
||||||
|
.box{width:16px;height:12px;margin:1px auto;position:relative;}
|
||||||
|
.box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
|
||||||
|
.box .bg{border:silver 4px solid}
|
||||||
|
.box .bg2{border:silver 4px solid;clip:rect(0,8px,20px,0);}
|
||||||
|
.box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
|
||||||
|
.box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="flex: 2;">
|
<Container name="本日生产良品率" size="large">
|
||||||
<Container name="本日生产良品率" size="small">
|
|
||||||
<div style="padding: 5px 10px;">
|
<div style="padding: 5px 10px;">
|
||||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
|
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
|
||||||
</div>
|
</div>
|
||||||
@ -27,7 +26,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Container from '../components/Container'
|
import Container from '../components/Container'
|
||||||
@ -53,14 +51,7 @@ export default {
|
|||||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||||
columnWidth: [60],
|
columnWidth: [60],
|
||||||
align: ['center'],
|
data: [],
|
||||||
data: [
|
|
||||||
[1, '产线1', '49%', '', ''],
|
|
||||||
[2, '产线2', '49%', '', ''],
|
|
||||||
[3, '产线3', '49%', '', ''],
|
|
||||||
[4, '产线4', '49%', '', ''],
|
|
||||||
[5, '产线5', '49%', '', '']
|
|
||||||
],
|
|
||||||
rowNum: 5
|
rowNum: 5
|
||||||
},
|
},
|
||||||
chartType:false,
|
chartType:false,
|
||||||
@ -72,10 +63,10 @@ export default {
|
|||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
let outArr = this.yieldRateTable.map((item) => [
|
let outArr = this.yieldRateTable.map((item) => [
|
||||||
item.lineName,
|
item.lineName,
|
||||||
item.first,
|
item.first?(item.first*100).toFixed(2)+'%':'0.00%',
|
||||||
item.second,
|
item.second?(item.second*100).toFixed(2)+'%':'0.00%',
|
||||||
item.product,
|
item.product?(item.product*100).toFixed(2)+'%':'0.00%',
|
||||||
item.waste
|
item.waste?(item.waste*100).toFixed(2)+'%':'0.00%'
|
||||||
]);
|
]);
|
||||||
this.config.data = outArr
|
this.config.data = outArr
|
||||||
this.$refs['yieldRateScrollBoard'].updateRows(outArr)
|
this.$refs['yieldRateScrollBoard'].updateRows(outArr)
|
||||||
|
@ -94,7 +94,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
|
|||||||
};
|
};
|
||||||
const onWsMessage = (event) => {
|
const onWsMessage = (event) => {
|
||||||
const jsonStr = event.data;
|
const jsonStr = event.data;
|
||||||
writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
// writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||||
this.messageCallback(jsonStr);
|
this.messageCallback(jsonStr);
|
||||||
};
|
};
|
||||||
const onWsClose = (event) => {
|
const onWsClose = (event) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user