大屏

@@ -40,6 +40,9 @@ export default {
       handler (options) {
         // 设置true清空echart缓存
         this.chart.setOption(options, true)
+            window.addEventListener('resize',()=>{
+      this.chart.resize()
+})
       },
       deep: true
     }
@@ -58,9 +61,6 @@ export default {
       this.chart = this.$echarts.init(this.$el, 'tdTheme')
       this.chart.setOption(this.options, true)
 
-       window.addEventListener("resize", function() {
-       this.chart.resize();
-      });
 
     }
   }

 <template>
   <!-- 柱状图 -->
-  <Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
+  <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart>
 </template>
 
 <script>

 <template>
   <!-- 地图 -->
-  <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="53vh"
+  <Echart id="centreLeft2Chart" class="centreLeft2Chart":key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
     :options="options"></Echart>
 </template>
 
@@ -27,8 +27,7 @@ export default {
    mounted() {
    window.addEventListener("resize", () => {
       this.key++
-    });
-  },
+    });  },
   watch: {
     cdata: {
       handler (newData) {

 <template>
-  <Echart
-    :options="options"
-    id="centreLeft1Chart"
-    :key="key"
-    height="225px"
-    width="80%"
-  ></Echart>
+  <Echart :options="options" id="centreLeft1Chart" :key="key" height="225px" width="80%"></Echart>
 </template>
 <script>
-import Echart from "@/common/echart";
+import Echart from '@/common/echart'
 export default {
   components: {
     Echart,
   },
    data() {
     return {
-      key: 0,
-    };
+      key:0
+    }
     },
   props: {
     cdata: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
   },
-  mounted() {
-    window.addEventListener("resize", () => {
-      this.key++;
-    });
-  },
   watch: {
     cdata: {
-      handler(newData) {
+      handler (newData) {
+        console.log("newData",newData);
         this.options = {
-          series: [
-            {
-              name: "Access From",
-              type: "pie",
-               center: "65%",
-              radius: "50%",
-              data: newData.seriesData,
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: "rgba(0, 0, 0, 0.5)",
+         grid: {
+            right:"1%",
+            bottom:"4%"
           },
+          color: [
+            "#37a2da",
+            "#32c5e9",
+            "#9fe6b8",
+            "#ffdb5c",
+            "#ff9f7f",
+            "#fb7293",
+            "#e7bcf3",
+            "#8378ea"
+          ],
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
           },
+          toolbox: {
+            show: true
           },
+          calculable: true,
+          series: [
+            {
+              name: "业务量",
+              type: "pie",
+              radius: [0,100],
+              roseType: "area",
+              data: newData.seriesData
+            }
           ],
-        };
-        this.key++;
+
+        }
+         this.key++
       },
       immediate: true,
-      deep: true,
-    },
-  },
+      deep: true
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+#centreLeft1Chart {
+  margin-bottom: 10px;
+  margin-left: 60px;
+}
+</style>

+// 来自 https://github.com/amfe/lib-flexible/blob/2.0/index.js
+(function flexible(window, document) {
+  var docEl = document.documentElement;
+  // 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
+  var dpr = window.devicePixelRatio || 1;
+
+  //根据分辨率调整全局字体大小
+  function setBodyFontSize() {
+    // html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + "px";
+    } else {
+      // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
+      document.addEventListener("DOMContentLoaded", setBodyFontSize);
+    }
+  }
+  setBodyFontSize();
+
+  // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 10;
+    // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
+    docEl.style.fontSize = rem + "px";
+  }
+
+  setRemUnit();
+
+  // 监听resize事件——屏幕大小发生变化时触发
+  window.addEventListener("resize", setRemUnit);
+  // 监听pageshow事件——显示页面时触发
+  window.addEventListener("pageshow", function(e) {
+    // 若是浏览器中点击后退时显示页面，则重置rem
+    if (e.persisted) {
+      setRemUnit();
+    }
+  });
+
+  // 检测是否支持0.5px
+  if (dpr >= 2) {
+    var fakeBody = document.createElement("body");
+    var testElement = document.createElement("div");
+    testElement.style.border = ".5px solid transparent";
+    fakeBody.appendChild(testElement);
+    docEl.appendChild(fakeBody);
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add("hairlines");
+    }
+    docEl.removeChild(fakeBody);
+  }
+})(window, document);
+

+<template>
+  <div
+    class="ScaleBox"
+    ref="ScaleBox"
+    :style="{
+      width: width + 'px',
+      height: height + 'px',
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScaleBox",
+  props: {},
+  data() {
+    return {
+      scale: 0,
+      width: 1920,
+      height: 1080,
+    };
+  },
+  mounted() {
+    this.setScale();
+    window.addEventListener("resize", this.debounce(this.setScale));
+  },
+  methods: {
+    getScale() {
+      // 固定好16：9的宽高比，计算出最合适的缩放比
+      const { width, height } = this;
+      const wh = window.innerHeight / height;
+      const ww = window.innerWidth / width;
+      console.log(ww < wh ? ww : wh);
+      return ww < wh ? ww : wh;
+    },
+    setScale() {
+      // 获取到缩放比例，设置它
+      this.scale = this.getScale();
+      if (this.$refs.ScaleBox) {
+        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+      }
+    },
+    debounce(fn, delay) {
+      const delays = delay || 500;
+      let timer;
+      return function () {
+        const th = this;
+        const args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(th, args);
+        }, delays);
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+#ScaleBox {
+  --scale: 1;
+}
+.ScaleBox {
+  position: absolute;
+  transform: scale(var(--scale)) translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+  left: 50%;
+  top: 50%;
+  transition: 0.1s;
+  z-index: 999;
+  // background: rgba(255, 0, 0, 0.3);
+}
+</style>

@@ -29,7 +29,7 @@ export default {
   width: 44%;
   height: calc(100vh - 114px);
   box-sizing: border-box;
-  padding: 0 10px;
+  padding: 0 .0521rem;
   display: flex;
   flex-direction: column;
 
@@ -38,17 +38,18 @@ export default {
     background: url("~@/image/mapcenter.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
+    height: 64%;
 
     .title {
       position: absolute;
       font-weight: bold;
       color: #02D9FD;
-      line-height: 26px;
-      font-size: 22px;
+      line-height: .1354rem;
+      font-size: .1146rem;
       position: absolute;
       left: 0;
       right: 0;
-      top: 7px;
+      top: .0365rem;
       text-align: right;
       padding-right: 15%;
     }
@@ -60,23 +61,20 @@ export default {
     background-size: 100% 100%;
     position: relative;
     flex: 1;
-    height: 100%;
-    width: 100%;
 
     .title {
       position: absolute;
       font-weight: bold;
       color: #02D9FD;
-      line-height: 26px;
-      font-size: 22px;
+      line-height: .1354rem;
+      font-size: .1146rem;
       position: absolute;
       left: 0;
       right: 0;
-      top: 7px;
+      top: .0365rem;
       text-align: center;
-      margin-bottom: 10px;
+      margin-bottom: .0521rem;
     }
-
     .brokenline {
       margin: auto;
       width: 100%;

@@ -46,12 +46,7 @@ export default {
     screencontent,
   },
   mounted() {
-    window.addEventListener("resize", () => {
-      this.isshow=false
-    });
-     window.addEventListener("resize", () => {
-      this.isshow=true
-    });
+
     // this.timeFn();
     this.cancelLoading();
   },

@@ -23,7 +23,7 @@
         </div>
       </div>
     </div>
-    <div class="card mt-15">
+    <div class="carda mt-15">
       <div class="cardhead">省厅汇交</div>
       <div class="cardcontent">
         <ul class="cardcontent-left d-center">
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+
 import columnar from "@/components/Echart/Columnar";
 import work from "@/api/work";
 export default {
@@ -118,19 +119,39 @@ export default {
 <style lang="scss" scoped>
 .leftcard {
   width: 32%;
-  height: calc(100% -110px);
+    height: calc(100% -0.5729rem);
   display: flex;
   flex-direction: column;
 
   .card {
-    background: url("~@/image/homeLeftBg.png") no-repeat;
+    background: url("~@/image/qxjr.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    text-align: center;
+    width: 100%;
+   height: 25%;
+  }
+  .carda {
+    background: url("~@/image/sthj.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
-    height: 22%;
+    text-align: center;
+    width: 100%;
+    height: 25%;
   }
 
+  // .card1 {
+  //   background: url("~@/image/sbtj.png") no-repeat;
+  //     background-size: 100% 100%;
+  //   position: relative;
+  //   text-align: center;
+  //   width: 100%;
+  //   padding: .0417rem 0;
+  //   height: 49%;
+  // }
+
   .card1 {
-    background: url("~@/image/qxsj.png") no-repeat;
+    background: url("~@/image/sbtj.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
     box-sizing: border-box;
@@ -140,10 +161,10 @@ export default {
 
   .cardhead {
     color: #02d9fd;
-    line-height: 24px;
-    letter-spacing: 2px;
+    line-height: .125rem;
+    letter-spacing: .0104rem;
     position: absolute;
-    font-size: 20px;
+    font-size: .1042rem;
     left: 0;
     right: 0;
     margin: auto;
@@ -154,7 +175,7 @@ export default {
 
   .rjjrlList {
     display: flex;
-    margin-top: 15px;
+    margin-top: .01781rem;
 
     .qxjr {
       background: url("~@/image/jrl3.png");
@@ -165,12 +186,12 @@ export default {
     }
 
    p {
-      margin: 0 3px 10px 3px;
+      margin: 0 .0156rem .0521rem .0156rem;
       font-weight: 700;
-      width: 24px;
-      height: 36px;
-      font-size: 30px;
-      font-size: 32px;
+      width: .125rem;
+      height: .1875rem;
+      font-size: .1563rem;
+      font-size: .1667rem;
     }
   }
 
@@ -178,6 +199,7 @@ export default {
     width: 100%;
     height: 100%;
     display: flex;
+    // padding: 35px 20px 20px 20px;
     box-sizing: border-box;
     color: #e3f1ff;
 
@@ -185,15 +207,18 @@ export default {
       width: 60%;
       flex-direction: column;
       position: relative;
+       li{
+      font-size: .1042rem;
+    }
     }
 
     .cardcontent-left::before {
       position: absolute;
       right: 0;
-      top: 20px;
+      top: .3042rem;
       content: "";
-      width: 1px;
-      height: 90px;
+      width: .0052rem;
+      height: .4688rem;
       background: linear-gradient(180deg,
           #091b4c 0%,
           #47b5e0 56%,
@@ -204,7 +229,7 @@ export default {
       flex: 1;
       width: 100%;
       flex-direction: column;
-      font-size: 16px;
+      font-size: .0833rem;
 
       .bad {
         color: #c97168;
@@ -215,14 +240,14 @@ export default {
       }
 
       p {
-        margin-bottom: 8px;
+        margin-bottom: .0417rem;
 
         span:nth-child(1) {
-          margin-right: 15px;
+          margin-right: .0781rem;
         }
 
         span:nth-child(2) {
-          font-size: 20px;
+          font-size: .1042rem;
           font-weight: 900;
         }
       }

@@ -2,7 +2,7 @@
   <div class="rightcard">
     <div class="card1 cardCon d-center">
       <div class="cardhead">新建国有房屋信息</div>
-      <div class="cardcontent" style="margin-top: 70px">
+      <div class="cardcontent" style="margin-top: .3646rem">
         <dv-scroll-board :config="config" class="board" />
       </div>
     </div>
@@ -51,64 +51,69 @@ export default {
 </script>
 <style lang="scss" scoped>
 /deep/.row-item:not(:last-child) {
-  margin-bottom: 5px;
+  margin-bottom: .026rem;
 }
 
 .rightcard {
   width: 32%;
   display: flex;
-  height: calc(100% -94px);
+  height: calc(100vh - 114px);
   flex-direction: column;
 
   .cardhead {
-    font-size: 20px;
+    font-size: .1042rem;
     font-weight: bold;
     color: #02D9FD;
     text-align: center;
     position: absolute;
     left: 0;
     right: 0;
-    top: 12px;
+    top: .0625rem;
     text-align: center;
   }
 
   .cardcontent {
     width: 100%;
     height: 100%;
+    display: -webkit-box;
+    overflow: hidden;
   }
 
   .cardCon {
+    padding: .0521rem .026rem;
     position: relative;
     text-align: center;
     width: 100%;
   }
 
   .card1 {
-    width: 100%;
-    height: 30%;
-    background: url("~@/image/homeLeftBg.png") no-repeat;
+     height: 33%;
+    background: url("~@/image/xjgyfwxx.png") no-repeat;
     background-size: 100% 100%;
 
     .board {
       width: 90%;
       margin: 0 auto;
-      height: 135px;
-      margin-top: 40px;
+      height: .7031rem;
+      margin-top: .2083rem;
     }
   }
 
   .card2 {
-    height: 31%;
+    height: 33%;
     background: url("~@/image/djywl.png") no-repeat;
     background-size: 100% 100%;
+    padding: .2825rem 0 0 0;
   }
 
   .card3 {
+    height: 33%;
     flex: 1;
-    background: url("~@/image/lxzl.png") no-repeat;
+    background: url("~@/image/djlxzl.png") no-repeat;
     background-size: 100% 100%;
+    padding-bottom: 0;
     .cardhead {
-      top: 8px;
+      top: .0417rem;
     }
   }
 

 <template>
-  <div class="content">
+  <div class="content" id="box">
          <leftcard />
          <centercard />
          <rightcard />
   </div>
 </template>
 <script>
+import "@/utils/flexible.js";
+import ScaleBox from "./box.vue";
 import drawMixin from "@/utils/drawMixin";
 import leftcard from "./leftcard";
 import centercard from "./centercard";
@@ -21,6 +23,7 @@ export default {
     leftcard,
     centercard,
     rightcard,
+    ScaleBox,
   },
   mounted () {
     // this.timeFn();
@@ -46,6 +49,13 @@ export default {
   margin: auto;
   display: flex;
   justify-content: space-between;
-  margin-top: 15px;
+
 }
+  // #box{
+  // width: 1620px;
+  // height: 680px;
+  // position: absolute;
+  // transform-origin: left top;
+  // overflow: hidden;
+  // }
 </style>