工作台缩放问题和样式调整

@@ -57,6 +57,11 @@ export default {
       // 初始化echart
       this.chart = this.$echarts.init(this.$el, 'tdTheme')
       this.chart.setOption(this.options, true)
+
+       window.addEventListener("resize", function() {
+       this.chart.resize();
+      });
+
     }
   }
 }

@@ -86,6 +86,86 @@ export default {
   },
   components: {
     Chart
+  },
+   mounted() {
+     window.addEventListener("resize", () => {
+       this.cdata=[],
+      this.cdata= {
+        legendItem: ['接入', '上报', '登簿'],
+        color: [
+          "#5324DA",
+          "#E873B2",
+          "#F4AF6F "
+        ],
+        echartData: [{
+          name: "2017-11",
+          value1: 1351,
+          value2: 600,
+          value3: 568,
+        },
+        {
+          name: "2017-11",
+          value1: 980,
+          value2: 1245,
+          value3: 1100,
+        },
+        {
+          name: "2017-11",
+          value1: 1127,
+          value2: 398,
+          value3: 568,
+        },
+        {
+          name: "2017-11",
+          value1: 1046,
+          value2: 689,
+          value3: 479
+        },
+        {
+          name: "2018-02",
+          value1: 780,
+          value2: 396,
+          value3: 655
+        },
+        {
+          name: "2018-08",
+          value1: 359,
+          value2: 1220,
+          value3: 540,
+        },
+        {
+          name: "2018-07",
+          value1: 229,
+          value2: 836,
+          value3: 1234,
+        },
+        {
+          name: "2018-09",
+          value1: 1176,
+          value2: 478,
+          value3: 755,
+        },
+        {
+          name: "2018-11",
+          value1: 515,
+          value2: 911,
+          value3: 806,
+        },
+        {
+          name: "2019-01",
+          value1: 658,
+          value2: 979,
+          value3: 813,
+        },
+        {
+          name: "2019-03",
+          value1: 364,
+          value2: 839,
+          value3: 886,
+        },
+        ]
       }
+    });
+  },
 }
 </script>

@@ -6,7 +6,7 @@
 import Chart from "./Chart";
 import work from "@/api/work";
 export default {
-  data () {
+  data() {
     return {
       cdata: {
         category: [],
@@ -18,13 +18,19 @@ export default {
   components: {
     Chart,
   },
-  mounted () {
+  mounted() {
+    window.addEventListener("resize", () => {
+      this.submitViews();
+    });
     this.submitViews();
   },
   methods: {
-    async submitViews () {
+    async submitViews() {
       try {
         let { result: res } = await work.submitViews("A20");
+        this.cdata.category = [];
+        this.cdata.barData = [];
+        this.cdata.lineData = [];
         res.map((item) => {
           return (
             this.cdata.category.push(item.areaName),
@@ -40,6 +46,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

 <template>
   <!-- 地图 -->
-  <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="53vh"
+  <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="53vh"
     :options="options"></Echart>
 </template>
 
@@ -12,6 +12,7 @@ export default {
       options: {},
       max: "100", //最大value值
       min: "1", // 最小value值
+      key: 0
     };
   },
   components: {
@@ -23,6 +24,11 @@ export default {
       default: () => [],
     },
   },
+   mounted() {
+     window.addEventListener("resize", () => {
+      this.key++
+    });
+  },
   watch: {
     cdata: {
       handler (newData) {
@@ -155,6 +161,7 @@ export default {
         // 重新选择区域
         this.handleMapRandomSelect();
       },
+
       immediate: true,
       deep: true,
     },

-<template>
-  <Echart :options="options" id="centreLeft1Chart" :key="key" height="225px" width="80%"></Echart>
-</template>
-<script>
-import Echart from '@/common/echart'
-export default {
-  components: {
-    Echart,
-  },
-   data() {
-    return {
-      key:0
-    }
-    },
-  props: {
-    cdata: {
-      type: Object,
-      default: () => ({})
-    },
-  },
-  watch: {
-    cdata: {
-      handler (newData) {
-        console.log("newData",newData);
-        this.options = {
-         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: [40,100],
-              roseType: "area",
-              data: newData.seriesData
-            }
-          ],
-
-        }
-         this.key++
-      },
-      immediate: true,
-      deep: true
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-#centreLeft1Chart {
-  margin-bottom: 10px;
-  margin-left: 60px;
-}
-</style>

-<template>
-  <div>
-    <Chart :cdata="cdata" />
-  </div>
-</template>
-
-<script>
-import Chart from "./Chart";
-import work from "@/api/work";
-export default {
-  data () {
-    return {
-      cdata: {
-        seriesData: [],
-      },
-    };
-  },
-  components: {
-    Chart,
-  },
-  mounted () {
-       this.getdjywltotal();
-
-
-  },
-  methods: {
-    // 获取登记业务量玫瑰图数据
-   async getdjywltotal () {
-        try {
-          let p = {
-            DJLX: "",
-            QLLX: "",
-            XZQDM: "",
-          };
-          let res = await work.getdjywltotal(p);
-          console.log("res",res);
-          // 遍历修改数组键，作为echars图表的参数
-          res.result.map((item) => {
-          return (
-            this.cdata.seriesData.push({ "name": item.AREACODE, "value": item.ywtotal })
-          )
-       });
-        } catch (error) {
-          console.log(error);
-        }
-
-
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

 <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 () {
+  data() {
     return {
-      key: 0
-    }
+      key: 0,
+    };
   },
   props: {
     cdata: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
   },
+  mounted() {
+    window.addEventListener("resize", () => {
+      this.key++;
+    });
+  },
   watch: {
     cdata: {
-      handler (newData) {
+      handler(newData) {
         this.options = {
-          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: "业务量",
+              name: "Access From",
               type: "pie",
-              radius: [0,100],
-              roseType: "area",
-              data: newData.seriesData
-            }
+               center: "65%",
+              radius: "50%",
+              data: newData.seriesData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
           ],
-
-        }
-        this.key++
+        };
+        this.key++;
       },
       immediate: true,
-      deep: true
-    }
-  }
+      deep: true,
+    },
+  },
 };
 </script>
 
-<style lang="scss" scoped>
-#centreLeft1Chart {
-  margin-bottom: 10px;
-  margin-left: 60px;
-}
-</style>
+<style lang="scss" scoped></style>

@@ -20,8 +20,6 @@ export default {
   },
   mounted () {
     this.getdjywltotal();
-
-
   },
   methods: {
     // 获取登记业务量玫瑰图数据

@@ -129,7 +129,9 @@ export default {
       if (!this.heightNumSetting) {
         let _this = this
         if (this.heightNum) {
+          console.log("this.heightNum``",this.heightNum);
           _this.$nextTick(() => {
+
             window.addEventListener('resize', () => {
               _this.tableHeight = _this.calcHeightx(230)
             });

@@ -10,42 +10,56 @@
               <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
               <div class="title">
                 <span class="title-text">汉中市不动产监管大屏</span>
-                <dv-decoration-5 :dur="1" class="dv-dec-5" :color="decorationColor" />
+                <dv-decoration-5
+                  :dur="1"
+                  class="dv-dec-5"
+                  :color="decorationColor"
+                />
               </div>
-              <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
+              <dv-decoration-8
+                class="dv-dec-8"
+                :reverse="true"
+                :color="decorationColor"
+              />
             </div>
             <dv-decoration-10 class="dv-dec-10-s" />
           </div>
         </div>
-        <screencontent />
+        <screencontent v-show="isshow"/>
       </div>
     </div>
   </div>
 </template>
 <script>
 import drawMixin from "@/utils/drawMixin";
-import screencontent from './screencontent'
+import screencontent from "./screencontent";
 export default {
   mixins: [drawMixin],
-  data () {
+  data() {
     return {
+      isshow:true,
       loading: true,
       decorationColor: ["#568aea", "#568aea"],
     };
   },
   components: {
-    screencontent
+    screencontent,
   },
-  mounted () {
-
+  mounted() {
+    window.addEventListener("resize", () => {
+      this.isshow=false
+    });
+     window.addEventListener("resize", () => {
+      this.isshow=true
+    });
     // this.timeFn();
     this.cancelLoading();
   },
-  beforeDestroy () {
+  beforeDestroy() {
     clearInterval(this.timing);
   },
   methods: {
-    cancelLoading () {
+    cancelLoading() {
       setTimeout(() => {
         this.loading = false;
       }, 500);

@@ -118,7 +118,7 @@ export default {
 <style lang="scss" scoped>
 .leftcard {
   width: 32%;
-  height: calc(100% -94px);
+  height: calc(100% -110px);
   display: flex;
   flex-direction: column;
 
@@ -126,18 +126,16 @@ export default {
     background: url("~@/image/homeLeftBg.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
-    padding: 8px 0;
-    height: 170px;
+    height: 22%;
   }
 
   .card1 {
     background: url("~@/image/qxsj.png") no-repeat;
     background-size: 100% 100%;
     position: relative;
-    padding: 10px 0;
     box-sizing: border-box;
     flex: 1;
-    height: 100%;
+    height: 56%;
   }
 
   .cardhead {
@@ -180,7 +178,6 @@ export default {
     width: 100%;
     height: 100%;
     display: flex;
-    padding: 35px 20px 20px 20px;
     box-sizing: border-box;
     color: #e3f1ff;
 

@@ -74,18 +74,18 @@ export default {
 
   .cardcontent {
     width: 100%;
-    height: 250px;
+    height: 100%;
   }
 
   .cardCon {
-    padding: 20px 5px;
     position: relative;
     text-align: center;
     width: 100%;
   }
 
   .card1 {
-    height: 200px;
+    width: 100%;
+    height: 30%;
     background: url("~@/image/homeLeftBg.png") no-repeat;
     background-size: 100% 100%;
 
@@ -98,17 +98,15 @@ export default {
   }
 
   .card2 {
+    height: 31%;
     background: url("~@/image/djywl.png") no-repeat;
     background-size: 100% 100%;
-    padding: 60px 0 0 0;
   }
 
   .card3 {
     flex: 1;
-    height: 100%;
     background: url("~@/image/lxzl.png") no-repeat;
     background-size: 100% 100%;
-    padding-bottom: 0;
     .cardhead {
       top: 8px;
     }

@@ -358,12 +358,15 @@ export default {
     },
     // 上移下移
     moveUpward (index, row) {
+      console.log("row上移",row);
+
       realMove(row.dictid, "UP", this.tableData);
       let id = findParents(this.tableData, row.dictid);
       this.keyList = id;
       this.key++;
     },
     moveDown (index, row) {
+      console.log("row下移",row);
       realMove(row.dictid, "DOWN", this.tableData);
       let id = findParents(this.tableData, row.dictid);
       this.keyList = id;

@@ -2,6 +2,9 @@
   <div class="timedTask from-clues">
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
+       <el-form-item>
+          <Breadcrumb />
+        </el-form-item>
         <el-row class="mb-5">
           <el-col :span="2" class="btnColRight">
             <btn nativeType="cx" @click="handleAdd()">新增菜单</btn>