新增科技色首页

src/components/menuList.vue

@@ -33,6 +33,10 @@
                 <img class='img3' src='../assets/imgs/clock.png' alt />
                 <span class='span3'>{{times}}</span>
             </span>
+            <span>
+                切换
+                <!-- <img class='img3' src='../assets/images/change.png' alt /> -->
+            </span>
         </div>
     </div>
 </template>
@@ -48,7 +52,7 @@ export default {
         return {
             state: '',
             list: [
-                { name: '首页', state: false, route: 'homepage' },  
+                { name: '首页', state: false, route: 'homepage' },
                 { name: '项目概况', state: false, route: 'overview' },
                 { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
                 { name: '设备设施', state: false, route: 'equipment' }, //设备设施

src/views/homepage/darkColor.vue

@@ -0,0 +1,404 @@
+<!--深色样式首页-->
+<template>
+  <div class="homepage-darkcolor">
+    <div class="homepage">
+      <div class="left">
+        <div class="system-main-title">
+          <h4 class="section-title">系统概况</h4>
+        </div>
+        <div class="system-list">
+          <ul>
+            <li
+              :class="['system-item', item.selected ? 'selected' : '']"
+              v-for="(item, index) in systemList"
+              :key="index"
+            >
+              <div class="system-name">
+                <img :src="imgSrc(item.smsxt)" />
+                <span>{{ item.smsxtname.replace("系统", "") }}</span>
+              </div>
+              <section
+                v-if="item.assetTypeList.length"
+                class="system-equipments-container"
+              >
+                <div
+                  @click.stop.capture="expandRestItems(item, index)"
+                  class="more"
+                  v-if="item.hasArrow"
+                  :style="{
+                    transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
+                  }"
+                >
+                  <img
+                    v-if="item.showColor"
+                    src="../../assets/images/icons/arrow.png"
+                  />
+                  <img v-else src="../../assets/images/icons/grey.png" />
+                </div>
+                <div class="system-equipments">
+                  <div
+                    class="number"
+                    v-for="(equip, index) in item.assetTypeList"
+                    :key="index"
+                  >
+                    <div class="title">
+                      <P
+                        :style="{
+                          width:
+                            equip.category_name.length > 6 ? '10rem' : 'auto',
+                        }"
+                        :title="equip.category_name"
+                        >{{ equip.category_name }}</P
+                      >
+                      <span
+                        :style="{
+                          right: equip.category_name.length > 6 ? '0' : '-1rem',
+                        }"
+                        v-if="equip.is_exception_num"
+                        >{{ equip.is_exception_num }}</span
+                      >
+                    </div>
+                    <p>
+                      <span class="amount">{{ equip.asset_num }}</span
+                      ><span>{{
+                        equip.category_name === "屋面logo"
+                          ? "个"
+                          : equip.category_name === "玻璃护栏"
+                          ? "段"
+                          : "台"
+                      }}</span>
+                    </p>
+                  </div>
+                </div>
+                <section
+                  class="system-equipments"
+                  v-show="item.expand && item.restAssetTypeList.length"
+                  style="margin-top: 0.4rem"
+                >
+                  <div
+                    class="number"
+                    v-for="(equip, index) in item.restAssetTypeList"
+                    :key="index"
+                  >
+                    <div class="title">
+                      <P :title="equip.category_name">{{
+                        equip.category_name
+                      }}</P>
+                      <span
+                        :style="{
+                          right: equip.category_name.length > 6 ? '0' : '-1rem',
+                        }"
+                        v-if="equip.is_exception_num"
+                        >{{ equip.is_exception_num }}</span
+                      >
+                    </div>
+                    <p>
+                      <span class="amount">{{ equip.asset_num }}</span
+                      ><span>{{
+                        equip.category_name === "屋面logo"
+                          ? "个"
+                          : equip.category_name === "玻璃护栏"
+                          ? "段"
+                          : "台"
+                      }}</span>
+                    </p>
+                  </div>
+                </section>
+              </section>
+              <div v-else style="width: 65%; text-align: center">暂无数据</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="center"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { getCardList } from "@/api/homePage";
+export default {
+  data() {
+    return {
+      systemList: [], //系统数据
+    };
+  },
+  methods: {
+    imgSrc(code) {
+      return require("../../assets/images/icons/" + code + ".png");
+    },
+    itemStyle(option) {
+      let num = 0;
+      if (option.assetTypeList) {
+        option.assetTypeList.forEach((item) => {
+          if (typeof item.is_exception_num === "number") {
+            num += item.is_exception_num;
+          }
+        });
+      }
+      if (option.rptGlsmsStatisticsList) {
+        option.rptGlsmsStatisticsList.forEach((option) => {
+          if (typeof option.due_num === "number") {
+            num += option.due_num;
+          }
+        });
+      }
+      if (num > 0) {
+        return {
+          display: "block",
+        };
+      } else {
+        return {
+          display: "none",
+        };
+      }
+    },
+    expandRestItems(item, index) {
+      this.cardsList.forEach((each) => {
+        each.forEach((eq) => {
+          if (eq.smsxt !== item.smsxt) {
+            eq.expand = false;
+          }
+          eq.selected = false;
+        });
+      });
+      item.expand = !item.expand;
+    },
+    /**
+     * @Description 获取集团 中心 区域 项目 数据树数据
+     * @method param ccode  管理分区编码 集团首页必填
+     * @method param level  1集团 2中心 3区域 0广场 集团首页必填
+     * @method param plazaId 广场id  如果是广场则此参数必填 其他情况下非必填
+     */
+    getSystemList(ccode, level) {
+      let params = null;
+      if (level === 0) {
+        params = { getParams: { plazaId: ccode, level } };
+      } else {
+        params = { getParams: { ccode, level } };
+      }
+      return new Promise((resolve, reject) => {
+        getCardList(params).then((res) => {
+          if (res.result == "success") {
+            let result = res.data;
+            if (result && Array.isArray(result)) {
+              result.forEach((item) => {
+                let list = item.assetTypeList;
+                if (list) {
+                  if (list.length > 3) {
+                    item.hasArrow = true;
+                    item.assetTypeList = list.splice(0, 3);
+                    item.restAssetTypeList = list;
+                    item.showColor = list.some((item) => {
+                      return item.is_exception_num > 0;
+                    });
+                  } else {
+                    item.hasArrow = false;
+                    item.restAssetTypeList = [];
+                  }
+                }
+              });
+              res.data.forEach((item) => {
+                item.selected = false;
+                item.expand = false;
+              });
+              res.data[0].selected = true;
+              this.currentSelectedSys = res.data[0];
+              this.currentSysId = res.data[0].smsxt;
+
+              this.systemList = res.data;
+              resolve(res);
+            }
+          }
+        });
+      });
+    },
+  },
+  created() {
+    this.getSystemList(103000, 1);
+  },
+};
+</script>
+<style lang="less" scoped>
+.homepage-darkcolor {
+  width: 100%;
+  height: 100%;
+  background: #0c102c;
+  color: #fff;
+  .homepage {
+    width: 100%;
+    height: 100%;
+    padding: 56px 16px 40px 16px;
+    box-sizing: border-box;
+    display: flex;
+    .left {
+      width: 30.05%;
+      height: 100%;
+      padding: 16px 10px;
+      box-sizing: border-box;
+      .system-main-title {
+        width: 152px;
+        height: 40px;
+        background: #1649ce;
+        line-height: 40px;
+        h4 {
+          color: #fff;
+          margin-left: 18px;
+        }
+      }
+      .system-list {
+        height: 100%;
+        overflow-y: auto;
+        ul {
+          li.system-item {
+            position: relative;
+            display: flex;
+            justify-content: flex-start;
+            align-items: stretch;
+            width: 100%;
+            margin-bottom:6px;
+            box-sizing: border-box;
+            border: 1px solid #eff0f1;
+            border-radius: 4px;
+            transition: 0.5s;
+            cursor: pointer;
+            .system-name {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              flex-shrink: 1;
+              flex-grow: 1;
+              width: 18%;
+              height: auto;
+              img {
+                width: 32px;
+                height: 32px;
+                margin-bottom:60px;
+              }
+              span {
+                color: white;
+                font-size: 14px;
+                font-weight: bolder;
+              }
+            }
+            .system-equipments-container {
+              position: relative;
+              width: 88%;
+              padding: 60px;
+              margin-left: 18%;
+              .more {
+                position: absolute;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 14px;
+                height: 14px;
+                right: 8px;
+                top: 50%;
+                border-radius: 7px;
+                cursor: pointer;
+                transform: rotate(0);
+                transform-origin: center;
+                z-index: 100;
+                transform: translateY(-7px);
+                img {
+                  width: 14px;
+                  height: 14px;
+                }
+              }
+              .system-equipments {
+                display: flex;
+                align-items: center;
+                .number {
+                  width: 30%;
+                  margin-right: 1%;
+                  background: #eff0f1;
+                  border-radius: 2px;
+                  padding: 14px 0 10px 4px;
+                  .title {
+                    display: inline-block;
+                    position: relative;
+                    line-height: 1;
+                    p {
+                      display: inline-block;
+                      position: relative;
+                      color: #1f2429;
+                      font-size: 14px;
+                      line-height: 20px;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                      overflow: hidden;
+                    }
+                    span {
+                      position: absolute;
+                      top: -10px;
+                      right: -20px;
+                      padding: 2px 4px;
+                      border-radius: 9px;
+                      font-size: 12px;
+                      color: #f54e45;
+                      background: #fde3e2;
+                    }
+                  }
+                  p {
+                    span:first-child {
+                      color: #1f2429;
+                      font-size: 18px;
+                      font-weight: bold;
+                    }
+                    .amount {
+                      font-size: bold;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          li.selected {
+            border-color: rgba(0, 118, 197, 0.6);
+            box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
+          }
+          li:hover {
+            border-color: #e4e5e7;
+            box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
+          }
+          li:nth-of-type(1),
+          li:nth-of-type(4),
+          li:nth-of-type(7) {
+            .system-name {
+              background: linear-gradient(to left, #4064cc, #6c8be2);
+            }
+          }
+          li:nth-of-type(2),
+          li:nth-of-type(5),
+          li:nth-of-type(6) {
+            .system-name {
+              background: linear-gradient(to left, #3998db, #70bbef);
+            }
+          }
+          li:nth-of-type(3),
+          li:nth-of-type(8) {
+            .system-name {
+              background: linear-gradient(to left, #30ae88, #53d5b1);
+            }
+          }
+        }
+      }
+    }
+    .center {
+      flex: 1;
+      height: 100%;
+      background: pink;
+    }
+    .right {
+      width: 21.2%;
+      height: 100%;
+      background: yellow;
+    }
+  }
+}
+</style>

src/views/homepage/index.vue

@@ -1,5 +1,6 @@
 <template>
-    <main class='homepage'>
+    <div class="homepage-box">
+    <main class='homepage' v-if="false">
         <section class='homepage-cards-content'>
             <div  v-for='(arr , index) in cardsList' :key='index' class="items-container">
                 <section v-for="(item ,index) in arr" :key="index" class='cards-item'  >
@@ -57,7 +58,7 @@
                                 <div  class="content" v-if="option.total">
                                     <div class="number">
                                         <div class="left">
-                                            <img   :src="srcList[option.type]" > 
+                                            <img   :src="srcList[option.type]" >
                                             <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
                                         </div>
                                         <p class="line">
@@ -102,13 +103,17 @@
             </nav>
         </section>
     </main>
+    <darkColor v-else></darkColor>
+    </div>
 </template>
 
 <script>
 import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
 import {sortBy} from 'lodash'
 import moment from 'moment'
+import darkColor from "./darkColor"
 export default {
+    components:{darkColor},
     data() {
         return {
             cardsList: [
@@ -123,11 +128,11 @@ export default {
                 1: require('../../assets/images/icons/protect.png'),
                 2: require('../../assets/images/icons/check.png'),
             },
-            
+
         }
     },
     created () {
-        let plazaId = localStorage.getItem('PLAZAID')  
+        let plazaId = localStorage.getItem('PLAZAID')
         if (plazaId) {
             this.plazaId = plazaId
         }
@@ -203,14 +208,14 @@ export default {
         navToInnerPage (item, equip) {
             this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
         },
-         
+
         /**
          * 跳转到甘特图详情页
          */
         navToGanttPage (item) {
             this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, module:'gantt'}})
         },
-  
+
         testAjax() {
             let params = {
                 getParams: {
@@ -242,7 +247,7 @@ export default {
                                 this.cardsList[1].push(item)
                             }
                         })
-                        this.cardsList.forEach(item=>{   
+                        this.cardsList.forEach(item=>{
                             item.forEach(eq=>{
                                 if (eq.rptGlsmsStatisticsList) {
                                     eq.rptGlsmsStatisticsList.forEach(each => {
@@ -308,7 +313,7 @@ export default {
                     plazaId: this.plazaId, //广场id 必填
                     page: 1, //页数
                     size: 10 //条数
-              
+
                 }
             }
             getQueryList(params).then(res => {
@@ -332,7 +337,10 @@ export default {
 }
 </style>
 <style lang='less' scoped>
-
+.homepage-box{
+     height: calc(100vh - 48px);
+     width: 100%;
+}
 .homepage {
     display: flex;
     justify-content: space-between;
@@ -340,7 +348,7 @@ export default {
     padding: 15px;
     background: rgba(242, 245, 247, 1);
     overflow: auto;
-   
+
     .homepage-cards-content {
         display: flex;
         width: 70%;
@@ -375,11 +383,11 @@ export default {
                     }
                     img.title-img{
                         width: 24px;
-                        height: 24px; 
+                        height: 24px;
                     }
                     img.warning-img{
                         width: 3.2rem;
-                        height: 3.2rem; 
+                        height: 3.2rem;
                     }
                     >div{
                         display: flex;
@@ -459,7 +467,7 @@ export default {
                         align-items: center;
                         width: 14px;
                         height: 14px;
-                        right: 8px; 
+                        right: 8px;
                         top: 40%;
                         border-radius: 7px;
                         cursor: pointer;
@@ -532,7 +540,7 @@ export default {
                                 }
                             }
                         }
-                        
+
                     }
                     .alert-list:hover{
                         background: #E4E6E7;
@@ -650,7 +658,7 @@ export default {
                     align-items: center;
                     padding: 6px;
                     border-bottom: 1px solid #e4e6e7;
-                    font-size: 1.4rem;                   
+                    font-size: 1.4rem;
                     article {
                         margin-right: 10px;
                     }
@@ -693,7 +701,7 @@ export default {
                 overflow-y: auto;
             }
         }
-       
+
     }
 }
 </style>