Merge branch 'projects/mescc/develop' into projects/mescc/zhp
This commit is contained in:
‘937886381’
commit
8a5b0f2857
4
.env.dev
4
.env.dev
@ -12,8 +12,8 @@ ENV = 'development'
|
|||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 芋道管理系统
|
||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
||||||
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|||||||
@ -42,6 +42,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/parser": "7.18.4",
|
"@babel/parser": "7.18.4",
|
||||||
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "^1.6.8",
|
"axios": "^1.6.8",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
|
|||||||
@ -30,3 +30,19 @@ export function getProduceDataDetail(data){
|
|||||||
query: 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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
BIN
src/assets/images/companyData/energy.png
Normal file
BIN
src/assets/images/companyData/energy.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 511 B |
BIN
src/assets/images/companyData/order.png
Normal file
BIN
src/assets/images/companyData/order.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 812 B |
BIN
src/assets/images/companyData/prod-minor.png
Normal file
BIN
src/assets/images/companyData/prod-minor.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 226 B |
BIN
src/assets/images/companyData/store.png
Normal file
BIN
src/assets/images/companyData/store.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 326 B |
BIN
src/assets/images/login.png
Normal file
BIN
src/assets/images/login.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 530 KiB |
@ -133,8 +133,8 @@ $base1px: 0.15vh; // 1px / 1080px;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
clear: both;
|
clear: both;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: calc(56 * #{$base1px});
|
top: calc(#{$base1px});
|
||||||
height: calc(128 * #{$base1px});
|
height: calc(100 * #{$base1px});
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -189,7 +189,7 @@ $base1px: 0.15vh; // 1px / 1080px;
|
|||||||
height: calc(16 * 0.12vh);
|
height: calc(16 * 0.12vh);
|
||||||
line-height: calc(16 * 0.12vh);
|
line-height: calc(16 * 0.12vh);
|
||||||
font-size: calc(12 * 0.12vh);
|
font-size: calc(12 * 0.12vh);
|
||||||
color: #8c8c8c;
|
color: #C7C7C7;
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:hover,
|
a:hover,
|
||||||
|
|||||||
@ -18,6 +18,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 "./assets/icons"; // icon
|
import "./assets/icons"; // icon
|
||||||
import "./permission"; // permission control
|
import "./permission"; // permission control
|
||||||
@ -69,6 +70,7 @@ Vue.use(directive)
|
|||||||
Vue.use(plugins)
|
Vue.use(plugins)
|
||||||
Vue.use(VueMeta)
|
Vue.use(VueMeta)
|
||||||
Vue.use(CodeBrickZj);
|
Vue.use(CodeBrickZj);
|
||||||
|
Vue.use(scrollBoard)
|
||||||
// Form Generator 组件需要使用到 tinymce
|
// Form Generator 组件需要使用到 tinymce
|
||||||
import Tinymce from "@/components/tinymce/index.vue";
|
import Tinymce from "@/components/tinymce/index.vue";
|
||||||
Vue.component("tinymce", Tinymce);
|
Vue.component("tinymce", Tinymce);
|
||||||
|
|||||||
131
src/views/copilot/components/FactoryDataHeader.vue
Normal file
131
src/views/copilot/components/FactoryDataHeader.vue
Normal file
@ -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>
|
||||||
137
src/views/copilot/components/FactorySelect.vue
Normal file
137
src/views/copilot/components/FactorySelect.vue
Normal file
@ -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>
|
||||||
BIN
src/views/copilot/factoryData/assets/images/bipv.png
Normal file
BIN
src/views/copilot/factoryData/assets/images/bipv.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 2.1 KiB |
BIN
src/views/copilot/factoryData/assets/images/chip.png
Normal file
BIN
src/views/copilot/factoryData/assets/images/chip.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 2.5 KiB |
BIN
src/views/copilot/factoryData/assets/images/fto.png
Normal file
BIN
src/views/copilot/factoryData/assets/images/fto.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 1.3 KiB |
BIN
src/views/copilot/factoryData/assets/images/std.png
Normal file
BIN
src/views/copilot/factoryData/assets/images/std.png
Normal file
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 2.1 KiB |
232
src/views/copilot/factoryData/components/Container.vue
Normal file
232
src/views/copilot/factoryData/components/Container.vue
Normal file
@ -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>
|
||||||
56
src/views/copilot/factoryData/components/ContainerIcon.vue
Normal file
56
src/views/copilot/factoryData/components/ContainerIcon.vue
Normal file
@ -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>
|
||||||
371
src/views/copilot/factoryData/components/Energy.vue
Normal file
371
src/views/copilot/factoryData/components/Energy.vue
Normal file
@ -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>
|
||||||
77
src/views/copilot/factoryData/components/Order.vue
Normal file
77
src/views/copilot/factoryData/components/Order.vue
Normal file
@ -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>
|
||||||
272
src/views/copilot/factoryData/components/ProdMonitor.vue
Normal file
272
src/views/copilot/factoryData/components/ProdMonitor.vue
Normal file
@ -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>
|
||||||
170
src/views/copilot/factoryData/components/Store.vue
Normal file
170
src/views/copilot/factoryData/components/Store.vue
Normal file
@ -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>
|
||||||
186
src/views/copilot/factoryData/index.vue
Normal file
186
src/views/copilot/factoryData/index.vue
Normal file
@ -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"
|
class="welcome"
|
||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15%;
|
top: 12%;
|
||||||
left: 20%;
|
left: 20%;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -51,6 +51,11 @@
|
|||||||
向世界先进水平挑战，为人类社会文明做贡献
|
向世界先进水平挑战，为人类社会文明做贡献
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<img
|
||||||
|
src="../assets/images/login.png"
|
||||||
|
style="position: absolute; top: 30%; left: 15%; width: 40vw"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表单 -->
|
<!-- 表单 -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
@ -64,7 +69,7 @@
|
|||||||
style=""
|
style=""
|
||||||
class="cnbm_logo"
|
class="cnbm_logo"
|
||||||
/>
|
/>
|
||||||
<h3 class="title" style="margin: 16px 0;">集团工业互联网平台</h3>
|
<h3 class="title" style="margin: 16px 0">发电玻璃智能管控平台</h3>
|
||||||
</h2>
|
</h2>
|
||||||
<h2 class="pc-title" style="">
|
<h2 class="pc-title" style="">
|
||||||
<img
|
<img
|
||||||
@ -75,7 +80,9 @@
|
|||||||
style=""
|
style=""
|
||||||
class="cnbm_logo"
|
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>
|
</h2>
|
||||||
|
|
||||||
<!-- 表单 -->
|
<!-- 表单 -->
|
||||||
@ -164,7 +171,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- footer -->
|
<!-- footer -->
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
|
版权所有：中建材智能自动化研究院有限公司 版本：1.0
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
52
yarn.lock
52
yarn.lock
@ -972,6 +972,13 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
regenerator-runtime "^0.14.0"
|
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":
|
"@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.24.0":
|
||||||
version "7.24.0"
|
version "7.24.0"
|
||||||
resolved "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz"
|
resolved "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz"
|
||||||
@ -1064,6 +1071,51 @@
|
|||||||
wrap-ansi "^8.1.0"
|
wrap-ansi "^8.1.0"
|
||||||
wrap-ansi-cjs "npm:wrap-ansi@^7.0.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":
|
"@jridgewell/gen-mapping@^0.3.5":
|
||||||
version "0.3.5"
|
version "0.3.5"
|
||||||
resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
|
resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
|
||||||
|
|||||||
Ładowanie…
Reference in New Issue
Block a user