提交： 项目管理 详情页 左侧菜单调整布局

public/index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_9w119og75cs.css">
 
 
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_67w6wmrp9dc.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_xttpv6d8dy.css">
 
     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8"></script>
     <script src="<%= BASE_URL %>js/config.js"></script>

src/assets/styles/element-ui.scss

@@ -143,3 +143,60 @@
   border-radius: 10px;
   background: #ffffff;
 }
+
+.el-table {
+  > .el-table__body-wrapper::-webkit-scrollbar {
+    width: 6px; /*滚动条宽度*/
+    height: 6px; /*滚动条高度*/
+  }
+  /*定义滚动条轨道 内阴影+圆角*/
+  > .el-table__body-wrapper::-webkit-scrollbar-track {
+    // box-shadow: 0px 1px 3px rgba(red, green, blue, 0) inset; /*滚动条的背景区域的内阴影*/
+    border-radius: 10px; /*滚动条的背景区域的圆角*/
+    background-color: #c1c7d000; /*滚动条的背景颜色*/
+  }
+  /*定义滑块 内阴影+圆角*/
+  > .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    border-radius: 10px; /*滚动条的圆角*/
+    background-color: #dededea6; /*滚动条的背景颜色*/
+  }
+
+  // 解决表格固定列问题
+ 
+  // 不同尺寸表格修改固定列内容区的高度,  本人这里只罗列了mini与small尺寸的
+  .el-table--mini {
+    .el-table__fixed,
+    .el-table__fixed-right {
+      .el-table__fixed-body-wrapper {
+        // mini表格, 表头高度为36px, 所以这里减36
+        height: calc(100% - 36px) !important;
+      }
+    }
+  }
+  .el-table--small {
+    .el-table__fixed,
+    .el-table__fixed-right {
+      .el-table__fixed-body-wrapper {
+        // small表格
+        height: calc(100% - 40px) !important;
+      }
+    }
+  }
+  .el-table__fixed, .el-table__fixed-right {
+    height: calc(100% - 6px) !important;
+  }
+  // 当表格没有滚动条时
+  .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{
+    height: 100% !important;
+    bottom: 0 !important;
+    box-shadow: none !important;
+  }
+  // 当表格有纵向滚动条时
+  .el-table--scrollable-y .el-table__fixed-right{
+    right: 7px !important;
+  }
+  // 当表格只有横向滚动条，没有纵向滚动条时
+  .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right{
+    right: 0 !important;
+  }
+}

src/views/bigScreen/v2/profile/wraringInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="big-wraring-info-wrap">
+  <div class="big-wraring-info-wrap-v2">
     <div class="mk-top">{{title}}</div>
     <div class="conter-block">
       <div class="count-block">
@@ -65,7 +65,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.big-wraring-info-wrap {
+.big-wraring-info-wrap-v2 {
   width: 100%;
   height: calc(100% - 300px);
   .mk-top {

src/views/bigScreen/v3/profile/typeDistribution.vue

@@ -34,13 +34,22 @@
                 class="color-block"
                 :style="`background: ${echartsOption.colorList[idx]};`"
               ></div>
-              <div class="title-block">
+              <span class="title-block" :title="item.name" style="
+                display: inline-block;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                width: 100%;
+                white-space: nowrap;
+              ">
+                {{ item.name }}
+              </span>
+              <!-- <div class="title-block">
                 {{
                   item.name.length > 10
                     ? item.name.substr(0, 10) + "..."
                     : item.name
                 }}
-              </div>
+              </div> -->
             </div>
           </div>
         </div>

src/views/bigScreen/v3/profile/wraringInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="big-wraring-info-wrap">
+  <div class="big-wraring-info-wrap-v3">
     <nav-temp htmlType="t1" :title="title">
       <div class="conter-block" slot="mk-center">
         <census-temp-b
@@ -97,7 +97,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.big-wraring-info-wrap {
+.big-wraring-info-wrap-v3 {
   height: 190px;
   width: calc((100% - 20px) / 2);
   .conter-block {

src/views/iot/project/profileV2/AlarmManage/index.vue

@@ -87,7 +87,7 @@
     </div>
 
     <div class="e-alarm-table">
-      <el-table v-loading="tableLoading" :data="tableList" :height="total > 0 ? '230px': '270px'">
+      <el-table v-loading="tableLoading" :data="tableList" :height="total > 0 ? '170px': '210px'">
         <el-table-column
           label="设备名称"
           width="120px"
@@ -433,7 +433,7 @@ export default {
     height: 300px;
   }
   .e-alarm-table {
-    height: 280px;
+    height: 220px;
     width: 100%;
     padding-top: 10px;
   }

src/views/iot/project/profileV2/ENavLayout/index.vue

@@ -0,0 +1,140 @@
+<template>
+ <div class="e-nav-layout">
+    <el-tabs v-model="activeKey"> 
+      <el-tab-pane :label="tab['label']" :name="tab['key']" v-for="(tab) in tabs" :key="tab.key">
+        <component
+            :is="activeName"
+            v-if="tab['key'] === activeKey"
+            :projectInfo="projectInfo"
+            :projectTypeOptions="projectTypeOptions"
+            :sourceId="sourceId"
+            :tempType="activeType"
+            :isShrink="isShrink"
+            :isFoldRight="isFoldRight"
+          ></component>
+      </el-tab-pane>
+    </el-tabs>
+ </div>
+</template>
+<script>
+import ECensusCards from "../ECensusCards";
+import ElDescriptions from "@/components/Edescriptions";
+import ElDescriptionsItem from "@/components/Edescriptions/src/descriptions-item";
+import ESimpleCard from "@/components/Cards/index";
+import ENavMenu from "../ENavMenu/index";
+import EProjectManage from "../EProjectManage";
+import ETodayRatio from "../ETodayRatio";
+import ETypeCensus from "../ETypeCensus";
+import ETrendCensus from "../ETrendCensus";
+import EObjectContainer from "../EObjectContainer";
+import EDeviceManage from "../DeviceManage/index";
+import EAlarmManage from "../AlarmManage/index";
+import ESafetyTemplate from "../SafetyTemplate/index";
+import ELeakageCurrent from "../SafetyTemplate/ELeakageCurrent";
+import EDebuff from "../SafetyTemplate/EDebuff";
+import EDeviceSwitchWarning from "../SafetyTemplate/EDeviceSwitchWarning";
+import EElectricity from "../EnergyManage/EElectricity";
+import EEnergyLoad from "../EnergyManage/EEnergyLoad";
+import ENavMenuButton from '../ENavMenuButton/index';
+import ShopLocation from "@/components/Amap/components/shopLocation/index";
+import ESceneManage from '../ESceneManage/index'
+export default {
+    name: 'EProjectNavLayout',
+    components: {
+        ECensusCards,
+        ElDescriptions,
+        ElDescriptionsItem,
+        ENavMenu,
+        EProjectManage,
+        ESimpleCard,
+        ETodayRatio,
+        ETypeCensus,
+        ETrendCensus,
+        EObjectContainer,
+        EDeviceManage,
+        EAlarmManage,
+        ESafetyTemplate,
+        ELeakageCurrent,
+        EDebuff,
+        EDeviceSwitchWarning,
+        EElectricity,
+        EEnergyLoad,
+        ShopLocation,
+        ESceneManage,
+        ENavMenuButton
+    },
+    props: {
+        tabs: {
+            type: Array,
+            default: []
+        },
+        projectTypeOptions: {
+            type: Array, 
+            default: []  
+        },
+        sourceId: {
+            type: [Number, String],
+            require: true,
+        },
+        isShrink: {
+            type: Boolean,
+            default: () => {
+                return true
+            },
+        },
+        projectInfo: {
+            type: Object,
+            require: true,
+        },
+            
+        tempType: {
+            type: String,
+            require: true
+        },
+        isFoldRight: {
+            type: Boolean,
+            default: () => {
+                return false
+            }
+        },
+    },
+    data() {
+        return {
+            activeKey: '',
+            activeName: '',
+            activeType: ''
+        }
+    },
+    watch: {
+        tabs: {
+            handler(val) {
+                console.log('tabs--')
+                if(val && val.length > 0) {
+                    this.activeName = val[0]['template'];
+                    this.activeType = val[0]['key'];
+                    this.activeKey = val[0]['key'];
+                }
+            },
+            immediate: true,
+        },
+        activeKey: {
+            handler(val) {
+                if (val) {
+                    console.log('activeKey--')
+                    let result = this.tabs.filter(v => { if (val === v['key']) { return v }});
+                    if (result && result.length > 0) {
+                        this.activeName = result[0]['template'];
+                        this.activeType = result[0]['key'];
+                    }
+                } else {
+                    this.activeName = '';
+                    this.activeType = '';
+                }
+            },
+            immediate: true,
+        }
+    },
+    methods: {
+    }
+}
+</script>

src/views/iot/project/profileV2/ENavMenuButton/index.vue

@@ -0,0 +1,139 @@
+<template>
+
+  <div class="e-nav-menu-button">
+
+    <div class="e-button" v-for="(item) in activeList" :key="item[props['key']]" @click="handleClick(item)">
+
+      <div class="but" :class="value === item[props['key']] ? 'but e-menu-sed' : 'but'">
+
+        <i :class="item[props['icon']] ? item[props['icon']] +' icon-c' : 'el-icon-d-arrow-left icon-c'"></i>
+
+        <span class="but-title">{{ item[props['label']] }}</span>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+ export default { 
+	name: 'ENavMenuButton', 
+	props: { 
+		value: { 
+			type: [String, Number],
+			default: () => { return 0; }
+		}, 
+		props: { 
+			type: Object, 
+			default: () => { 
+				return {
+				label: "label", key: "key", children: "children", icon: 'icon' };
+			},
+		}, 
+		activeList: { 
+			type: Array,
+			default: () => { 
+				return [ 
+					{ label: "项目管理", key: "projectOt", icon: 'el-icon-d-arrow-left' }, 
+					{ label: "设备管理", key: "projectOt", icon: 'el-icon-d-arrow-left'},
+				]; 
+			}, 
+		},
+	}, 
+	data() { 
+		return {} 
+	}, 
+	methods: { 
+		handleClick(row) {
+			this.$emit("input", row);
+      // if (
+      //   !row[this.props["children"]] ||
+      //   row[this.props["children"]].length <= 0
+      // ) {
+      //   this.$emit("input", row);
+      // } else {
+      //   if (this.developList.indexOf(row[this.props["key"]]) >= 0) {
+      //     this.developList = this.developList.filter((v) => {
+      //       v !== row[this.props["key"]];
+      //     });
+      //   } else {
+      //     // 执行展开操作
+      //     if (this.singleDevelop) {
+      //       this.developList = [];
+      //     }
+      //     this.developList.push(row[this.props["key"]]);
+      //   }
+      // }
+    },
+	},
+}
+</script>
+
+<style lang="scss">
+.e-nav-menu-button {
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+
+  .e-button {
+    // width: 50%;
+    display: flex;
+    justify-content: flex-end;
+    .but {
+      width: 90px;
+      height: 30px;
+      background: #f4f5f7;
+      border-radius: 5px;
+      color: #6b778c;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      margin-right: 10px;
+      .icon-c {
+				font-size: 18px;
+				margin-top: 2px;
+      }
+      .but-title {
+        font-size: 12px;
+        font-family: "Source Han Sans CN";
+        font-weight: 600;
+        margin-left: 5px;
+        cursor: default;
+      }
+    }
+    .but:hover {
+      background: #1890ff;
+      color: #fff;
+    }
+		.e-menu-sed {
+			background: #0066CC;
+			color: #fff;
+		}
+    .but-tz {
+      width: 30px;
+      height: 30px;
+      background: #f4f5f7;
+      border-radius: 5px;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      margin-right: 0px;
+      font-weight: 600;
+      color: #6b778c;
+      .icon-c {
+        font-size: 12px;
+        font-weight: 600;
+        margin-top: 2px;
+      }
+    }
+    .but-tz:hover {
+      background: #1890ff;
+      color: #fff;
+    }
+  }
+}
+</style>
+

src/views/iot/project/profileV2/ESceneManage/ELogging.vue

@@ -48,7 +48,7 @@
       <el-table
         v-loading="tableLoading"
         :data="tableList"
-        :height="total > 0 ? '530px' : '270px'"
+        :height="total > 0 ? '470px' : '510px'"
       >
         <el-table-column
           type="index"

src/views/iot/project/profileV2/ESceneManage/index.vue

@@ -19,7 +19,7 @@
         <el-table
           v-loading="tableLoading"
           :data="tableList"
-          :height="total > 0 ? '530px' : '270px'"
+          :height="total > 0 ? '470px' : '510px'"
         >
           <el-table-column
             type="index"

src/views/iot/project/profileV2/ETypeCensus.vue

@@ -228,6 +228,7 @@ export default {
           font-weight: 400;
           color: #ffffff;
           line-height: 24px;
+
           .color-block {
             width: 9px;
             height: 8px;

src/views/iot/project/profileV2/EnergyManage/EElectricity.vue

@@ -46,7 +46,7 @@
       <el-table
         v-loading="tableLoading"
         :data="tableList"
-        :height="total > 0 ? '520px' : '560px'"
+        :height="total > 0 ? '460px' : '500px'"
       >
         <el-table-column
           label="设备名称"

src/views/iot/project/profileV2/EnergyManage/EEnergyLoad.vue

@@ -433,7 +433,7 @@ export default {
   flex-wrap: wrap;
   .load-center {
     width: 100%;
-    height: 300px;
+    height: 270px;
     display: flex;
     .left {
       width: 50%;
@@ -445,7 +445,7 @@ export default {
     }
   }
   .load-footer {
-    height: 300px;
+    height: 270px;
     width: 100%;
   }
 }

src/views/iot/project/profileV2/SafetyTemplate/EDebuff.vue

@@ -39,7 +39,7 @@
       <el-table
         v-loading="tableLoading"
         :data="tableList"
-        :height="total > 0 ? '530px' : '570px'"
+        :height="total > 0 ? '470px' : '510px'"
       >
         <el-table-column
           label="事件ID"

src/views/iot/project/profileV2/SafetyTemplate/EDeviceSwitchWarning.vue

@@ -37,7 +37,7 @@
       <el-table
         v-loading="tableLoading"
         :data="tableList"
-        :height="total > 0 ? '530px' : '570px'"
+        :height="total > 0 ? '470px' : '510px'"
       >
         <el-table-column
           label="事件ID"

src/views/iot/project/profileV2/SafetyTemplate/ELeakageCurrent.vue

@@ -82,7 +82,7 @@
       <el-table
         v-loading="tableLoading"
         :data="tableList"
-        :height="total > 0 ? '230px' : '270px'"
+        :height="total > 0 ? '170px' : '210px'"
       >
         <el-table-column
           label="设备名称"
@@ -478,7 +478,7 @@ export default {
     height: 300px;
   }
   .e-alarm-table {
-    height: 280px;
+    height: 220px;
     width: 100%;
     padding-top: 10px;
   }

src/views/iot/project/profileV2/SafetyTemplate/index.vue

@@ -82,7 +82,7 @@
       <el-table
         v-loading="tableLoading"
         :data="tableList"
-        :height="total > 0 ? '230px' : '270px'"
+        :height="total > 0 ? '170px' : '210px'"
       >
         <el-table-column
           label="设备名称"
@@ -306,6 +306,7 @@ export default {
   },
   methods: {
     init() {
+      console.log('temp-init')
       this.queryParams.timeType = 'day'
       this.time =
         this.queryParams.timeType === "day"
@@ -457,7 +458,7 @@ export default {
     height: 300px;
   }
   .e-alarm-table {
-    height: 280px;
+    height: 220px;
     width: 100%;
     padding-top: 10px;
   }

src/views/iot/project/profileV2/details.vue

@@ -39,6 +39,21 @@
           </div>
         </div>
       </div>
+      <div style="width: 100%;">
+        <e-nav-menu-button
+          v-model="activeType"
+          :activeList="activeList"
+          @input="
+            (data) => {
+              selectNavChildren = [];
+              activeName = data['template'];
+              activeType = data['key'];
+              selectNavChildren = data.children || [];
+            }
+          "
+        />
+
+      </div>
       <div class="container-info">
         <div class="info-left">
           <el-descriptions class="margin-top" title="" :column="2">
@@ -128,7 +143,8 @@
         </div>
       </div>
       <div class="container-main">
-        <e-nav-menu
+
+        <!-- <e-nav-menu
           v-model="activeType"
           :activeList="activeList"
           @eventShrink="
@@ -142,7 +158,7 @@
               activeType = data['key'];
             }
           "
-        />
+        /> -->
         <div
           class="main-block"
           :style="isShrink ? 'width: 100%;' : 'width: calc(100% - 150px);'"
@@ -155,6 +171,7 @@
             :tempType="activeType"
             :isShrink="isShrink"
             :isFoldRight="isFoldRight"
+            :tabs="selectNavChildren"
           ></component>
         </div>
       </div>
@@ -212,11 +229,14 @@ import EDebuff from "./SafetyTemplate/EDebuff";
 import EDeviceSwitchWarning from "./SafetyTemplate/EDeviceSwitchWarning";
 import EElectricity from "./EnergyManage/EElectricity";
 import EEnergyLoad from "./EnergyManage/EEnergyLoad";
+import ENavMenuButton from './ENavMenuButton/index';
 
 import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
 import ESceneManage from './ESceneManage/index'
 
+import ENavLayout from './ENavLayout/index'
+
 export default {
   name: "projectDetailV2",
   components: {
@@ -232,14 +252,16 @@ export default {
     EObjectContainer,
     EDeviceManage,
     EAlarmManage,
-    ESafetyTemplate,
+    // ESafetyTemplate,
     ELeakageCurrent,
     EDebuff,
     EDeviceSwitchWarning,
     EElectricity,
     EEnergyLoad,
     ShopLocation,
-    ESceneManage
+    ESceneManage,
+    ENavMenuButton,
+    ENavLayout
   },
   props: {
     sourceId: {
@@ -263,21 +285,26 @@ export default {
       resultInfo: {},
       activeName: "EObjectContainer",
       activeType: "EObjectContainer",
-      isShrink: false,
+      isShrink: true,
+      selectNavChildren: [],
       activeList: [
         {
           label: "项目信息",
           key: "EObjectContainer",
+          icon: 'iconfont iconxiangmugl',
           template: "EObjectContainer",
         },
         {
           label: "设备管理",
           key: "EDeviceManage",
+          icon: 'iconfont iconwumoxing',
           template: "EDeviceManage",
         },
         {
           label: "安全监管",
           key: "safety",
+          icon: 'iconfont iconanquangl',
+          template: 'ENavLayout',
           children: [
             // 漏电流 温度 漏电报警 温度报警 漏保自检 短路报警 过欠压 过流过载 电弧报警 三相报警 异常状态 分合闸警示
             {
@@ -345,14 +372,16 @@ export default {
         {
           label: "能源管理",
           key: "energyManage",
+          icon: 'iconfont iconnengyuanguanli',
+          template: 'ENavLayout',
           children: [
             {
-              label: "电量",
+              label: "电    量",
               key: "electricity",
               template: "EElectricity",
             },
             {
-              label: "负载",
+              label: "负    载",
               key: "energyLoad",
               template: "EEnergyLoad",
             },
@@ -361,6 +390,8 @@ export default {
         {
           label: "综合管理",
           key: "synthesizeManage",
+          icon: 'iconfont icontasks',
+          template: 'ENavLayout',
           children: [
             {
               label: "场景控制",
@@ -705,19 +736,20 @@ export default {
       }
     }
     .container-main {
-      width: calc(100% - 10px);
+
+      width: calc(100% - 0px);
       height: calc(100vh - 286px);
-      margin-left: 10px;
+      margin-left: 0px;
-      margin-top: 15px;
+      margin-top: 0px;
       display: flex;
-      border: 1px solid #e8e8e8;
+      height: calc(100% - 190px);
-      border-radius: 5px;
-      height: calc(100% - 160px);
       .main-block {
         padding: 15px;
         width: calc(100% - 150px);
         height: 100%;
         width: 100%;
+        padding-right: 0;
+        padding-left: 25px;
       }
     }
   }