解决菜单变形的bug

ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue

@@ -15,6 +15,11 @@ export default {
     defaultHeight: {
       type: Number,
       default: () => 1080
+    },
+    headerHeight: {
+      type: Number,
+      default: () => 68
+
     }
   },
   provide() {
@@ -33,10 +38,10 @@ export default {
   computed: {
     transformStyle() {
       const obj = {};
-
       obj["transform"] = `scaleX(${this.scale.scaleX}) scaleY(${this.scale.scaleY})`;
       obj["width"] = this.defaultWidth + "px";
-      obj["height"] = this.defaultHeight + "px";
+      obj["height"] = this.defaultHeight - this.headerHeight + "px";
+      obj["top"] = this.headerHeight + "px";
       // obj.top = `calc(50% - ${(this.defaultHeight / 2) * this.scaleY}px)`;
       // obj.left = `calc(50% - ${(this.defaultWidth / 2) * this.scaleX}px)`;
 
@@ -46,12 +51,16 @@ export default {
       return this.scale
     }
   },
+  watch:{
+    headerHeight(){
+    }
+  },
   methods: {
     initScale() {
       let winW = window.innerWidth;
-      let winH = window.innerHeight;
+      let winH = window.innerHeight - this.headerHeight;
 
-      this.setScale(this.scale.scaleX = winW / this.defaultWidth, this.scale.scaleY = winH / this.defaultHeight)
+      this.setScale(this.scale.scaleX = winW / this.defaultWidth, this.scale.scaleY = winH / (this.defaultHeight - this.headerHeight))
     },
     setScale(scaleX, scaleY) {
       const cssGlobalVariable = [
@@ -141,7 +150,7 @@ body {
 <style lang="scss" scoped>
 .Adaptation {
   transition: all 0.15s linear;
-  position: absolute;
+  position: fixed;
   transform-origin: 0 0;
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <Adaptation class="pageBox">
+  <div class="pageBox">
-    <HeaderMenu @onChange="handleChange" class="header" />
+    <HeaderMenu @onChange="handleChange" class="header" :style="headerStyle"/>
-    <div class="content">
+    <Adaptation class="content" :headerHeight="headerHeight">
       <Transition name="fade">
         <router-view v-if="isShowContent" />
       </Transition>
-    </div>
+    </Adaptation>
-  </Adaptation>
+  </div>
 </template>
 
 <script>
@@ -19,14 +19,29 @@ export default {
   name: "ji_ze_gao_su",
   components: {
     HeaderMenu,
-    Adaptation,
+    Adaptation
     // ...modules
   },
   data() {
     return {
-      isShowContent:false
+      isShowContent:false,
+      headerHeight:68,
+      header: {
+        scale: 1,
+        originW: 1920,
+        originH: 68
+      },
     };
   },
+  computed:{
+    headerStyle(){
+      return {
+        width : `${this.header.originW}px`,
+        height : `${this.header.originH}px`,
+        transform : `scale(${this.header.scale}, ${this.header.scale})`
+      }
+    }
+  },
   mounted(){
     getBoardBaseData().then(res => {
       this.isShowContent = true;
@@ -34,8 +49,18 @@ export default {
     // Promise.all()getBoardBaseData().then(()=>{
     //   this.isShowContent = true ;
     // });
+    window.addEventListener(
+      "resize",
+      _.debounce(this.calcHeaderScale.bind(this), 360)
+    );
+    this.calcHeaderScale();
   },
   methods: {
+    calcHeaderScale(){
+      let winW = window.innerWidth;
+      this.header.scale = winW / this.header.originW;
+      this.headerHeight = this.header.scale * this.header.originH;
+    },
     handleChange(activeMenu) {
       this.$route.path != activeMenu.path && this.$router.push(activeMenu.path);
     }
@@ -66,15 +91,14 @@ export default {
   }
 
   .header {
-    height: 68px;
+    position: fixed;
+    transform-origin: left top;
+    left: 0; top:0; z-index: 1000;
   }
 
   .content {
-    flex: 1;
-    height: 0;
     display: flex;
     flex-direction: row;
-    position: relative;
     pointer-events: none;
 
     ::v-deep {

ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/index.vue

@@ -316,7 +316,7 @@ h4, p, ul,li{ margin: 0; padding:0;}
         flex-basis: 816px; display: flex; flex-direction: column; justify-content: space-between;
     }
     .share{
-        height: 420px; display: flex; justify-content: center; align-items: center;
+        flex:1.2; margin-bottom: 46px; display: flex; justify-content: center; align-items: center;
         .arrow{ transform: rotateZ(90deg); left: 48%; top:calc(100% + 8px);}
         .shareCon{
             background-image: url(./img/ShareAll.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 756px; height: 245px; display: flex; align-items: center; justify-content: center; position: relative;
@@ -340,7 +340,7 @@ h4, p, ul,li{ margin: 0; padding:0;}
     }
 
     .apply{
-        height: 390px; display: flex; flex-wrap: wrap; padding: 40px 45px; align-content: stretch;
+        flex: 1; display: flex; flex-wrap: wrap; padding: 40px 45px; align-content: stretch;
         .applyUnit{ flex-basis: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center;
            .con{ width: 140px; text-align: center; align-items: center; justify-content: center;
                 h4, p{ font-family: PangMenZhengDao; font-size: 15px; line-height: 22px; margin: 0; padding:0;

ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/sensors.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="compBox">
-    <div id="container" class="compCon">
+    <div id="container" class="compCon" ref="canvas">
     </div>
 </div>
 </template>
@@ -12,22 +12,34 @@ export default {
     name: 'sensors',
     data(){
         return {
-            
+            graph:null
         }
     },
     components: {
     },
     mounted(){
-        this.initGraph();
+        this.refresh();
+        window.addEventListener("resize",
+            _.debounce(this.refresh.bind(this), 1000)
+        )
     },
     methods: {
-        initGraph(){
+        refresh(){
-
+            let _this = this;
+            this.$nextTick(() => {
+                _this.initGraph(_this.$refs["canvas"].offsetHeight);
+            })
+        },
+        initGraph(canvasHeight){
+            
+            let unitH = 42;
+            
+            let average = unitH + (canvasHeight - unitH*13)/12;
             Graph.registerNode(
                 'sensor',
                 {
                     width: 180,
-                    height: 42,
+                    height: unitH,
                     markup: [
                         {
                             tagName: 'rect',
@@ -97,8 +109,12 @@ export default {
                 },
                 true,
             )
-
+            if(this.graph){
-            const graph = new Graph({
+                this.graph.clearCells();
+                this.graph = null;
+            }
+            
+            this.graph = new Graph({
                 container: document.getElementById('container'),
                 autoResize: true,
                 grid: false,
@@ -114,8 +130,8 @@ export default {
             })
 
 
-            function createSub(x, y, title) {
+            const createSub = (x, y, title) => {
-                return graph.addNode({
+                return this.graph.addNode({
                     x,
                     y,
                     shape: 'sensor',
@@ -132,8 +148,8 @@ export default {
                 })
             }
 
-            function link(source, target, vertices) {
+            const link = (source, target, vertices) => {
-                return graph.addEdge({
+                return this.graph.addEdge({
                     source: {
                         cell: source,
                         anchor: {
@@ -153,7 +169,7 @@ export default {
                 })
             }
 
-            const main = graph.addNode({
+            const main = this.graph.addNode({
                 shape: 'circle',
                 x: 310,
                 y: 80,
@@ -184,7 +200,7 @@ export default {
             ]
 
             subItems.forEach((item, index) => {
-                let temp = createSub(0, index * 68, item);
+                let temp = createSub(0, index * average, item);
                 link(main, temp);
             })
 
@@ -219,7 +235,7 @@ export default {
             //     },
             // ])
 
-            // graph.zoomToFit({ padding: 0, maxScale: 1, mainScale: 1 })
+            // this.graph.zoomToFit({ padding: 0, maxScale: 1, mainScale: 1 })
 
 
             

ruoyi-ui/vue.config.js

@@ -51,8 +51,8 @@ module.exports = {
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
         // target: `http://10.168.78.135:8087`,  //王钦
-        target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
-        // target: `http://10.168.68.42:8087`, //王思祥
+        target: `http://10.168.68.42:8087`, //王思祥
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",