'update'

src/assets/fonts/font.scss

@@ -0,0 +1,6 @@
+@font-face {  
+  font-family: 'zcoolqingkehuangyouti-Regular';  //重命名字体名
+  src: url('./zcoolqingkehuangyouti-Regular.ttf');  //引入字体
+  font-weight: normal;  
+  font-style: normal;  
+}

src/components/baseContainer/index.vue

@@ -77,12 +77,12 @@ export default {
   width: 100%;
   background-color: rgba($color: #061027, $alpha: 0.15);
   position: relative;
-  border: 2px solid;
+  border: calc(2px * var(--beilv)) solid;
-  box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+  box-shadow: inset 0px 0px calc(20px * var(--beilv)) 0px rgba(255,255,255,0.15);
   border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
   .line {
     position: absolute;
-    border-top: 4px solid #52FFF1;
+    border-top: calc(4px * var(--beilv)) solid #52FFF1;
     width: 2em;
     top: -.25em;
     left: -.25em;

src/components/baseTable.vue

@@ -142,6 +142,9 @@ export default {
 .visual-base-table-container {
   .el-table {
     border: 0;
+    .cell {
+      line-height: calc(23px * var(--beilv));
+    }
   }
   .el-table::before,.el-table--border::after {
     background-color: transparent;

src/main.js

@@ -22,6 +22,7 @@ import router from './router'
 import i18n from './lang' // internationalization
 import './icons' // icon
 import './utils/error-log' // error log
+import './assets/fonts/font.scss'
 
 import * as filters from './filters' // global filters
 /**

src/views/components/statusCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg-icon :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" style="font-size: 24px" />
+  <svg-icon class="icon-font" :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" />
 </template>
 
 <script>
@@ -16,4 +16,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.icon-font {
+  font-size: calc(20px * var(--beilv));
+}
 </style>

src/views/factory.vue

@@ -6,7 +6,7 @@
       </span>
       <span class="navbar-title">
         <img :src="require(`../assets/img/choicepart/icon.png`)" class="navbar-title-icon" alt="">
-        合 肥 新 能 源 数 字 工 厂
+        合肥新能源数字工厂数据采集平台
       </span>
       <span class="navbar-right">
         <span>
@@ -18,73 +18,40 @@
     <el-row class="container-main">
       <el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }">
         <el-col :span="24">
-          <base-container class="swiper-container" :beilv="beilv" :height="303">
+          <base-container class="swiper-container" :beilv="beilv" :height="298">
-            <el-carousel ref="swiper1item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
+            <div class="swiper-title">
-              <el-carousel-item v-for="item in 4" :key="item">
+              <span style="">产线A</span>
-                <img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
+            </div>
+            <img :style="{width: '90%',height: 191 * beilv - 4 + 'px', margin: 'auto 5%'}" :src="require('../assets/img/choicepart/factory-model-A.png')" alt="">
             <svg-icon
-                  v-for="(i, index) in wuliuList"
+              v-for="(i, index) in AList"
               :key="index + '1'"
               :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
+              :style="{ position: 'absolute', fontSize: 22 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
             />
+          </base-container>
+        </el-col>
+      </el-row>
+      <el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: 17 * beilv + 'px' }">
+        <el-col :span="24">
+          <base-container class="swiper-container" :beilv="beilv" :height="298">
+            <div class="swiper-title">
+              <span style="">产线B</span>
+            </div>
+            <img :style="{width: '90%',height: 191 * beilv - 4 + 'px', margin: 'auto 5%'}" :src="require('../assets/img/choicepart/factory-model-B.png')" alt="">
             <svg-icon
-                  v-for="(i, index) in wuliuList"
+              v-for="(i, index) in BList"
               :key="index + '2'"
               :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
+              :style="{ position: 'absolute', fontSize: 22 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
             />
-              </el-carousel-item>
-            </el-carousel>
-            <div class="swiper-indicator">
-              <svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperOneLeft" />
-              <svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperOneRight" />
-              <el-carousel ref="swiper1text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
-                <el-carousel-item v-for="item in 4" :key="item">
-                  <p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
-                </el-carousel-item>
-              </el-carousel>
-            </div>
           </base-container>
         </el-col>
       </el-row>
-      <el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: '17px' }">
+      <el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: `${17 * beilv}px 0` }">
-        <el-col :span="24">
+        <el-col :span="12"  :style="{paddingRight: 12 * beilv + 'px'}">
-          <base-container class="swiper-container" :beilv="beilv" :height="303">
-            <el-carousel ref="swiper2item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
-              <el-carousel-item v-for="item in 4" :key="item">
-                <img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
-                <svg-icon
-                  v-for="(i, index) in materialList"
-                  :key="index + '3'"
-                  :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
-                />
-                <svg-icon
-                  v-for="(i, index) in materialList"
-                  :key="index + '4'"
-                  :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
-                />
-              </el-carousel-item>
-            </el-carousel>
-            <div class="swiper-indicator">
-              <svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperTwoLeft" />
-              <svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperTwoRight" />
-              <el-carousel ref="swiper2text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
-                <el-carousel-item v-for="item in 4" :key="item">
-                  <p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
-                </el-carousel-item>
-              </el-carousel>
-            </div>
-          </base-container>
-        </el-col>
-      </el-row>
-      <el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: '17px 0' }">
-        <el-col :span="12" style="paddingRight: 12px">
           <base-container title-icon="wuliu" title="生产物流仓储设备通讯状态" class="swiper-container" :beilv="beilv" :height="279">
-            <el-row :gutter="12" style="padding: 0 24px">
+            <el-row :style="{padding: `0 ${24 * beilv}px`}">
-              <el-col :span="12">
               <base-table
                 :page="1"
                 :limit="7"
@@ -93,24 +60,12 @@
                 :table-config="tableProp"
                 :table-data="wuliuList"
               />
-              </el-col>
-              <el-col :span="12">
-                <base-table
-                  :page="1"
-                  :limit="7"
-                  :show-index="false"
-                  :beilv="beilv"
-                  :table-config="tableProp"
-                  :table-data="wuliuList"
-                />
-              </el-col>
             </el-row>
           </base-container>
         </el-col>
-        <el-col :span="12" style="paddingLeft: 12px">
+        <el-col :span="12" :style="{paddingLeft: 12 * beilv + 'px'}">
           <base-container title-icon="material" title="公用工程设备通信状态" class="swiper-container" :beilv="beilv" :height="279">
-            <el-row :gutter="12" style="padding: 0 24px">
+            <el-row :style="{padding: `0 ${24 * beilv}px`}">
-              <el-col :span="12">
               <base-table
                 :page="1"
                 :limit="7"
@@ -119,17 +74,6 @@
                 :table-config="tableProp"
                 :table-data="materialList"
               />
-              </el-col>
-              <el-col :span="12">
-                <base-table
-                  :page="1"
-                  :limit="7"
-                  :show-index="false"
-                  :beilv="beilv"
-                  :table-config="tableProp"
-                  :table-data="materialList"
-                />
-              </el-col>
             </el-row>
           </base-container>
         </el-col>
@@ -159,23 +103,92 @@ const tableProp = [
     subcomponent: statusCell
   }
 ]
+const AList = [
+  { equipmentName: '上片1', status: 1, left: 7, top: 22 },
+  { equipmentName: '磨边1-1', status: 1, left: 11.5, top: 22 },
+  { equipmentName: '磨边1-2', status: 2, left: 16.7, top: 22 },
+  { equipmentName: '清洗1-2', status: 1, left: 20, top: 22 },
+  { equipmentName: '打孔1', status: 1, left: 25.8, top: 22 },
+  { equipmentName: '清洗1-2', status: 1, left: 31.5, top: 22 },
+  { equipmentName: '丝印1', status: 1, left: 38.3, top: 22 },
+  { equipmentName: '固化1', status: 1, left: 43.9, top: 22 },
+  { equipmentName: '储片1', status: 1, left: 47.9, top: 22 },
+  { equipmentName: '清洗1-3', status: 1, left: 85.3, top: 31 },
+  { equipmentName: '下片1', status: 1, left: 91.8, top: 31 },
+  { equipmentName: '上片2', status: 2, left: 7, top: 41 },
+  { equipmentName: '磨边2-1', status: 1, left: 11.5, top: 41 },
+  { equipmentName: '磨边2-2', status: 2, left: 16.7, top: 41 },
+  { equipmentName: '清洗2-2', status: 2, left: 20, top: 41 },
+  { equipmentName: '打孔2', status: 2, left: 25.8, top: 41 },
+  { equipmentName: '清洗2-2', status: 1, left: 31.5, top: 41 },
+  { equipmentName: '丝印2', status: 1, left: 38.3, top: 41 },
+  { equipmentName: '固化2', status: 1, left: 43.9, top: 41 },
+  { equipmentName: '储片2', status: 1, left: 47.9, top: 41 },
+  { equipmentName: '清洗2-3', status: 1, left: 85.3, top: 46.5 },
+  { equipmentName: '下片2', status: 1, left: 91.8, top: 46.5 },
+  { equipmentName: '上片3', status: 1, left: 7, top: 60 },
+  { equipmentName: '磨边3-1', status: 1, left: 11.5, top: 60 },
+  { equipmentName: '磨边3-2', status: 1, left: 16.7, top: 60 },
+  { equipmentName: '清洗3-2', status: 1, left: 20, top: 60 },
+  { equipmentName: '打孔3', status: 1, left: 25.8, top: 60 },
+  { equipmentName: '清洗3-2', status: 3, left: 31.5, top: 60 },
+  { equipmentName: '丝印3', status: 1, left: 38.3, top: 60 },
+  { equipmentName: '固化3', status: 1, left: 43.9, top: 60 },
+  { equipmentName: '储片3', status: 1, left: 47.9, top: 60 },
+  { equipmentName: '清洗3-3', status: 1, left: 85.3, top: 63 },
+  { equipmentName: '下片3', status: 1, left: 91.8, top: 63 },
+  { equipmentName: '钢化', status: 1, left: 64.5, top: 63 }
+]
+const BList = [
+  { equipmentName: '上片1', status: 3, left: 7, top: 22 },
+  { equipmentName: '磨边1-1', status: 1, left: 11.1, top: 22 },
+  { equipmentName: '磨边1-2', status: 1, left: 16.1, top: 22 },
+  { equipmentName: '清洗1-2', status: 3, left: 19, top: 22 },
+  { equipmentName: '打孔1', status: 3, left: 24.8, top: 22 },
+  { equipmentName: '清洗1-2', status: 1, left: 30, top: 22 },
+  { equipmentName: '丝印1', status: 1, left: 36.7, top: 22 },
+  { equipmentName: '固化1', status: 1, left: 41.9, top: 22 },
+  { equipmentName: '储片1', status: 1, left: 45.7, top: 22 },
+  { equipmentName: '清洗1-3', status: 1, left: 81, top: 24 },
+  { equipmentName: '下片1', status: 1, left: 86.3, top: 27 },
+  { equipmentName: '下片2', status: 1, left: 89, top: 27 },
+  { equipmentName: '下片3', status: 1, left: 91.8, top: 27 },
+  { equipmentName: '上片1', status: 1, left: 7, top: 41 },
+  { equipmentName: '磨边1-1', status: 1, left: 11.1, top: 41 },
+  { equipmentName: '磨边1-2', status: 1, left: 16.1, top: 41 },
+  { equipmentName: '清洗1-2', status: 1, left: 19, top: 41 },
+  { equipmentName: '打孔1', status: 1, left: 24.8, top: 41 },
+  { equipmentName: '清洗1-2', status: 1, left: 30, top: 41 },
+  { equipmentName: '丝印1', status: 1, left: 36.7, top: 41 },
+  { equipmentName: '固化1', status: 1, left: 41.9, top: 41 },
+  { equipmentName: '储片1', status: 1, left: 45.7, top: 41 },
+  { equipmentName: '清洗1-3', status: 1, left: 81, top: 49 },
+  { equipmentName: '上片1', status: 1, left: 7, top: 60 },
+  { equipmentName: '磨边1-1', status: 1, left: 11.1, top: 60 },
+  { equipmentName: '磨边1-2', status: 1, left: 16.1, top: 60 },
+  { equipmentName: '清洗1-2', status: 1, left: 19, top: 60 },
+  { equipmentName: '打孔1', status: 1, left: 24.8, top: 60 },
+  { equipmentName: '清洗1-2', status: 1, left: 30, top: 60 },
+  { equipmentName: '丝印1', status: 1, left: 36.7, top: 60 },
+  { equipmentName: '固化1', status: 3, left: 41.9, top: 60 },
+  { equipmentName: '储片1', status: 3, left: 45.7, top: 60 },
+  { equipmentName: '钢化', status: 1, left: 61.5, top: 27 }
+]
 const wuliuList = [
-  { equipmentName: '包装机', status: 1, left: 23, top: 23 },
+  { equipmentName: '包装机', status: 1 },
-  { equipmentName: '输送线', status: 2, left: 27, top: 23 },
+  { equipmentName: '输送线', status: 2 },
-  { equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
+  { equipmentName: '堆垛机', status: 3 },
-  { equipmentName: 'AGV', status: 3, left: 47, top: 23 },
+  { equipmentName: 'AGV', status: 3 },
-  { equipmentName: '包装机', status: 1, left: 51, top: 23 },
+  { equipmentName: 'PDA', status: 1 },
-  { equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
+  { equipmentName: 'ERP', status: 2 }
-  { equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
 ]
 const materialList = [
-  { equipmentName: '包装机', status: 1, left: 23, top: 23 },
+  { equipmentName: '低压配电', status: 1 },
-  { equipmentName: '输送线', status: 2, left: 27, top: 23 },
+  { equipmentName: '余热发电', status: 2 },
-  { equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
+  { equipmentName: '天然气', status: 3 },
-  { equipmentName: 'AGV', status: 3, left: 47, top: 23 },
+  { equipmentName: '水泵', status: 3 },
-  { equipmentName: '包装机', status: 1, left: 51, top: 23 },
+  { equipmentName: '风机', status: 1 },
-  { equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
+  { equipmentName: '氧气', status: 2 }
-  { equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
 ]
 
 export default {
@@ -195,7 +208,9 @@ export default {
       beilv: 1,
       tableProp,
       wuliuList,
-      materialList
+      materialList,
+      AList,
+      BList
     }
   },
   created() {
@@ -208,8 +223,10 @@ export default {
       this.time = a[1]
     }, 1000)
     this.beilv = document.body.offsetWidth / 1920
+    document.documentElement.style.setProperty('--beilv', this.beilv)
     addEventListener('resize', eventListener = () => {
       this.beilv = document.body.offsetWidth / 1920
+      document.documentElement.style.setProperty('--beilv', this.beilv)
     })
   },
   destroyed() {
@@ -226,22 +243,6 @@ export default {
     },
     handleHome() {
       this.$router.push('/index')
-    },
-    handleSwiperOneLeft() {
-      this.$refs.swiper1item.prev()
-      this.$refs.swiper1text.prev()
-    },
-    handleSwiperOneRight() {
-      this.$refs.swiper1item.next()
-      this.$refs.swiper1text.next()
-    },
-    handleSwiperTwoLeft() {
-      this.$refs.swiper2item.prev()
-      this.$refs.swiper2text.prev()
-    },
-    handleSwiperTwoRight() {
-      this.$refs.swiper2item.next()
-      this.$refs.swiper2text.next()
     }
   }
 }
@@ -258,66 +259,86 @@ export default {
   .factory-navbar {
     user-select: none;
     width: 100%;
-    min-width: 1600px;
+    min-width: calc(1600px * var(--beilv));
     height: 11vh;
     line-height: 11vh;
     text-align: center;
     color: #fff;
-    font-size: 30px;
+    font-size: calc(29px * var(--beilv));
     background: url('../assets/img/choicepart/header.png') no-repeat;
     background-size: 100% auto;
+    position: relative;
     .navbar-left {
       color: #49E1DE;
-      float: left;
+      position: absolute;
-      position: relative;
+      font-family: zcoolqingkehuangyouti-Regular;
-      left: 58px;
+      left: calc(58px * var(--beilv));
-      font-size: 32px;
+      font-size: calc(32px * var(--beilv));
       line-height: 12vh;
     }
     .navbar-right {
       color: #49E1DE;
-      float: right;
+      position: absolute;
-      position: relative;
+      font-family: zcoolqingkehuangyouti-Regular;
-      right: 84px;
+      right: calc(84px * var(--beilv));
-      font-size: 32px;
+      font-size: calc(32px * var(--beilv));
       line-height: 12vh;
       span {
         position: relative;
         .item-icon {
           position: absolute;
-          top: 0;
+          top: calc(3px * var(--beilv));
-          right: -56px;
+          right: calc(-56px * var(--beilv));
           cursor: pointer;
         }
       }
     }
     .navbar-title {
+      letter-spacing: calc(4px * var(--beilv));
       .navbar-title-icon {
         position: relative;
-        top: 13px;
+        top: calc(13px * var(--beilv));
-        right: 12px;
+        right: calc(12px * var(--beilv));
+      }
+      img {
+        width: calc(34px * var(--beilv));
+        height: calc(46px * var(--beilv));
       }
     }
   }
   .container-main {
-    margin-top: 24px;
+    margin-top: calc(24px * var(--beilv));
     .swiper-container {
       position: relative;
       user-select: none;
+      .swiper-title {
+        line-height: calc(68px * var(--beilv));
+        height: calc(68px * var(--beilv));
+        letter-spacing: calc(6px * var(--beilv));
+        font-size: calc(22px * var(--beilv));
+        color: #47F8DC;
+        text-align: center;
+        span {
+          display: inline-block;
+          width: calc(344px * var(--beilv));
+          background: url('../assets/img/choicepart/factory-model-title.png') no-repeat center;
+          background-size: calc(344px * var(--beilv)) calc(24px * var(--beilv)) ;
+        }
+      }
       .swiper-indicator {
         position: absolute;
         color: #47F8DC;
-        width: 300px;
+        width: calc(300px * var(--beilv));
         text-align: center;
-        font-size: 22px;
+        font-size: calc(22px * var(--beilv));
-        bottom: 22px;
+        bottom: calc(22px * var(--beilv));
         left: 50%;
         transform:translate(-50%);
         z-index: 2;
         .swiper-indicator-item {
-          max-width: 300px;
+          max-width: calc(300px * var(--beilv));
           .swiper-indicator-text {
-            max-width: 300px;
+            max-width: calc(300px * var(--beilv));
             overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap;
@@ -332,12 +353,12 @@ export default {
         }
         .swiper-icon-left {
           transform: rotateY(180deg);
-          margin-right: 12px;
+          margin-right: calc(12px * var(--beilv));
-          left: -36px;
+          left: calc(-36px * var(--beilv));
         }
         .swiper-icon-right {
-          margin-left: 12px;
+          margin-left: calc(12px * var(--beilv));
-          right: -36px;
+          right: calc(-36px * var(--beilv));
         }
       }
     }
@@ -348,19 +369,19 @@ export default {
 }
 ::-webkit-scrollbar-track-piece {
   //滚动条凹槽的颜色，还可以设置边框属性
-  background: rgba(255, 255, 255, 0.1);
+  background: transparent;
 }
 ::-webkit-scrollbar {
   //滚动条的宽度
-  width: 9px;
+  width: calc(9px * var(--beilv));
-  height: 9px;
+  height: calc(9px * var(--beilv));
 }
 ::-webkit-scrollbar-thumb {
   //滚动条的设置
   background-color: #dddddd;
   background-clip: padding-box;
-  min-height: 28px;
+  min-height: calc(28px * var(--beilv));
-  border-radius: 9px;
+  border-radius: calc(9px * var(--beilv));
 }
 ::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;

src/views/index.vue

@@ -125,21 +125,22 @@ export default {
     line-height: 11vh;
     text-align: center;
     color: #fff;
-    font-size: calc(30px * var(--beilv));
+    font-size: calc(29px * var(--beilv));
     background: url('../assets/img/choicepart/header.png') no-repeat;
     background-size: 100% auto;
+    position: relative;
     .navbar-left {
       color: #49E1DE;
-      float: left;
+      position: absolute;
-      position: relative;
+      font-family: zcoolqingkehuangyouti-Regular;
       left: calc(58px * var(--beilv));
       font-size: calc(32px * var(--beilv));
       line-height: 12vh;
     }
     .navbar-right {
       color: #49E1DE;
-      float: right;
+      position: absolute;
-      position: relative;
+      font-family: zcoolqingkehuangyouti-Regular;
       right: calc(84px * var(--beilv));
       font-size: calc(32px * var(--beilv));
       line-height: 12vh;
@@ -147,7 +148,7 @@ export default {
         position: relative;
         .item-icon {
           position: absolute;
-          top: 0;
+          top: calc(3px * var(--beilv));
           right: calc(-56px * var(--beilv));
           cursor: pointer;
         }