Browse Source

项目首页自适应

YaolongHan 4 years ago
parent
commit
d58588aaba
3 changed files with 40 additions and 15 deletions
  1. 5 1
      src/components/menuList.vue
  2. 4 3
      src/views/homepage/Circle.js
  3. 31 11
      src/views/homepage/darkColor.vue

+ 5 - 1
src/components/menuList.vue

@@ -368,6 +368,8 @@ export default {
     }
   }
   .home-style {
+    display: flex;
+    justify-content: space-between;
     background: linear-gradient(180deg, #103979 0%, #162653 100%);
     .downright {
       position: absolute;
@@ -404,12 +406,14 @@ export default {
     }
   }
   .btnlist-style {
+    flex: 1;
     & > div {
       line-height: 48px;
       text-align: center;
       background: url("../assets/imgs/btn-rect.png") no-repeat;
       float: left;
-      width: 142px;
+      max-width:142px;
+      min-width: 100px;
       height: 48px;
       margin: 0 8px;
       cursor: pointer;

+ 4 - 3
src/views/homepage/Circle.js

@@ -10,15 +10,16 @@ export class SCircle {
      *
      * @param {canvasid} id
      */
-    constructor(id) {
+    constructor(id,radius =60) {
         const canvas = document.getElementById(id);
         this.ctx = canvas.getContext("2d");
         this.percent = 100;  //最终百分比
         this.circleX = canvas.width / 2;  //中心x坐标
         this.circleY = canvas.height / 2;  //中心y坐标
-        this.radius = 60; //圆环半径
+        this.radius = radius; //圆环半径
         this.lineWidth = 5;  //圆形线条的宽度
         this.fontSize = 40; //字体大小
+        this.baseName = '本月总任务'
     }
 
     /**
@@ -55,7 +56,7 @@ export class SCircle {
         this.ctx.textAlign = 'center';
         this.ctx.textBaseline = 'middle';
         this.ctx.fillStyle = '#ffffff';
-        this.ctx.fillText("本月总任务", this.circleX, this.circleY + this.fontSize * 3 / 4);
+        this.ctx.fillText(this.baseName, this.circleX, this.circleY + this.fontSize * 3 / 4);
         this.ctx.stroke();
     }
 

+ 31 - 11
src/views/homepage/darkColor.vue

@@ -197,11 +197,9 @@
             </div>
           </div>
           <div class="box-bottom">
-            <div class="circle">
+            <div class="circle canvas-circle">
               <canvas
                 :id="'canvas_' + item.type"
-                width="150"
-                height="150"
               ></canvas>
             </div>
             <div class="msg">
@@ -287,6 +285,7 @@ export default {
         { id: "1007", name: "燃气系统" },
         { id: "1008", name: "土建装饰" },
       ],
+      canvasCircle:0 , //圆的半径
     };
   },
   computed: {
@@ -303,7 +302,10 @@ export default {
           : moment().format("YYYY")
       ).then((res) => {
         const TYPE = statisticItem.type; // 类型
-        const circle = new SCircle(`canvas_${TYPE}`);
+        const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
+        let circle_basename = null;
+         statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
+         circle.baseName = circle_basename
         // 总数
         let total = 0;
         // 即将预期
@@ -497,6 +499,18 @@ export default {
     getRightstatic() {
       // 对右侧数据做遍历
       this.statisticsList.forEach((statisticItem) => {
+      const TYPE = statisticItem.type; // 类型
+      const Dom = document.getElementById(`canvas_${TYPE}`);
+      const BoxDom = document.getElementsByClassName('canvas-circle')[0];
+      this.canvasCircle = 0
+      if(BoxDom.offsetHeight>BoxDom.offsetWidth){
+         this.canvasCircle = BoxDom.offsetWidth / 2;
+      }else{
+          this.canvasCircle = BoxDom.offsetHeight / 2;
+      }
+      // 设置Dom得width\height
+      Dom.height = this.canvasCircle*2;
+      Dom.width = this.canvasCircle*2;
         this.projectStatistics(
           statisticItem.type,
           statisticItem.system,
@@ -504,8 +518,10 @@ export default {
             ? moment().format("YYYYMM")
             : moment().format("YYYY")
         ).then((res) => {
-          const TYPE = statisticItem.type; // 类型
-          const circle = new SCircle(`canvas_${TYPE}`);
+          let circle_basename = null
+          statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
+          const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
+          circle.baseName = circle_basename
           // 总数
           let total = 0;
           // 即将预期
@@ -926,7 +942,7 @@ export default {
       box-sizing: border-box;
       .box {
         width: 100%;
-        height: ~"calc(33% - 16px)";
+        height: ~"calc((100% - 16px) / 3)";
         background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
         background-color: transparent;
         background-size: 8px 8px;
@@ -950,14 +966,18 @@ export default {
           // padding-top: 36px;
           box-sizing: border-box;
           display: flex;
+          position: relative;
+          align-items: center;
+          height:calc(100% - 52px);
           .circle {
-            width: 150px;
-            height: 150px;
+            width: 140px;
+            height: 100%;
+            display: flex;
+            align-items: center;
           }
           .msg {
             flex: 1;
-            margin-top: 10px;
-            padding: 30px 0 0 30px;
+            padding: 0 0 0 30px;
             box-sizing: border-box;
             .msg-item:nth-of-type(1) {
               display: flex;