.env.dev

@@ -1,8 +1,8 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-06-03 08:50:41
+ # @LastEditTime: 2024-06-03 15:41:29
- # @LastEditors: DY
+ # @LastEditors: zhp
  # @Description:
 ###
 # 开发环境配置

src/mixins/chart.js

@@ -4,16 +4,16 @@ function __resizeHandler(entries) {
   console.log(entries)
   for (const entry of entries) {
     if (entry.contentBoxSize) {
-    // const contentBoxSize = Array.isArray(entry.contentBoxSize)
+    const contentBoxSize = Array.isArray(entry.contentBoxSize)
-    //       ? entry.contentBoxSize[0]
+          ? entry.contentBoxSize[0]
-    //       : entry.contentBoxSize;
+          : entry.contentBoxSize;
-    //     this.chart_mixin_chartInstance.resize({
+        this.chart_mixin_chartInstance.resize({
-    //       width:
+          width:
-    //         contentBoxSize.inlineSize < this.MIN_WIDTH
+            contentBoxSize.inlineSize < this.MIN_WIDTH
-    //           ? this.MIN_WIDTH
+              ? this.MIN_WIDTH
-    //           : contentBoxSize.inlineSize,
+              : contentBoxSize.inlineSize,
-    //       height: contentBoxSize.blockSize,
+          height: contentBoxSize.blockSize,
-    //     });
+        });
     } else {
       // manipulate contentRect
       this.chart_mixin_chartInstance.resize({

src/views/copilot/efficiency/components/StdRate.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-31 16:38:29
+ * @LastEditTime: 2024-06-03 16:40:45
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <!-- <div class="order"> -->
-  <div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px">
+  <div class="std-rate" style="width: 100%">
     <!-- <div class="span-2">
         <StdRateItem :period="period" :city="cities[5]" />
       </div> -->
@@ -106,12 +106,12 @@ export default {
 <style scoped lang="scss">
 .std-rate {
   display: flex;
-  // gap: 1px;
+  gap: 16px;
   // flex: 1 1 auto;
-
+  flex-direction: column;
   // display: -webkit-box;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
-  align-items: center;
+  // align-items: center;
   // grid-template-columns: repeat(2, 1fr);
   // grid-template-rows: repeat(4, 1fr);
 }
@@ -120,10 +120,10 @@ export default {
 }
 .flex-item{
   // flex: 1 1 auto;
-  width: 50%;
+  // width: 50%;
 }
 .span-2 {
-  // flex: 1 1 auto;
+  flex: 1 1 auto;
-  flex-basis: 100%;
+  // flex-basis: 100%;
 }
 </style>

src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-31 15:55:00
+ * @LastEditTime: 2024-06-03 16:13:52
  * @LastEditors: zhp
  * @Description:
 -->
@@ -11,7 +11,7 @@
       <span v-for="(item,index) in legend" :key="index" class="legend-item"
         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
     </div>
-    <div ref="oeeChart" style="height:100%;width:100%"></div>
+    <div ref="oeeChart" style="height:94%;width:100%"></div>
   </chart-container>
 </template>
 
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
-  name: "BarChartBase",
+  name: "barChartBaseoee",
   components: {
     ChartContainer,
   },
@@ -220,30 +220,30 @@ export default {
       this.canvasReset()
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
-    // isFullscreen(val) {
+    isFullscreen(val) {
       // this.actualOptions.series.map((item) => {
       //   item.barWidth = val ? 18 : 12;
       // });
       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-    //   // if (val === false && this.isOpen === true) {
+      // if (val === false && this.isOpen === true) {
-    //   //   console.log(val)
+      //   console.log(val)
-    //   //   this.width = 97 + '%'
+      //   this.width = 97 + '%'
-    //   //   this.canvasReset()
-    //   // } else if (val === false && this.isOpen === false) {
-    //   //   this.width = 100 + '%'
-    //   //   this.canvasReset()
-    //   // }
-    //   // this.actualOptions.series.map((item) => {
-    //   //   item.barWidth = val ? 18 : 12;
-    //   // });
-    //   // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-    //   // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-    //   // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-    //   this.initChart(this.actualOptions)
       //   this.canvasReset()
-    // },
+      // } else if (val === false && this.isOpen === false) {
+      //   this.width = 100 + '%'
+      //   this.canvasReset()
+      // }
+      // this.actualOptions.series.map((item) => {
+      //   item.barWidth = val ? 18 : 12;
+      // });
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initChart(this.actualOptions)
+      this.canvasReset()
+    },
     series(val) {
       if (!val) {
         this.initChart(this.options);
@@ -268,11 +268,11 @@ export default {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
-    // if (screenfull.isEnabled) {
+    if (screenfull.isEnabled) {
-    //   screenfull.on("change", () => {
+      screenfull.on("change", () => {
-    //     this.isFullscreen = screenfull.isFullscreen;
+        this.isFullscreen = screenfull.isFullscreen;
-    //   });
+      });
-    // }
+    }
     this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);

src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-23 15:50:44
- * @LastEditTime: 2024-05-31 15:54:41
+ * @LastEditTime: 2024-06-03 16:14:03
  * @LastEditors: zhp
  * @Description:
 -->
@@ -11,7 +11,7 @@
       <span v-for="(item,index) in legend" :key="index" class="legend-item"
         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
     </div>
-    <div ref="oeeChart" style="height:100%;width:100%"></div>
+    <div ref="oeeChart" style="height:94%;width:100%"></div>
   </chart-container>
 </template>
 
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
 export default {
-  name: "BarChartBase",
+  name: "barChartBaseoee",
   components: {
     ChartContainer,
   },
@@ -221,12 +221,12 @@ export default {
     },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
+      // this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 12;
-      });
+      // });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
       // if (val === false && this.isOpen === true) {
       //   console.log(val)
       //   this.width = 97 + '%'
@@ -241,8 +241,8 @@ export default {
       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      // this.initChart(this.actualOptions)
+      this.initChart(this.actualOptions)
-      // this.canvasReset()
+      this.canvasReset()
     },
     series(val) {
       if (!val) {
@@ -267,11 +267,11 @@ export default {
     //     this.isFullscreen = screenfull.isFullscreen;
     //   });
     // }
-    // if (screenfull.isEnabled) {
+    if (screenfull.isEnabled) {
-    //   screenfull.on("change", () => {
+      screenfull.on("change", () => {
-    //     this.isFullscreen = screenfull.isFullscreen;
+        this.isFullscreen = screenfull.isFullscreen;
-    //   });
+      });
-    // }
+    }
     this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);

src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue

@@ -270,7 +270,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
     gap: 3px;
     backdrop-filter: blur(24px);
   .cities {
@@ -283,6 +283,7 @@ export default {
       flex: 1 1 auto;
       padding: 0 15%;
       /* margin: 10%; */
+      height: 16vh;
       /* min-width: 300px; */
       align-self: stretch;
     }

src/views/copilot/efficiency/index.vue

@@ -1,25 +1,31 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:04:53
- * @LastEditTime: 2024-05-31 13:19:34
+ * @LastEditTime: 2024-06-03 16:08:27
  * @LastEditors: zhp
  * @Description:
 -->
 
 <template>
   <div class="efficiency-copilot">
+    <section class="top flex">
       <Container title="芯片良率" icon="chip2">
         <ChipRate :period="period" :than="than" />
       </Container>
       <Container title="标准组件良率" icon="std">
         <StdRate :period="period" :than="than" />
       </Container>
+    </section>
+    <section class="bottom flex">
       <Container title="芯片OEE" icon="chip">
         <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
       </Container>
       <Container title="转化效率" icon="cube">
         <TransformRate :transformRate="transformRate" :period="period" :than="than" />
       </Container>
+    </section>
+
+
   </div>
 </template>
 
@@ -31,7 +37,7 @@ import StdRateVue from "./components/StdRate.vue";
 import TransformRateVue from "./components/TransformRate.vue";
 
 export default {
-  name: "EfficiencyCopilot",
+  name: "efficiencyCopilot",
   components: {
     Container,
     ChipOee: ChipOeeVue,
@@ -88,7 +94,30 @@ export default {
 };
 </script>
 
+
 <style scoped>
+.efficiency-copilot {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.flex {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.top > div,
+.bottom > div {
+  height: 100%;
+}
+
+</style>
+
+<!-- <style scoped>
+
 .efficiency-copilot {
   flex: 1;
   display: grid;
@@ -100,4 +129,4 @@ export default {
 .efficiency-copilot > div {
   height: 100%;
 }
-</style>
+</style> -->

src/views/copilot/efficiency/options/chipOptions.js

@@ -22,7 +22,7 @@ export default ({
     textAlign: "center",
     textStyle: {
       fontWeight: 600,
-      fontSize: 32,
+      fontSize: 26,
       color: "#fffd",
     },
     subtext: `\u2002${subtitle}\u2002`,

src/views/copilot/efficiencyContainer.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 16:04:18
- * @LastEditTime: 2024-05-31 13:16:26
+ * @LastEditTime: 2024-06-03 15:45:58
  * @LastEditors: zhp
  * @Description:
 -->
@@ -95,13 +95,14 @@ export default {
 </script>
 <style>
 
+
 .copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;
   left: -16px;
   /* top: -8px; */
-  height: calc(100% + 240px);
+  height: calc(100% + 30px);
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
@@ -110,12 +111,12 @@ export default {
   gap: 8px;
 }
 
-.produce{
+/* .produce{
   height: calc(100% + 38px);
-}
+} */
-.other {
+/* .other { */
   /* height: calc(100% + 240px); */
-}
+/* } */
 .copilot-footer {
   /** position: absolute;
   bottom: 10px; **/

src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-20 13:32:59
- * @LastEditTime: 2024-05-31 15:05:20
+ * @LastEditTime: 2024-06-03 16:26:24
  * @LastEditors: zhp
  * @Description:
 -->
@@ -151,7 +151,7 @@ export default {
         ];
       }
       let titleValue =
-           vt[1] != null && vt[2] !== 0
+        vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined)
           ? this.formatNumber((vt[1] / vt[2] * 100)) + '%'
           : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
             ? "100%" : '0%',

src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue

@@ -1,17 +1,10 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-30 16:00:50
- * @LastEditTime: 2024-05-31 16:15:51
+ * @LastEditTime: 2024-06-03 16:26:03
  * @LastEditors: zhp
  * @Description:
 -->
-<!--
-    filename: DoubleRingWrapper.vue
-    author: liubin
-    date: 2024-04-17 09:55:12
-    description:
--->
-
 <template>
   <div class="double-ring-wrapper">
     <template>

src/views/copilot/yield/options/double-ring-chart-options.js

@@ -22,7 +22,7 @@ export default ({
     textAlign: "center",
     textStyle: {
       fontWeight: 600,
-      fontSize: 32,
+      fontSize: 20,
       color: "#fffd",
     },
     subtext: `\u2002${subtitle}\u2002`,
@@ -38,7 +38,7 @@ export default ({
     {
       type: "pie",
       name: "当前目标",
-      radius: ["70%", "85%"],
+     radius: ["80%", "90%"],
       center: ["45%", "52%"],
       emptyCircleStyle: {
         color: "#042c5f33",
@@ -47,7 +47,7 @@ export default ({
     // 数据 series
     {
       type: "pie",
-      radius: ["70%", "85%"],
+      radius: ["80%", "90%"],
       center: ["45%", "52%"],
       avoidLabelOvervlap: false,
       label: {
@@ -92,7 +92,7 @@ export default ({
     // 数据 series2 - 2023累计
     {
       type: "pie",
-      radius: ["55%", "70%"],
+      radius: ["70%", "80%"],
       center: ["45%", "52%"],
       avoidLabelOvervlap: false,
       label: {

src/views/dashboard/charts/Bipv.vue

@@ -1,16 +1,10 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-05-31 16:14:09
+ * @LastEditTime: 2024-06-03 08:55:42
  * @LastEditors: zhp
  * @Description:
 -->
-<!--
-    filename: Bipv.vue
-    author: liubin
-    date: 2024-04-10 15:39:54
-    description:
--->
 
 <template>
   <right-chart-base
@@ -31,7 +25,7 @@ export default {
   data() {
     const year = new Date().getFullYear();
     // 城市数组的顺序必须是固定的
-    const cities = ["瑞昌", "邯郸",
+    const cities = [ "邯郸",
       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
 
     ];
@@ -80,15 +74,15 @@ export default {
       return [
         {
           name: `${new Date().getFullYear()}年目标值`,
-          data: bipvOutput.target,
+          data: bipvOutput.target.splice(0, 1),
         },
         {
           name: `${new Date().getFullYear() - 1}年`,
-          data: bipvOutput.previous,
+          data: bipvOutput.previous.splice(0, 1)
         },
         {
           name: `${new Date().getFullYear()}年`,
-          data: bipvOutput.current,
+          data: bipvOutput.current.splice(0, 1),
         },
       ];
     },

src/views/dashboard/charts/LeftChartBase.vue

@@ -111,9 +111,6 @@ export default {
             name: '', // this.series[0].name,
             type: "bar",
             barWidth: 12,
-            itemStyle: {
-              borderRadius: [10, 10, 0, 0],
-              normal: {
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
@@ -121,8 +118,9 @@ export default {
                 color: '#DFF1FE',
                 fontSize: 16
               }
-                }
             },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
               color: {
                 type: "linear",
                 x: 0,
@@ -156,8 +154,19 @@ export default {
             name: '', // this.series[1].name,
             type: "bar",
             barWidth: 12,
+            label: {
+              show: true, //开启显示
+              position: 'top', //在上方显示
+              textStyle: { //数值样式
+                color: '#DFF1FE',
+                fontSize: 16
+              }
+            },
             itemStyle: {
               borderRadius: [10, 10, 0, 0],
+              // normal: {
+
+              // },
               color: {
                 type: "linear",
                 x: 0,

src/views/index.vue

@@ -3,8 +3,8 @@
     <div id="map-container">
       <!-- <div v-if="visible" class="cdLine"></div> -->
       <!-- <div v-if="visible" class="zzLine"></div> -->
-      <div v-if="visible" class="rcLine"></div>
+      <!-- <div v-if="visible" class="rcLine"></div> -->
-      <div v-if="visible" class="rcLineTwo"></div>
+      <!-- <div v-if="visible" class="rcLineTwo"></div> -->
       <div v-if="visible" class="hdLine"></div>
       <div v-if="visible" class="hdLineTwo"></div>
       <!-- <div v-if="visible" class="ksLine"></div> -->
@@ -39,12 +39,12 @@
       </div>
     </div>
     <company-info v-if="visible" :info="info" :position="rcHintPosition" />
-    <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" />
+    <!-- <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" /> -->
-    <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" />
+    <!-- <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" /> -->
     <hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
-    <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" />
+    <!-- <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" /> -->
-    <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" />
+    <!-- <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" /> -->
-    <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" />
+    <!-- <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" /> -->
   </div>
 </template>
 
@@ -69,13 +69,17 @@ const LOCATIONS = [
   // 蚌埠2
   // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
   // 江西 瑞昌
-  { x: 60, y: 58, tx: 68, ty: 52, path: 'factoryData/factory-data' },
+  { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:68.8,lty:52, path: 'factoryData/factory-data' },
   // 湖南 株洲
   // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
   // 邯郸
-  { x: 58, y: 45, tx: 47, ty: 34, path: 'factoryData/hdIndex' },
+  { x: 58, y: 45, tx: 47, ty: 34, lx: 58.7, ly: 34, ltx: 53, lty: 34, path: 'factoryData/hdIndex' },
 ];
-
+// rcLine.style.left = `66.8%`;
+// rcLine.style.top = `52%`;
+// rcLineTwo.className = "rcLineTwo";
+// rcLineTwo.style.left = `58.7%`;
+// rcLineTwo.style.top = `34%`;
 export default {
   name: "Index",
   components: {
@@ -248,6 +252,16 @@ export default {
         // this.ksInfo = templateInfo;
       // }
         (position === LOCATIONS[0]) {
+        const rcLine = document.createElement("div");
+        const rcLineTwo = document.createElement("div");
+        rcLine.className = "rcLine";
+        rcLine.style.left = `${position.lx}%`;
+        rcLine.style.top = `${position.ly}%`;
+        rcLineTwo.className = "rcLineTwo";
+        rcLineTwo.style.left = `${position.ltx}%`;
+        rcLineTwo.style.top = `${position.lty}%`;
+        document.getElementById("map-container").appendChild(rcLine);
+        document.getElementById("map-container").appendChild(rcLineTwo);
         this.rcHintPosition = position;
         templateInfo.companyName = "瑞昌中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
@@ -264,6 +278,16 @@ export default {
         // templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
         // this.zzInfo = templateInfo;
       } else if (position === LOCATIONS[1]) {
+        const hdLine = document.createElement("div");
+        const hdLineTwo = document.createElement("div");
+        hdLine.className = "hdLine";
+        hdLine.style.left = `${position.lx}%`;
+        hdLine.style.top = `${position.ly}%`;
+        hdLineTwo.className = "hdLineTwo";
+        hdLineTwo.style.left = `${position.ltx}%`;
+        hdLineTwo.style.top = `${position.lty}%`;
+        document.getElementById("map-container").appendChild(hdLine);
+        document.getElementById("map-container").appendChild(hdLineTwo);
         this.hdHintPosition = position;
         templateInfo.companyName = "邯郸中建材";
         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
@@ -350,9 +374,9 @@ export default {
 .rcLine {
   display: inline-block;
   position: absolute;
-  left: 61%;
+  /* left: 61%; */
-  width: 100px;
+  width: 7.9vw;
-  top: 61.5%;
+  /* top: 61.5%; */
   /* x: 60, y: 58, */
   height: 1px;
   border: 2px dashed #FFCF00;
@@ -360,12 +384,12 @@ export default {
 
 .rcLineTwo {
   position: absolute;
-  left: 66.8%;
+  /* left: 66.8%; */
   width: 1px;
-  top: 52%;
+  /* top: 52%; */
   display: inline-block;
   /* // x: 60, y: 58, */
-  height: 90px;
+  height: 5vw;
   border: 2px dashed #FFCF00;
 }
 
@@ -376,13 +400,13 @@ export default {
   top: 34%;
   display: inline-block;
   /* // x: 60, y: 58, */
-  height: 100px;
+  height: 6vw;
   border: 2px dashed #FFCF00;
 }
 .hdLineTwo {
   position: absolute;
   left: 53%;
-  width: 90px;
+  width: 5vw;
   top: 34%;
   display: inline-block;
   /* // x: 60, y: 58, */