样式

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)
+    },
+  },
+}

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;
 }
 </style>

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 @@
             </el-select>
           </el-form-item>
           <el-form-item label="产权单位" prop="propertyUnit">
-            <el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.propertyUnit"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option
                 v-for="item in companyNameList"
                 :key="item.deptId"
@@ -49,6 +56,7 @@
               v-model="queryParams.major"
               placeholder="请选择"
               clearable
+              :popper-append-to-body="false"
               style="width: 240px"
               @change="changeProType"
             >
@@ -57,6 +65,7 @@
           </el-form-item>
           <el-form-item label="装备类目" prop="deviceSeries">
             <el-cascader
+              popper-class="my-cas"
               v-model="deviceSeries"
               :options="deviceSeriesList"
               clearable
@@ -77,12 +86,24 @@
             <el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" />
           </el-form-item>
           <el-form-item label="装备状态" prop="changeStatus">
-            <el-select v-model="queryParams.changeStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.changeStatus"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="所在项目" prop="onProject">
-            <el-select v-model="queryParams.onProject" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.onProject"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option
                 v-for="item in onProjectList"
                 :key="item.proCode"
@@ -99,6 +120,7 @@
           </el-form-item>
           <el-form-item label="出厂日期" prop="productionDate">
             <el-date-picker
+              popper-class="my-date"
               v-model="queryParams.productionDate"
               type="date"
               placeholder="请选择"
@@ -109,7 +131,13 @@
             />
           </el-form-item>
           <el-form-item label="使用年限" prop="maxServiceLifeYears">
-            <el-select v-model="queryParams.maxServiceLifeYears" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.maxServiceLifeYears"
+              placeholder="请选择"
+              clearable
+              :popper-append-to-body="false"
+              style="width: 240px"
+            >
               <el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -118,6 +146,7 @@
           </el-form-item>
           <el-form-item label="下次检测日期" prop="nextMaintenanceDate">
             <el-date-picker
+              popper-class="my-date"
               v-model="queryParams.nextMaintenanceDate"
               type="date"
               placeholder="请选择"
@@ -477,6 +506,41 @@ export default {
 ::v-deep .el-dialog__header {
   display: none;
 }
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > 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 {
   }
 }
 </style>
+<style lang="scss">
+.my-cas {
+  background-color: #0C1837 !important;
+}
+.my-cas .el-cascader-menu {
+  color: #fff !important;
+}
+.my-cas .el-cascader-node:not(.is-disabled):hover,
+.el-cascader-node:not(.is-disabled):focus {
+  background-color: #0C1837 !important;
+}
+.my-date {
+  background-color: #0C1837 !important;
+}
+.my-date .el-picker-panel {
+  color: #fff !important;
+}
+</style>

src/views/screen/wsScreen/components/left/EquipStatusMore.vue

@@ -16,7 +16,13 @@
         <!-- 表单 -->
         <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
           <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="请选择"
+              clearable
+              style="width: 240px"
+              :popper-append-to-body="false"
+            >
               <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -191,6 +197,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > 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-dialog {
   background: transparent !important;
 }
@@ -301,4 +342,19 @@ export default {
     font-weight: 800;
   }
 }
+::v-deep .el-select-dropdown {
+  background-color: #0C1837 !important;
+  border: 1px solid #0C1837 !important;
+  overflow: hidden;
+}
+::v-deep .el-scrollbar {
+  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;
+}
 </style>

src/views/screen/wsScreen/components/left/UnitEquipConfig.vue

@@ -104,6 +104,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > 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-dialog {
   background: transparent !important;
 }

src/views/screen/wsScreen/components/right/EquipUsageRateMore.vue

@@ -95,6 +95,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > 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-dialog {
   background: transparent !important;
 }

src/views/screen/wsScreen/components/right/ProEquipMore.vue

@@ -135,6 +135,41 @@ export default {
 ::v-deep .el-dialog__header {
   display: none;
 }
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > 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;

src/views/screen/wsScreen/components/right/ProEquipSituationList.vue

@@ -317,15 +317,15 @@ tbody tr:hover {
 }
 
 ::v-deep .el-select .el-input__inner {
-  background-color: #1f4a85 !important ;
+  background-color: #0C1837 !important ;
   color: #fff !important;
 }
 ::v-deep .el-select-dropdown {
-  background-color: #1f4a85 !important;
+  background-color: #0C1837 !important;
   left: -300px !important;
   width: 400px !important;
   height: 180px !important;
-  border: 1px solid #1f4a85 !important;
+  border: 1px solid #0C1837 !important;
   overflow: hidden;
 }
 ::v-deep .el-scrollbar {
@@ -336,6 +336,6 @@ tbody tr:hover {
 }
 ::v-deep .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
-  background: #1f4a85 !important;
+  background: #0C1837 !important;
 }
 </style>

src/views/screen/wsScreen/components/right/UsageRateMore.vue

@@ -11,7 +11,7 @@
       <div>
         <!-- 自定义title -->
         <i class="close-btn" @click="dialogVisible = false" />
-        <div class="dlg-title">各单位装备在用率情况</div>
+        <div class="dlg-title">各单位在用率情况</div>
 
         <el-table
           v-loading="isLoading"
@@ -107,6 +107,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-table {
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #0d214580 !important; // 浅紫色
+    }
+  }
+
+  .el-table__header {
+    background: transparent;
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: rgba(16, 37, 81, 0.9) !important;
+  }
+}
 ::v-deep .el-dialog {
   background: transparent !important;
 }
@@ -178,6 +194,24 @@ export default {
 ::v-deep .el-pagination.is-background .btn-next {
   background-color: rgba(16, 37, 81, 0.5);
 }
+::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 */
+}
+
 
 // --
 .btn {

src/views/screen/wsScreen/index.vue

@@ -1,26 +1,25 @@
 <template>
-  <div id="index" ref="appRef">
+  <div class="wrap">
-    <div class="bg" id="app">
+    <div id="index" ref="appRef">
-      <!-- <left />
+      <div class="bg" id="app">
-      <center />
+        <el-row :gutter="0">
-      <right /> -->
+          <el-col :span="7" :offset="0"><left /></el-col>
-      <el-row :gutter="0">
+          <el-col :span="10" :offset="0"><center /></el-col>
-        <el-col :span="7" :offset="0"><left /></el-col>
+          <el-col class="right" :span="7" :offset="0"><right /></el-col>
-        <el-col :span="10" :offset="0"><center /></el-col>
+        </el-row>
-        <el-col class="right" :span="7" :offset="0"><right /></el-col>
+      </div>
-      </el-row>
     </div>
   </div>
 </template>
 
 <script>
-// import drawMixin from '@/utils/drawMixin2'
+import drawMixin from '@/utils/drawMixin2'
 import left from './components/left'
 import center from './components/center'
 import right from './components/right'
 
 export default {
-  // mixins: [drawMixin],
+  mixins: [drawMixin],
   components: {
     left,
     center,
@@ -49,17 +48,22 @@ export default {
   font-family: 'DIN';
   src: url('../../../assets/font-family/DIN/DIN-Medium.otf');
 }
+.wrap {
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+}
 #index {
   color: #d3d6dd;
   /* width: 100%;
   height: 100%; */
   width: 1920px;
   height: 1080px;
-  /* position: absolute; */
+  position: absolute;
-  /* top: 50%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  transform-origin: left top; */
+  transform-origin: left top;
   overflow: hidden;
   background-image: url('../../screen/wsScreen/img/bg.jpg');
   background-size: 100% 100%;
@@ -74,6 +78,6 @@ export default {
 }
 .right {
   // 左移
-  transform: translateX(-40px);
+  margin-left: -40px;
 }
 </style>