update

src/components/Breadcrumb/index.vue

@@ -9,8 +9,10 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="isredirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="isredirect">
+          {{ item.meta.title }}
+        </span>
         <span v-else class="no-redirect">{{ item.meta.title }}</span>
         <!-- @click.prevent="handleLink(item)" -->
       </el-breadcrumb-item>
@@ -79,14 +81,14 @@ export default {
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
-  font-size: 14px;
-  line-height: 48px;
-  margin-left: 8px;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(48px * var(--beilv));
+  margin-left: calc(8px * var(--beilv));
   .isredirect {
     color: rgba(0, 0, 0, 0.65);
   }
   .no-redirect {
-    color: #8C8C8C;
+    color: #8c8c8c;
     cursor: text;
   }
 }

src/components/Hamburger/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <div style="padding: 5px 15px 5px 32px;" @click="toggleClick">
-    <svg-icon style="width: 24px; height: 24px" class="item-icon hamburger" :class="{'is-active':isActive}" icon-class="hamburgerBtn" />
+  <div
+    style="padding: 0  calc(15px * var(--beilv)) 0 calc(32px * var(--beilv));"
+    @click="toggleClick"
+  >
+    <svg-icon
+      style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv));"
+      class="item-icon hamburger"
+      :class="{ 'is-active': isActive }"
+      icon-class="hamburgerBtn"
+    />
   </div>
 </template>
 

src/components/LangSelect/index.vue

@@ -9,13 +9,17 @@
 <template>
   <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
     <div>
-      <svg-icon style="width: 24px; height: 24px; vertical-align: -7px" class-name="international-icon" :icon-class="isShow ? 'language2' : 'language3'" />
+      <svg-icon
+        style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv));  vertical-align: calc(-7px * var(--beilv));"
+        class-name="international-icon"
+        :icon-class="isShow ? 'language2' : 'language3'"
+      />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item :disabled="language==='zh'" command="zh">
+      <el-dropdown-item :disabled="language === 'zh'" command="zh">
         中文
       </el-dropdown-item>
-      <el-dropdown-item :disabled="language==='en'" command="en">
+      <el-dropdown-item :disabled="language === 'en'" command="en">
         English
       </el-dropdown-item>
       <!-- <el-dropdown-item :disabled="language==='es'" command="es">

src/layout/components/Navbar.vue

@@ -23,7 +23,7 @@
         <svg-icon
           class="item-icon"
           :icon-class="showTitle ? 'home' : 'homeb'"
-          style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;"
+          style="height: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;"
         />
         <span v-if="showhome">
           {{ 'navbar.homepage' | i18nFilter }}
@@ -38,10 +38,14 @@
           :hidden="alarmNum > 0 ? false : true"
           :value="alarmNum"
           class="item"
-          style="line-height: 0; margin: 0 10px; vertical-align: -3px"
+          style=" margin: 0 10px;  "
           @click.native="handleAlarm"
         >
-          <svg-icon style="width: 24px; height: 24px" class="item-icon" :icon-class="showTitle ? 'alarm' : 'alarmb'" />
+          <svg-icon
+            style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-4px * var(--beilv))"
+            class="item-icon"
+            :icon-class="showTitle ? 'alarm' : 'alarmb'"
+          />
         </el-badge>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>暂无数据</el-dropdown-item>
@@ -49,7 +53,7 @@
       </el-dropdown>
       <div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
         <svg-icon
-          style="width: 24px; height: 24px; vertical-align: -7px"
+          style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
           :icon-class="showTitle ? 'countdown' : 'countdown2'"
         />
         {{ formatTime }}
@@ -65,7 +69,7 @@
         <a href="Lodap.zip">
           <svg-icon
             :style="showTitle ? 'color: #fff' : ''"
-            style="width: 24px; height: 24px; vertical-align: -7px"
+            style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
             icon-class="download"
           />
         </a>
@@ -74,7 +78,7 @@
         <a href="google.exe">
           <svg-icon
             :style="showTitle ? 'color: #fff' : ''"
-            style="width: 24px; height: 24px; vertical-align: -7px"
+            style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
             :icon-class="showTitle ? 'chrome' : 'chromeb'"
           />
         </a>
@@ -371,7 +375,7 @@ export default {
   }
 
   .hamburger-container {
-    line-height: calc(48px * var(--beilv));
+    // line-height: calc(48px * var(--beilv));
     height: 100%;
     float: left;
     cursor: pointer;

src/layout/components/Sidebar/Logo.vue

@@ -6,15 +6,15 @@
  * @Description: file content
 -->
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else :style="{ fontSize }" class="sidebar-title">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 :style="{ fontSize }" class="sidebar-title">{{ title }}</h1>
       </router-link>
     </transition>
   </div>
@@ -58,10 +58,10 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 48px;
-  line-height: 48px;
+  height: calc(48px * var(--beilv));
+  line-height: calc(48px * var(--beilv));
   background: #001529;
-  padding-left: 10px;
+  padding-left: calc(10px * var(--beilv));
   overflow: hidden;
 
   & .sidebar-logo-link {
@@ -71,21 +71,24 @@ export default {
     & .sidebar-logo {
       width: 26px;
       height: 26px;
-      vertical-align: middle;
       margin-right: 12px;
+      // width: calc(26px * var(--beilv));
+      // height: calc(26px * var(--beilv));
+      // margin-right: calc(12px * var(--beilv));
+      vertical-align: middle;
     }
 
     & .sidebar-title {
       display: inline-block;
       margin: 0;
       color: #fff;
-      width: 189px;
+      width: calc(189px * var(--beilv));
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-weight: 500;
-      line-height: 50px;
-      font-size: 14px;
+      line-height: calc(50px * var(--beilv));
+      font-size: calc(14px * var(--beilv));
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/views/3DOverview/components/LeftContentOrder.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="left-content-equipment-check">
-    <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
-    <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
-    <div class="el-table-wrapper fix-table">
-      <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
+  <div class="left-content-order fix-table">
+    <techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
+
+    <!--               
       <el-table
         key="LeftContentOrder1"
         border
         :data="tableData"
         :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
+        height="100%"
       >
         <el-table-column
           label="订单编号"
@@ -38,7 +38,8 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </div> -->
+
     <!-- <div class="el-table-wrapper">
       <el-table
         key="LeftContentOrder2"
@@ -56,33 +57,60 @@
 </template>
 
 <script>
-// import TechyFakeTable from './TechyFakeTable.vue'
-// import TechyTable from './TechyTable.vue'
+import TechyTable from './TechyTable.vue'
 
-const tableData = [
-  { orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
-  { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
-  { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
-  { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
-  { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
-  // { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
-  // { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
+const ProcessCircle = {
+  name: 'ProcessCircle',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  mounted() {
+    console.log('finished', this.injectData.finished)
+  },
+  methods: {},
+  render: function(h) {
+    return h('el-progress', {
+      'class': {
+        'lb-progress-bar': true
+      },
+      props: {
+        type: 'circle',
+        percentage: this.injectData.finished,
+        width: 14,
+        'stroke-width': 2,
+        color: '#47FF27'
+      },
+      style: {
+        color: 'blue'
+      }
+    })
+  }
+}
+
+const tableProps = [
+  { prop: 'orderCode', label: '订单编码', align: 'center', 'min-width': 120 },
+  { prop: 'clientName', label: '客户名称', align: 'center', 'min-width': 100 },
+  { prop: 'specs', label: '规格', align: 'center', 'min-width': 90 },
+  { prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
 ]
-const tableData2 = [
+const tableData = [
   { orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
   { orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
   { orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
   { orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
   { orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
-  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
-  // { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
+  { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
+  { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
 ]
 
 export default {
   name: 'LeftContentOrder',
-  components: {},
+  components: { TechyTable },
   data() {
-    return { tableData, tableData2 }
+    return { tableData, tableProps }
   },
   created() {},
   mounted() {},
@@ -97,18 +125,14 @@ export default {
   text-align: left;
 }
 
-.left-content-equipment-check {
-  display: flex;
-  gap: calc(100vw / 1920 * 16);
+.left-content-order {
+  height: calc(100% - 3vh);
+  overflow: auto;
 }
 
+/* 
 .el-table-wrapper {
-  flex: 1;
-}
-
-.left-content-equipment-check > div {
-  overflow: hidden;
-  overflow-x: auto;
+  height: 100%;
 }
 
 .el-table-wrapper >>> * {
@@ -160,13 +184,16 @@ export default {
 .el-table-wrapper >>> tbody > tr:nth-child(even) {
   background: rgba(76, 97, 123, 0.2);
 }
+*/
 
-.lb-progress-bar {
-  left: 30px;
-  display: flex;
+.left-content-order >>> .el-progress-circle {
+  position: relative;
+  left: calc(24px * var(--beilv));
 }
-.lb-progress-bar >>> .el-progress__text {
-  color: #fff9;
-  left: -85%;
+
+.left-content-order >>> .el-progress__text {
+  font-size: inherit;
+  left: calc(-2px * var(--beilv));
+  color: #ffffff50 !important;
 }
 </style>

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -27,7 +27,7 @@
 
     <div>
       <TechyBox class="water-consume">
-        <div class="header-part  ">
+        <div class="header-part">
           <img src="./assets/consume/s.png" width="32" height="32" alt="water" />
           <span>水</span>
         </div>
@@ -92,7 +92,7 @@
       </TechyBox>
     </div>
 
-    <div style="flex: 1;">
+    <div style="height: 1px; flex: 1;">
       <TechyBox class="dian-consume">
         <div class="header-part">
           <img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
@@ -104,7 +104,7 @@
       </TechyBox>
     </div>
 
-    <div style="flex: 1;">
+    <div style="height: 1px; flex: 1;">
       <TechyBox class="elec-consume">
         <div class="header-part">
           <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
@@ -146,7 +146,7 @@ export default {
     'water  elec-gen  elec-gen  gas'; */
   display: flex;
   flex-direction: column;
-  gap: calc(100vmin / 1920 * 16);
+  gap: calc(8px * var(--beilv));
 }
 
 .water-area {
@@ -167,19 +167,19 @@ export default {
 } */
 
 .techy-box {
-  padding: calc(100vmin / 1920 * 16);
+  padding: calc(16px * var(--beilv));
   display: flex;
 }
 
 .header-part {
   height: 100%;
-  width: calc(100vmin / 1920 * 96);
+  width: calc(56px * var(--beilv));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   /* overflow: hidden; */
-  margin-right: 16px;
+  margin-right: calc(16px * var(--beilv));
   position: relative;
 }
 
@@ -187,15 +187,15 @@ export default {
   content: '';
   position: absolute;
   top: 0;
-  right: -8px;
-  width: 1px;
+  right: calc(-8px * var(--beilv));
+  width: calc(1px * var(--beilv));
   height: 100%;
   background: linear-gradient(to bottom, transparent, #fff9, transparent);
 }
 
 .header-part > span {
   color: #fffc;
-  font-size: 0.8em;
+  font-size: calc(12px * var(--beilv));
 }
 
 .content-part {

src/views/3DOverview/components/RightContentProductRate.vue

@@ -245,7 +245,6 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      console.log('here...')
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
       this.chart.setOption(this.option)
     })

src/views/3DOverview/components/TechyAnalysisBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="quality-analysis-bar" :class="`border-${color}`">
     <div class="placeholder-block-wrapper">
-      <div class="justify-end">
+      <div class="flex justify-end">
         <div class="placeholder-block" :class="`block-${color}-1`" />
         <div class="placeholder-block" :class="`block-${color}-2`" />
         <div class="placeholder-block" :class="`block-${color}-3`" />
@@ -22,7 +22,7 @@ export default {
   filters: {
     amountFilter: val => {
       const sVal = val.toString()
-      return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
+      return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
     }
   },
   props: {
@@ -57,45 +57,43 @@ export default {
 
 .quality-analysis-bar {
   border-radius: 2px;
-  padding: 2px;
+  padding: calc(2px * var(--beilv));
   display: flex;
 }
 
 .border-green {
-  border: 1px solid #35abad;
+  border: 2px solid #35abad;
 }
 .border-blue {
-  border: 1px solid #49b2ff;
+  border: 2px solid #49b2ff;
 }
 .border-orange {
-  border: 1px solid #ffb94d;
+  border: 2px solid #ffb94d;
 }
 .border-pink {
-  border: 1px solid #ed879f;
+  border: 2px solid #ed879f;
 }
 
 .placeholder-block-wrapper {
   flex-grow: 1;
   overflow: hidden;
-  min-width: 32px;
+  min-width: calc(32px * var(--beilv));
   position: relative;
   display: flex;
   justify-content: center;
 }
 
 .placeholder-block-wrapper > div {
-  width: 200px;
+  width: calc(300px * var(--beilv));
   position: absolute;
   top: 0;
   right: 0;
-  display: flex;
 }
 
 .placeholder-block {
-  width: 20px;
-  height: 20px;
-  margin-left: 3px;
-  /* border-radius: 1px; */
+  width: calc(20px * var(--beilv));
+  height: calc(20px * var(--beilv));
+  margin-left: calc(3px * var(--beilv));
 }
 
 .block-green-5 {
@@ -175,24 +173,24 @@ export default {
 
 .quality-analysis-bar__name {
   text-align: center;
-  white-space: nowrap;
+  white-space: normal;
   overflow-wrap: break-word;
   overflow: hidden;
   color: white;
   display: inline-block;
-  padding: 3px 8px;
-  font-size: 14px;
-  line-height: 12px;
+  padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(12px * var(--beilv));
 }
 
 .quality-analysis-bar__amount {
   color: rgba(255, 255, 255, 0.725);
   display: inline-block;
   /* min-width: 35%; */
-  width: 50%;
+  width: 35%;
   text-align: left;
-  padding: 3px 0;
-  font-size: 14px;
-  line-height: 12px;
+  padding: calc(3px * var(--beilv)) 0;
+  font-size: calc(14px * var(--beilv));;
+  line-height: calc(12px * var(--beilv));;
 }
 </style>

src/views/3DOverview/components/TechyHeader.vue

@@ -122,7 +122,7 @@ export default {
   margin-left: calc(12px * var(--beilv));
   font-size: calc(29px * var(--beilv));
   line-height: calc(41px * var(--beilv));
-  letter-spacing: calc(2.23px * var(--beilv));
+  letter-spacing: calc(4px * var(--beilv));
   text-shadow: 0px 0px calc(11px * var(--beilv)) rgba(221, 237, 255, 0.34);
 }
 
@@ -134,7 +134,7 @@ export default {
   color: #49e1de;
   letter-spacing: calc(0.8px * var(--beilv));
   position: absolute;
-  bottom: calc(12px * var(--beilv));
+  bottom: calc(18px * var(--beilv));
 }
 
 .date {

src/views/3DOverview/components/TechyTable.vue

@@ -7,15 +7,14 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="width: 100%; background: transparent"
-    >
-      <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
+    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+      <el-table-column
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70 * beilv"
+        align="center"
+      />
       <el-table-column
         v-for="(item, index) in renderTableHeadList"
         :key="item.prop"
@@ -23,10 +22,14 @@
         v-bind="item"
       >
         <template slot-scope="scope">
-
-          <component :is="item.subcomponent" v-if="item.subcomponent" :key="index" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <component
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :key="index"
+            :inject-data="{ ...scope.row, ...item }"
+            @emitData="emitData"
+          />
           <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
-
         </template>
       </el-table-column>
       <slot name="content" />
@@ -107,82 +110,101 @@ export default {
   methods: {
     emitData(val) {
       this.$emit('emitFun', val)
-    },
-    setRowStyle(v) {
-      if (v.rowIndex % 2 === 0) {
-        return {
-          background: 'rgba(76,97,123,0.2)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      } else {
-        return {
-          background: 'rgba(79,114,136,0.29)',
-          color: 'rgba(255,255,255,0.5)',
-          height: 26 * this.beilv + 'px',
-          lineHeight: 26 * this.beilv + 'px',
-          padding: 0,
-          fontSize: 12 * this.beilv + 'px'
-        }
-      }
-    },
-    setCellStyle(v) {
-      return {
-        lineHeight: 23 * this.beilv + 'px'
-      }
     }
   }
 }
 </script>
-<style lang="scss">
-@import "~@/styles/index.scss";
+
+<style scoped>
+.visual-base-table-container >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-button {
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));
+  background: #5bc4bf9f;
+}
+
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
 .visual-base-table-container {
-  .el-table {
-    border: 0;
-  }
-  .el-table::before,.el-table--border::after {
-    background-color: transparent;
-  }
-  .el-table th,td{
-    border-color: #0D1728 !important;
-    padding: 0;
-  }
-  .el-table tr {
-    background: transparent;
-  }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
+  height: 100%;
+}
+/* .visual-base-table-container >>> .el-table {
+  min-width: 120%;
+} */
+/* 清除默认样式 */
+.visual-base-table-container >>> th.gutter {
+  display: none;
+}
+.visual-base-table-container >>> table {
+  background: transparent;
+}
 
-  .el-table__row--striped:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-  }
+.visual-base-table-container >>> .el-table,
+.visual-base-table-container >>> th,
+.visual-base-table-container >>> tr {
+  background: unset;
+}
 
-  // new
-  .el-table {
-    width: 100%;
-    .el-table__header-wrapper table, .el-table__body-wrapper table {
-      width: 100% !important;
-    }
+/* 设置设计稿样式 */
+.visual-base-table-container >>> .el-table::before,
+.visual-base-table-container >>> .el-table--group::after,
+.visual-base-table-container >>> .el-table--border::after,
+.visual-base-table-container >>> .el-table--border::after {
+  background: unset;
+}
 
-    .el-table__body, .el-table__footer, .el-table__header {
-      table-layout: auto;
-    }
-  }
+.visual-base-table-container >>> table * {
+  border-color: #0d1728;
+  border-width: calc(1px * var(--beilv));
 }
-.setting {
-  text-align: right;
-  padding: 15px;
-  .setting-box {
-    width: 100px;
-  }
-  i {
-    color: #aaa;
-    @extend .pointer;
-  }
+
+.visual-base-table-container >>> td {
+  padding: calc(5px * var(--beilv));
 }
 
+.visual-base-table-container >>> td span {
+  color: #ffffff50;
+  font-size: calc(12px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+}
+
+.visual-base-table-container >>> thead th {
+  padding: 0;
+}
+
+.visual-base-table-container >>> thead th .cell {
+  color: #fff;
+  font-size: calc(14px * var(--beilv));
+  line-height: calc(14px * var(--beilv));
+  padding: calc(6px * var(--beilv));
+  white-space: nowrap;
+}
+
+.visual-base-table-container >>> .el-table__body tr:hover > td {
+  background-color: #42537130;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
+  background-color: #0e203e90;
+}
+
+.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
+.visual-base-table-container >>> .el-table thead {
+  background-color: #20376090;
+}
 </style>

src/views/3DOverview/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
     <!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
-    <!-- 正式内容: -->
     <!-- <div v-if="showPage" id="v3d-main-content"> -->
     <div v-if="true" id="v3d-main-content">
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
@@ -9,12 +8,16 @@
       <section id="techy-body-part">
         <div class="upper-part">
           <div class="techy-body-part__left">
-            <techy-container title="订单完成情况" icon="default" style="flex: 0;">
-              <LeftContentOrder />
-            </techy-container>
-            <techy-container title="公用工程消耗" icon="菱形叠加" style="flex:1;">
-              <LeftContentPublicConsume />
-            </techy-container>
+            <div class="order">
+              <techy-container title="订单完成情况" icon="default">
+                <LeftContentOrder />
+              </techy-container>
+            </div>
+            <div class="public">
+              <techy-container title="公用工程消耗" icon="菱形叠加">
+                <LeftContentPublicConsume />
+              </techy-container>
+            </div>
           </div>
 
           <div class="techy-body-part__middle">
@@ -41,38 +44,44 @@
           </div>
 
           <div class="techy-body-part__right">
-            <techy-container title="实时产量和能耗" icon="折角的菜单图标" style="height: 22vh">
-              <RightContentRealtimeProduction />
-            </techy-container>
+            <div class="realtime">
+              <techy-container title="实时产量和能耗" icon="折角的菜单图标">
+                <RightContentRealtimeProduction />
+              </techy-container>
+            </div>
 
-            <techy-container title="工序质量分析" icon="趋势放大镜图标" style="flex: 0">
-              <RightContentQualityAnalysis />
-            </techy-container>
+            <div class="ws-quality">
+              <techy-container title="工序质量分析" icon="趋势放大镜图标">
+                <RightContentQualityAnalysis />
+              </techy-container>
+            </div>
 
-            <techy-container title="产线成品率" icon="default" style="flex: 1">
-              <RightContentProductRate />
-            </techy-container>
+            <div class="production">
+              <techy-container title="产线成品率" icon="default">
+                <RightContentProductRate />
+              </techy-container>
+            </div>
           </div>
         </div>
 
         <!-- 底部 -->
         <div class="bottom-part">
-          <div style="width: 25%; min-width: 480px; height: 100%;">
+          <div class="eq-check">
             <techy-container title="设备巡检提示" icon="电脑警告菜单图标" style="flex: 0; align-self: stretch;">
               <LeftContentEquipmentCheck />
             </techy-container>
           </div>
-          <div style="flex: 1;">
+          <div class="ft-monitor" style="flex: 1;">
             <techy-container title="现场实时监控" icon="安全帽图标">
               <LeftContentMonitor />
             </techy-container>
           </div>
-          <div style="flex: 1;max-width: 320px;">
+          <div class="fault-analysis">
             <techy-container title="缺陷分类分析" icon="菜单放大镜图标">
               <RightContentFaultAnalysis />
             </techy-container>
           </div>
-          <div style="width: 25%; min-width: 480px;">
+          <div class="eq-alert">
             <techy-container title="设备报警提示" icon="电脑警告图标">
               <RightContentAlert />
             </techy-container>
@@ -160,6 +169,7 @@ export default {
   -webkit-font-smoothing: antialiased;
   font-weight: 300;
   position: relative;
+  /* overflow: auto; */
 }
 
 #v3d-outter *::-webkit-scrollbar {
@@ -195,48 +205,87 @@ export default {
 }
 
 #techy-body-part {
+  height: 20vh;
   flex: 1 1;
   display: flex;
-  /* gap: 16px; */
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
   flex-direction: column;
 }
 
 .upper-part {
   flex: 1 1;
-  padding: calc(100vmin / 1920 * 36);
+  height: 20vh;
+  padding: calc(24px * var(--beilv));
   padding-bottom: 0;
   display: flex;
-  /* justify-content: space-between; */
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
+}
+
+/* 订单完成情况 */
+.order {
+  height: calc(232px * var(--beilv));
+  flex: 0;
+}
+/* 公用工程消耗 */
+.public {
+  height: calc(472px * var(--beilv));
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 实时产量和能耗 */
+.realtime {
+  height: calc(256px * var(--beilv));
+}
+/* 工序质量分析 */
+.ws-quality {
+  height: calc(228px * var(--beilv));
+  flex: 1;
+}
+/* 产线成品率 */
+.production {
+  height: calc(195px * var(--beilv));
 }
 
 .bottom-part {
-  height: 22vh;
-  padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
+  height: calc(224px * var(--beilv));
+  padding: 0 calc(24px * var(--beilv)) calc(24px * var(--beilv));
   display: flex;
-  /* gap: 16px; */
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
+}
+
+/* 设备巡检提示 */
+.eq-check,
+.eq-alert {
+  width: calc(472px * var(--beilv));
+}
+
+/* 现场实时监控 */
+.ft-monitor {
+}
+
+/* 缺陷分类分析  */
+.fault-analysis {
+  width: calc(290px * var(--beilv));
+}
+
+/* 设备报警提示 */
+.eq-alert {
 }
 
 .techy-body-part__left,
 .techy-body-part__right {
-  height: 100%;
-  width: 25%;
-  min-width: 480px;
+  /* height: 100%; */
+  /* height: calc(512px * var(--beilv));
+  flex: 1; */
+  width: calc(472px * var(--beilv));
   overflow: hidden;
-  /* background: rgba(20, 69, 100, 0.425);
-  backdrop-filter: blur(2px); */
 
   display: flex;
   flex-direction: column;
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
 }
 
-/* .techy-body-part__left {
-  width: 35%;
-} */
-
 .techy-body-part__right-col-2 {
   flex: 1;
   display: flex;