Browse Source

修改样式

YaolongHan 4 years ago
parent
commit
5a4ef971f6
3 changed files with 71 additions and 52 deletions
  1. 1 1
      package.json
  2. 6 6
      src/components/floorMap/darkColorIndex.vue
  3. 64 45
      src/views/homepage/darkColor.vue

+ 1 - 1
package.json

@@ -6,7 +6,7 @@
         "host": "60.205.177.43",
         "path": "/root/apps/web/wandaBmGuide",
         "user": "root",
-        "password": "WWW.sagacloud.mail@2020",
+        "password": "cGVyc2FneV8yMDIwbGFic2wlIyQ=",
         "local": "wandaBmGuide"
     },
     "scripts": {

+ 6 - 6
src/components/floorMap/darkColorIndex.vue

@@ -4,9 +4,9 @@
     <div id='floor_base' v-loading='loading' ref='graphycolor'>
         <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
         <!-- 地图底部操作按钮 -->
-        <div class='strip-bottom'>
+        <!-- <div class='strip-bottom'>
             <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
-        </div>
+        </div> -->
         <room-box :key='`rommBox${roomKey}`' ref='boxRoom'></room-box>
         <equip-detail ref='equipDetail' :key='equipKey'></equip-detail>
         <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='380'>
@@ -356,7 +356,7 @@ export default {
             this.loading = true
             this.floorid = floorid
             this.mapSize()
-            this.$refs.canvasFun.isShow = false
+            // this.$refs.canvasFun.isShow = false
             setTimeout(() => {
                 this.clearGraphy()
                 this.scene = new FloorScene()
@@ -548,7 +548,7 @@ export default {
                     // 多边形
                     this.topologyParser.zoneLegendList.forEach((t) => {
                         this.scene.addItem(t)
-                        t.connect('legendItemClick', t, this.handleClickLegendItem)
+                        // t.connect('legendItemClick', t, this.handleClickLegendItem)
                     })
                     // 增加文字
                     this.topologyParser.textMarkerList.forEach((t) => {
@@ -566,14 +566,14 @@ export default {
                     this.topologyParser.imageLegendList.forEach((t) => {
                         t.textItem.color = new SColor('#ffffff')
                         this.scene.addItem(t)
-                        t.connect('legendItemClick', t, this.handleClickLegendItem)
+                        // t.connect('legendItemClick', t, this.handleClickLegendItem)
                     })
                     // 增加管线类
                     // 增加图标类图例
                     this.topologyParser.relationList.forEach((t) => {
                         t.selectable = true
                         this.scene.addItem(t)
-                        t.connect('legendItemClick', t, this.handleClickLegendItem)
+                        // t.connect('legendItemClick', t, this.handleClickLegendItem)
                     })
                     this.view.fitSceneToView()
                     this.view.minScale = this.view.scale

+ 64 - 45
src/views/homepage/darkColor.vue

@@ -41,7 +41,7 @@
                     class="number"
                     v-for="(equip, index) in item.assetTypeList"
                     :key="index"
-                    @click='navToInnerPage(item, equip)'
+                    @click="navToInnerPage(item, equip)"
                   >
                     <div class="title">
                       <P
@@ -151,9 +151,9 @@
           </div>
         </div>
         <div class="feng-map" ref="fengmap">
-          <div class="lcgn-title">
+          <!-- <div class="lcgn-title">
             <span class="span1">{{ floorInfo.code }}</span>
-          </div>
+          </div> -->
           <floorMap
             ref="floorMap"
             :loadName="loadName"
@@ -162,11 +162,11 @@
           ></floorMap>
           <!-- 图例 -->
           <div class="legend-boxs">
-            <Legend
+            <!-- <Legend
               :floors="floorsArr"
               type="1"
               :editTips="`编辑${floorInfo.code}层楼层功能平面图`"
-            ></Legend>
+            ></Legend> -->
             <floor-list
               v-if="floorsArr.length > 0"
               :floorsArr="floorsArr"
@@ -198,9 +198,7 @@
           </div>
           <div class="box-bottom">
             <div class="circle canvas-circle">
-              <canvas
-                :id="'canvas_' + item.type"
-              ></canvas>
+              <canvas :id="'canvas_' + item.type"></canvas>
             </div>
             <div class="msg">
               <div class="msg-item">
@@ -285,7 +283,7 @@ export default {
         { id: "1007", name: "燃气系统" },
         { id: "1008", name: "土建装饰" },
       ],
-      canvasCircle:0 , //圆的半径
+      canvasCircle: 0, //圆的半径
     };
   },
   computed: {
@@ -302,10 +300,12 @@ export default {
           : moment().format("YYYY")
       ).then((res) => {
         const TYPE = statisticItem.type; // 类型
-        const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
+        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
+        statisticItem.type == 1
+          ? (circle_basename = "本月总任务")
+          : (circle_basename = "本年总任务");
+        circle.baseName = circle_basename;
         // 总数
         let total = 0;
         // 即将预期
@@ -329,7 +329,7 @@ export default {
       });
     },
 
-     expandRestItems(item, index) {
+    expandRestItems(item, index) {
       this.systemList.forEach((eq) => {
         if (eq.smsxt !== item.smsxt) {
           eq.expand = false;
@@ -434,8 +434,15 @@ export default {
       }
     },
     // 点击跳转
-    navToInnerPage (item, equip) {
-      this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
+    navToInnerPage(item, equip) {
+      this.$router.push({
+        path: "./analysis",
+        query: {
+          smsxt: item.smsxt,
+          equipId: equip.category_code,
+          module: "core",
+        },
+      });
     },
 
     /**
@@ -499,18 +506,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{
+        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;
+        }
+        // 设置Dom得width\height
+        Dom.height = this.canvasCircle * 2;
+        Dom.width = this.canvasCircle * 2;
         this.projectStatistics(
           statisticItem.type,
           statisticItem.system,
@@ -518,10 +525,12 @@ export default {
             ? moment().format("YYYYMM")
             : moment().format("YYYY")
         ).then((res) => {
-          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 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;
           // 即将预期
@@ -579,7 +588,8 @@ export default {
     box-sizing: border-box;
     display: flex;
     .system-main-title {
-      width: 152px;
+      min-width: 130px;
+      max-width: 200px;
       height: 40px;
       background: rgba(22, 73, 206, 0.36);
       line-height: 40px;
@@ -613,6 +623,15 @@ export default {
       .system-list {
         height: ~"calc(100% - 44px)";
         overflow-y: auto;
+        &::-webkit-scrollbar-track {
+          background: rgba(22, 73, 206, 0.3);
+          border-radius: 2px;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: rgba(22, 73, 206, 0.8);
+          border-radius: 10px;
+          border: none;
+        }
         ul {
           li.system-item {
             position: relative;
@@ -728,6 +747,12 @@ export default {
             /deep/ .p-select-header {
               background: #cccccc !important;
             }
+            /deep/ .p-select-cursor-input {
+              color: #ffffff !important;
+              &::-webkit-input-placeholder {
+                 color: #ffffff !important;
+              }
+            }
           }
           li:hover {
             border-color: #e4e5e7;
@@ -748,10 +773,9 @@ export default {
           li:nth-of-type(6) {
             .system-name {
               background: linear-gradient(
-                133deg,
-                rgba(57, 152, 219, 0.3) 0%,
-                rgba(112, 187, 239, 0.3),
-                100%
+                to left,
+                rgba(57, 152, 219, 0.3),
+                rgba(112, 187, 239, 0.3)
               );
               border-radius: 6px 0px 0px 6px;
             }
@@ -802,7 +826,7 @@ export default {
             height: 100%;
             .progress-list {
               height: 12px;
-              background: #ccc;
+              background: rgba(56, 94, 204, 0.48);
               border-radius: 6px 6px;
               display: flex;
               margin-right: 30px;
@@ -942,7 +966,7 @@ export default {
       box-sizing: border-box;
       .box {
         width: 100%;
-        height: ~"calc((100% - 20px) / 3)";
+        height: ~"calc((100% - 30px) / 3)";
         background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
         background-color: transparent;
         background-size: 8px 8px;
@@ -968,11 +992,12 @@ export default {
           display: flex;
           position: relative;
           align-items: center;
-          height:calc(100% - 52px);
+          height: calc(100% - 52px);
           .circle {
-            width: 140px;
+            width: 160px;
             height: 100%;
             display: flex;
+            margin-left: 40px;
             align-items: center;
           }
           .msg {
@@ -1017,10 +1042,4 @@ export default {
     }
   }
 }
-/deep/ .p-select-option-box {
-  background: rgba(22, 73, 206, 0.36) !important;
-  .p-select-option-menu {
-    background: rgba(22, 73, 206, 0.36) !important;
-  }
-}
 </style>