解决菜单变形的bug

12 months ago · 7cba9843fb
5 changed files with 84 additions and 35 deletions
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue
+++ b/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>
--- a/ruoyi-ui/src/views/JiHeExpressway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/index.vue
@ -1,12 +1,12 @@
 <template>
-  <Adaptation class="pageBox">
-    <HeaderMenu @onChange="handleChange" class="header" />
-    <div class="content">
+  <div class="pageBox">
+    <HeaderMenu @onChange="handleChange" class="header" :style="headerStyle"/>
+    <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 {
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/index.vue
+++ b/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;
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/datav/roadNet/sensors.vue
+++ b/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){
+                this.graph.clearCells();
+                this.graph = null;
+            }
            
-            const graph = new Graph({
+            this.graph = new Graph({
                container: document.getElementById('container'),
                autoResize: true,
                grid: false,
@ -114,8 +130,8 @@ export default {
            })


-            function createSub(x, y, title) {
-                return graph.addNode({
+            const createSub = (x, y, title) => {
+                return this.graph.addNode({
                    x,
                    y,
                    shape: 'sensor',
@ -132,8 +148,8 @@ export default {
                })
            }

-            function link(source, target, vertices) {
-                return graph.addEdge({
+            const link = (source, target, vertices) => {
+                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 })


            
--- a/ruoyi-ui/vue.config.js
+++ b/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.68.42:8087`, //王思祥
+        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        target: `http://10.168.68.42:8087`, //王思祥
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",