From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改
---
energy_management_ui/src/views/energyBalance/energyPic/index.vue | 129 ++++++++++++++++++++++++++++++------------
1 files changed, 91 insertions(+), 38 deletions(-)
diff --git a/energy_management_ui/src/views/energyBalance/energyPic/index.vue b/energy_management_ui/src/views/energyBalance/energyPic/index.vue
index eebe485..74b5148 100644
--- a/energy_management_ui/src/views/energyBalance/energyPic/index.vue
+++ b/energy_management_ui/src/views/energyBalance/energyPic/index.vue
@@ -1,58 +1,111 @@
<template>
- <div class="app-container" style="padding: 0">
- <el-container class="split-container">
- <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
+ <div>
+ <el-row type="flex">
+ <el-col
+ :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
+ v-show="!isCollapse"
+ >
+ <basic-container title="鑳芥祦鍒嗘瀽" :bodyStyle="bodyStyle">
+ <ModelNode
+ ref="modelNode"
+ @changeNode="changeNode"
+ :showOpt="false"
+ :auth="false"
+ :modelCode="modelCode"
+ ></ModelNode>
+ </basic-container>
+ <img
+ src="~@/assets/image/rectangle.png"
+ alt=""
+ class="shrink-col-block"
+ @click="toggleCollapse"
+ />
+ </el-col>
+ <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
+ <el-col
+ :style="{
+ width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
+ paddingLeft: isCollapse ? 0 : '14px'
+ }"
+ >
+ <div :style="bodyStyleRight">
+ <energyPic ref="energyPic"></energyPic>
+ </div>
+ </el-col>
+ </el-row>
+ <!-- <el-container class="split-container">
+ <el-aside class="left-content" :width="isCollapse ? '0px' : '20%'">
<el-card class="box-card">
<div slot="header" class="clearfix" style="height:32px">
鑳芥祦鍒嗘瀽
</div>
- <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :auth="false" :modelCode="modelCode"></ModelNode>
+ <ModelNode
+ ref="modelNode"
+ @changeNode="changeNode"
+ :showOpt="false"
+ :auth="false"
+ :modelCode="modelCode"
+ ></ModelNode>
+ <img
+ src="~@/assets/image/rectangle.png"
+ alt=""
+ class="shrink-col-block"
+ @click="toggleCollapse"
+ />
</el-card>
</el-aside>
<el-container>
- <div style="cursor:pointer;" @click="toggleCollapse">
- <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
- </div>
<el-main style="padding:0">
<energyPic ref="energyPic"></energyPic>
</el-main>
</el-container>
- </el-container>
+ </el-container> -->
</div>
</template>
<script>
- import energyPic from "./energyPic";
- import ModelNode from "../../basicsetting/modelNode/modelNode";
- export default {
- components: {energyPic, ModelNode},
- created() {
- this.modelCode=this.$route.query.modelCode;
- this.deviceCategory = this.$route.query.device_category;
+import energyPic from "./energyPic";
+import ShrinkCol from "@/components/shrink/index.vue";
+import mixins from "@/layout/mixin/getHeight";
+import ModelNode from "../../basicsetting/modelNode/modelNode";
+export default {
+ components: { energyPic, ModelNode, ShrinkCol },
+ mixins: [mixins],
+ created() {
+ this.modelCode = this.$route.query.modelCode;
+ this.deviceCategory = this.$route.query.device_category;
+ },
+ data() {
+ return {
+ modelData: "",
+ modelInfoOptions: [],
+ modelCode: undefined,
+ deviceCategory: undefined,
+ isCollapse: false,
+ bodyStyleRight: {}
+ };
+ },
+ methods: {
+ changeNode: function(node) {
+ this.$refs.energyPic.modelNodeChange(node, this.deviceCategory);
},
- data() {
- return {
- modelData: '',
- modelInfoOptions: [],
- modelCode:undefined,
- deviceCategory:undefined,
- isCollapse: false,
- }
+ manageModel: function() {
+ this.$router.push("/model");
},
- methods: {
- changeNode: function (node) {
- this.$refs.energyPic.modelNodeChange(node,this.deviceCategory);
- },
- manageModel: function () {
- this.$router.push('/model');
- },
- changeModel: function (item) {
- this.$refs.modelNode.getList(item);
- },
- // 鐐瑰嚮鎸夐挳锛屽垏鎹㈡姌鍙犱笌灞曞紑
- toggleCollapse () {
- this.isCollapse = !this.isCollapse
- }
+ changeModel: function(item) {
+ this.$refs.modelNode.getList(item);
+ },
+ // 鐐瑰嚮鎸夐挳锛屽垏鎹㈡姌鍙犱笌灞曞紑
+ toggleCollapse() {
+ this.isCollapse = !this.isCollapse;
+ },
+ setCharts() {
+ this.bodyStyle.height = window.innerHeight - 185 + "px";
+ this.bodyStyleRight = {
+ ...this.bodyStyle,
+ height: window.innerHeight - 130 + "px"
+ };
}
- };
+ }
+};
</script>
--
Gitblit v1.9.3