Merge branch 'projects/mescc/develop' into projects/mescc/zhp
This commit is contained in:
‘937886381’
коміт
8a5b0f2857
4
.env.dev
4
.env.dev
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/images/companyData/energy.png
Normal file
BIN
src/assets/images/companyData/energy.png
Normal file
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 511 B |
BIN
src/assets/images/companyData/order.png
Normal file
BIN
src/assets/images/companyData/order.png
Normal file
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 812 B |
BIN
src/assets/images/companyData/prod-minor.png
Normal file
BIN
src/assets/images/companyData/prod-minor.png
Normal file
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 226 B |
BIN
src/assets/images/companyData/store.png
Normal file
BIN
src/assets/images/companyData/store.png
Normal file
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 326 B |
BIN
src/assets/images/login.png
Normal file
BIN
src/assets/images/login.png
Normal file
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 530 KiB |
@ -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);
|
||||
|
||||
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
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 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
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 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
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 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
Бінарний файл не відображається.
|
Після Ширина: | Висота: | Розмір: 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"
|
||||
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>
|
||||
|
||||
52
yarn.lock
52
yarn.lock
@ -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"
|
||||
|
||||
Завантаження…
Посилання в новій задачі
Block a user