diff --git a/src/utils/drawMixin2.js b/src/utils/drawMixin2.js new file mode 100644 index 00000000..2ed412ac --- /dev/null +++ b/src/utils/drawMixin2.js @@ -0,0 +1,68 @@ +// 屏幕适配 mixin 函数 + +// * 默认缩放值 +const scale = { + width: '1', + height: '1', +} + +// * 设计稿尺寸(px) +const baseWidth = 1920 +const baseHeight = 1080 +const DEBUG_MODE = true + +// * 需保持的比例(默认1.77778) +const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) + +export default { + data() { + return { + // * 定时函数 + drawTiming: null, + } + }, + mounted() { + this.calcRate() + window.addEventListener('resize', this.resize) + }, + beforeDestroy() { + window.removeEventListener('resize', this.resize) + }, + methods: { + calcRate() { + const appRef = this.$refs['appRef'] + if (!appRef) return + + // 调试模式 - start + if (DEBUG_MODE) { + // 调试模式,不缩放,居中显示 + // appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)` + // appRef.style.overflow = 'visible' + // return + } + // 调试模式 - end + + // 当前宽高比 + const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)) + if (appRef) { + if (currentRate > baseProportion) { + // 表示更宽 + scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) + scale.height = (window.innerHeight / baseHeight).toFixed(5) + appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` + } else { + // 表示更高 + scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5) + scale.width = (window.innerWidth / baseWidth).toFixed(5) + appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` + } + } + }, + resize() { + clearTimeout(this.drawTiming) + this.drawTiming = setTimeout(() => { + this.calcRate() + }, 200) + }, + }, +} diff --git a/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue b/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue index 175a5165..1b432722 100644 --- a/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue +++ b/src/views/screen/gwScreen/components/right/ProEquipSituationList.vue @@ -294,7 +294,7 @@ tbody tr:hover { } ::v-deep .el-select .el-input__inner { - background-color: #1f4a85 !important ; + background-color: #0C1837 !important ; color: #fff !important; } diff --git a/src/views/screen/wsScreen/components/left/AllEquip.vue b/src/views/screen/wsScreen/components/left/AllEquip.vue index a6006605..255e4e8c 100644 --- a/src/views/screen/wsScreen/components/left/AllEquip.vue +++ b/src/views/screen/wsScreen/components/left/AllEquip.vue @@ -28,6 +28,7 @@ v-model="queryParams.deptName" placeholder="请选择" clearable + :popper-append-to-body="false" style="width: 240px" @change="changeDept" > @@ -35,7 +36,13 @@ - + @@ -57,6 +65,7 @@ - + - + - + @@ -118,6 +146,7 @@ td.el-table__cell { + background-color: rgba(16, 37, 81, 0.9) !important; + } +} +::v-deep .el-table td, +::v-deep .el-table th.is-leaf { + border-bottom: none !important; +} +::v-deep .el-table::before, +.el-table--group::after, +.el-table--border::after { + background-color: transparent !important; +} +/* 隐藏表格滚动条 */ +::v-deep .el-table__body-wrapper::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; +} + +::v-deep .el-table__body-wrapper { + scrollbar-width: none !important; /* Firefox */ + -ms-overflow-style: none !important; /* IE/Edge */ +} // 输入框 ::v-deep .el-input__inner { background: rgba(3, 16, 44, 0.5) !important; @@ -536,6 +600,22 @@ export default { ::v-deep .el-pagination.is-background .btn-next { background-color: rgba(16, 37, 81, 0.5); } +::v-deep .el-select-dropdown { + background-color: #0C1837 !important; + border: 1px solid #0C1837 !important; + overflow: hidden; +} +::v-deep .el-scrollbar { + /* height: 184px !important; */ + background-color: #0C1837 !important; +} +::v-deep .el-select-dropdown__item { + color: #fff !important; +} +::v-deep .el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background: #0C1837 !important; +} // -- .btn { @@ -579,3 +659,21 @@ export default { } } + diff --git a/src/views/screen/wsScreen/components/left/EquipStatusMore.vue b/src/views/screen/wsScreen/components/left/EquipStatusMore.vue index bd73ff56..d5de07ea 100644 --- a/src/views/screen/wsScreen/components/left/EquipStatusMore.vue +++ b/src/views/screen/wsScreen/components/left/EquipStatusMore.vue @@ -16,7 +16,13 @@ - + @@ -191,6 +197,41 @@ export default { diff --git a/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue b/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue index 65386a5f..cd192a59 100644 --- a/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue +++ b/src/views/screen/wsScreen/components/left/UnitEquipConfig.vue @@ -104,6 +104,41 @@ export default { diff --git a/src/views/screen/wsScreen/components/right/UsageRateMore.vue b/src/views/screen/wsScreen/components/right/UsageRateMore.vue index ed7e36f8..02cef482 100644 --- a/src/views/screen/wsScreen/components/right/UsageRateMore.vue +++ b/src/views/screen/wsScreen/components/right/UsageRateMore.vue @@ -11,7 +11,7 @@
-
各单位装备在用率情况
+
各单位在用率情况