@@ -12,8 +12,8 @@ ENV = 'development' | |||
VUE_APP_TITLE = 芋道管理系统 | |||
# 芋道管理系统/开发环境 | |||
VUE_APP_BASE_API = 'http://192.168.1.61:48080' | |||
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | |||
# VUE_APP_BASE_API = 'http://192.168.1.61:48080' | |||
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | |||
# 路由懒加载 | |||
VUE_CLI_BABEL_TRANSPILE_MODULES = true | |||
@@ -42,6 +42,7 @@ | |||
}, | |||
"dependencies": { | |||
"@babel/parser": "7.18.4", | |||
"@jiaminghi/data-view": "^2.10.0", | |||
"@riophae/vue-treeselect": "0.4.0", | |||
"axios": "^1.6.8", | |||
"clipboard": "2.0.8", | |||
@@ -30,3 +30,19 @@ export function getProduceDataDetail(data){ | |||
query: data | |||
}) | |||
} | |||
// export function cockpitDataMonitor(data) { | |||
// return request({ | |||
// url: '/ip/prod-output/cockpitDataMonitor', | |||
// method: 'post', | |||
// data: data | |||
// }) | |||
// } | |||
export function cockpitDataMonitor(query) { | |||
return request({ | |||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=95bdbdc1c387a170105f84cd416c4c9f&city=110108', | |||
method: 'get', | |||
query: query | |||
}) | |||
} |
@@ -133,8 +133,8 @@ $base1px: 0.15vh; // 1px / 1080px; | |||
width: 100%; | |||
clear: both; | |||
position: relative; | |||
top: calc(56 * #{$base1px}); | |||
height: calc(128 * #{$base1px}); | |||
top: calc(#{$base1px}); | |||
height: calc(100 * #{$base1px}); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
@@ -189,7 +189,7 @@ $base1px: 0.15vh; // 1px / 1080px; | |||
height: calc(16 * 0.12vh); | |||
line-height: calc(16 * 0.12vh); | |||
font-size: calc(12 * 0.12vh); | |||
color: #8c8c8c; | |||
color: #C7C7C7; | |||
a, | |||
a:hover, | |||
@@ -18,6 +18,7 @@ import store from "./store"; | |||
import router from "./router"; | |||
import directive from "./directive"; // directive | |||
import plugins from "./plugins"; // plugins | |||
import { scrollBoard } from '@jiaminghi/data-view' | |||
import "./assets/icons"; // icon | |||
import "./permission"; // permission control | |||
@@ -69,6 +70,7 @@ Vue.use(directive) | |||
Vue.use(plugins) | |||
Vue.use(VueMeta) | |||
Vue.use(CodeBrickZj); | |||
Vue.use(scrollBoard) | |||
// Form Generator 组件需要使用到 tinymce | |||
import Tinymce from "@/components/tinymce/index.vue"; | |||
Vue.component("tinymce", Tinymce); | |||
@@ -0,0 +1,131 @@ | |||
<template> | |||
<div class="factory-header"> | |||
<section class="menu1"> | |||
<FactorySelect | |||
:companyName="companyName" | |||
:companyId="companyId" | |||
@updateCompany="updateCompany" | |||
/> | |||
</section> | |||
<section class="menu2"> | |||
<CopilotButton | |||
v-for="i in ['日', '周', '月', '年']" | |||
:key="i" | |||
:label="i" | |||
:active="i === period" | |||
@click="() => $emit('update:period', i)" | |||
/> | |||
<div class="btn-group"> | |||
<button type="button" class="export-btn" /> | |||
<button | |||
type="button" | |||
class="fullscreen-btn" | |||
:class="[isFullscreen ? 'exit-fullscreen' : '']" | |||
@click="toggleFullScreen" | |||
/> | |||
</div> | |||
</section> | |||
<div class="page-title">{{ companyName }}</div> | |||
</div> | |||
</template> | |||
<script> | |||
import CopilotButton from "./button.vue"; | |||
import FactorySelect from "./FactorySelect.vue"; | |||
import screenfull from "screenfull"; | |||
export default { | |||
name: "FactoryDataHeader", | |||
components: { CopilotButton, FactorySelect }, | |||
props: { | |||
companyName: { | |||
type: String, | |||
}, | |||
companyId: { | |||
type: String, | |||
}, | |||
period: { | |||
type: String, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
isFullscreen: false, | |||
}; | |||
}, | |||
computed: {}, | |||
methods: { | |||
toggleFullScreen() { | |||
this.isFullscreen = !this.isFullscreen; | |||
screenfull.toggle(document.querySelector(".factory-layout")); | |||
// 矫正宽度 | |||
// const el = document.querySelector(".factory-layout"); | |||
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)"; | |||
// el.style.left = this.isFullscreen ? "0" : "54px"; | |||
}, | |||
updateCompany(obj) { | |||
this.$emit("updateCompany", obj); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
@font-face { | |||
font-family: 优设标题黑; | |||
src: url(../../../assets/YouSheBiaoTiHei-2.ttf); | |||
} | |||
.factory-header { | |||
display: flex; | |||
gap: 12px; | |||
align-items: center; | |||
} | |||
.factory-header > .menu1 { | |||
width: 24vw; | |||
/* display: flex; | |||
align-items: center; | |||
gap: 8px; */ | |||
} | |||
.factory-header > .menu2 { | |||
width: 30vw; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
.export-btn, | |||
.fullscreen-btn { | |||
width: 32px; | |||
height: 32px; | |||
margin-left: 24px; | |||
cursor: pointer; | |||
} | |||
.export-btn { | |||
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100% | |||
no-repeat; | |||
} | |||
.fullscreen-btn { | |||
background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100% | |||
no-repeat; | |||
} | |||
.exit-fullscreen { | |||
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / | |||
100% 100% no-repeat; | |||
} | |||
.page-title { | |||
flex: 1; | |||
font-size: 40px; | |||
line-height: 70px; | |||
letter-spacing: 5px; | |||
font-family: 优设标题黑; | |||
color: #6db6ff; | |||
text-align: right; | |||
user-select: none; | |||
} | |||
</style> |
@@ -0,0 +1,137 @@ | |||
<template> | |||
<div class="factory-select"> | |||
<div class="label-box" @click="openList"> | |||
<span>{{ companyName }}</span> | |||
<span | |||
class="triangle" | |||
:style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }" | |||
></span> | |||
</div> | |||
<div class="option-list" v-show="isOpen"> | |||
<div | |||
v-for="item in company" | |||
:key="item.id" | |||
@click="chooseCompany(item.id, item.name)" | |||
> | |||
{{ item.name }} | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "FactorySelect", | |||
props: { | |||
companyName: { | |||
type: String, | |||
}, | |||
companyId: { | |||
type: String, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
isOpen: false, | |||
company: [ | |||
{ id: "1", name: "瑞昌中建材光电材料有限公司" }, | |||
{ id: "2", name: "邯郸中建材光电材料有限公司" }, | |||
{ id: "3", name: "株洲中建材光电材料有限公司" }, | |||
{ id: "4", name: "佳木斯中建材光电材料有限公司" }, | |||
{ id: "5", name: "成都中建材光电材料有限公司" }, | |||
{ id: "6", name: "凯盛中建材光电材料有限公司" }, | |||
{ id: "7", name: "蚌埠中建材光电材料有限公司" }, | |||
], | |||
}; | |||
}, | |||
methods: { | |||
openList() { | |||
this.isOpen = !this.isOpen; | |||
}, | |||
chooseCompany(id, name) { | |||
// this.companyId = id; | |||
// this.companyName = name; | |||
this.$emit("updateCompany", { companyName: name, companyId: id }); | |||
this.isOpen = false; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.factory-select { | |||
width: 100%; | |||
position: relative; | |||
.label-box { | |||
flex: 1; | |||
position: relative; | |||
background: #006acd40; | |||
backdrop-filter: blur(3px); | |||
padding: 12px; | |||
padding-left: 20px; | |||
color: #fff; | |||
font-size: 22px; | |||
cursor: pointer; | |||
} | |||
.label-box::before, | |||
.label-box::after { | |||
content: ""; | |||
position: absolute; | |||
width: 16px; | |||
height: 16px; | |||
top: 0; | |||
background: transparent; | |||
border-style: solid; | |||
border-width: 2px; | |||
border-color: transparent; | |||
border-top-color: #007be4; | |||
} | |||
.label-box::before { | |||
left: 0; | |||
border-left-color: #007be4; | |||
} | |||
.label-box::after { | |||
right: 0; | |||
border-right-color: #007be4; | |||
} | |||
.triangle { | |||
position: absolute; | |||
right: 15px; | |||
top: 18px; | |||
display: inline-block; | |||
width: 0; | |||
height: 0; | |||
border-top: 12px solid transparent; | |||
border-bottom: 12px solid transparent; | |||
border-left: 12px solid #1d74d8; | |||
} | |||
.option-list { | |||
width: 100%; | |||
position: absolute; | |||
z-index: 1000; | |||
div { | |||
padding-left: 23px; | |||
font-size: 20px; | |||
width: 100%; | |||
height: 44px; | |||
line-height: 44px; | |||
background-color: rgba(1, 34, 86, 0.8); | |||
cursor: pointer; | |||
} | |||
div:hover { | |||
background-color: rgba(0, 106, 205, 0.61); | |||
} | |||
} | |||
.option-list::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba(1, 34, 86, 0.9); | |||
filter: blur(2px); | |||
z-index: -1; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,232 @@ | |||
<!-- | |||
filename: Container.vue | |||
author: liubin | |||
date: 2024-04-09 10:44:09 | |||
description: | |||
--> | |||
<template> | |||
<div class="copilot-container"> | |||
<!-- refresh btn --> | |||
<button | |||
v-if="false" | |||
style=" | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
background: none; | |||
color: #fff; | |||
cursor: pointer; | |||
position: absolute; | |||
top: 8px; | |||
right: 8px; | |||
" | |||
@click="$emit('refresh')" | |||
> | |||
<svg | |||
xmlns="http://www.w3.org/2000/svg" | |||
fill="none" | |||
viewBox="0 0 24 24" | |||
stroke-width="1.5" | |||
stroke="currentColor" | |||
style="width: 24px; height: 24px" | |||
> | |||
<path | |||
stroke-linecap="round" | |||
stroke-linejoin="round" | |||
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" | |||
/> | |||
</svg> | |||
</button> | |||
<!-- decoration --> | |||
<div class="corner tl"></div> | |||
<div class="corner tr"></div> | |||
<div v-if="side == 'left'" class="corner bl"></div> | |||
<div v-if="side == 'right'" class="corner br"></div> | |||
<!-- content --> | |||
<div | |||
class="container-head" | |||
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" | |||
> | |||
<Icon :icon="icon"></Icon> | |||
<h2 class="container-title">{{ title }}</h2> | |||
</div> | |||
<div | |||
class="container-body" | |||
:class="[ | |||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | |||
]" | |||
> | |||
<slot /> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import ContainerIconVue from "./ContainerIcon.vue"; | |||
export default { | |||
name: "DashboardContainer", | |||
components: { | |||
Icon: ContainerIconVue, | |||
}, | |||
props: { | |||
side: { | |||
type: String, | |||
default: "left", | |||
}, | |||
icon: { | |||
type: String, | |||
default: "cube", | |||
}, | |||
title: { | |||
type: String, | |||
default: "Default Title", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.copilot-container { | |||
height: 0; | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
position: relative; | |||
box-shadow: inset 0 0 20px 1px #fff1; | |||
backdrop-filter: blur(4px); | |||
&::before { | |||
content: ""; | |||
position: absolute; | |||
display: inline-block; | |||
height: 100%; | |||
width: 0.11415vw; | |||
border-radius: 2px; | |||
top: 0%; | |||
left: 0; | |||
background: radial-gradient( | |||
circle at center, | |||
#024798 2%, | |||
#024798 30%, | |||
transparent | |||
); | |||
z-index: 1; | |||
} | |||
&::after { | |||
content: ""; | |||
position: absolute; | |||
display: inline-block; | |||
width: 60%; | |||
height: 0.31415vh; | |||
border-radius: 2px; | |||
left: 8%; | |||
bottom: 0; | |||
background: linear-gradient(to right, #024798, transparent); | |||
z-index: 0; | |||
} | |||
.container-head { | |||
// height: 40px; | |||
height: 3.8vh; | |||
padding: 8px; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
.container-title { | |||
font-size: 1.18vw; | |||
line-height: 1.39vw; | |||
font-weight: normal; | |||
letter-spacing: 2px; | |||
} | |||
} | |||
.container-body { | |||
padding: 12px; | |||
display: flex; | |||
flex-direction: column; | |||
flex: 1; | |||
height: 0; | |||
} | |||
.corner { | |||
z-index: 1; | |||
position: absolute; | |||
// width: 16px; | |||
// height: 16px; | |||
width: 0.95vw; | |||
height: 0.95vw; | |||
} | |||
.corner.tl { | |||
border-top: 2px solid #0175dc; | |||
border-left: 2px solid #0175dc; | |||
top: 0; | |||
left: 0; | |||
} | |||
.corner.tr { | |||
top: 0; | |||
right: 0; | |||
border-top: 2px solid #0175dc; | |||
border-right: 2px solid #0175dc; | |||
} | |||
.corner.bl { | |||
// width: 20px; | |||
// height: 20px; | |||
width: 1.064vw; | |||
height: 1.064vw; | |||
bottom: 0; | |||
left: 0; | |||
// border-left: 10px solid #0175dc; | |||
// border-bottom: 10px solid #0175dc; | |||
// border-top: 10px solid transparent; | |||
// border-right: 10px solid transparent; | |||
border-left: 0.532vw solid #0175dc; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid transparent; | |||
} | |||
.corner.br { | |||
bottom: 0; | |||
right: 0; | |||
// width: 20px; | |||
// height: 20px; | |||
width: 1.064vw; | |||
height: 1.064vw; | |||
// border-left: 10px solid transparent; | |||
// border-bottom: 10px solid #0175dc; | |||
// border-top: 10px solid transparent; | |||
// border-right: 10px solid #0175dc; | |||
border-left: 0.532vw solid transparent; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid #0175dc; | |||
} | |||
.gradient-to-right { | |||
background: linear-gradient(to right, #0c3f68cc, transparent); | |||
} | |||
.gradient-to-left { | |||
background: linear-gradient(to left, #0c3f68cc, transparent); | |||
} | |||
.body-gradient-to-right { | |||
background: linear-gradient(to right, #0003, transparent); | |||
} | |||
.body-gradient-to-left { | |||
background: linear-gradient(to left, #0003, transparent); | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,56 @@ | |||
<!-- | |||
filename: ContainerIcon.vue | |||
author: liubin | |||
date: 2024-04-09 16:41:36 | |||
description: | |||
--> | |||
<template> | |||
<div class="container-icon" :style="bgStyle"></div> | |||
</template> | |||
<script> | |||
import prod from "@/assets/images/companyData/prod-minor.png"; | |||
import store from "@/assets/images/companyData/store.png"; | |||
import energy from "@/assets/images/companyData/energy.png"; | |||
import order from "@/assets/images/companyData/order.png"; | |||
export default { | |||
name: "ContainerIcon", | |||
components: {}, | |||
props: { | |||
icon: { | |||
type: String, | |||
default: "prod", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: { | |||
bgStyle() { | |||
return { | |||
prod: | |||
"background: url(" + prod + ") no-repeat center center / 100% 100%", | |||
store: | |||
"background: url(" + store + ") no-repeat center center / 100% 100%", | |||
energy: | |||
"background: url(" + energy + ") no-repeat center center / 100% 100%", | |||
order: | |||
"background: url(" + order + ") no-repeat center center / 100% 100%", | |||
}[this.icon]; | |||
}, | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.container-icon { | |||
// width: 32px; | |||
// height: 32px; | |||
width: 1.701vw; | |||
height: 1.701vw; | |||
background: #ccc2; | |||
} | |||
</style> |
@@ -0,0 +1,371 @@ | |||
<template> | |||
<div class="left-chart-base"> | |||
<div class="legend"> | |||
<span | |||
v-for="item in legend" | |||
:key="item.label" | |||
class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }" | |||
>{{ item.label }}</span | |||
> | |||
</div> | |||
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div> | |||
</div> | |||
</template> | |||
<script> | |||
import { debounce } from "@/utils/debounce"; | |||
import * as echarts from "echarts"; | |||
export default { | |||
name: "Energy", | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
default: 34, | |||
}, | |||
legend: { | |||
type: Array, | |||
required: true, | |||
}, | |||
xAxis: { | |||
type: Array, | |||
required: true, | |||
}, | |||
series: { | |||
type: Array, | |||
required: true, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
isFullscreen: false, | |||
actualOptions: null, | |||
chart: "", | |||
options: { | |||
color: ["#FFD160", "#2760FF", "#12FFF5"], | |||
grid: { | |||
left: "3%", | |||
right: "4%", | |||
bottom: "0", | |||
top: "15%", | |||
containLabel: true, | |||
}, | |||
tooltip: { | |||
trigger: "axis", | |||
}, | |||
xAxis: { | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
axisLabel: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
}, | |||
data: this.xAxis, | |||
}, | |||
yAxis: [ | |||
{ | |||
type: "value", | |||
name: "KW/h", | |||
nameTextStyle: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
align: "right", | |||
}, | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLabel: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
}, | |||
{ | |||
type: "value", | |||
name: "m³/h", | |||
nameTextStyle: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
align: "left", | |||
}, | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLabel: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
}, | |||
], | |||
series: [ | |||
{ | |||
name: "", | |||
data: [], | |||
type: "line", | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: "#FFD160" + "80" }, | |||
{ offset: 0.5, color: "#FFD160" + "20" }, | |||
{ offset: 1, color: "#FFD160" + "00" }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 2, | |||
}, | |||
symbol: "circle", | |||
symbolSize: 8, | |||
emphasis: { | |||
focus: "series", | |||
}, | |||
}, | |||
{ | |||
name: "", | |||
data: [], | |||
type: "line", | |||
yAxisIndex: 1, | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: "#2760FF" + "80" }, | |||
{ offset: 0.5, color: "#2760FF" + "20" }, | |||
{ offset: 1, color: "#2760FF" + "00" }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 2, | |||
}, | |||
symbol: "circle", | |||
symbolSize: 8, | |||
emphasis: { | |||
focus: "series", | |||
}, | |||
}, | |||
{ | |||
name: "", | |||
data: [], | |||
type: "line", | |||
yAxisIndex: 1, | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: "#12FFF5" + "80" }, | |||
{ offset: 0.5, color: "#12FFF5" + "20" }, | |||
{ offset: 1, color: "#12FFF5" + "00" }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 2, | |||
}, | |||
symbol: "circle", | |||
symbolSize: 8, | |||
emphasis: { | |||
focus: "series", | |||
}, | |||
}, | |||
], | |||
}, | |||
}; | |||
}, | |||
watch: { | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
// isFullscreen(val) { | |||
// this.actualOptions.series.map((item) => { | |||
// item.barWidth = val ? 18 : 12; | |||
// }); | |||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||
// this.initOptions(this.actualOptions); | |||
// }, | |||
// series(val) { | |||
// if (!val) { | |||
// this.initOptions(this.options); | |||
// return; | |||
// } | |||
// const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
// actualOptions.series[0].data = val[0].data; | |||
// actualOptions.series[0].name = val[0].name; | |||
// actualOptions.series[1].data = val[1].data; | |||
// actualOptions.series[1].name = val[1].name; | |||
// actualOptions.series[2].data = val[2].data; | |||
// actualOptions.series[2].name = val[2].name; | |||
// this.actualOptions = actualOptions; | |||
// this.initOptions(actualOptions); | |||
// }, | |||
}, | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(document.getElementById("factoryEnergyChart")); | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
actualOptions.series[0].data = this.series[0].data; | |||
actualOptions.series[0].name = this.series[0].name; | |||
actualOptions.series[1].data = this.series[1].data; | |||
actualOptions.series[1].name = this.series[1].name; | |||
actualOptions.series[2].data = this.series[2].data; | |||
actualOptions.series[2].name = this.series[2].name; | |||
this.actualOptions = actualOptions; | |||
this.chart.setOption(actualOptions); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.left-chart-base { | |||
// position: relative; | |||
height: 100%; | |||
.legend { | |||
position: absolute; | |||
top: 5.2vh; | |||
right: 4vw; | |||
} | |||
.legend-item { | |||
position: relative; | |||
// font-size: 12px; | |||
margin-right: 1.34vw; | |||
&::before { | |||
content: ""; | |||
display: inline-block; | |||
// width: 10px; | |||
// height: 10px; | |||
width: 0.531vw; | |||
height: 0.531vw; | |||
background-color: #ccc; | |||
border-radius: 2px; | |||
margin-right: 0.22vw; | |||
} | |||
} | |||
.legend-item:nth-child(1):before { | |||
// width: 12px; | |||
// height: 2px; | |||
width: 0.638vw; | |||
height: 0.1064vw; | |||
background-color: #ffd160; | |||
position: absolute; | |||
top: 50%; | |||
// left: -16px; | |||
left: -0.851vw; | |||
transform: translateY(-50%); | |||
} | |||
.legend-item:nth-child(1):after { | |||
background-color: #ffd160; | |||
content: ""; | |||
display: inline-block; | |||
position: absolute; | |||
// width: 6px; | |||
// height: 6px; | |||
width: 0.3191vw; | |||
height: 0.3191vw; | |||
border-radius: 100%; | |||
top: 50%; | |||
left: -0.851vw; | |||
// left: -16px; | |||
transform: translateY(-50%) translateX(50%); | |||
} | |||
.legend-item:nth-child(2):before { | |||
// width: 12px; | |||
// height: 2px; | |||
width: 0.638vw; | |||
height: 0.1064vw; | |||
background-color: #2760ff; | |||
position: absolute; | |||
top: 50%; | |||
// left: -16px; | |||
left: -0.851vw; | |||
transform: translateY(-50%); | |||
} | |||
.legend-item:nth-child(2):after { | |||
background-color: #2760ff; | |||
content: ""; | |||
display: inline-block; | |||
position: absolute; | |||
// width: 6px; | |||
// height: 6px; | |||
width: 0.3191vw; | |||
height: 0.3191vw; | |||
border-radius: 100%; | |||
top: 50%; | |||
left: -0.851vw; | |||
// left: -16px; | |||
transform: translateY(-50%) translateX(50%); | |||
} | |||
.legend-item:nth-child(3):before { | |||
// width: 12px; | |||
// height: 2px; | |||
width: 0.638vw; | |||
height: 0.1064vw; | |||
background-color: #12fff5; | |||
position: absolute; | |||
top: 50%; | |||
// left: -16px; | |||
left: -0.851vw; | |||
transform: translateY(-50%); | |||
} | |||
.legend-item:nth-child(3):after { | |||
background-color: #12fff5; | |||
content: ""; | |||
display: inline-block; | |||
position: absolute; | |||
// width: 6px; | |||
// height: 6px; | |||
width: 0.3191vw; | |||
height: 0.3191vw; | |||
border-radius: 100%; | |||
top: 50%; | |||
left: -0.851vw; | |||
// left: -16px; | |||
transform: translateY(-50%) translateX(50%); | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,77 @@ | |||
<template> | |||
<dv-scroll-board | |||
v-if="aa" | |||
:config="config" | |||
style="width: 100%; height: 100%" | |||
/> | |||
</template> | |||
<script> | |||
import { debounce } from "@/utils/debounce"; | |||
export default { | |||
name: "Order", | |||
data() { | |||
return { | |||
aa: true, | |||
config: { | |||
header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"], | |||
headerBGC: "rgba(0, 106, 205, 0.22)", | |||
oddRowBGC: "rgba(0, 106, 205, 0.22)", | |||
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)", | |||
data: [], | |||
rowNum: 12, | |||
waitTime: 3000, | |||
columnWidth: [50], | |||
align: ["center"], | |||
carousel: "page", | |||
}, | |||
}; | |||
}, | |||
mounted() { | |||
this.getTableList(); | |||
this.tableReset(); | |||
window.addEventListener("resize", this.tableReset); | |||
}, | |||
methods: { | |||
tableReset() { | |||
this.aa = false; | |||
debounce(() => { | |||
this.initTable(); | |||
}, 500)(); | |||
}, | |||
initTable() { | |||
this.aa = true; | |||
}, | |||
getTableList() { | |||
let _this = this; | |||
setTimeout( | |||
(function name() { | |||
_this.config.data = [ | |||
["1", "行1列1", "行1列2", "行1列3", "50%"], | |||
["2", "行2列1", "行2列2", "行2列3", "50%"], | |||
["3", "行3列1", "行3列2", "行3列3", "50%"], | |||
["4", "行4列1", "行4列2", "行4列3", "50%"], | |||
["5", "行5列1", "行5列2", "行5列3", "50%"], | |||
["6", "行6列1", "行6列2", "行6列3", "50%"], | |||
["7", "行7列1", "行7列2", "行7列3", "50%"], | |||
["8", "行8列1", "行8列2", "行8列3", "50%"], | |||
["9", "行9列1", "行9列2", "行9列3", "50%"], | |||
["10", "行10列1", "行10列2", "行10列3", "50%"], | |||
["11", "行11列1", "行11列2", "行11列3", "50%"], | |||
["12", "行12列1", "行12列2", "行12列3", "50%"], | |||
["13", "行13列1", "行13列2", "行13列3", "50%"], | |||
["14", "行14列1", "行14列2", "行14列3", "50%"], | |||
["15", "行15列1", "行15列2", "行15列3", "50%"], | |||
["16", "行16列1", "行16列2", "行16列3", "50%"], | |||
["17", "行17列1", "行17列2", "行17列3", "50%"], | |||
["18", "行18列1", "行18列2", "行18列3", "50%"], | |||
["19", "行19列1", "行19列2", "行19列3", "50%"], | |||
["20", "行20列1", "行20列2", "行20列3", "50%"], | |||
]; | |||
})(), | |||
2000 | |||
); | |||
this.initTable(); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,272 @@ | |||
<template> | |||
<div class="prod-monitor"> | |||
<div class="fto-box"> | |||
<div class="icon"> | |||
<img | |||
src="./../assets/images/fto.png" | |||
alt="" | |||
style="width: 2.1875vw; height: 2.2875vw" | |||
/> | |||
</div> | |||
<div class="middle-box"> | |||
<span class="type">玻璃类型</span> | |||
<span class="type-name">FTO投入</span> | |||
</div> | |||
<div class="right-box"> | |||
<span class="type">投入数量</span> | |||
<span class="num">8391222</span> | |||
</div> | |||
</div> | |||
<div class="std-box"> | |||
<div class="icon"> | |||
<img | |||
src="./../assets/images/std.png" | |||
alt="" | |||
style="width: 2.1875vw; height: 2.1875vw" | |||
/> | |||
</div> | |||
<div class="middle-box"> | |||
<div class="separate"> | |||
<div> | |||
<span class="type">玻璃类型</span> | |||
<span class="type-name">标准组检产量</span> | |||
</div> | |||
<div> | |||
<span class="type">良品数量</span> | |||
<span class="type-name">740</span> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="right-box"> | |||
<div class="separate"> | |||
<div> | |||
<span class="type">生产数量</span> | |||
<span class="num">783</span> | |||
</div> | |||
<div> | |||
<span class="type1">良品率</span> | |||
<span class="num">96%</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="chip-box"> | |||
<div class="icon"> | |||
<img | |||
src="./../assets/images/chip.png" | |||
alt="" | |||
style="width: 2.1875vw; height: 2.1875vw" | |||
/> | |||
</div> | |||
<div class="middle-box"> | |||
<div class="separate"> | |||
<div> | |||
<span class="type">玻璃类型</span> | |||
<span class="type-name">芯片产量</span> | |||
</div> | |||
<div> | |||
<span class="type">良品数量</span> | |||
<span class="type-name">740</span> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="right-box"> | |||
<div class="separate"> | |||
<div> | |||
<span class="type">生产数量</span> | |||
<span class="num">783</span> | |||
</div> | |||
<div> | |||
<span class="type1">良品率</span> | |||
<span class="num">96%</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bipv-box"> | |||
<div class="icon"> | |||
<img | |||
src="./../assets/images/bipv.png" | |||
alt="" | |||
style="width: 2.1875vw; height: 2.1875vw" | |||
/> | |||
</div> | |||
<div class="middle-box"> | |||
<div class="separate"> | |||
<div> | |||
<span class="type">玻璃类型</span> | |||
<span class="type-name">BIPV产量</span> | |||
</div> | |||
<div> | |||
<span class="type">良品数量</span> | |||
<span class="type-name">740</span> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="right-box"> | |||
<div class="separate"> | |||
<div> | |||
<span class="type">生产数量</span> | |||
<span class="num">783</span> | |||
</div> | |||
<div> | |||
<span class="type1">良品率</span> | |||
<span class="num">96%</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "ProdMonitor", | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.prod-monitor { | |||
height: 100%; | |||
display: flex; | |||
gap: 6px; | |||
flex-direction: column; | |||
.fto-box, | |||
.std-box, | |||
.chip-box, | |||
.bipv-box { | |||
box-shadow: inset 0 0 12px 2px #fff3; | |||
border-radius: 4px; | |||
display: flex; | |||
align-items: center; | |||
.icon { | |||
flex: 1; | |||
text-align: center; | |||
} | |||
.middle-box { | |||
flex: 2.086; | |||
position: relative; | |||
} | |||
.right-box { | |||
flex: 2.424; | |||
position: relative; | |||
} | |||
.type { | |||
display: inline-block; | |||
font-size: 0.9375vw; | |||
color: #6db6ff; | |||
position: relative; | |||
text-align: right; | |||
padding-right: 0.417vw; | |||
letter-spacing: 2px; | |||
width: 6.25vw; | |||
} | |||
.type1 { | |||
display: inline-block; | |||
font-size: 0.9375vw; | |||
color: #6db6ff; | |||
position: relative; | |||
text-align: right; | |||
padding-right: 0.6vw; | |||
width: 6.25vw; | |||
padding-left: 1.6vw; | |||
text-align: justify; | |||
text-align-last: justify; | |||
} | |||
.type-name { | |||
font-size: 1.042vw; | |||
color: #fff; | |||
position: relative; | |||
text-align: left; | |||
padding-left: 0.573vw; | |||
} | |||
.type-name::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 1px; | |||
height: 1.042vw; | |||
border: 1px solid; | |||
border-image: linear-gradient( | |||
180deg, | |||
rgba(0, 176, 243, 0), | |||
rgba(31, 143, 255, 1) | |||
) | |||
2 2; | |||
position: absolute; | |||
left: 0; | |||
top: 4px; | |||
} | |||
.num { | |||
font-size: 1.042vw; | |||
color: #fff; | |||
position: relative; | |||
text-align: left; | |||
padding-left: 0.573vw; | |||
} | |||
.num::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 1px; | |||
height: 1.042vw; | |||
border: 1px solid; | |||
border-image: linear-gradient( | |||
180deg, | |||
rgba(0, 176, 243, 0), | |||
rgba(31, 143, 255, 1) | |||
) | |||
2 2; | |||
position: absolute; | |||
left: 0; | |||
top: 4px; | |||
} | |||
} | |||
.fto-box { | |||
flex: 1; | |||
.type::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 1px; | |||
height: 1.6146vw; | |||
border: 1px solid; | |||
border-image: linear-gradient( | |||
135deg, | |||
rgba(0, 176, 243, 0), | |||
rgba(31, 143, 255, 1), | |||
rgba(31, 143, 255, 0) | |||
) | |||
2 2; | |||
position: absolute; | |||
left: 0; | |||
top: -2px; | |||
} | |||
} | |||
.std-box { | |||
flex: 1.3; | |||
} | |||
.chip-box { | |||
flex: 1.3; | |||
} | |||
.bipv-box { | |||
flex: 1.3; | |||
} | |||
.std-box, | |||
.chip-box, | |||
.bipv-box { | |||
.separate::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 1px; | |||
height: 3.125vw; | |||
border: 1px solid; | |||
border-image: linear-gradient( | |||
135deg, | |||
rgba(0, 176, 243, 0), | |||
rgba(31, 143, 255, 1), | |||
rgba(31, 143, 255, 0) | |||
) | |||
2 2; | |||
position: absolute; | |||
left: 0; | |||
top: -2px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,170 @@ | |||
<template> | |||
<div id="factoryStoreChart" style="width: 100%; height: 100%"></div> | |||
</template> | |||
<script> | |||
import { debounce } from "@/utils/debounce"; | |||
import * as echarts from "echarts"; | |||
export default { | |||
name: "Store", | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
default: 34, | |||
}, | |||
xAxis: { | |||
type: Array, | |||
required: true, | |||
}, | |||
series: { | |||
type: Array, | |||
required: true, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
isFullscreen: false, | |||
actualOptions: null, | |||
chart: "", | |||
options: { | |||
grid: { | |||
left: "3%", | |||
right: "1%", | |||
bottom: "0", | |||
top: "10%", | |||
containLabel: true, | |||
}, | |||
tooltip: {}, | |||
xAxis: { | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
axisLabel: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
}, | |||
data: this.xAxis, | |||
}, | |||
yAxis: { | |||
name: "单位/片", | |||
nameTextStyle: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
align: "right", | |||
}, | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLabel: { | |||
color: "rgba(255, 255, 255, 0.7)", | |||
fontSize: 12, | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
name: "", // this.series[0].name, | |||
type: "bar", | |||
barWidth: 12, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
color: { | |||
type: "linear", | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: "#12f7f1", // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 0.35, | |||
color: "#12f7f177", // 100% 处的颜色 | |||
}, | |||
{ | |||
offset: 0.75, | |||
color: "#12f7f133", // 100% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: "transparent", // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
data: [], // this.series[0].data, | |||
}, | |||
], | |||
}, | |||
}; | |||
}, | |||
watch: { | |||
series(val) { | |||
if (!val) { | |||
this.initOptions(this.options); | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
actualOptions.series[0].data = val[0].data; | |||
actualOptions.series[0].name = val[0].name; | |||
actualOptions.series[1].data = val[1].data; | |||
actualOptions.series[1].name = val[1].name; | |||
this.actualOptions = actualOptions; | |||
this.initOptions(actualOptions); | |||
}, | |||
}, | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(document.getElementById("factoryStoreChart")); | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
actualOptions.series[0].data = this.series[0].data; | |||
actualOptions.series[0].name = this.series[0].name; | |||
this.actualOptions = actualOptions; | |||
this.chart.setOption(actualOptions); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style></style> |
@@ -0,0 +1,186 @@ | |||
<template> | |||
<div class="factory-layout"> | |||
<FactoryDataHeader | |||
:companyName="companyName" | |||
:companyId="companyId" | |||
:period="period" | |||
@updateCompany="updateCompany" | |||
@update:period="period = $event" | |||
/> | |||
<div class="factory-section"> | |||
<section class="top flex"> | |||
<db-container title="生产监控" icon="prod"> | |||
<prod-monitor /> | |||
</db-container> | |||
<db-container title="仓库监控.当前" icon="store"> | |||
<store :series="series" :xAxis="xAxis" /> | |||
</db-container> | |||
</section> | |||
<section class="bottom flex"> | |||
<db-container title="能源监控" icon="energy"> | |||
<energy | |||
:legend="energyLegend" | |||
:series="energySeries" | |||
:xAxis="energyxAxis" | |||
/> | |||
</db-container> | |||
<db-container title="订单监控" icon="order"> | |||
<order /> | |||
</db-container> | |||
</section> | |||
</div> | |||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div> | |||
</div> | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import Store from "./components/Store.vue"; | |||
import Energy from "./components/Energy.vue"; | |||
import Order from "./components/Order.vue"; | |||
import { cockpitDataMonitor } from "@/api/produceData"; | |||
export default { | |||
name: "FactoryData", | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
ProdMonitor, | |||
Store, | |||
Energy, | |||
Order, | |||
}, | |||
data() { | |||
const year = new Date().getFullYear(); | |||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | |||
return { | |||
companyId: "1", | |||
companyName: "瑞昌中建材光电材料有限公司", | |||
period: "日", | |||
energyLegend: [ | |||
{ label: "电", color: "#FFD160" }, | |||
{ label: "水", color: "#2760FF" }, | |||
{ label: "气", color: "#12FFF5" }, | |||
], | |||
energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7], | |||
legend: [ | |||
{ label: `${year - 1}年`, color: "#12f7f1" }, | |||
// { label: `${year}年`, color: "#58adfa" }, | |||
], | |||
xAxis: cities, | |||
}; | |||
}, | |||
computed: { | |||
energySeries() { | |||
return [ | |||
{ | |||
name: "电", | |||
data: Array.from({ length: 7 }, () => | |||
Math.floor(Math.random() * 1000) | |||
), | |||
}, | |||
{ | |||
name: "水", | |||
data: Array.from({ length: 7 }, () => | |||
Math.floor(Math.random() * 1000) | |||
), | |||
}, | |||
{ | |||
name: "气", | |||
data: Array.from({ length: 7 }, () => | |||
Math.floor(Math.random() * 1000) | |||
), | |||
}, | |||
]; | |||
}, | |||
series() { | |||
// const ftoInvest = this.$store.getters.home.ftoInvest; | |||
// if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) { | |||
return [ | |||
{ | |||
name: "2023年", | |||
data: Array.from({ length: 7 }, () => | |||
Math.floor(Math.random() * 1000) | |||
), | |||
}, | |||
]; | |||
// } | |||
// return [ | |||
// { | |||
// name: `${new Date().getFullYear() - 1}年`, | |||
// data: ftoInvest.previous, | |||
// }, | |||
// { | |||
// name: `${new Date().getFullYear()}年`, | |||
// data: ftoInvest.current, | |||
// }, | |||
// ]; | |||
}, | |||
}, | |||
mounted() { | |||
this.getMes1(); | |||
}, | |||
methods: { | |||
updateCompany(obj) { | |||
this.companyId = obj.companyId; | |||
this.companyName = obj.companyName; | |||
}, | |||
getMes1() { | |||
// cockpitDataMonitor({ | |||
// factorys: ["1"], | |||
// date: 4, | |||
// }).then((res) => { | |||
// console.log(res); | |||
// }); | |||
cockpitDataMonitor().then((res) => {}); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.factory-layout { | |||
padding: 16px; | |||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100% | |||
no-repeat; | |||
position: absolute; | |||
height: calc(100% + 38px); | |||
left: -16px; | |||
top: -8px; | |||
width: calc(100% + 30px); | |||
z-index: 1001; | |||
color: #fff; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
.factory-section { | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 16px; | |||
.flex { | |||
display: flex; | |||
gap: 16px; | |||
flex: 1; | |||
} | |||
.top > div, | |||
.bottom > div { | |||
height: 100%; | |||
} | |||
} | |||
.factory-footer { | |||
/** position: absolute; | |||
bottom: 10px; **/ | |||
height: 10px; | |||
width: 100%; | |||
color: rgb(80, 80, 80); | |||
user-select: none; | |||
font-size: 14px; | |||
letter-spacing: 1px; | |||
display: grid; | |||
place-content: center; | |||
} | |||
} | |||
</style> |
@@ -9,7 +9,7 @@ | |||
class="welcome" | |||
style=" | |||
position: absolute; | |||
top: 15%; | |||
top: 12%; | |||
left: 20%; | |||
user-select: none; | |||
display: flex; | |||
@@ -51,6 +51,11 @@ | |||
向世界先进水平挑战,为人类社会文明做贡献 | |||
</p> | |||
</div> | |||
<img | |||
src="../assets/images/login.png" | |||
style="position: absolute; top: 30%; left: 15%; width: 40vw" | |||
alt="" | |||
/> | |||
</div> | |||
<!-- 表单 --> | |||
<div class="field"> | |||
@@ -64,7 +69,7 @@ | |||
style="" | |||
class="cnbm_logo" | |||
/> | |||
<h3 class="title" style="margin: 16px 0;">集团工业互联网平台</h3> | |||
<h3 class="title" style="margin: 16px 0">发电玻璃智能管控平台</h3> | |||
</h2> | |||
<h2 class="pc-title" style=""> | |||
<img | |||
@@ -75,7 +80,9 @@ | |||
style="" | |||
class="cnbm_logo" | |||
/> | |||
<span style="font-weight: bold; letter-spacing: 1px; font-size: 32px;">集团工业互联网平台</span> | |||
<span style="font-weight: bold; letter-spacing: 1px; font-size: 32px" | |||
>发电玻璃智能管控平台</span | |||
> | |||
</h2> | |||
<!-- 表单 --> | |||
@@ -164,7 +171,7 @@ | |||
</div> | |||
<!-- footer --> | |||
<div class="footer"> | |||
Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved. | |||
版权所有:中建材智能自动化研究院有限公司 版本:1.0 | |||
</div> | |||
</div> | |||
</div> | |||
@@ -972,6 +972,13 @@ | |||
dependencies: | |||
regenerator-runtime "^0.14.0" | |||
"@babel/runtime@^7.5.5": | |||
version "7.24.5" | |||
resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c" | |||
integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g== | |||
dependencies: | |||
regenerator-runtime "^0.14.0" | |||
"@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.24.0": | |||
version "7.24.0" | |||
resolved "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz" | |||
@@ -1064,6 +1071,51 @@ | |||
wrap-ansi "^8.1.0" | |||
wrap-ansi-cjs "npm:wrap-ansi@^7.0.0" | |||
"@jiaminghi/bezier-curve@*": | |||
version "0.0.9" | |||
resolved "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz#5196aca93c8b061a612b4c3eabcedf9490cef6ee" | |||
integrity sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw== | |||
dependencies: | |||
"@babel/runtime" "^7.5.5" | |||
"@jiaminghi/c-render@^0.4.3": | |||
version "0.4.3" | |||
resolved "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz#982ebd8f71b443bb9507834227834973ebd9b6d8" | |||
integrity sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q== | |||
dependencies: | |||
"@babel/runtime" "^7.5.5" | |||
"@jiaminghi/bezier-curve" "*" | |||
"@jiaminghi/color" "*" | |||
"@jiaminghi/transition" "*" | |||
"@jiaminghi/charts@*": | |||
version "0.2.18" | |||
resolved "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz#63ded95200789fc1a1fd04b7fd9e56f58d22d90f" | |||
integrity sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA== | |||
dependencies: | |||
"@babel/runtime" "^7.5.5" | |||
"@jiaminghi/c-render" "^0.4.3" | |||
"@jiaminghi/color@*": | |||
version "1.1.3" | |||
resolved "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz#a2336750d1266155ffe80375c58c26fdec495611" | |||
integrity sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg== | |||
"@jiaminghi/data-view@^2.10.0": | |||
version "2.10.0" | |||
resolved "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz#2146d8fc71b9f24be808238ca050ddb7a4c8949f" | |||
integrity sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA== | |||
dependencies: | |||
"@babel/runtime" "^7.5.5" | |||
"@jiaminghi/charts" "*" | |||
"@jiaminghi/transition@*": | |||
version "1.1.11" | |||
resolved "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz#576d8af092434b34201eba5eaecc79dd33c8ad8c" | |||
integrity sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg== | |||
dependencies: | |||
"@babel/runtime" "^7.5.5" | |||
"@jridgewell/gen-mapping@^0.3.5": | |||
version "0.3.5" | |||
resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz" | |||