update

src/views/EquipmentManager/HomePage.vue

@@ -292,21 +292,25 @@ export default {
       sparepartsProps,
       sparepartsDatalist,
       rightSideProps,
-      rightSideDatalist
+      rightSideDatalist,
       // refreshKey: 0
+      scale: 1
     }
   },
   computed: {
     ...mapGetters(['sidebar'])
-  },
+  }, 
   mounted() {
-    // window.addEventListener('resize', () => {
-    //   console.log('resizing....')
-    //   this.refreshSize++
-    //   this.$nextTick(() => {
-    //     this.$forceUpdate()
-    //   })
-    // }) // 不可行
+    this.$nextTick(() => {
+      this.scale = this.$refs['cockpit-container-equipment'].offsetWidth / 1920
+      this.$refs['cockpit-container-equipment'].style.setProperty('--scale', this.scale)
+
+      this.$watch(() => this.$refs['cockpit-container-equipment'].offsetWidth, function(v, o) {
+        console.log('resize ... ref..')
+        this.scale = this.$refs['cockpit-container-equipment'].offsetWidth / 1920
+        this.$refs['cockpit-container-equipment'].style.setProperty('--scale', this.scale)
+      })
+    })
   },
 
   methods: {

src/views/EquipmentManager/components/TechyHeader.vue

@@ -1,17 +1,36 @@
 <template>
   <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm">
-    <span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
+    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <span class="techy-header__title">{{ headTitle }}</span>
 
-    <span class="fullscreen-btn" @click="handleClick('fullscreen')">
-      <span v-if="isFullScreen" v-html="unfullScreenSvg" />
-      <span v-else v-html="fullScreenSvg" />
-    </span>
+    <!-- <div class="date">2022.10.14</div>
+    <div class="time">20:12:24</div> -->
+
+    <div class="fullscreen-btn">
+      <!-- <span style="color: #52fff1; margin-right: 8px;" @click="handleClick('home')" v-html="homeSvg" /> -->
+      <span v-if="isFullScreen" @click="handleClick('fullscreen')" v-html="unfullScreenSvg" />
+      <span v-else @click="handleClick('fullscreen')" v-html="fullScreenSvg" />
+    </div>
   </header>
 </template>
 
 <script>
-const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+// const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>首页</title>
+    <g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1大屏-数字工厂总览" transform="translate(-1824.000000, -46.000000)" fill-rule="nonzero">
+            <g id="首页" transform="translate(1824.000000, 46.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
+                <path d="M3.36212554,9.99760304 L14.4561021,2.03491762 C15.37881,1.37257076 16.62119,1.37257076 17.5438979,2.03491762 L28.6378745,9.99760304 C29.7265595,10.7789878 30.3723957,12.0369335 30.3723957,13.3770071 L30.3723957,26.217608 C30.3723957,28.5153002 28.5096576,30.3780383 26.2119654,30.3780383 L5.78803465,30.3780383 C3.49034244,30.3780383 1.62760433,28.5153002 1.62760433,26.217608 L1.62760433,13.3773853 C1.62760433,12.0371783 2.27333209,10.7790656 3.36212554,9.99760304 Z M4.68552062,11.8410519 C4.19052975,12.196239 3.89692996,12.7681449 3.89692996,13.3773853 L3.89692996,26.217608 C3.89692996,27.2620363 4.74360637,28.1087127 5.78803465,28.1087127 L26.2119654,28.1087127 C27.2563936,28.1087127 28.10307,27.2620363 28.10307,26.217608 L28.10307,13.3773853 C28.10307,12.7681449 27.8094702,12.196239 27.3144794,11.8410519 L16.2205028,3.87836647 C16.0887105,3.78379718 15.9112895,3.78379718 15.7794972,3.87836647 L4.68552062,11.8414301 L4.68552062,11.8410519 Z" id="形状" fill="#42D0CE"></path>
+                <path d="M16.25,17 C16.8972087,17 17.4295339,17.4918747 17.4935464,18.1221948 L17.5,18.25 L17.5,28.25 C17.5,28.9403559 16.9403559,29.5 16.25,29.5 C15.6027913,29.5 15.0704661,29.0081253 15.0064536,28.3778052 L15,28.25 L15,18.25 C15,17.5596441 15.5596441,17 16.25,17 Z" id="路径-3" fill="#42D0CE"></path>
+            </g>
+        </g>
+    </g>
+</svg>`
+
+// const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+const fullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>编组 54备份</title>
     <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
@@ -23,7 +42,8 @@ const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" versi
     </g>
 </svg>`
 
-const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+// const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>编组 54备份 2</title>
     <g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="编组-54备份-2">
@@ -32,13 +52,13 @@ const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" ver
         </g>
     </g>
 </svg>`
-
 export default {
   name: 'TechyHeader',
   props: ['headTitle'],
   data() {
     return {
       fullScreenSvg,
+      homeSvg,
       unfullScreenSvg,
       isFullScreen: false
     }
@@ -48,6 +68,8 @@ export default {
       if (source === 'fullscreen') {
         this.isFullScreen = !this.isFullScreen
         this.$emit('toggle-full-screen', { full: this.isFullScreen })
+      } else if (source === 'home') {
+        this.$router.push('/')
       }
     }
   }
@@ -55,6 +77,16 @@ export default {
 </script>
 
 <style scoped>
+/* @font-face {
+  font-family: 'zcoolqingkehuangyouti';
+  src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'),
+      url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'),
+      url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+} */
+
 .techy-header {
   background: transparent;
   display: flex;
@@ -64,29 +96,70 @@ export default {
   color: white;
   /* font-size: 24px; */
   font-size: 2vh;
-  padding: calc(100vw / 1920 * 16) 0;
+  padding: calc(100vw / 1920 * 32) 0;
   line-height: 1;
   background: url(./header-new.png) no-repeat;
   /** 背景图片好像左右不对称 : */
   /* background-position: bottom left 40px;  */
   /* background-size: cover; */
   background-size: 100% 100%;
+  /* background-position: bottom left calc(100vw / 1920 * 40); */
   background-position: bottom left calc(100vw / 1920 * 40);
-  height: calc(100vw / 1920 * 80);
+  height: calc(100vmin / 1920 * 128);
 }
 
 .logo-img {
-  width: calc(100vw / 1920 * 24);
+  width: calc(100vmin / 1920 * 48);
+}
+
+.techy-header__title {
+  display: line-block;
+  margin-left: calc(100vmin / 1920 * 12);
+  /* font-size: 29px; */
+  font-size: calc(100vmin / 1920 * 48);
+  line-height: 41px;
+  letter-spacing: 4px;
+  text-shadow: 0px 0px 11px rgba(221, 237, 255, 0.34);
+}
+
+.date,
+.time {
+  /* font-family: zcoolqingkehuangyouti, sans-serif; */
+  font-size: calc(100vmin / 1920 * 42);
+  line-height: 1.5;
+  /* font-size: 28px;
+  line-height: 36px; */
+  color: #49e1de;
+  letter-spacing: 0.8px;
+  position: absolute;
+  bottom: calc(100vmin / 1920 * 14);
+}
+
+.date {
+  /* left: 72px; */
+  left: calc(100vmin / 1920 * 72);
+}
+
+.time {
+  /* right: 128px; */
+  right: calc(100vmin / 1920 * 186);
 }
 
 .fullscreen-btn {
-  width: 32px;
-  height: 32px;
+  /* height: 32px; */
   cursor: pointer;
   position: absolute;
   /* right: 24px;  */
   /** techy-body 的内部 padding 值 */
-  right: calc(100vw / 1920 * 24);
+  right: calc(100vmin / 1920 * 32);
+  /* top: 42px; */
+  top: calc(100vmin / 1920 * 64);
   bottom: 0;
 }
+
+.fullscreen-btn > span {
+  display: inline-block;
+  width: calc(100vmin / 1920 * 52);
+  height: calc(100vmin / 1920 * 52);
+}
 </style>

src/views/EquipmentManager/mockData.js

@@ -45,11 +45,11 @@ export const equipmentExceptionDatalist = [
   { 'eqName': 'A1一次固化机', 'pl': 'E线', 'content': '开化是专品直', 'creator': '郭娜', 'time': '1997-06-08 06:14:37', 'priority': 1 },
   { 'eqName': 'B1一次冷却机', 'pl': 'B线', 'content': '书记因地观同展土军信', 'creator': '薛洋', 'time': '2006-03-15 10:39:30', 'priority': 2 },
   { 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
-  { 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 5 },
+  { 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
   { 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
   { 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
   { 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
-  { 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 5 },
+  { 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 1 },
   { 'eqName': 'B1二次镀膜机', 'pl': 'B线', 'content': '命些种保较会', 'creator': '罗秀英', 'time': '1986-04-02 07:40:03', 'priority': 2 },
   { 'pl': 'B线', 'content': '增元少号安场明去在亲', 'creator': '于丽', 'time': '2004-08-11 11:10:57', 'priority': 4 }]
 
@@ -89,16 +89,16 @@ export const equipmentAlarmProps = [
 
 export const equipmentAlarmDatalist = [
   { 'eqName': 'A1预热机', 'eqCode': 'SB501464', 'pl': 'C线', 'content': '使决方不相动', 'priority': 3 },
-  { 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 5 },
+  { 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 1 },
   { 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 5 },
+  { 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
   { 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
-  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 5 },
+  { 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
   {
-    'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 5
+    'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
   },
-  { 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 5 },
-  { 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 5 },
+  { 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 2 },
+  { 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 1 },
   { 'eqName': 'A钢化炉', 'eqCode': 'SB19064', 'pl': 'D线', 'content': '很这置合它里革民', 'priority': 4 }
 ]