整体样式修改

ali

2024-09-03 0ae83a895e80a4b9777a27f613d721a7e5e2ac18

 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>