From 4630e292c51dde1162350d055941e65a5b677b83 Mon Sep 17 00:00:00 2001
From: gtz <535262213@qq.com>
Date: Mon, 31 Oct 2022 16:26:31 +0800
Subject: [PATCH] 'over'

---
 src/components/baseContainer/index.vue |   1 +
 src/components/baseTable.vue           |   8 +-
 src/icons/svg/jiantou.svg              |  14 ++
 src/icons/svg/wuliu.svg                |  14 ++
 src/views/components/statusCell.vue    |  19 +++
 src/views/factory.vue                  | 227 ++++++++++++++++++++++++-
 src/views/index.vue                    |  12 +-
 7 files changed, 278 insertions(+), 17 deletions(-)
 create mode 100644 src/icons/svg/jiantou.svg
 create mode 100644 src/icons/svg/wuliu.svg
 create mode 100644 src/views/components/statusCell.vue

diff --git a/src/components/baseContainer/index.vue b/src/components/baseContainer/index.vue
index f3ea65f..25a311d 100644
--- a/src/components/baseContainer/index.vue
+++ b/src/components/baseContainer/index.vue
@@ -78,6 +78,7 @@ export default {
   background-color: rgba($color: #061027, $alpha: 0.15);
   position: relative;
   border: 2px solid;
+  box-shadow: inset 0px 0px 20px 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;
diff --git a/src/components/baseTable.vue b/src/components/baseTable.vue
index 72c5573..edfeff4 100644
--- a/src/components/baseTable.vue
+++ b/src/components/baseTable.vue
@@ -9,11 +9,11 @@
   <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'}"
+      :header-cell-style="{background:'rgba(32, 55, 96, .8)',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"
+      style="width: 100%; border-radius: 4px; border-right: none; background: transparent"
     >
       <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
       <el-table-column
@@ -111,7 +111,7 @@ export default {
     setRowStyle(v) {
       if (v.rowIndex % 2 === 0) {
         return {
-          background: 'rgba(76,97,123,0.2)',
+          background: 'rgba(14, 32, 62, .8)',
           color: 'rgba(255,255,255,0.5)',
           height: 26 * this.beilv + 'px',
           lineHeight: 26 * this.beilv + 'px',
@@ -120,7 +120,7 @@ export default {
         }
       } else {
         return {
-          background: 'rgba(79,114,136,0.29)',
+          background: 'rgba(32, 55, 96, .8)',
           color: 'rgba(255,255,255,0.5)',
           height: 26 * this.beilv + 'px',
           lineHeight: 26 * this.beilv + 'px',
diff --git a/src/icons/svg/jiantou.svg b/src/icons/svg/jiantou.svg
new file mode 100644
index 0000000..3e0d99f
--- /dev/null
+++ b/src/icons/svg/jiantou.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下箭头备份</title>
+    <g id="4数采平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="数采平台" transform="translate(-1086.000000, -705.000000)" fill-rule="nonzero">
+            <g id="编组-42备份" transform="translate(810.000000, 704.998514)">
+                <g id="下箭头备份" transform="translate(288.000000, 12.000000) scale(-1, 1) rotate(-270.000000) translate(-288.000000, -12.000000) translate(276.000000, 0.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M13.431,17.625 L20.6685,8.142 C21.0839368,7.59762559 21.1545003,6.86467633 20.8505486,6.25104401 C20.5465969,5.63741168 19.9207853,5.24939923 19.236,5.2499993 L4.76325,5.2499993 C4.07873504,5.2499993 3.45344529,5.63820033 3.14986925,6.25171668 C2.84629321,6.86523304 2.91697759,7.5978405 3.33225,8.142 L10.56975,17.625 C10.9102709,18.0709566 11.4392763,18.3326117 12.000375,18.3326117 C12.5614737,18.3326117 13.0904791,18.0709566 13.431,17.625 L13.431,17.625 Z" id="路径" fill="#6EF9DF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/icons/svg/wuliu.svg b/src/icons/svg/wuliu.svg
new file mode 100644
index 0000000..ef7fe30
--- /dev/null
+++ b/src/icons/svg/wuliu.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>仓储管理</title>
+    <g id="4数采平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="数采平台" transform="translate(-48.000000, -793.000000)" fill-rule="nonzero">
+            <g id="编组-5备份-5" transform="translate(24.000000, 768.000000)">
+                <g id="仓储管理" transform="translate(24.000000, 25.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M15.48393,3.3048696 C16.0703357,3.3048696 16.6219745,3.5418302 17.020607,3.96044665 L17.1354883,4.09142595 L20.6350715,8.39485828 C20.9188368,8.74257074 21.0910685,9.17061787 21.1296926,9.61583822 L21.1380014,9.80751422 L21.1380014,19.8391184 C21.1322712,20.3132162 20.7485971,20.6951304 20.2749174,20.6951304 C19.8363964,20.6951304 19.4755033,20.3679697 19.4225761,19.9439863 L19.4158936,19.8361066 L19.4158936,9.80751422 C19.4158936,9.71899915 19.3924626,9.63027695 19.34999,9.55385509 L19.3013328,9.48199659 L15.8017937,5.17455846 C15.7386891,5.09720442 15.6518741,5.04656647 15.5545895,5.02940545 L15.4798698,5.02291725 L8.52075754,5.02291725 C8.42180102,5.02291725 8.32692629,5.05850593 8.251634,5.12175671 L8.19907868,5.17425759 L4.70103815,9.4757657 C4.64460461,9.54683016 4.60740016,9.62983251 4.59232504,9.71623475 L4.58473377,9.80345406 L4.58473377,19.8320464 C4.58473377,20.3071108 4.20077431,20.6910702 3.72570994,20.6910702 C3.28718898,20.6910702 2.92629588,20.3639095 2.87336866,19.9399261 L2.86668611,19.8320464 L2.86668611,9.80751422 C2.86668611,9.35867624 3.00344716,8.91798843 3.25471186,8.54883734 L3.36934227,8.39519433 L6.86864167,4.09211403 C7.23599734,3.63709393 7.76772247,3.35876787 8.34599664,3.31192363 L8.52075754,3.3048696 L15.48393,3.3048696 Z M17.5343102,17.8849 C18.0093746,17.8849 18.393334,18.2688595 18.393334,18.7439238 C18.393334,19.1813935 18.0636908,19.5431762 17.641617,19.5962465 L17.5343102,19.6029477 L6.45007653,19.6029477 C5.97501215,19.6029477 5.5910527,19.2189882 5.5910527,18.7439238 C5.5910527,18.3054029 5.91821342,17.9445098 6.34219683,17.8915826 L6.45007653,17.8849 L17.5343102,17.8849 Z M17.5343102,14.7748183 C18.0093746,14.7748183 18.393334,15.1587778 18.393334,15.6338422 C18.393334,16.0713119 18.0636908,16.4330945 17.641617,16.4861648 L17.5343102,16.492866 L6.45007653,16.492866 C5.97501215,16.492866 5.5910527,16.1089065 5.5910527,15.6338422 C5.5910527,15.1953212 5.91821342,14.8344281 6.34219683,14.7815009 L6.45007653,14.7748183 L17.5343102,14.7748183 Z M17.5343102,11.6647367 C18.0093746,11.6647367 18.393334,12.0486961 18.393334,12.5237605 C18.393334,12.9612302 18.0636908,13.3230128 17.641617,13.3760831 L17.5343102,13.3827843 L6.45007653,13.3827843 C5.97501215,13.3827843 5.5910527,12.9988249 5.5910527,12.5237605 C5.5910527,12.0852395 5.91821342,11.7243464 6.34219683,11.6714192 L6.45007653,11.6647367 L17.5343102,11.6647367 Z M14.5622739,7.25540416 C15.0373383,7.25540416 15.4212977,7.63936361 15.4212977,8.11442798 C15.4212977,8.55376299 15.0933842,8.91396728 14.6667865,8.96678371 L14.5582137,8.97345181 L9.41805264,8.97345181 C8.94298827,8.97345181 8.55902882,8.58949235 8.55902882,8.11442798 C8.55902882,7.67590702 8.88618954,7.31501392 9.31017295,7.26208671 L9.41805264,7.25540416 L14.5622739,7.25540416 Z" id="形状结合" fill="#6EF9E1"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/components/statusCell.vue b/src/views/components/statusCell.vue
new file mode 100644
index 0000000..ba8068f
--- /dev/null
+++ b/src/views/components/statusCell.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg-icon :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" style="font-size: 24px" />
+</template>
+
+<script>
+
+export default {
+  name: 'StatusCell',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => {}
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/factory.vue b/src/views/factory.vue
index 5813229..3d08c2d 100644
--- a/src/views/factory.vue
+++ b/src/views/factory.vue
@@ -16,11 +16,121 @@
       </span>
     </div>
     <el-row class="container-main">
-      <!-- 上 -->
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
+      <el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }">
         <el-col :span="24">
-          <base-container :beilv="beilv" :height="303">
-            <img style="width: 90%; margin: auto 5%;" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
+          <base-container class="swiper-container" :beilv="beilv" :height="303">
+            <el-carousel ref="swiper1item" :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 wuliuList"
+                  :key="index"
+                  :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
+                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
+                />
+                <svg-icon
+                  v-for="(i, index) in wuliuList"
+                  :key="index"
+                  :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
+                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
+                />
+              </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-col :span="24">
+          <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"
+                  :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
+                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
+                />
+                <svg-icon
+                  v-for="(i, index) in materialList"
+                  :key="index"
+                  :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
+                  :style="{ position: 'absolute', fontSize: '24px', 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-col :span="12">
+                <base-table
+                  :page="1"
+                  :limit="7"
+                  :show-index="false"
+                  :beilv="beilv"
+                  :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">
+          <base-container title-icon="material" title="公用工程设备通信状态" class="swiper-container" :beilv="beilv" :height="279">
+            <el-row :gutter="12" style="padding: 0 24px">
+              <el-col :span="12">
+                <base-table
+                  :page="1"
+                  :limit="7"
+                  :show-index="false"
+                  :beilv="beilv"
+                  :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>
       </el-row>
@@ -31,7 +141,40 @@
 <script>
 import baseContainer from '@/components/baseContainer'
 import BaseTable from '@/components/baseTable.vue'
+import statusCell from './components/statusCell.vue'
+
 let interval = null
+const tableProp = [
+  {
+    prop: 'equipmentName',
+    label: '设备名称',
+    align: 'center'
+  },
+  {
+    prop: 'status',
+    label: '通讯状态',
+    align: 'center',
+    subcomponent: statusCell
+  }
+]
+const wuliuList = [
+  { equipmentName: '包装机', status: 1, left: 23, top: 23 },
+  { equipmentName: '输送线', status: 2, left: 27, top: 23 },
+  { equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
+  { equipmentName: 'AGV', status: 3, left: 47, top: 23 },
+  { equipmentName: '包装机', status: 1, left: 51, top: 23 },
+  { equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
+  { equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
+]
+const materialList = [
+  { equipmentName: '包装机', status: 1, left: 23, top: 23 },
+  { equipmentName: '输送线', status: 2, left: 27, top: 23 },
+  { equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
+  { equipmentName: 'AGV', status: 3, left: 47, top: 23 },
+  { equipmentName: '包装机', status: 1, left: 51, top: 23 },
+  { equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
+  { equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
+]
 
 export default {
   name: 'Factory',
@@ -47,7 +190,10 @@ export default {
       windowWidth: 0,
       date: '',
       time: '',
-      beilv: 1
+      beilv: 1,
+      tableProp,
+      wuliuList,
+      materialList
     }
   },
   created() {
@@ -59,6 +205,10 @@ export default {
       this.date = a[0]
       this.time = a[1]
     }, 1000)
+    this.beilv = document.body.offsetWidth / 1920
+    addEventListener('resize', () => {
+      this.beilv = document.body.offsetWidth / 1920
+    })
   },
   destroyed() {
     clearInterval(interval)
@@ -69,21 +219,37 @@ export default {
       const mytime = myDate.toLocaleString('chinese', { hour12: false })
       const date = mytime.split(' ')[0].split('/').join('.')
       const time = mytime.split(' ')[1]
-      return new Array(date, time)
+      return [date, time]
     },
     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()
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .factory-container {
   min-width: 100%;
   min-height: 100vh;
   // background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
-  background: url('../assets/img/choicepart/choicepart-back.png') repeat;
+  background: url('../assets/img/choicepart/factory-back.png') repeat;
   background-size: cover;
   overflow-x: scroll;
   .factory-navbar {
@@ -103,6 +269,7 @@ export default {
       position: relative;
       left: 58px;
       font-size: 32px;
+      line-height: 12vh;
     }
     .navbar-right {
       color: #49E1DE;
@@ -110,6 +277,7 @@ export default {
       position: relative;
       right: 84px;
       font-size: 32px;
+      line-height: 12vh;
       span {
         position: relative;
         .item-icon {
@@ -130,6 +298,49 @@ export default {
   }
   .container-main {
     margin-top: 24px;
+    .swiper-container {
+      position: relative;
+      user-select: none;
+      .swiper-indicator {
+        position: absolute;
+        color: #47F8DC;
+        width: 300px;
+        text-align: center;
+        font-size: 22px;
+        bottom: 22px;
+        left: 50%;
+        transform:translate(-50%);
+        z-index: 2;
+        .swiper-indicator-item {
+          max-width: 300px;
+          .swiper-indicator-text {
+            max-width: 300px;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+            margin-block-start: 0;
+            margin-block-end: 0;
+          }
+        }
+        .item-icon {
+          cursor: pointer;
+          position: absolute;
+          z-index: 3;
+        }
+        .swiper-icon-left {
+          transform: rotateY(180deg);
+          margin-right: 12px;
+          left: -36px;
+        }
+        .swiper-icon-right {
+          margin-left: 12px;
+          right: -36px;
+        }
+      }
+    }
+    // .el-carousel__arrow, .el-carousel__indicator {
+    //   display: none;
+    // }
   }
 }
 ::-webkit-scrollbar-track-piece {
diff --git a/src/views/index.vue b/src/views/index.vue
index c6ba13d..a0c6d24 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -11,7 +11,7 @@
       <span class="navbar-right">
         <span>
           {{ time }}
-          <svg-icon @click="logout" class="item-icon" icon-class="logout" />
+          <svg-icon icon-class="logout" class="item-icon" @click="logout" />
         </span>
       </span>
     </div>
@@ -58,7 +58,7 @@ export default {
     this.date = this.getTime()[0]
     this.time = this.getTime()[1]
     interval = setInterval(() => {
-      let a = this.getTime()
+      const a = this.getTime()
       this.date = a[0]
       this.time = a[1]
     }, 1000)
@@ -72,10 +72,10 @@ export default {
       const mytime = myDate.toLocaleString('chinese', { hour12: false })
       const date = mytime.split(' ')[0].split('/').join('.')
       const time = mytime.split(' ')[1]
-      return new Array(date, time)
+      return [date, time]
     },
     handelClick(item) {
-      if (item.path.substring(0,4) === 'http') {
+      if (item.path.substring(0, 4) === 'http') {
         window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`)
       } else {
         this.$router.push({
@@ -86,7 +86,7 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push('/')
-    },
+    }
   }
 }
 </script>
@@ -116,6 +116,7 @@ export default {
       position: relative;
       left: 58px;
       font-size: 32px;
+      line-height: 12vh;
     }
     .navbar-right {
       color: #49E1DE;
@@ -123,6 +124,7 @@ export default {
       position: relative;
       right: 84px;
       font-size: 32px;
+      line-height: 12vh;
       span {
         position: relative;
         .item-icon {