Compare commits

...

20 Commits

Author SHA1 Message Date
lb
e7263302a7 update line 2023-12-05 17:00:55 +08:00
lb
b26e1d5a7f update switcher 2023-12-05 15:44:22 +08:00
lb
86bdabf358 update 2023-12-05 15:24:20 +08:00
lb
4069e71477 update kiln databoard 2023-12-05 15:08:07 +08:00
lb
6c661bedd3 add databoard 2023-12-04 17:00:40 +08:00
lb
a2ed9ed54b fix 添加参数 2023-12-04 09:10:56 +08:00
gtz
be430ebbff Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-30 09:08:59 +08:00
gtz
61b4bf784b Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-29 10:17:02 +08:00
gtz
b0f10b9002 '1' 2023-11-29 10:16:58 +08:00
gtz
e6b9d75f16 Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-28 09:03:13 +08:00
gtz
d9f3434712 Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-27 09:31:52 +08:00
gtz
de15716b7c Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-22 14:53:49 +08:00
gtz
c736992a34 '1' 2023-11-22 14:49:56 +08:00
gtz
dcbb2c719b Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-22 14:15:39 +08:00
gtz
bc2940ca99 Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-21 17:30:38 +08:00
gtz
76938951ed Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-20 16:07:12 +08:00
gtz
8b91e7812f '1' 2023-11-17 10:38:44 +08:00
gtz
9cffa01414 Merge branch 'projects/mes-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mes-test 2023-11-17 10:38:35 +08:00
gtz
905479d5f4 'del_dist' 2023-11-17 10:29:23 +08:00
gtz
c1ae248234 '1' 2023-11-17 10:28:39 +08:00
13 changed files with 605 additions and 15 deletions

View File

@@ -15,15 +15,14 @@ VUE_APP_TITLE = MES系统
VUE_APP_BASE_API = '/prod-api'
# 积木报表指向地址
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
VUE_APP_JIMU_API = 'http://10.70.2.2:8080'
# 根据服务器或域名修改
# PUBLIC_PATH = 'http://my-pi.com:8888/yudao-admin/'
PUBLIC_PATH = 'http://192.168.0.33:8889/'
PUBLIC_PATH = 'http://10.70.2.32'
# 二级部署路径
VUE_APP_APP_NAME ='yudao-admin'
# VUE_APP_APP_NAME ='yudao-admin'
# 多租户的开关
VUE_APP_TENANT_ENABLE = true

View File

@@ -1,16 +1,21 @@
NODE_ENV = production
# 生产环境配置
ENV = 'production'
# 页面标题
VUE_APP_TITLE = 产线监控系统
VUE_APP_TITLE = MES系统
# 测试环境配置
ENV = 'staging'
# 芋道管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'
# 芋道管理系统/测试环境
VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn'
# 积木报表指向地址
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
# 静态资源地址
PUBLIC_PATH = 'http://static.yudao.iocoder.cn/'
# 根据服务器或域名修改
PUBLIC_PATH = 'http://192.168.0.33:8889/'
# 二级部署路径
# VUE_APP_APP_NAME ='yudao-admin'
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
@@ -20,4 +25,3 @@ VUE_APP_DOC_ENABLE = false
# 百度统计
VUE_APP_BAIDU_CODE = fadc1bd5db1a1d6f581df60a1807f8ab

View File

@@ -360,6 +360,7 @@ export default {
ts: Date.now(), // 现在的时间戳
}
reqGet(data).then(res => {
console.log(1)
if (res.repCode === '0000') {
this.backImgBase = res.repData.originalImageBase64
this.blockBackImgBase = res.repData.jigsawImageBase64

View File

@@ -104,7 +104,7 @@ export const constantRoutes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue')
},
},
{
path: '/processingBoard',
name: 'processingBoard',

View File

@@ -0,0 +1,49 @@
<!--
filename: Container.vue
author: liubin
date: 2023-12-05 14:29:53
description: 窑炉容器
-->
<template>
<div
class="kiln-container"
:style="{ width: width ? width + 'px' : 'initial' }">
<div class="container-hd">
<i class="">
<img src="" alt="" />
</i>
<span>{{ name }}</span>
</div>
<div class="container-body">
<slot>
<div class="test-body">something test....</div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'KilnContainer',
components: {},
props: ['name', 'width'],
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.kiln-container {
display: inline-block;
width: 100%;
height: 100%;
background: #ccc3;
display: flex;
flex-direction: column;
position: relative;
}
</style>

View File

@@ -0,0 +1,84 @@
<!--
filename: DateBtnGroup.vue
author: liubin
date: 2023-12-05 14:35:14
description: 日期按钮组
-->
<template>
<div class="date-btn-group">
<button
class="btn"
:class="{ 'btn-active': active == '日' }"
@click="handleClick('日')">
</button>
<button
class="btn"
:class="{ 'btn-active': active == '周' }"
@click="handleClick('周')">
</button>
<button
class="btn"
:class="{ 'btn-active': active == '月' }"
@click="handleClick('月')">
</button>
</div>
</template>
<script>
export default {
name: 'DateBtnGroup',
data() {
return {
active: '日',
};
},
methods: {
handleClick(v) {
this.active = v;
this.$emit('change', v);
},
},
};
</script>
<style scoped lang="scss">
button {
appearance: none;
border: none;
outline: none;
background: none;
padding: 6px 8px;
}
.date-btn-group {
position: absolute;
top: 40px;
right: 100px;
border: 1px solid #ccc;
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.btn {
cursor: pointer;
border: 1px solid #11e8e4;
border-radius: 4px;
color: #11e8e4;
transition: all 0.3s ease-in-out;
&:hover {
background: #11e8e4;
color: #013433;
}
}
.btn-active {
background: #11e8e4;
color: #013433;
}
</style>

View File

@@ -0,0 +1,25 @@
<!--
filename: Header.vue
author: liubin
date: 2023-12-05 14:30:46
description: 顶部标题
-->
<template></template>
<script>
export default {
name: "KilnHeader",
components: {},
props: {},
data() {
return {}
},
computed: {},
methods: {},
}
</script>
<style scoped lang="scss">
</style>

View File

@@ -0,0 +1,69 @@
<!--
filename: SelectorBtnGroup.vue
author: liubin
date: 2023-12-05 14:28:24
description: 选项按钮组
-->
<template>
<div class="selector-btn-group">
<button
class="btn"
v-for="opt in options"
:key="opt"
@click="active = opt"
:class="active == opt ? 'btn-active' : ''">
{{ opt }}
</button>
</div>
</template>
<script>
export default {
name: 'SelectorBtnGroup',
components: {},
props: ['options'],
data() {
return {
active: this.options[0] || 'default'
};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
button {
border: none;
appearance: none;
outline: none;
color: red;
font-size: 14px;
padding: 8px 12px;
}
button:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
button:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.selector-btn-group {
}
.btn {
background: #03233c;
color: #fff;
cursor: pointer;
transition: all 0.3s ease-out;
&.btn-active,
&:hover {
background: #0f3d5c;
}
}
</style>

View File

@@ -0,0 +1,71 @@
<!--
filename: ShadowRect.vue
author: liubin
date: 2023-12-05 14:28:57
description: 阴影矩形
-->
<template>
<div class="shadow-rect" :style="{ borderRadius: rounded ? '8px' : '2px' }">
<slot>
<div
class="test-data"
style="flex: 1; display: flex; align-items: center">
<span
style="
flex: 7;
color: #fff;
text-align: right;
font-size: 18px;
line-height: 1.12;
letter-spacing: 1px;
padding-right: 12px;
">
窑炉压力碹顶加权
</span>
<span
style="
flex: 3;
color: #fff;
text-align: left;
font-size: 18px;
line-height: 1.12;
padding-right: 8px;
">
92Kpa
</span>
</div>
</slot>
</div>
</template>
<script>
export default {
name: '',
components: {},
props: ['rounded'],
data() {
return {};
},
watch: {
rounded(val) {
if (val) {
console.log('val', val);
}
},
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.shadow-rect {
padding: 8px;
border-radius: 2px;
box-shadow: inset 0 0 10px 2px #ccc9;
color: white;
display: flex;
align-items: center;
}
</style>

View File

@@ -0,0 +1,57 @@
<!--
filename: Switcher.vue
author: liubin
date: 2023-12-05 14:29:29
description: 开关
-->
<template>
<div class="switcher" style="display: flex; align-items: center; gap: 12px">
<el-switch v-model="value"></el-switch>
<span style="color: #fff; font-size: 16px">{{ mode }}</span>
;
</div>
</template>
<script>
export default {
name: 'Switcher',
components: {},
props: {},
data() {
return {
value: true,
};
},
computed: {
mode() {
return this.value ? '历史详情' : '实时数据';
},
},
methods: {},
};
</script>
<style scoped lang="scss">
.switcher {
:deep(.el-switch__core) {
border: none;
background-color: #213d566b;
&::after {
background-color: #02457e;
}
}
:deep(.is-checked) {
.el-switch__core {
border: none;
background-color: #b4fffc;
&::after {
background-color: #08d8cd;
}
}
}
}
</style>

View File

@@ -0,0 +1,16 @@
export default {
name: 'KilnLine',
props: ['horizontal'],
render: function (h) {
return (
<div
class="line"
style={{
width: this.horizontal ? '100%' : '2px',
height: this.horizontal ? '2px' : '100%',
background:
'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
}}></div>
);
},
};

View File

@@ -0,0 +1,215 @@
<!--
filename: KilnDataBoard.vue
author: liubin
date: 2023-12-04 16:51:00
description:
-->
<template>
<div
class="KilnDataBoard"
style="
position: absolute;
top: -8px;
left: -16px;
width: calc(100% + 28px);
height: calc(100% + 38px);
background: #073f4a;
display: flex;
flex-direction: column;
gap: 16px;
">
<!-- test area -->
<DateBtnGroup />
<!-- 风机频率 -->
<div
class="absolute"
style="
position: absolute;
top: 120px;
right: 100px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(2, 320px);
grid-auto-rows: 56px;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n">
<span
style="
font-size: 16px;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 1px;
">
{{ n }}#风机
</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">
{{ Math.floor(Math.random() * 100) }}Hz
</span>
</ShadowRect>
</div>
<!-- 窑炉信息 -->
<div
class="absolute"
style="
position: absolute;
top: 450px;
right: 100px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(2, 320px);
grid-auto-rows: 56px;
gap: 8px;
">
<ShadowRect v-for="n in 8" :key="n">
<!-- without slot -->
</ShadowRect>
</div>
<!-- 原料用量统计 -->
<div
class="absolute"
style="
position: absolute;
top: 120px;
left: 60px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(3, 144px);
grid-auto-rows: auto;
gap: 8px;
">
<ShadowRect v-for="n in 9" :key="n" :rounded="true">
<div
class="material"
style="
flex: 1;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
">
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
234
</span>
<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
- 原料1/ -
</span>
</div>
</ShadowRect>
</div>
<!-- btn group -->
<div
class="absolute"
style="
position: absolute;
top: 10px;
left: 60px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
">
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
</div>
<div
class="absolute"
style="
position: absolute;
top: 90px;
left: 60px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
">
<SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
</div>
<!-- switcher -->
<div
class="absolute"
style="
position: absolute;
top: 10px;
right: 10px;
padding: 12px;
background: #0003;
border: 1px solid #ccc;
">
<Switcher />
</div>
<!-- container -->
<Container name="能耗" :width="300">
<div
class="v"
style="height: 100px; background: #ccc; width: 300px"></div>
<KilnLine :horizontal="true" />
<div
class="v"
style="height: 100px; background: #caf; width: 300px"></div>
</Container>
<!-- null -->
<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
<section
class="main-body"
style="
display: grid;
gap: 16px;
flex: 1;
grid-template-columns: repeat(3, minmax(100px, 1fr));
">
<div class="main-left" style="background: #f001"></div>
<div class="main-middle" style="background: #0f01"></div>
<div class="main-right" style="background: #00f1"></div>
</section>
</div>
</template>
<script>
import DateBtnGroup from '../components/DateBtnGroup.vue';
import ShadowRect from '../components/ShadowRect.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import Switcher from '../components/Switcher.vue';
import KilnLine from '../components/line';
import Container from '../components/Container.vue';
console.log('Line', KilnLine)
export default {
name: 'KilnDataBoard',
components: {
DateBtnGroup,
KilnLine,
Container,
ShadowRect,
SelectorBtnGroup,
Switcher,
},
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.KilnDataBoard {
}
</style>

View File

@@ -117,7 +117,7 @@
style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddAttr" type="text">
<i class="el-icon-plus"></i>
添加属性
添加参数
</el-button>
</div>
<base-table