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/basicsetting/modelNode/index.vue | 105 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 72 insertions(+), 33 deletions(-)
diff --git a/energy_management_ui/src/views/basicsetting/modelNode/index.vue b/energy_management_ui/src/views/basicsetting/modelNode/index.vue
index 3595d05..8ac5848 100644
--- a/energy_management_ui/src/views/basicsetting/modelNode/index.vue
+++ b/energy_management_ui/src/views/basicsetting/modelNode/index.vue
@@ -1,51 +1,77 @@
<template>
<el-row type="flex">
- <el-col :style="{width:isCollapse?'0': '280px',position:'relative'}" v-show="!isCollapse">
+ <el-col
+ :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
+ v-show="!isCollapse"
+ >
<basic-container title="鏁版嵁妯″瀷绠＄悊" :bodyStyle="bodyStyle">
<el-row :gutter="24">
<el-col :span="20">
- <el-select v-model="modelData" placeholder="璇烽�夋嫨妯″瀷"
- size="small"
- filterable
- @change="changeModel">
+ <el-select
+ v-model="modelData"
+ placeholder="璇烽�夋嫨妯″瀷"
+ size="small"
+ filterable
+ @change="changeModel"
+ >
<el-option
- v-for="model in modelInfoOptions"
- :key="model.modelCode"
- :label="model.modelName"
- :value="model.modelCode"
+ v-for="model in modelInfoOptions"
+ :key="model.modelCode"
+ :label="model.modelName"
+ :value="model.modelCode"
/>
</el-select>
</el-col>
<el-col :span="4" style="margin-bottom: 16px">
- <el-button icon="el-icon-setting" circle title="绠＄悊妯″瀷" style="float:right;padding:8px"
- @click="manageModel"></el-button>
+ <el-button
+ icon="el-icon-setting"
+ circle
+ title="绠＄悊妯″瀷"
+ style="float:right;padding:8px"
+ @click="manageModel"
+ ></el-button>
</el-col>
</el-row>
- <ModelNode ref="modelNode" @changeNode="changeNode" :auth="false"></ModelNode>
+ <ModelNode
+ ref="modelNode"
+ @changeNode="changeNode"
+ :auth="false"
+ ></ModelNode>
</basic-container>
- <img src="~@/assets/image/rectangle.png" alt=""
- class="shrink-col-block"
- @click="toggleCollapse">
+ <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'}">
- <basic-container :title="currentNode ? currentNode.label+'--鑺傜偣閰嶇疆' : '鑺傜偣閰嶇疆'" :bodyStyle="bodyStyleRight">
- <ModelNodeSetting ref="modelNodeSetting"/>
+ <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
+ <el-col
+ :style="{
+ width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
+ paddingLeft: isCollapse ? 0 : '14px'
+ }"
+ >
+ <basic-container
+ :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鑺傜偣閰嶇疆'"
+ :bodyStyle="bodyStyleRight"
+ >
+ <ModelNodeSetting ref="modelNodeSetting" />
</basic-container>
</el-col>
</el-row>
</template>
<script>
import ModelNode from "../modelNode/modelNode";
-import {listModel} from "@/api/basicsetting/model";
+import { listModel } from "@/api/basicsetting/model";
import ModelNodeSetting from "./modelNodeSetting";
import mixins from "@/layout/mixin/getHeight";
-import ShrinkCol from '@/components/shrink/index.vue'
+import ShrinkCol from "@/components/shrink/index.vue";
export default {
- components: {ModelNodeSetting, ModelNode,ShrinkCol},
+ components: { ModelNodeSetting, ModelNode, ShrinkCol },
created() {
- listModel({isShow: 1}).then(response => {
+ listModel({ isShow: 1 }).then(response => {
this.modelInfoOptions = response.data;
if (this.modelInfoOptions.length > 0) {
this.modelData = this.modelInfoOptions[0].modelCode;
@@ -56,45 +82,58 @@
mixins: [mixins],
data() {
return {
- modelData: '',
+ modelData: "",
modelInfoOptions: [],
isCollapse: false,
bodyStyleRight: {},
- currentNode: ''
- }
+ currentNode: ""
+ };
},
methods: {
setCharts() {
- this.bodyStyle.height = window.innerHeight -155 + 'px'
+ this.bodyStyle.height = window.innerHeight - 185 + "px";
this.bodyStyleRight = {
...this.bodyStyle,
- height: window.innerHeight - 155 + 'px'
+ height: window.innerHeight - 185 + "px"
};
},
- changeNode: function (node) {
+ changeNode: function(node) {
if (node) {
this.currentNode = node;
}
this.$refs.modelNodeSetting.modelNodeChange(node);
},
- manageModel: function () {
- this.$router.push('/model');
+ manageModel: function() {
+ this.$router.push("/model");
},
- changeModel: function (item) {
+ changeModel: function(item) {
this.$refs.modelNode.getList(item);
},
// 鐐瑰嚮鎸夐挳锛屽垏鎹㈡姌鍙犱笌灞曞紑
toggleCollapse() {
- this.isCollapse = !this.isCollapse
+ this.isCollapse = !this.isCollapse;
}
}
};
</script>
<style scoped lang="scss">
+@import "~@/assets/styles/variables.scss";
.shrink-col-block {
position: absolute;
top: 20px;
right: 16px;
cursor: pointer;
}
+::v-deep {
+ .el-tabs__item {
+ color: #fff;
+ }
+ .el-tabs__item.is-active {
+ color: $primary-color;
+ }
+ .el-collapse-item__header {
+ background-color: #061844;
+ color: #fff;
+ }
+}
</style>
--
Gitblit v1.9.3