diff --git a/src/App.vue b/src/App.vue index 13bde7b..4d0df89 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,12 +8,21 @@ export default { name: 'App', mounted() { + this.beilv = document.body.offsetWidth / 1920 + document.documentElement.style.setProperty('--beilv', this.beilv) + window.addEventListener('resize', () => { + this.beilv = document.body.offsetWidth / 1920 + document.documentElement.style.setProperty('--beilv', this.beilv) + }) + }, + data() { + beilv: 1 } } diff --git a/src/icons/svg/alarm-old.svg b/src/icons/svg/alarm-old.svg new file mode 100644 index 0000000..2cd3ac9 --- /dev/null +++ b/src/icons/svg/alarm-old.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/alarm.svg b/src/icons/svg/alarm.svg index 2cd3ac9..d5b848b 100644 --- a/src/icons/svg/alarm.svg +++ b/src/icons/svg/alarm.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + 2 + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/alarmb.svg b/src/icons/svg/alarmb.svg new file mode 100644 index 0000000..56883ab --- /dev/null +++ b/src/icons/svg/alarmb.svg @@ -0,0 +1,14 @@ + + + 2 + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/chrome-old.svg b/src/icons/svg/chrome-old.svg new file mode 100644 index 0000000..17fcca4 --- /dev/null +++ b/src/icons/svg/chrome-old.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/icons/svg/chrome.svg b/src/icons/svg/chrome.svg index 17fcca4..2777d04 100644 --- a/src/icons/svg/chrome.svg +++ b/src/icons/svg/chrome.svg @@ -1,2 +1,10 @@ - \ No newline at end of file + + + 3 + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/chromeb.svg b/src/icons/svg/chromeb.svg new file mode 100644 index 0000000..c975528 --- /dev/null +++ b/src/icons/svg/chromeb.svg @@ -0,0 +1,10 @@ + + + 3 + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/home-old.svg b/src/icons/svg/home-old.svg new file mode 100644 index 0000000..4e97c20 --- /dev/null +++ b/src/icons/svg/home-old.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/home.svg b/src/icons/svg/home.svg index 4e97c20..4a9ac68 100644 --- a/src/icons/svg/home.svg +++ b/src/icons/svg/home.svg @@ -1 +1,10 @@ - \ No newline at end of file + + + 1 + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/homeb.svg b/src/icons/svg/homeb.svg new file mode 100644 index 0000000..c6d1237 --- /dev/null +++ b/src/icons/svg/homeb.svg @@ -0,0 +1,10 @@ + + + 1 + + + + + + + \ No newline at end of file diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index ecd396f..a52ce72 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,36 +1,33 @@ @@ -30,10 +121,12 @@ diff --git a/src/views/3DOverview/components/TechyBox.vue b/src/views/3DOverview/components/TechyBox.vue index fe75fde..eb3d97c 100644 --- a/src/views/3DOverview/components/TechyBox.vue +++ b/src/views/3DOverview/components/TechyBox.vue @@ -10,11 +10,12 @@ export default {} diff --git a/src/views/3DOverview/components/TechyContainer.vue b/src/views/3DOverview/components/TechyContainer.vue index e47b25e..cc9317c 100644 --- a/src/views/3DOverview/components/TechyContainer.vue +++ b/src/views/3DOverview/components/TechyContainer.vue @@ -12,7 +12,7 @@
- + {{ title }}
@@ -45,18 +45,238 @@ const defaultIcon = ` ` +const menuIcon = ` + 菜单 + + + + + + + + + + + + + + + + + + +` + +const lightHatIcon = ` + hatplus + + + + + + + + + + + + + + + + + + + +` + +// 折角的菜单图标 +const zhejiaoMenuListIcon = ` + 编组 + + + + + + + + + + + + + + + + +` + +// 走势分析图标 +const trendAnalysisIcon = ` + 编组 + + + + + + + + + + + + + + + + + + + + + + + +` + +// 菜单放大镜图标 +const menuAnalysisIcon = ` + 编组 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` + +// 电脑警告图标 +const alertWarningIcon = ` + 编组 + + + + + + + + + + + + + + + + + + + + + +` + +// 电脑警告菜单图标 +const alertMenuIcon = ` + 编组 + + + + + + + + + + + + + + + + + +` + +// 菱形叠加 +const stackIcon = ` + 物料信息 + + + + + + + + +` + export default { name: 'TechyContainer', props: { title: { type: String, default: '默认标题' }, - icon: { type: String, default: defaultIcon }, + icon: { type: String, default: 'defaultIcon' }, showCorner: { type: Boolean, default: true } }, + computed: { + computeIcon() { + return this[this.icon] || this['defaultIcon'] + } + }, data() { - return {} + return { + defaultIcon, + menuIcon, + lightHatIcon, + zhejiaoMenuListIcon, + trendAnalysisIcon, + menuAnalysisIcon, + alertWarningIcon, + alertMenuIcon, + stackIcon + } }, mounted() {} } @@ -75,7 +295,7 @@ export default { box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15); /* background: rgba(20, 69, 100, 0.425); */ background: rgba(6, 16, 39, 0.3); - backdrop-filter: blur(1px); + backdrop-filter: blur(2px); } .line { diff --git a/src/views/3DOverview/components/TechyHeader.vue b/src/views/3DOverview/components/TechyHeader.vue index b41225d..7bcf2cd 100644 --- a/src/views/3DOverview/components/TechyHeader.vue +++ b/src/views/3DOverview/components/TechyHeader.vue @@ -77,6 +77,16 @@ export default { diff --git a/src/views/3DOverview/index.vue b/src/views/3DOverview/index.vue index 1511842..612fbc3 100644 --- a/src/views/3DOverview/index.vue +++ b/src/views/3DOverview/index.vue @@ -9,17 +9,17 @@
- + - +
-
+

产线名称 : A产线 @@ -29,7 +29,7 @@ 清洗机

- 累计加工数量 : + 累计加工 : 20

@@ -41,15 +41,15 @@

- + -
- - - -
- + + + + + +
@@ -57,23 +57,23 @@
-
- +
+
- +
-
- +
+
- +
@@ -162,6 +162,28 @@ export default { position: relative; } +#v3d-outter *::-webkit-scrollbar { + width: calc(8px * var(--beilv)); +} + +#v3d-outter *::-webkit-scrollbar-track { + background-color: #14243f; + /* background-color: white; */ + border-radius: 0; +} + +#v3d-outter *::-webkit-scrollbar-button { + width: calc(8px * var(--beilv)); + height: calc(8px * var(--beilv)); + background: #5bc4bf9f; + position: relative; +} + +#v3d-outter *::-webkit-scrollbar-thumb { + border-radius: calc(8px * var(--beilv)); + background: #5bc4bf9f; +} + #v3d-main-content { width: 100%; height: 100%; @@ -185,10 +207,12 @@ export default { padding: calc(100vmin / 1920 * 36); padding-bottom: 0; display: flex; - justify-content: space-between; + /* justify-content: space-between; */ + gap: calc(100vmin / 1920 * 36); } .bottom-part { + height: 22vh; padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36); display: flex; /* gap: 16px; */ @@ -220,20 +244,27 @@ export default { } .techy-body-part__middle { - position: absolute; - top: 12%; - left: 36%; - height: 96px; - width: 128px; + flex: 1; + position: relative; } -.flex { - padding: 12px; +.techy-body-part__middle .techy-box { + position: absolute; + top: 0; + left: 0; + height: 136px; + width: 176px; +} + +.techy-body-part__middle__inner { + height: 100%; + padding: 16px; display: flex; flex-direction: column; + justify-content: space-between; } -.flex p { +.techy-body-part__middle__inner p { margin: 0; padding: 0; font-size: 12px; @@ -241,15 +272,20 @@ export default { color: #fff; } -.flex p > span { +.techy-body-part__middle__inner p > span { position: relative; - padding-left: 6px; + padding-left: 16px; } + +.techy-body-part__middle__inner p > span.round-dot { + padding-left: 28px; +} + .round-dot::before { content: ''; position: absolute; - top: 5px; - left: -3px; + top: 4px; + left: 16px; width: 8px; height: 8px; background-color: rgb(82, 231, 82); diff --git a/src/views/ChoicePart/index.vue b/src/views/ChoicePart/index.vue index ef8c96f..3f847c4 100644 --- a/src/views/ChoicePart/index.vue +++ b/src/views/ChoicePart/index.vue @@ -12,7 +12,7 @@ >
- +
{{ item.meta.title }}
@@ -147,55 +147,57 @@ export default { background: url('../../assets/img/choicepart/choicepart-back.jpg') repeat; background-size: 100% 100%; overflow-x: scroll; + + display: flex; + justify-content: center; + align-items: center; + .choicepart-box { - width: 1440px; - margin: 0 auto; - margin: 0 auto; - padding-top: 16vh; - min-height: 100vh; + width: calc(1440px * var(--beilv)); + .choicepart-item { display: inline-block; - width: 208px; - height: 258px; - margin: 40px; + width: calc(208px * var(--beilv)); + height: calc(258px * var(--beilv)); + margin: calc(40px * var(--beilv)); background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat; background-size: 100% 100%; // border: 1px dashed #fff; // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); top: 0; - border-radius: 5px; + border-radius: calc(5px * var(--beilv)); overflow: hidden; cursor: pointer; position: relative; img { - width: 208px; - height: 258px; + width: calc(208px * var(--beilv)); + height: calc(258px * var(--beilv)); } .choicepart-item-border { height: 100%; - border-radius: 5px; + border-radius: calc(5px * var(--beilv)); // padding: 0 5px; - line-height: 32px; - font-size: 28px; + line-height: calc(32px * var(--beilv)); + font-size: calc(28px * var(--beilv)); font-weight: lighter; color: #2c6bd8; overflow: hidden; } .choicepart-item-title { overflow: hidden; - padding: 0 10px; + padding: 0 calc(10px * var(--beilv)); text-overflow: ellipsis; white-space: nowrap; position: absolute; bottom: 0; - left: 2px; - right: 2px; + left: calc(2px * var(--beilv)); + right: calc(2px * var(--beilv)); text-align: center; color: #fff; - font-size: 16px; - line-height: 48px; - height: 48px; - letter-spacing: 2px; + font-size: calc(16px * var(--beilv)); + line-height: calc(48px * var(--beilv)); + height: calc(48px * var(--beilv)); + letter-spacing: calc(2px * var(--beilv)); background-color: rgba($color: #0b58ff, $alpha: 0.45); } } @@ -219,15 +221,15 @@ export default { } ::-webkit-scrollbar { //滚动条的宽度 - width: 9px; - height: 9px; + width: calc(9px * var(--beilv)); + height: calc(9px * var(--beilv)); } ::-webkit-scrollbar-thumb { //滚动条的设置 background-color: #dddddd; background-clip: padding-box; - min-height: 28px; - border-radius: 9px; + min-height: calc(28px * var(--beilv)); + border-radius: calc(9px * var(--beilv)); } ::-webkit-scrollbar-thumb:hover { background-color: #bbb; diff --git a/src/views/DataAnalysis/HomePage.vue b/src/views/DataAnalysis/HomePage.vue index 9ee18aa..b65e41d 100644 --- a/src/views/DataAnalysis/HomePage.vue +++ b/src/views/DataAnalysis/HomePage.vue @@ -312,6 +312,7 @@ export default { font-size: 18px; line-height: 25px; letter-spacing: 6px; + transform: translateX(-2px); } .icon { diff --git a/src/views/EquipmentManager/HomePage.vue b/src/views/EquipmentManager/HomePage.vue index e3a81d4..2bda564 100644 --- a/src/views/EquipmentManager/HomePage.vue +++ b/src/views/EquipmentManager/HomePage.vue @@ -7,8 +7,8 @@
- -
+ +
- -
+ +
- + -
-
- -

+
+ + + > 各产线稼动率 -

+ --> + 各产线稼动率
@@ -76,20 +76,22 @@
- - + +
+ +
- +
@@ -141,124 +143,6 @@ import { import { mapGetters } from 'vuex' import screenfull from 'screenfull' -const equipmentExceptionSVG = ` - setting tools - - - - - - - - - - - - - - - -` -const equipmentAlarmSVG = ` - hatplus - - - - - - - - - - - - - - - - - - - -` -const equipmentOrderSVG = ` - 编组 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -` -const equipmentAnalysisSVG = ` - analysis - - - - - - - - - - - - - - - - - - - - - - - -` export default { name: 'EquipmentManageHome', components: { @@ -279,10 +163,6 @@ export default { props: {}, data() { return { - equipmentExceptionSVG, - equipmentAlarmSVG, - equipmentOrderSVG, - equipmentAnalysisSVG, equipmentExceptionProps, equipmentExceptionDatalist, equipmentAlarmProps, @@ -299,15 +179,7 @@ export default { computed: { ...mapGetters(['sidebar']) }, - mounted() { - // window.addEventListener('resize', () => { - // console.log('resizing....') - // this.refreshSize++ - // this.$nextTick(() => { - // this.$forceUpdate() - // }) - // }) // 不可行 - }, + mounted() {}, methods: { changeFullScreen() { @@ -325,10 +197,43 @@ export default { diff --git a/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue b/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue index cb64904..b1bbca4 100644 --- a/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue +++ b/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue @@ -52,12 +52,11 @@ const ProgreeBar = { 'div', { style: { - height: '0.5vh', + height: '100%', width: '100%', - borderRadius: '8px', + borderRadius: 'calc(8px * var(--beilv))', position: 'relative', background: '#1E2D4590', - // background: 'red', overflow: 'hidden' } }, @@ -71,7 +70,7 @@ const ProgreeBar = { top: 0, width: this.process + '%', height: '100%', - borderRadius: '8px', + borderRadius: 'calc(8px * var(--beilv))', background: `linear-gradient(to right, ${this.colors[0]}, ${this.colors[1]})` } }, @@ -114,10 +113,10 @@ export default { } .equipment-analysis-box__title { - font-size: 1.25vh; - line-height: 2vh; - letter-spacing: 1px; - width: 3vw; + font-size: calc(14px * var(--beilv)); + line-height: calc(18px * var(--beilv)); + letter-spacing: calc(1px * var(--beilv)); + width: 30%; overflow-wrap: break-word; align-self: center; text-align: center; @@ -130,12 +129,9 @@ export default { .param-name { opacity: 70%; text-align: right; - /* font-size: 12px; - line-height: 14px; - width: 36px; */ - font-size: 1vh; - line-height: 1.2; - width: 2vw; + font-size: calc(12px * var(--beilv)); + line-height: calc(14px * var(--beilv)); + width: 20%; } .param-value { opacity: 70%; @@ -143,20 +139,22 @@ export default { /* font-size: 12px; line-height: 14px; width: 24px; */ - font-size: 1vh; - line-height: 1.2; - width: 1.5vw; + font-size: calc(12px * var(--beilv)); + line-height: calc(14px * var(--beilv)); + width: 15%; } .param-list::before { content: ''; position: absolute; - left: -11px; - top: 10%; - width: 1px; - /* height: 100%; */ - height: 80%; - background: linear-gradient(to bottom, transparent, #ffffff8c, transparent); + left: calc(-10px * var(--beilv)); + width: 2px; + height: 100%; + background: linear-gradient(to bottom, transparent, #455670, transparent); +} + +.progress-bar { + height: calc(8px * var(--beilv)); } .flex { diff --git a/src/views/EquipmentManager/components/TechyAnalysisHeader.vue b/src/views/EquipmentManager/components/TechyAnalysisHeader.vue index 7922e9a..bdb6258 100644 --- a/src/views/EquipmentManager/components/TechyAnalysisHeader.vue +++ b/src/views/EquipmentManager/components/TechyAnalysisHeader.vue @@ -125,7 +125,7 @@ export default { .techy-analysis-header__title { color: #01cfcc; - font-size: 1.25vh; - line-height: 18px; + font-size: calc(15px * var(--beilv)); + line-height: calc(18px * var(--beilv)); } diff --git a/src/views/EquipmentManager/components/TechyBox.vue b/src/views/EquipmentManager/components/TechyBox.vue index e8e0a62..e421ad3 100644 --- a/src/views/EquipmentManager/components/TechyBox.vue +++ b/src/views/EquipmentManager/components/TechyBox.vue @@ -11,10 +11,10 @@ export default {} diff --git a/src/views/EquipmentManager/components/TechyContainer.vue b/src/views/EquipmentManager/components/TechyContainer.vue index 94ce31e..bdcab67 100644 --- a/src/views/EquipmentManager/components/TechyContainer.vue +++ b/src/views/EquipmentManager/components/TechyContainer.vue @@ -12,7 +12,7 @@
- + {{ title }}
@@ -21,6 +21,8 @@ diff --git a/src/views/EquipmentManager/components/TechyHeader.vue b/src/views/EquipmentManager/components/TechyHeader.vue index 5d2c835..bc9f7af 100644 --- a/src/views/EquipmentManager/components/TechyHeader.vue +++ b/src/views/EquipmentManager/components/TechyHeader.vue @@ -1,17 +1,36 @@ diff --git a/src/views/EquipmentManager/components/TechyTable.vue b/src/views/EquipmentManager/components/TechyTable.vue index 38eb3e1..f74648d 100644 --- a/src/views/EquipmentManager/components/TechyTable.vue +++ b/src/views/EquipmentManager/components/TechyTable.vue @@ -7,27 +7,7 @@ -->