提交： 项目详情-左侧菜单栏目 收缩展开操作

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

@@ -214,8 +214,20 @@ export default {
     tempType: {
       type: String,
       require: true
+    },
+    isFoldRight: {
+      type: Boolean,
+      default: () => {
+        return false
       }
     },
+    isShrink: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+  },
   data() {
     return {
       templateType: "A", // A: 报警； B：告警；E：事件
@@ -277,6 +289,12 @@ export default {
     };
   },
   watch: {
+    isFoldRight() {
+      this.updateEcharts()
+    },
+    isShrink() {
+      this.updateEcharts()
+    },
     sourceId(val) {
       if (val !== undefined && val !== null) {
         this.handleQuery()
@@ -287,6 +305,11 @@ export default {
     this.init();
   },
   methods: {
+    updateEcharts() {
+      if (this.$refs.echartsLineTrend) {
+        this.$refs.echartsLineTrend.updateEchart()
+      }
+    },
     handleQuery() {
       this.pageParams.pageNum = 1;
       this.time =
@@ -325,6 +348,7 @@ export default {
         );
         this.resultOption.xAxis[0].data = result["xAxisData"];
         this.resultOption.series[0].data = result["seriesData"];
+        this.updateEcharts();
         this.$forceUpdate();
       });
     },

src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue

@@ -114,10 +114,10 @@
                 <el-dropdown-item @click.native="handleChildrenDevice(devItem)"
                   >查看线路列表</el-dropdown-item
                 >
-                <el-dropdown-item>修改服务指向</el-dropdown-item>
-                <el-dropdown-item>设备巡检记录</el-dropdown-item>
-                <el-dropdown-item>设备参数调整</el-dropdown-item>
-                <el-dropdown-item>内置定时配置</el-dropdown-item>
+                <!-- <el-dropdown-item>修改服务指向</el-dropdown-item>
+                <el-dropdown-item>设备巡检记录</el-dropdown-item> -->
+                <el-dropdown-item @click.native="handleLinkToDeviceDetails(devItem)">设备参数调整</el-dropdown-item>
+                <!-- <el-dropdown-item>内置定时配置</el-dropdown-item> -->
               </el-dropdown-menu>
             </el-dropdown>
           </div>
@@ -461,6 +461,12 @@ export default {
         }
       );
     },
+    /**
+     * 跳转 设备 详情
+     */
+    handleLinkToDeviceDetails(row) {
+      this.$router.push({ path:'/device/device', query: { 'deviceId': row.deviceId, 'tempType': 'details' } })
+    }
   },
   destroyed() {
     this.closeSocket();

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

@@ -1,186 +0,0 @@
-<template>
-  <div class="e-nav-menu">
-    <div
-      :class="
-        value === item[props['key']]
-          ? 'nav-menu-item menu-selected'
-          : 'nav-menu-item'
-      "
-      v-for="item in activeList"
-      :key="item[props['key']]"
-      :style="{
-        flexWrap:
-          item[props['children']] && item[props['children']].length > 0
-            ? 'wrap'
-            : '',
-        height:
-          developList.indexOf(item[props['key']]) >= 0 &&
-          item[props['children']] &&
-          item[props['children']].length > 0
-            ? 'auto'
-            : ''
-      }"
-      @click="handleClick(item)"
-    >
-      <svg-icon slot="prefix" icon-class="A_yuanjiaodian" class="icon-left" />
-      <div class="nav-item-title">{{ item[props["label"]] }}</div>
-      <i class="el-icon-arrow-right icon-right"></i>
-      <div
-        style="height: 100%; width: 100%;"
-        v-if="
-          developList.indexOf(item[props['key']]) >= 0 &&
-          item[props['children']] &&
-          item[props['children']].length > 0
-        "
-      >
-        <div
-          :class="
-            value === childItem[props['key']]
-              ? 'nav-menu-item nav-menu-children menu-selected'
-              : 'nav-menu-item nav-menu-children'
-          "
-          v-show="
-            developList.indexOf(item[props['key']]) >= 0 &&
-            item[props['children']] &&
-            item[props['children']].length > 0
-          "
-          v-for="childItem in item[props['children']]"
-          :key="childItem[props['key']]"
-          @click.stop="handleClick(childItem)"
-        >
-          <i
-            class="icon iconfont icontongxun icon-left"
-            style="margin-right: 5px"
-          ></i>
-          <div class="nav-item-title">{{ childItem[props["label"]] }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "ENavMenu",
-  props: {
-    value: {
-      type: [String, Number],
-      default: () => {
-        return 0;
-      },
-    },
-    props: {
-      type: Object,
-      default: () => {
-        return {
-          label: "label",
-          key: "key",
-          children: "children",
-        };
-      },
-    },
-    activeList: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            label: "项目管理",
-            key: "projectOt",
-          },
-          {
-            label: "设备管理",
-            key: "projectOt",
-          },
-        ];
-      },
-    },
-    singleDevelop: {
-      type: Boolean,
-      default: () => {
-        return true;
-      },
-    },
-    defaultDevelop: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  data() {
-    return {
-      developList: [],
-    };
-  },
-  created() {
-    this.developList = this.defaultDevelop;
-  },
-  methods: {
-    handleClick(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 scoped lang="scss">
-.e-nav-menu {
-  width: 150px;
-  height: 100%;
-  padding-top: 15px;
-  border-right: 1px solid #e8e8e8;
-  .nav-menu-item {
-    width: 100%;
-    height: 32px;
-    background: #fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 10px;
-    cursor: default;
-    .nav-item-title {
-      font-size: 14px;
-      font-family: "Source Han Sans CN";
-      font-weight: 400;
-      color: #344567;
-      color: #626262;
-      height: 32px;
-      display: flex;
-      align-items: center;
-    }
-    .icon-left {
-      font-size: 16px;
-      color: #9da3af;
-    }
-    .icon-right {
-      font-size: 18px;
-    }
-  }
-  .nav-menu-children {
-    padding-left: 35px;
-    padding-left: 17px;
-    justify-content: flex-start;
-  }
-  .menu-selected {
-    background: #f4f5f7;
-    .nav-item-title {
-      color: #1890ff;
-    }
-  }
-}
-</style>

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

@@ -0,0 +1,280 @@
+<template>
+  <div class="e-nav-menu" :style="isShrink ? 'width: 40px' : ''">
+    <div
+      :class="
+        isShrink ? 'e-shrink  is-shrink-true' : 'e-shrink is-shrink-false'
+      "
+    >
+      <i
+        class="el-icon-d-arrow-right"
+        title="点击展开"
+        v-if="isShrink === true"
+        @click="handleShrink(false)"
+      ></i>
+      <i
+        class="el-icon-d-arrow-left"
+        title="点击折叠"
+        v-else-if="isShrink === false"
+        @click="handleShrink(true)"
+      ></i>
+    </div>
+    <div v-if="isShrink === false">
+      <div
+        v-show="isShrink === false"
+        :class="
+          value === item[props['key']]
+            ? 'nav-menu-item menu-selected'
+            : 'nav-menu-item'
+        "
+        v-for="item in activeList"
+        :key="item[props['key']]"
+        :style="{
+          flexWrap:
+            item[props['children']] && item[props['children']].length > 0
+              ? 'wrap'
+              : '',
+          height:
+            developList.indexOf(item[props['key']]) >= 0 &&
+            item[props['children']] &&
+            item[props['children']].length > 0
+              ? 'auto'
+              : '',
+        }"
+        @click="handleClick(item)"
+      >
+        <svg-icon slot="prefix" icon-class="A_yuanjiaodian" class="icon-left" />
+        <div class="nav-item-title">{{ item[props["label"]] }}</div>
+        <i class="el-icon-arrow-right icon-right"></i>
+        <div
+          style="height: 100%; width: 100%"
+          v-if="
+            developList.indexOf(item[props['key']]) >= 0 &&
+            item[props['children']] &&
+            item[props['children']].length > 0
+          "
+        >
+          <div
+            :class="
+              value === childItem[props['key']]
+                ? 'nav-menu-item nav-menu-children menu-selected'
+                : 'nav-menu-item nav-menu-children'
+            "
+            v-show="
+              developList.indexOf(item[props['key']]) >= 0 &&
+              item[props['children']] &&
+              item[props['children']].length > 0
+            "
+            v-for="childItem in item[props['children']]"
+            :key="childItem[props['key']]"
+            @click.stop="handleClick(childItem)"
+          >
+            <i
+              class="icon iconfont icontongxun icon-left"
+              style="margin-right: 5px"
+            ></i>
+            <div class="nav-item-title">{{ childItem[props["label"]] }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="isShrink === true">
+      <div
+        v-show="isShrink === true"
+        class="nav-menu-item"
+        v-for="item in activeList"
+        :key="item[props['key']]"
+      >
+        <el-dropdown
+          type="primary"
+          placement="right-start"
+          :hide-on-click="true"
+          trigger="click"
+        >
+          <svg-icon
+            icon-class="A_yuanjiaodian"
+            :title="item[props['label']]"
+            class="icon-left"
+          />
+
+          <el-dropdown-menu
+            slot="dropdown"
+            class="c-dropdown-c"
+            v-if="item[props['children']] && item[props['children']].length > 0"
+          >
+            <el-dropdown-item
+              v-show="
+                item[props['children']] && item[props['children']].length > 0
+              "
+              @click.native="handleClick(menuItem)"
+              v-for="(menuItem, idx) in item[props['children']]"
+              :key="idx"
+              >{{ menuItem[props["label"]] }}</el-dropdown-item
+            >
+          </el-dropdown-menu>
+          <el-dropdown-menu slot="dropdown" v-else>
+            <el-dropdown-item @click.native="handleClick(item)">
+              {{ item[props["label"]] }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ENavMenu",
+  props: {
+    value: {
+      type: [String, Number],
+      default: () => {
+        return 0;
+      },
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          label: "label",
+          key: "key",
+          children: "children",
+        };
+      },
+    },
+    activeList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            label: "项目管理",
+            key: "projectOt",
+          },
+          {
+            label: "设备管理",
+            key: "projectOt",
+          },
+        ];
+      },
+    },
+    singleDevelop: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+    defaultDevelop: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      developList: [],
+      isShrink: false,
+      shrinkShow: true,
+    };
+  },
+  created() {
+    this.developList = this.defaultDevelop;
+  },
+  methods: {
+    handleShrink(isTrue) {
+      this.isShrink = isTrue;
+      this.$emit("eventShrink", isTrue);
+    },
+    handleClick(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 scoped lang="scss">
+.e-nav-menu {
+  width: 150px;
+  height: 100%;
+  padding-top: 15px;
+  border-right: 1px solid #e8e8e8;
+  .e-shrink {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    border: 1px solid #e9e9e9;
+    border-radius: 0 50% 50% 0;
+    position: relative;
+    left: 40px;
+    font-size: 15px;
+    font-weight: 400;
+    border-left: 0;
+    top: -14px;
+  }
+  .e-shrink:hover {
+    border-color: #4395ff;
+    color: #4395ff;
+  }
+  .is-shrink-true {
+    left: 40px;
+  }
+  .is-shrink-false {
+    left: 100%;
+  }
+  .nav-menu-item {
+    width: 100%;
+    height: 32px;
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    cursor: default;
+    .nav-item-title {
+      font-size: 14px;
+      font-family: "Source Han Sans CN";
+      font-weight: 400;
+      color: #344567;
+      color: #626262;
+      height: 32px;
+      display: flex;
+      align-items: center;
+    }
+    .icon-left {
+      font-size: 16px;
+      color: #9da3af;
+    }
+    .icon-right {
+      font-size: 18px;
+    }
+  }
+  .nav-menu-children {
+    padding-left: 35px;
+    padding-left: 17px;
+    justify-content: flex-start;
+  }
+  .menu-selected {
+    background: #f4f5f7;
+    .nav-item-title {
+      color: #1890ff;
+    }
+  }
+}
+</style>

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

@@ -77,6 +77,12 @@ export default {
       default: () => {
         return false
       }
+    },
+    isShrink: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
     }
   },
   components: {
@@ -274,6 +280,17 @@ export default {
         this.init();
       }
     },
+    isShrink() {
+      if(this.$refs.echartsLineTwoYearsLoad) {
+        this.$refs.echartsLineTwoYearsLoad.updateEchart()
+      }
+      if (this.$refs.echartsLineTwoWeeksLoad) {
+        this.$refs.echartsLineTwoWeeksLoad.updateEchart();
+      }
+      if (this.$refs.echartsLineTwoDaysLoad) {
+        this.$refs.echartsLineTwoDaysLoad.updateEchart();
+      }
+    },
     isFoldRight() {
       if(this.$refs.echartsLineTwoYearsLoad) {
         this.$refs.echartsLineTwoYearsLoad.updateEchart()

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

@@ -200,8 +200,14 @@ export default {
       default: () => {
         return false
       }
+    },
+    isShrink: {
+      type: Boolean,
+      default: () => {
+        return false
       }
     },
+  },
   components: {
     EEchartsLine,
     DialogTemplate,
@@ -319,6 +325,9 @@ export default {
     isFoldRight() {
       this.updateEcharts()
     },
+    isShrink() {
+      this.updateEcharts()
+    },
     sourceId(val) {
       if (val !== null && val !== undefined) {
         this.init();

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

@@ -194,6 +194,12 @@ export default {
       default: () => {
         return false
       }
+    },
+    isShrink: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
     }
   },
   components: { EEchartsLine },
@@ -280,6 +286,9 @@ export default {
     isFoldRight() {
       this.updateEcharts()
     },
+    isShrink() {
+      this.updateEcharts()
+    },
     sourceId(val) {
       if (val !== null && val !== undefined) {
         this.handleQuery();

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

@@ -73,6 +73,9 @@
         <e-nav-menu
           v-model="activeType"
           :activeList="activeList"
+          @eventShrink="(data) => {
+            isShrink = data ? true : false
+          }"
           @input="
             (data) => {
               activeName = data['template'];
@@ -80,13 +83,14 @@
             }
           "
         />
-        <div class="main-block">
+        <div class="main-block" :style="isShrink ? 'width: 100%;':'width: calc(100% - 150px);'">
           <component
             :is="activeName"
             :projectInfo="infoData"
             :projectTypeOptions="projectTypeOptions"
             :sourceId="stateSourceId"
             :tempType="activeType"
+            :isShrink="isShrink"
             :isFoldRight="isFoldRight"
           ></component>
         </div>
@@ -131,7 +135,7 @@ 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";
+import ENavMenu from "./ENavMenu/index";
 import EProjectManage from "./EProjectManage";
 import ETodayRatio from "./ETodayRatio";
 import ETypeCensus from "./ETypeCensus";
@@ -180,6 +184,7 @@ export default {
       resultInfo: {},
       activeName: "EObjectContainer",
       activeType: "EObjectContainer",
+      isShrink: false,
       activeList: [
         {
           label: "项目信息",
@@ -585,6 +590,7 @@ export default {
         padding: 15px;
         width: calc(100% - 150px);
         height: 100%;
+        width: 100%;
       }
     }
   }