修改整体样式偏大问题

ali

2025-01-13 2f2b09869423f7e98c64f79dc96c62d9a1696f24

修改整体样式偏大问题

 zhitan-vue/src/assets/styles/element-ui.scss

@@ -3,20 +3,20 @@
.themeDark {
  .el-breadcrumb__inner,
  .el-breadcrumb__inner a {
    font-weight: bold !important;
    font-weight: 500 !important;
    color: #97a8be !important;
    font-size: 24px !important;
    font-size: 16px !important;
  }
}
.themeLight {
  .el-breadcrumb__inner,
  .el-breadcrumb__inner a {
    font-weight: bold !important;
    color: #000103 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 16px !important;
  }
  .app-breadcrumb.el-breadcrumb .no-redirect{
    color: #000103 !important;
    color: #333 !important;
  }
}


 zhitan-vue/src/assets/styles/page.scss

@@ -5,8 +5,9 @@

      .page-container-left {
        width: 280px;
        min-height: calc(100vh - 120px);
        min-height: calc(100vh - 148px);
        border-right: 1px solid #1a235d;
        background: #1F1C49;

        .tree {
          height: calc(100vh - 170px);
@@ -14,6 +15,7 @@
          overflow-y: auto;
        }
      }
      

      .page-container-right {
        flex: 1;
@@ -30,10 +32,15 @@
      padding: 18px 0 0 15px;
    }

    .table-bg-style {
      .theme-dark-mt20 {
        margin-top: 20px;
      }
    }

    .tree {
      // padding: 20px;
      margin-top: 25px;
      // margin-left: 20px;
      margin-top: 2px;
      overflow: hidden;
    }
  }
@@ -76,6 +83,9 @@

      .page-container-left {
        width: 280px;
        min-height: calc(100vh - 148px);
        border-right: 1px solid #fff;
        background: #f1f4fa;

        // border-right: 1px solid #1a235d;
        .tree {
@@ -100,11 +110,15 @@
      // border: 1px solid #000000;
      padding: 18px 0 0 15px;
    }
    .table-bg-style {
      background-color: #fff;
      padding-top: 12px;
      margin-top: 12px;
    }

    .tree {
      // padding: 20px;
      margin-top: 25px;
      // margin-left: 20px;
      margin-top: 2px;
      overflow: hidden;
    }
  }

 zhitan-vue/src/assets/styles/ruoyi.scss

@@ -125,7 +125,6 @@
  .el-form .el-form-item__label ,.el-form-item__content {
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }

@@ -143,7 +142,6 @@
  .el-input__inner {
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 16px;
    color: #a7bfeb;
  }

@@ -154,8 +152,6 @@
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    color: #a7bfeb;
    font-size: 16px;
    // color: #ffffff;
  }

  // 下拉每条
@@ -262,7 +258,7 @@
    background-color: transparent !important;
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 16px;
    // font-size: 16px;
    color: #ffffff;

    .el-table__header-wrapper,
@@ -280,7 +276,7 @@
        border-radius: 0px 0px 0px 0px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        font-size: 16px;
        // font-size: 16px;
        color: #ffffff;
        border-bottom: none !important;
      }
@@ -397,18 +393,16 @@
  // 树
  .el-tree {
    background: transparent;
    font-family: Inter, Inter;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;

    .el-tree-node__content {
      height: 50px;
      height: 48px;
    }

    .el-tree-node__expand-icon {
      color: #3371eb;
      font-size: 18px;
      font-size: 16px;
    }

    .el-tree-node:focus>.el-tree-node__content {
@@ -448,6 +442,7 @@
    margin-bottom: -1px;
    padding: 11px 0px;
    font-size: 13px;
    color: #fff;
  }

  .pull-right {
@@ -465,7 +460,8 @@
    padding: 14px 15px 7px !important;
    min-height: 40px;
    background: #1a235d;
    border: none;
    border-bottom: 1px solid #a09f9f;
    color: #fff;
  }

  .el-card__body {
@@ -561,6 +557,13 @@
  /* 表格右侧工具栏样式 */
  .top-right-btn {
    margin-left: auto;
  }

  .el-tabs__item {
    color: #eaeaea;
  }
  .el-tabs__item.is-active {
    color: #409EFF;
  }
}

@@ -803,7 +806,7 @@
    background-color: transparent !important;
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 16px;
    // font-size: 16px;
    color: #ffffff;

    .el-table__header-wrapper,
@@ -818,7 +821,7 @@
        border-radius: 0px 0px 0px 0px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        font-size: 16px;
        // font-size: 16px;
        color: #222222;
        border-bottom: none !important;
      }
@@ -936,18 +939,16 @@
  // 树
  .el-tree {
    background: transparent;
    font-family: Inter, Inter;
    font-weight: 500;
    font-size: 16px;
    color: #333333;

    .el-tree-node__content {
      height: 50px;
      height: 48px;
    }

    .el-tree-node__expand-icon {
      color: #393939;
      font-size: 18px;
      font-size: 16px;
    }

    .el-tree-node:focus>.el-tree-node__content {
@@ -1003,8 +1004,8 @@
  .el-card__header {
    padding: 14px 15px 7px !important;
    min-height: 40px;
    background: #1a235d;
    border: none;
    background: transparent;
    border-bottom: 1px solid #e7eaec;
  }

  .el-card__body {

 zhitan-vue/src/assets/styles/sidebar.scss

@@ -2,7 +2,8 @@
  #app {
    .el-menu-item.is-active {
      background: #3271eb !important;
      border-radius: 30px 30px 30px 30px !important;
      // border-radius: 30px 30px 30px 30px !important;
      color: #fff;
    }

    .el-scrollbar {
@@ -10,9 +11,6 @@
      margin: 0 auto;
    }

    // .is-active .menu-title {
    //   color: #fff !important;
    // }

    .main-container {
      height: 100%;
@@ -39,7 +37,6 @@
      overflow: hidden;
      -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

      font-family: OPPOSans, OPPOSans;
      font-weight: 500;
      font-size: 18px;
@@ -86,7 +83,7 @@
      .el-menu {
        border: none;
        height: 100%;
        width: 95%;
        // width: 95%;
        margin: 0 auto;
      }

@@ -94,7 +91,7 @@
      .menu-title {
        overflow: hidden !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        font-size: 16px !important;
      }

      // @media (min-width: 1440px) {
@@ -141,18 +138,18 @@

        &:hover {
          background-color: rgba(0, 0, 0, 0.06) !important;
          border-radius: 30px 30px 30px 30px !important;
          // border-radius: 30px 30px 30px 30px !important;
        }
      }

      // 子级item
      & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
      & .theme-dark .el-sub-menu .el-menu-item {
        border-radius: 30px 30px 30px 30px !important;
        // border-radius: 30px 30px 30px 30px !important;

        &:hover {
          background-color: $base-sub-menu-hover !important;
          border-radius: 30px 30px 30px 30px !important;
          // border-radius: 30px 30px 30px 30px !important;
        }
      }
    }
@@ -286,7 +283,7 @@
  #app {
    .el-menu-item.is-active {
      background: #e0eafc !important;
      border-radius: 30px 30px 30px 30px !important;
      // border-radius: 30px 30px 30px 30px !important;
    }

    .el-scrollbar {
@@ -358,19 +355,19 @@
        display: inline-block;
        width: 100%;
        overflow: hidden;
        border-radius: 30px;
        // border-radius: 30px;
      }

      .svg-icon {
        margin-right: 16px;
        font-size: 18px;
        font-size: 16px;
        color: #C3C3C3;
      }

      .el-menu {
        border: none;
        height: 100%;
        width: 95%;
        // width: 95%;
        margin: 0 auto;
      }

@@ -378,7 +375,7 @@
      .menu-title {
        overflow: hidden !important;
        font-weight: 400 !important;
        font-size: 18px !important;
        font-size: 16px !important;
      }

      // @media (min-width: 1440px) {
@@ -425,7 +422,7 @@

        &:hover {
          background-color: #E0EAFC !important;
          border-radius: 30px 30px 30px 30px !important;
          // border-radius: 30px 30px 30px 30px !important;
        }
      }

@@ -433,11 +430,11 @@
      & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
      & .theme-dark .el-sub-menu .el-menu-item {
        background-color: #E0EAFC !important;
        border-radius: 30px 30px 30px 30px !important;
        // border-radius: 30px 30px 30px 30px !important;

        &:hover {
          background-color: #E0EAFC !important;
          border-radius: 30px 30px 30px 30px !important;
          // border-radius: 30px 30px 30px 30px !important;
        }
      }
    }

 zhitan-vue/src/assets/styles/variables.module.scss

@@ -18,8 +18,8 @@
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background: #1A235D;
$base-sub-menu-hover: #3371EB; //鼠标悬停
$base-sub-menu-background: #232D70;
$base-sub-menu-hover: rgba(50, 113, 235, 0.5); //鼠标悬停

// 自定义暗色菜单风格
/**
@@ -42,7 +42,7 @@
$--color-danger: #F56C6C;
$--color-info: #909399;

$base-sidebar-width: 280px;
$base-sidebar-width: 260px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

 zhitan-vue/src/components/CardHeader/CardHeader.vue

@@ -2,8 +2,13 @@
  <div class="header">
    <slot></slot>
    <div class="btn-list" v-if="props.showBtn">
      <div class="btn-list-item" :class="{ active: timeType == dict.value }" v-for="dict in props.period"
        :key="dict.value" @click="handleClick(dict.value)">
      <div
        class="btn-list-item"
        :class="{ active: timeType == dict.value }"
        v-for="dict in props.period"
        :key="dict.value"
        @click="handleClick(dict.value)"
      >
        {{ dict.label }}
      </div>
    </div>
@@ -11,17 +16,17 @@
</template>

<script setup>
const emit = defineEmits();
const props = defineProps(["showBtn", "period", "active"]);
const emit = defineEmits()
const props = defineProps(["showBtn", "period", "active"])
const data = reactive({
  timeType: 'DAY',
});
const { timeType } = toRefs(data);
handleClick(timeType.value);
  timeType: "DAY",
})
const { timeType } = toRefs(data)
handleClick(timeType.value)

function handleClick(value) {
  timeType.value = value;
  emit("handleClick", timeType.value, props.active);
  timeType.value = value
  emit("handleClick", timeType.value, props.active)
}
</script>

@@ -29,10 +34,10 @@
.themeDark {
  .header {
    // width: 88px;
    height: 29px;
    height: 26px;
    font-family: OPPOSans, OPPOSans;
    font-weight: bold;
    font-size: 22px;
    font-size: 18px;
    color: #fffefe;
    line-height: 29px;
    text-align: left;
@@ -76,10 +81,10 @@
.themeLight {
  .header {
    // width: 88px;
    height: 29px;
    height: 26px;
    font-family: OPPOSans, OPPOSans;
    font-weight: bold;
    font-size: 22px;
    font-size: 18px;
    color: #000;
    line-height: 29px;
    text-align: left;
@@ -116,6 +121,7 @@
        background: #1d6aff;
        color: #fff;
      }
    } }
    }
  }
}
</style>

 zhitan-vue/src/layout/components/AppMain.vue

@@ -13,7 +13,7 @@

<script setup>
import iframeToggle from "./IframeToggle/index"
import useTagsViewStore from '@/store/modules/tagsView'
import useTagsViewStore from "@/store/modules/tagsView"

const tagsViewStore = useTagsViewStore()
</script>
@@ -27,21 +27,22 @@
    position: relative;
    overflow: hidden;
    background: #110f2e;
    padding: 14px 0 0 14px;
  }

  .fixed-header + .app-main {
    padding-top: 50px;
    padding-top: 82px;
  }

  .hasTagsView {
    .app-main {
      /* 84 = navbar + tags-view = 50 + 34 */
      min-height: calc(100vh - 120px);
      /* 84 = navbar + tags-view + padding = 70 + 56 + 14 */
      min-height: calc(100vh - 125px);
      // padding: 20px;
    }

    .fixed-header + .app-main {
      padding-top: 84px;
      padding-top: 130px;
    }
  }
}
@@ -53,23 +54,23 @@
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #F7F8FA;
    background: #f7f8fa;
    padding: 14px 0 0 14px;
  }

  .fixed-header + .app-main {
    padding-top: 50px;
    padding-top: 82px;
  }

  .hasTagsView {
    .app-main {
      /* 84 = navbar + tags-view = 50 + 34 */
      // 70+50
      min-height: calc(100vh - 120px);
      /* 84 = navbar + tags-view + padding = 70 + 56 + 14 */
      min-height: calc(100vh - 125px);
      // padding: 20px;
    }

    .fixed-header + .app-main {
      padding-top: 84px;
      padding-top: 130px;
    }
  }
}
@@ -97,4 +98,3 @@
  border-radius: 3px;
}
</style>


 zhitan-vue/src/layout/components/Navbar.vue

@@ -1,7 +1,12 @@
<template>
  <div class="navbar">
    <div class="navbar-left">
      <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
      <hamburger
        id="hamburger-container"
        :is-active="appStore.sidebar.opened"
        class="hamburger-container"
        @toggleClick="toggleSideBar"
      />
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
      <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
    </div>
@@ -31,7 +36,7 @@
              <el-dropdown-item command="toggleTheme">
                <span>风格切换</span>
              </el-dropdown-item>
<!--               
              <!--               
              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
                <span>布局设置</span>
              </el-dropdown-item> -->
@@ -47,31 +52,29 @@
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'

import { ElMessageBox } from "element-plus"
import Breadcrumb from "@/components/Breadcrumb"
import TopNav from "@/components/TopNav"
import Hamburger from "@/components/Hamburger"
import Screenfull from "@/components/Screenfull"
import SizeSelect from "@/components/SizeSelect"
import HeaderSearch from "@/components/HeaderSearch"
import useAppStore from "@/store/modules/app"
import useUserStore from "@/store/modules/user"
import useSettingsStore from "@/store/modules/settings"

const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

function toggleTheme() {
  if (settingsStore.sideTheme == 'theme-dark') {
    settingsStore.sideTheme = 'theme-light'
    document.querySelector('body').className = 'themeLight';
  if (settingsStore.sideTheme == "theme-dark") {
    settingsStore.sideTheme = "theme-light"
    document.querySelector("body").className = "themeLight"
  } else {
    settingsStore.sideTheme = 'theme-dark'
    document.querySelector('body').className = 'themeDark';
    settingsStore.sideTheme = "theme-dark"
    document.querySelector("body").className = "themeDark"
  }

}

function toggleSideBar() {
@@ -81,44 +84,46 @@
function handleCommand(command) {
  switch (command) {
    case "toggleTheme":
      toggleTheme();
      break;
      toggleTheme()
      break
    case "setLayout":
      setLayout();
      break;
      setLayout()
      break
    case "logout":
      logout();
      break;
      logout()
      break
    default:
      break;
      break
  }
}

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index"
      })
    })
  }).catch(() => { });
    .catch(() => {})
}

const emits = defineEmits(['setLayout'])
const emits = defineEmits(["setLayout"])
function setLayout() {
  emits('setLayout');
  emits("setLayout")
}
</script>

<style lang='scss' scoped>
<style lang="scss" scoped>
.themeDark {
  .navbar {
    height: 70px;
    background: #1a235d;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #000000;
    border-bottom: 2px solid #110f2e;
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -208,14 +213,13 @@
      }
    }
  }
  
}
.themeLight {
  .navbar {
    height: 70px;
    background: #FEFEFE;
    background: #fefefe;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid#f7f8fa;
    border-bottom: 2px solid#f7f8fa;
    display: flex;
    justify-content: space-between;
    align-items: center;

 zhitan-vue/src/layout/components/Sidebar/Logo.vue

@@ -19,7 +19,7 @@
      <img v-else :src="systemInfo.leftLogo" class="sidebar-logo" />
    </div>

    <div class="name" v-if="!collapse" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#487FEE' }">
    <div class="name" v-if="!collapse" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }">
      {{ title }}
    </div>
  </div>
@@ -58,27 +58,27 @@
.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #2b2f3a;
  height: 70px;
  line-height: 70px;
  background: #1a235d;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 15px;
  // margin-top: 24px;
  // margin-bottom: 15px;
  .logo {
    width: 40px;
    height: 40px;
    margin-left: 13px;
    margin-left: 10px;
    .sidebar-logo {
      width: 100%;
      height: 100%;
    }
  }
  .name {
    width: 210px;
    margin-top: 2px;
    // width: 210px;
    margin-left: 6px;
    font-family: OPPOSans, OPPOSans;
    font-weight: bold;

 zhitan-vue/src/layout/components/Sidebar/index.vue

@@ -1,11 +1,14 @@
<template>
  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
  <div
    :class="{ 'has-logo': showLogo }"
    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
  >
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="sideTheme === 'theme-dark' ? '#1A235D' : '#fff'"
        :background-color="sideTheme === 'theme-dark' ? '#232D70' : '#fff'"
        :text-color="sideTheme === 'theme-dark' ? '#fff' : '#000'"
        :unique-opened="true"
        :active-text-color="theme"
@@ -24,35 +27,31 @@
</template>

<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import Logo from "./Logo"
import SidebarItem from "./SidebarItem"
import variables from "@/assets/styles/variables.module.scss"
import useAppStore from "@/store/modules/app"
import useSettingsStore from "@/store/modules/settings"
import usePermissionStore from "@/store/modules/permission"

const route = useRoute();
const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)

const activeMenu = computed(() => {
  const { meta, path } = route;
  const { meta, path } = route
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
    return meta.activeMenu
  }
  return path;
  return path
})

</script>
<style lang="scss" scoped>


</style>
<style lang="scss" scoped></style>

 zhitan-vue/src/layout/components/TagsView/index.vue

@@ -1,59 +1,57 @@
<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link v-for="tag in visitedViews" :key="tag.path" :data-path="tag.path" :class="isActive(tag) ? 'active' : ''"
                   :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" class="tags-view-item" :style="activeStyle(tag)"
                   @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openMenu(tag, $event)">
      <router-link
        v-for="tag in visitedViews"
        :key="tag.path"
        :data-path="tag.path"
        :class="isActive(tag) ? 'active' : ''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        class="tags-view-item"
        :style="activeStyle(tag)"
        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent="openMenu(tag, $event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
        </span>
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">
        <refresh-right style="width: 1em; height: 1em;" /> 刷新页面
      </li>
      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> 刷新页面</li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
        <close style="width: 1em; height: 1em;" /> 关闭当前
        <close style="width: 1em; height: 1em" /> 关闭当前
      </li>
      <li @click="closeOthersTags">
        <circle-close style="width: 1em; height: 1em;" /> 关闭其他
      </li>
      <li v-if="!isFirstView()" @click="closeLeftTags">
        <back style="width: 1em; height: 1em;" /> 关闭左侧
      </li>
      <li v-if="!isLastView()" @click="closeRightTags">
        <right style="width: 1em; height: 1em;" /> 关闭右侧
      </li>
      <li @click="closeAllTags(selectedTag)">
        <circle-close style="width: 1em; height: 1em;" /> 全部关闭
      </li>
      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> 关闭其他</li>
      <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> 关闭左侧</li>
      <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> 关闭右侧</li>
      <li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em" /> 全部关闭</li>
    </ul>
  </div>
</template>

<script setup>
import ScrollPane from './ScrollPane'
import { getNormalPath } from '@/utils/ruoyi'
import useTagsViewStore from '@/store/modules/tagsView'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import ScrollPane from "./ScrollPane"
import { getNormalPath } from "@/utils/ruoyi"
import useTagsViewStore from "@/store/modules/tagsView"
import useSettingsStore from "@/store/modules/settings"
import usePermissionStore from "@/store/modules/permission"

const visible = ref(false);
const top = ref(0);
const left = ref(0);
const selectedTag = ref({});
const affixTags = ref([]);
const scrollPaneRef = ref(null);
const visible = ref(false)
const top = ref(0)
const left = ref(0)
const selectedTag = ref({})
const affixTags = ref([])
const scrollPaneRef = ref(null)

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const visitedViews = computed(() => useTagsViewStore().visitedViews);
const routes = computed(() => usePermissionStore().routes);
const theme = computed(() => useSettingsStore().theme);
const visitedViews = computed(() => useTagsViewStore().visitedViews)
const routes = computed(() => usePermissionStore().routes)
const theme = computed(() => useSettingsStore().theme)

watch(route, () => {
  addTags()
@@ -61,9 +59,9 @@
})
watch(visible, (value) => {
  if (value) {
    document.body.addEventListener('click', closeMenu)
    document.body.addEventListener("click", closeMenu)
  } else {
    document.body.removeEventListener('click', closeMenu)
    document.body.removeEventListener("click", closeMenu)
  }
})
onMounted(() => {
@@ -75,18 +73,18 @@
  return r.path === route.path
}
function activeStyle(tag) {
  if (!isActive(tag)) return {};
  if (!isActive(tag)) return {}
  return {
    "background-color": theme.value,
    "border-color": theme.value
  };
    "border-color": theme.value,
  }
}
function isAffix(tag) {
  return tag.meta && tag.meta.affix
}
function isFirstView() {
  try {
    return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath
    return selectedTag.value.fullPath === "/index" || selectedTag.value.fullPath === visitedViews.value[1].fullPath
  } catch (err) {
    return false
  }
@@ -98,16 +96,16 @@
    return false
  }
}
function filterAffixTags(routes, basePath = '') {
function filterAffixTags(routes, basePath = "") {
  let tags = []
  routes.forEach(route => {
  routes.forEach((route) => {
    if (route.meta && route.meta.affix) {
      const tagPath = getNormalPath(basePath + '/' + route.path)
      const tagPath = getNormalPath(basePath + "/" + route.path)
      tags.push({
        fullPath: tagPath,
        path: tagPath,
        name: route.name,
        meta: { ...route.meta }
        meta: { ...route.meta },
      })
    }
    if (route.children) {
@@ -120,8 +118,8 @@
  return tags
}
function initTags() {
  const res = filterAffixTags(routes.value);
  affixTags.value = res;
  const res = filterAffixTags(routes.value)
  affixTags.value = res
  for (const tag of res) {
    // Must have tag name
    if (tag.name) {
@@ -134,7 +132,7 @@
  if (name) {
    useTagsViewStore().addView(route)
    if (route.meta.link) {
      useTagsViewStore().addIframeView(route);
      useTagsViewStore().addIframeView(route)
    }
  }
  return false
@@ -143,7 +141,7 @@
  nextTick(() => {
    for (const r of visitedViews.value) {
      if (r.path === route.path) {
        scrollPaneRef.value.moveToTarget(r);
        scrollPaneRef.value.moveToTarget(r)
        // when query is different then update
        if (r.fullPath !== route.fullPath) {
          useTagsViewStore().updateVisitedView(route)
@@ -153,9 +151,9 @@
  })
}
function refreshSelectedTag(view) {
  proxy.$tab.refreshPage(view);
  proxy.$tab.refreshPage(view)
  if (route.meta.link) {
    useTagsViewStore().delIframeView(route);
    useTagsViewStore().delIframeView(route)
  }
}
function closeSelectedTag(view) {
@@ -166,28 +164,28 @@
  })
}
function closeRightTags() {
  proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
  proxy.$tab.closeRightPage(selectedTag.value).then((visitedViews) => {
    if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
      toLastView(visitedViews)
    }
  })
}
function closeLeftTags() {
  proxy.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
  proxy.$tab.closeLeftPage(selectedTag.value).then((visitedViews) => {
    if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
      toLastView(visitedViews)
    }
  })
}
function closeOthersTags() {
  router.push(selectedTag.value).catch(() => { });
  router.push(selectedTag.value).catch(() => {})
  proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
    moveToCurrentTag()
  })
}
function closeAllTags(view) {
  proxy.$tab.closeAllPage().then(({ visitedViews }) => {
    if (affixTags.value.some(tag => tag.path === route.path)) {
    if (affixTags.value.some((tag) => tag.path === route.path)) {
      return
    }
    toLastView(visitedViews, view)
@@ -200,11 +198,11 @@
  } else {
    // now the default is to redirect to the home page if there is no tags-view,
    // you can adjust it according to your needs.
    if (view.name === 'Dashboard') {
    if (view.name === "Dashboard") {
      // to reload home page
      router.replace({ path: '/redirect' + view.fullPath })
      router.replace({ path: "/redirect" + view.fullPath })
    } else {
      router.push('/')
      router.push("/")
    }
  }
}
@@ -233,10 +231,10 @@
}
</script>

<style lang='scss' scoped>
<style lang="scss" scoped>
.themeDark {
  .tags-view-container {
    height: 50px;
    height: 56px;
    width: 100%;
    background: #1a235d;
    // border-bottom: 1px solid #d8dce5;
@@ -246,27 +244,27 @@
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 34px;
        line-height: 34px;
        border: 1px solid #203a81;
        color: #c1c1c1;
        background: #3271eb;
        padding: 0 8px;
        font-size: 15px;
        margin-left: 5px;
        margin-top: 6px;
        border-radius: 5px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #5278f5;
        color: #fff;
        // background: #3271eb;
        padding: 0 14px;
        font-size: 14px;
        margin-left: 6px;
        margin-top: 10px;
        border-radius: 4px;
        font-family: OPPOSans, OPPOSans;
        &:first-of-type {
          margin-left: 15px;
          margin-left: 16px;
        }
        &:last-of-type {
          margin-right: 15px;
        }
        &.active {
          background-color: #42b983;
          background-color: #4e77f8 !important;
          color: #fff;
          border-color: #42b983;
          border-color: #4e77f8 !important;
          &::before {
            content: "";
            background: #fff;
@@ -306,7 +304,7 @@

.themeLight {
  .tags-view-container {
    height: 50px;
    height: 56px;
    width: 100%;
    background: #fff;
    // border-bottom: 1px solid #d8dce5;
@@ -316,19 +314,19 @@
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 34px;
        line-height: 34px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #d8dce5;
        color: #495060;
        background: #fff;
        padding: 0 8px;
        font-size: 15px;
        margin-left: 5px;
        margin-top: 6px;
        border-radius: 5px;
        padding: 0 14px;
        font-size: 14px;
        margin-left: 6px;
        margin-top: 10px;
        border-radius: 4px;
        font-family: OPPOSans, OPPOSans;
        &:first-of-type {
          margin-left: 15px;
          margin-left: 16px;
        }
        &:last-of-type {
          margin-right: 15px;
@@ -405,4 +403,4 @@
.scroll-container .el-scrollbar__wrap {
  height: 50px !important;
}
</style>
</style>

 zhitan-vue/src/settings.js

@@ -6,7 +6,7 @@
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
  sideTheme: 'theme-dark',
  sideTheme: "theme-dark",
  /**
   * 是否系统布局配置
   */
@@ -43,5 +43,5 @@
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: 'production'
  errorLog: "production",
}

 zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue

@@ -1,116 +1,141 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="form" ref="formRef" :inline="true">
                <el-form-item label="期间" prop="type">
                    <el-select v-model="form.type" placeholder="期间" style="width: 100%" @change="handleTimeType">
                        <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value"
                            v-show="dict.value != 'DAY'" />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="form.time" type="year" v-if="form.type == 'YEAR'" range-separator="到"
                        format="YYYY" value-format="YYYY" placeholder="时间" style="width: 100%" :clearable="false" />
                    <el-date-picker v-model="form.time" type="month" v-else format="YYYY-MM" value-format="YYYY-MM"
                        placeholder="时间" style="width: 100%" :clearable="false" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div class="table-box">
            <div class="mt20 mb20">
                <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="time" label="时间" show-overflow-tooltip align="center" />
                <el-table-column prop="electricityNum" label="总电量(千瓦时)" show-overflow-tooltip align="center" />
                <el-table-column prop="electricityFee" label="总电费(元)" show-overflow-tooltip align="center" />
                <el-table-column prop="powerFactor" label="功率因数" show-overflow-tooltip align="center" />
                <el-table-column prop="electricityNum" label="尖(千瓦时)" show-overflow-tooltip align="center" />
                <el-table-column prop="peakElectricity" label="峰(千瓦时)" show-overflow-tooltip align="center" />
                <el-table-column prop="flatElectricity" label="平(千瓦时)" show-overflow-tooltip align="center" />
                <el-table-column prop="valleyElectricity" label="谷(千瓦时)" show-overflow-tooltip align="center" />
                <el-table-column prop="createTime" label="提交时间" show-overflow-tooltip align="center" />
                <el-table-column label="操作" width="280" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        <EditModal ref="EditModalRef" @getList="resetQuery" />
  <div class="page">
    <div class="form-card">
      <el-form :model="form" ref="formRef" :inline="true">
        <el-form-item label="期间" prop="type">
          <el-select v-model="form.type" placeholder="期间" style="width: 100%" @change="handleTimeType">
            <el-option
              v-for="dict in period"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              v-show="dict.value != 'DAY'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="form.time"
            type="year"
            v-if="form.type == 'YEAR'"
            range-separator="到"
            format="YYYY"
            value-format="YYYY"
            placeholder="时间"
            style="width: 100%"
            :clearable="false"
          />
          <el-date-picker
            v-model="form.time"
            type="month"
            v-else
            format="YYYY-MM"
            value-format="YYYY-MM"
            placeholder="时间"
            style="width: 100%"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="time" label="时间" show-overflow-tooltip align="center" />
          <el-table-column prop="electricityNum" label="总电量(千瓦时)" show-overflow-tooltip align="center" />
          <el-table-column prop="electricityFee" label="总电费(元)" show-overflow-tooltip align="center" />
          <el-table-column prop="powerFactor" label="功率因数" show-overflow-tooltip align="center" />
          <el-table-column prop="electricityNum" label="尖(千瓦时)" show-overflow-tooltip align="center" />
          <el-table-column prop="peakElectricity" label="峰(千瓦时)" show-overflow-tooltip align="center" />
          <el-table-column prop="flatElectricity" label="平(千瓦时)" show-overflow-tooltip align="center" />
          <el-table-column prop="valleyElectricity" label="谷(千瓦时)" show-overflow-tooltip align="center" />
          <el-table-column prop="createTime" label="提交时间" show-overflow-tooltip align="center" />
          <el-table-column label="操作" width="280" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <EditModal ref="EditModalRef" @getList="resetQuery" />
  </div>
</template>
<script setup>
import { electricityInputList, electricityInputDel } from '@/api/auxiliaryEntry/electricityInput.js'
import EditModal from './components/EditModal.vue'
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import { electricityInputList, electricityInputDel } from "@/api/auxiliaryEntry/electricityInput.js"
import EditModal from "./components/EditModal.vue"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
let form = ref({
    type: null,
    time: null
  type: null,
  time: null,
})
// handleTimeType('YEAR')
function handleTimeType(e) {
    form.value.type = e;
    form.value.time = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM");
  form.value.type = e
  form.value.time = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM")
}
let loading = ref(false)
let EditModalRef = ref()
let tableData = ref([])
let total = ref(0)
let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  pageNum: 1,
  pageSize: 10,
})

//获取列表
function getList() {
    loading.value = true
    electricityInputList({ ...queryParams.value, ...form.value }).then(res => {
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    })
  loading.value = true
  electricityInputList({ ...queryParams.value, ...form.value }).then((res) => {
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}
getList()
function handleAdd(row) {
    if (EditModalRef.value) {
        EditModalRef.value.handleOpen(row)
    }
  if (EditModalRef.value) {
    EditModalRef.value.handleOpen(row)
  }
}

function handleDel(row) {
    proxy.$modal
        .confirm('是否确认删除时间为"' + row.time + '"的数据项？')
        .then(function () {
            return electricityInputDel(row.id);
        })
        .then(() => {
            resetQuery();
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
  proxy.$modal
    .confirm('是否确认删除时间为"' + row.time + '"的数据项？')
    .then(function () {
      return electricityInputDel(row.id)
    })
    .then(() => {
      resetQuery()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
function resetQuery() {
    form.value = {}
    queryParams.value.pageNum = 1
    getList()
  form.value = {}
  queryParams.value.pageNum = 1
  getList()
}
function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
  queryParams.value.pageNum = 1
  getList()
}
</script>


 zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue

@@ -1,133 +1,144 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
                <el-form-item label="限值类型名称">
                    <el-input v-model="queryParams.limitName" placeholder="请输入限值类型名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>


        <div class="table-box">
            <div class="mt20 mb20">
                <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
                <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="limitName" label="限值类型名称" show-overflow-tooltip align="center" />
                <el-table-column prop="limitCode" label="限值类型编号" show-overflow-tooltip align="center" />
                <el-table-column prop="alarmType" label="报警限制类型" show-overflow-tooltip align="center"
                    :formatter="(row, column) => proxy.selectDictLabel(alarm_type, row.alarmType)" />
                <el-table-column prop="colorNumber" label="色号" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <div style="width: 20px;height: 20px;border-radius: 5px; margin: 0 auto"
                            :style="{ 'background': scope.row.colorNumber }">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="comparatorOperator" label="比较运算符" show-overflow-tooltip align="center"
                    :formatter="(row) => proxy.selectDictLabel(operatorList,row.comparatorOperator)" />
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />

        </div>
        <edit-modal ref="EditModalRef" @getList="getList" :operatorList="operatorList" :alarmTypeList='alarm_type' />
  <div class="page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-form-item label="限值类型名称">
          <el-input v-model="queryParams.limitName" placeholder="请输入限值类型名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="limitName" label="限值类型名称" show-overflow-tooltip align="center" />
          <el-table-column prop="limitCode" label="限值类型编号" show-overflow-tooltip align="center" />
          <el-table-column
            prop="alarmType"
            label="报警限制类型"
            show-overflow-tooltip
            align="center"
            :formatter="(row, column) => proxy.selectDictLabel(alarm_type, row.alarmType)"
          />
          <el-table-column prop="colorNumber" label="色号" show-overflow-tooltip align="center">
            <template #default="scope">
              <div
                style="width: 20px; height: 20px; border-radius: 5px; margin: 0 auto"
                :style="{ background: scope.row.colorNumber }"
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="comparatorOperator"
            label="比较运算符"
            show-overflow-tooltip
            align="center"
            :formatter="(row) => proxy.selectDictLabel(operatorList, row.comparatorOperator)"
          />
          <el-table-column label="操作" width="300" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <edit-modal ref="EditModalRef" @getList="getList" :operatorList="operatorList" :alarmTypeList="alarm_type" />
  </div>
</template>

<script setup>
import EditModal from './components/EditModal.vue'
import { alarmList, alarmDel } from '@/api/businessConfiguration/businessConfiguration'
import EditModal from "./components/EditModal.vue"
import { alarmList, alarmDel } from "@/api/businessConfiguration/businessConfiguration"
let { proxy } = getCurrentInstance()
let operatorList = ref([
    { label: '大于', value: '>' },
    { label: '大于等于', value: '>=' },
    { label: '小于', value: '<' },
    { label: '小于等于', value: '<=' },
    { label: '等于', value: '=' },
  { label: "大于", value: ">" },
  { label: "大于等于", value: ">=" },
  { label: "小于", value: "<" },
  { label: "小于等于", value: "<=" },
  { label: "等于", value: "=" },
])
let { alarm_type } = proxy.useDict('alarm_type')
let loading = ref(false);
let total = ref(0);
let { alarm_type } = proxy.useDict("alarm_type")
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
    limitName: '',
    pageNum: 1,
    pageSize: 10,
  limitName: "",
  pageNum: 1,
  pageSize: 10,
})

function getList() {
    loading.value = true
    alarmList(queryParams.value).then(res => {
        console.log(res.rows)
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    })
  loading.value = true
  alarmList(queryParams.value).then((res) => {
    console.log(res.rows)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

getList()

let EditModalRef = ref('')
let EditModalRef = ref("")
function handleAdd(row) {
    if (EditModalRef.value) {
        EditModalRef.value.handleOpen(row)
    }

  if (EditModalRef.value) {
    EditModalRef.value.handleOpen(row)
  }
}

function handleDel(row) {
    proxy.$modal.confirm('是否确认删除数据项?').then(function () {
        return alarmDel(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
  proxy.$modal
    .confirm("是否确认删除数据项?")
    .then(function () {
      return alarmDel(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

function handleQuery() {
    queryParams.value.pageNum = 1
    getList()

  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
    queryParams.value = {
        limitName: '',
        pageNum: 1,
        pageSize: 10,
    }
    getList()
  queryParams.value = {
    limitName: "",
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}


</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";


.header-box {
    :deep .el-form-item__content {
        color: #fff;
        font-size: 16px;
    }

  :deep .el-form-item__content {
    color: #fff;
    font-size: 16px;
  }
}
</style>

 zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue

@@ -22,505 +22,522 @@
</template>

<script setup>


let dataList = ref([{
  name: "网关",
  list: [
    {
      id: 1,
      title_num: "数据库",
      dot: []
    },
    {
      id: 2,
      title_num: "200331",
      dot: []
    },
    {
      id: 3,
      title_num: "200331",
      dot: []
    },
    {
      id: 4,
      title_num: "200331",
      dot: []
    },
    {
      id: 5,
      title_num: "200331",
      dot: []
    },
    {
      id: 6,
      title_num: "200331",
      dot: []
    },
    {
      id: 7,
      title_num: "200331",
      dot: []
    },
    {
      id: 8,
      title_num: "200331",
      dot: []
    },
    {
      id: 9,
      title_num: "200331",
      dot: []
    },
    {
      id: 10,
      title_num: "200331",
      dot: []
    },
    {
      id: 11,
      title_num: "200331",
      dot: []
    },
    {
      id: 12,
      title_num: "200331",
      dot: []
    },
    {
      id: 13,
      title_num: "200331",
      dot: []
    },
    {
      id: 14,
      title_num: "200331",
      dot: []
    },
    {
      id: 15,
      title_num: "200461",
      dot: []
    },
    {
      id: 16,
      title_num: "200475",
      dot: []
    },
  ]
},
{
  name: "计算器具",
  list: [{
    id: 1,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
let dataList = ref([
  {
    name: "网关",
    list: [
      {
        id: 1,
        title_num: "数据库",
        dot: [],
      },
      {
        id: 2,
        title_num: "200331",
        dot: [],
      },
      {
        id: 3,
        title_num: "200331",
        dot: [],
      },
      {
        id: 4,
        title_num: "200331",
        dot: [],
      },
      {
        id: 5,
        title_num: "200331",
        dot: [],
      },
      {
        id: 6,
        title_num: "200331",
        dot: [],
      },
      {
        id: 7,
        title_num: "200331",
        dot: [],
      },
      {
        id: 8,
        title_num: "200331",
        dot: [],
      },
      {
        id: 9,
        title_num: "200331",
        dot: [],
      },
      {
        id: 10,
        title_num: "200331",
        dot: [],
      },
      {
        id: 11,
        title_num: "200331",
        dot: [],
      },
      {
        id: 12,
        title_num: "200331",
        dot: [],
      },
      {
        id: 13,
        title_num: "200331",
        dot: [],
      },
      {
        id: 14,
        title_num: "200331",
        dot: [],
      },
      {
        id: 15,
        title_num: "200461",
        dot: [],
      },
      {
        id: 16,
        title_num: "200475",
        dot: [],
      },
    ],
  },
  {
    id: 2,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    name: "计算器具",
    list: [
      {
        id: 1,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
        ],
      },
      {
        id: 2,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
        ],
      },
      {
        id: 3,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
          {
            id: "004",
            dot_li: "",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    {
      id: '004',
      dot_li: ""
    },
    ],
  }
  ]
},
{
  name: "网关",
  list: [{
    id: 1,
    title_num: "200505"
  },
  {
    id: 2,
    title_num: "200331"
  },
  {
    id: 3,
    title_num: "200331"
  },
  {
    id: 4,
    title_num: "200331"
  },
  {
    id: 5,
    title_num: "200331"
  },
  {
    id: 6,
    title_num: "200331"
  },
  {
    id: 7,
    title_num: "200331"
  },
  {
    id: 8,
    title_num: "200331"
  },
  {
    id: 9,
    title_num: "200331"
  },
  {
    id: 10,
    title_num: "200331"
  },
  {
    id: 11,
    title_num: "200331"
  },
  {
    id: 12,
    title_num: "200331"
  },
  {
    id: 13,
    title_num: "200331"
  },
  {
    id: 14,
    title_num: "200331"
  },
  {
    id: 15,
    title_num: "200461"
  },
  {
    id: 16,
    title_num: "200604"
  },
  ]
},
{
  name: "计算器具",
  list: [{
    id: 1,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    name: "网关",
    list: [
      {
        id: 1,
        title_num: "200505",
      },
      {
        id: 2,
        title_num: "200331",
      },
      {
        id: 3,
        title_num: "200331",
      },
      {
        id: 4,
        title_num: "200331",
      },
      {
        id: 5,
        title_num: "200331",
      },
      {
        id: 6,
        title_num: "200331",
      },
      {
        id: 7,
        title_num: "200331",
      },
      {
        id: 8,
        title_num: "200331",
      },
      {
        id: 9,
        title_num: "200331",
      },
      {
        id: 10,
        title_num: "200331",
      },
      {
        id: 11,
        title_num: "200331",
      },
      {
        id: 12,
        title_num: "200331",
      },
      {
        id: 13,
        title_num: "200331",
      },
      {
        id: 14,
        title_num: "200331",
      },
      {
        id: 15,
        title_num: "200461",
      },
      {
        id: 16,
        title_num: "200604",
      },
    ],
  },
  {
    id: 2,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    name: "计算器具",
    list: [
      {
        id: 1,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
        ],
      },
      {
        id: 2,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
        ],
      },
      {
        id: 3,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
          {
            id: "004",
            dot_li: "",
          },
        ],
      },
      {
        id: 4,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
          {
            id: "004",
            dot_li: "",
          },
          {
            id: "005",
            dot_li: "",
          },
        ],
      },
      {
        id: 5,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
          {
            id: "004",
            dot_li: "",
          },
          {
            id: "005",
            dot_li: "",
          },
          {
            id: "006",
            dot_li: "",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    {
      id: '004',
      dot_li: ""
    },
    name: "网关",
    list: [
      {
        id: 1,
        title_num: "200605",
      },
      {
        id: 2,
        title_num: "200331",
      },
      {
        id: 3,
        title_num: "200331",
      },
      {
        id: 4,
        title_num: "38081703",
      },
    ],
  },
  {
    id: 4,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    {
      id: '004',
      dot_li: ""
    },
    {
      id: '005',
      dot_li: ""
    },
    name: "计算器具",
    list: [
      {
        id: 1,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
        ],
      },
      {
        id: 2,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
        ],
      },
      {
        id: 3,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
          {
            id: "004",
            dot_li: "",
          },
        ],
      },
      {
        id: 4,
        title_num: "",
        dot: [
          {
            id: "001",
            dot_li: "",
          },
          {
            id: "002",
            dot_li: "",
          },
          {
            id: "003",
            dot_li: "",
          },
          {
            id: "004",
            dot_li: "",
          },
          {
            id: "005",
            dot_li: "",
          },
        ],
      },
    ],
  },
  {
    id: 5,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    {
      id: '004',
      dot_li: ""
    },
    {
      id: '005',
      dot_li: ""
    },
    {
      id: '006',
      dot_li: ""
    },
    ],
  }
  ]
},
{
  name: "网关",
  list: [{
    id: 1,
    title_num: "200605"
  },
  {
    id: 2,
    title_num: "200331"
  },
  {
    id: 3,
    title_num: "200331"
  },
  {
    id: 4,
    title_num: "38081703"
  },
  ]
},
{
  name: "计算器具",
  list: [{
    id: 1,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    ],
  },
  {
    id: 2,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    ],
  },
  {
    id: 3,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    {
      id: '004',
      dot_li: ""
    },
    ],
  },
  {
    id: 4,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
    },
    {
      id: '002',
      dot_li: ""
    },
    {
      id: '003',
      dot_li: ""
    },
    {
      id: '004',
      dot_li: ""
    },
    {
      id: '005',
      dot_li: ""
    },
    ],
  }
  ]
},
])

</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
.themeDark {
  .border {
    border: 1px solid #fff;
    color: #fff;

.border {
  border: 1px solid #fff;
  color: #fff;

  .table {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #fff;

    &:last-child {
      border-bottom: none;
    }

    .num {
      width: 100%;
    .table {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1px solid #fff;

      .name {
        width: 6%;
        min-height: 50px;
        height: max-content;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: none !important;
      &:last-child {
        border-bottom: none;
      }

      .firstLi {
        width: 94%;
        flex-shrink: 0;
      .num {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-left: 1px solid #fff;

        .li {
          width: 6.25%;
        .name {
          width: 6%;
          min-height: 50px;
          height: max-content;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #fff;
          border-right: none !important;
        }

          &.hasRightLine {
            border-right: 1px solid #fff !important;
          }
        .firstLi {
          width: 94%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-left: 1px solid #fff;

          &:last-child {
            border-right: none;
          }

          .title_num {}

          .dot {
            width: 40px;
          .li {
            width: 6.25%;
            min-height: 50px;
            height: max-content;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            justify-content: center;
            border-right: 1px solid #fff;

            .dot_li {
              width: 15px;
              height: 15px;
              border-radius: 4px;
              background: #ff0000;
              margin: 10px auto;
            &.hasRightLine {
              border-right: 1px solid #fff !important;
            }

              &:nth-child(2n) {
                margin-right: 0;
            &:last-child {
              border-right: none;
            }

            .title_num {
            }

            .dot {
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;

              .dot_li {
                width: 15px;
                height: 15px;
                border-radius: 4px;
                background: #ff0000;
                margin: 10px auto;

                &:nth-child(2n) {
                  margin-right: 0;
                }
              }
            }
          }
@@ -529,4 +546,89 @@
    }
  }
}
</style>

.themeLight {
  .border {
    border: 1px solid #666;
    color: #333;

    .table {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1px solid #666;

      &:last-child {
        border-bottom: none;
      }

      .num {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .name {
          width: 6%;
          min-height: 50px;
          height: max-content;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: none !important;
        }

        .firstLi {
          width: 94%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-left: 1px solid #666;

          .li {
            width: 6.25%;
            min-height: 50px;
            height: max-content;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #666;

            &.hasRightLine {
              border-right: 1px solid #666 !important;
            }

            &:last-child {
              border-right: none;
            }

            .title_num {
            }

            .dot {
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;

              .dot_li {
                width: 15px;
                height: 15px;
                border-radius: 4px;
                background: #ff0000;
                margin: 10px auto;

                &:nth-child(2n) {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

 zhitan-vue/src/views/costmanage/deviation/deviation.vue

@@ -1,687 +1,736 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="form" ref="formRef" :inline="true">
                <el-form-item label="期间" prop="timeType">
                    <el-select v-model="form.timeType" placeholder="期间" style="width: 100%" @change="handleTimeType">
                        <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value"
                            v-show="dict.value != 'DAY'" />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="form.date" type="year" v-if="form.timeType == 'YEAR'" range-separator="到"
                        format="YYYY" value-format="YYYY" placeholder="时间" style="width: 100%" :clearable="false" />
                    <el-date-picker v-model="form.date" type="month" v-else format="YYYY-MM" value-format="YYYY-MM"
                        placeholder="时间" style="width: 100%" :clearable="false" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <BaseCard title="电力数据">
            <div class="card-list">
                <div class="card-list-item" v-for="item in periodList" :key="item.title">
                    <div class="item-top">
                        <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
                        <div class="name">{{ item.title }}</div>
                    </div>
                    <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
                        <div class="bottom-left">{{ node.label }}</div>
                        <div class="bottom-right" :style="{ color: item.color }">
                            {{ form.timeType == 'YEAR' && nodeIndex == 1 ? '--' : node.value }}
                        </div>
                    </div>
                </div>
            </div>
        </BaseCard>
        <BaseCard title="统计数据">
            <div class="card-list card-list19 ">
                <div class="card-list-item" v-for="item in periodList1" :key="item.title">
                    <div class="item-top">
                        <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
                        <div class="name">{{ item.title }}</div>
                    </div>
                    <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
                        <div class="bottom-left">{{ node.label }}</div>
                        <div class="bottom-right" :style="{ color: item.color }">
                            {{ form.timeType == 'YEAR' && nodeIndex == 1 ? '--' : node.value }}
                        </div>
                    </div>
                </div>
            </div>
        </BaseCard>
        <BaseCard title="耗电明细">
            <div class="table-box">
                <el-table :data="tableData" v-loading="loading"
                    style="width: 100%; max-height: 500px; margin-bottom: 20px" row-key="id">
                    <el-table-column prop="nodeId" label="用能单位" align="center" show-overflow-tooltip
                        :formatter="(row, column) => findLabelById(treeNode, row.nodeId)" />
                    <el-table-column prop="electricityNum" label="总耗电量(千瓦时)" align="center" show-overflow-tooltip />
                    <el-table-column prop="sharpElectricity" label="尖(千瓦时)" align="center" show-overflow-tooltip />
                    <el-table-column prop="peakElectricity" label="峰(千瓦时)" align="center" show-overflow-tooltip />
                    <el-table-column prop="flatElectricity" label="平(千瓦时)" align="center" show-overflow-tooltip />
                    <el-table-column prop="valleyElectricity" label="谷(千瓦时)" align="center" show-overflow-tooltip />
                    <el-table-column prop="electricityFee" label="总电费（元）" align="center" show-overflow-tooltip />
                    <el-table-column prop="electricityNumYoy" label="同比" align="center" show-overflow-tooltip />
                    <el-table-column prop="electricityNumQoq" label="环比" v-if="form.timeType != 'YEAR'" align="center"
                        show-overflow-tooltip />
                    <el-table-column prop="electricityNumRadio" label="占比" align="center" show-overflow-tooltip />
                    <el-table-column label="操作" width="80" align="center">
                        <template #default="scope">
                            <el-button link type="primary" icon="Document" @click="handleInfo(scope.row)">
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </BaseCard>
        <InfoModal ref="InfoModalRef" />
  <div class="page">
    <div class="form-card">
      <el-form :model="form" ref="formRef" :inline="true">
        <el-form-item label="期间" prop="timeType">
          <el-select v-model="form.timeType" placeholder="期间" style="width: 100%" @change="handleTimeType">
            <el-option
              v-for="dict in period"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              v-show="dict.value != 'DAY'"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="form.date"
            type="year"
            v-if="form.timeType == 'YEAR'"
            range-separator="到"
            format="YYYY"
            value-format="YYYY"
            placeholder="时间"
            style="width: 100%"
            :clearable="false"
          />
          <el-date-picker
            v-model="form.date"
            type="month"
            v-else
            format="YYYY-MM"
            value-format="YYYY-MM"
            placeholder="时间"
            style="width: 100%"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <BaseCard title="电力数据">
      <div class="card-list">
        <div class="card-list-item" v-for="item in periodList" :key="item.title">
          <div class="item-top">
            <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
            <div class="name">{{ item.title }}</div>
          </div>
          <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
            <div class="bottom-left">{{ node.label }}</div>
            <div class="bottom-right" :style="{ color: item.color }">
              {{ form.timeType == "YEAR" && nodeIndex == 1 ? "--" : node.value }}
            </div>
          </div>
        </div>
      </div>
    </BaseCard>
    <BaseCard title="统计数据">
      <div class="card-list card-list19">
        <div class="card-list-item" v-for="item in periodList1" :key="item.title">
          <div class="item-top">
            <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
            <div class="name">{{ item.title }}</div>
          </div>
          <div class="item-bottom" v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
            <div class="bottom-left">{{ node.label }}</div>
            <div class="bottom-right" :style="{ color: item.color }">
              {{ form.timeType == "YEAR" && nodeIndex == 1 ? "--" : node.value }}
            </div>
          </div>
        </div>
      </div>
    </BaseCard>
    <BaseCard title="耗电明细">
      <div class="table-box">
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%; max-height: 500px; margin-bottom: 20px"
          row-key="id"
        >
          <el-table-column
            prop="nodeId"
            label="用能单位"
            align="center"
            show-overflow-tooltip
            :formatter="(row, column) => findLabelById(treeNode, row.nodeId)"
          />
          <el-table-column prop="electricityNum" label="总耗电量(千瓦时)" align="center" show-overflow-tooltip />
          <el-table-column prop="sharpElectricity" label="尖(千瓦时)" align="center" show-overflow-tooltip />
          <el-table-column prop="peakElectricity" label="峰(千瓦时)" align="center" show-overflow-tooltip />
          <el-table-column prop="flatElectricity" label="平(千瓦时)" align="center" show-overflow-tooltip />
          <el-table-column prop="valleyElectricity" label="谷(千瓦时)" align="center" show-overflow-tooltip />
          <el-table-column prop="electricityFee" label="总电费（元）" align="center" show-overflow-tooltip />
          <el-table-column prop="electricityNumYoy" label="同比" align="center" show-overflow-tooltip />
          <el-table-column
            prop="electricityNumQoq"
            label="环比"
            v-if="form.timeType != 'YEAR'"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column prop="electricityNumRadio" label="占比" align="center" show-overflow-tooltip />
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Document" @click="handleInfo(scope.row)"> 详情 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </BaseCard>
    <InfoModal ref="InfoModalRef" />
  </div>
</template>
<script setup>
import { deviationCardList, deviationTableList } from '@/api/costManage/costManage.js'
import InfoModal from './components/InfoModal.vue'
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import { treeList } from "@/api/modelConfiguration/indexWarehouse";
import { deviationCardList, deviationTableList } from "@/api/costManage/costManage.js"
import InfoModal from "./components/InfoModal.vue"
import { useRoute } from "vue-router"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import { treeList } from "@/api/modelConfiguration/indexWarehouse"
let loading = ref(false)
let form = ref({
    timeType: '',
    date: null,
    ...useRoute().query
  timeType: "",
  date: null,
  ...useRoute().query,
})
import icon1 from "@/assets/images/period/icon1.png";
import icon2 from "@/assets/images/period/icon2.png";
import icon3 from "@/assets/images/period/icon3.png";
import icon4 from "@/assets/images/period/icon4.png";
import icon5 from "@/assets/images/period/icon5.png";

import icon1 from "@/assets/images/period/icon1.png"
import icon2 from "@/assets/images/period/icon2.png"
import icon3 from "@/assets/images/period/icon3.png"
import icon4 from "@/assets/images/period/icon4.png"
import icon5 from "@/assets/images/period/icon5.png"

const periodList = ref([
    {
        icon: icon1,
        color: "#3371eb",
        title: "总电量（千瓦时)",
  {
    icon: icon1,
    color: "#3371eb",
    title: "总电量（千瓦时)",
    value: 0,
    data: [
      {
        label: "同比",
        value: "0",
      },
      {
        label: "环比",
        value: "0",
      },
    ],
  },
  {
    icon: icon2,
    color: "#f52528",
    title: "总电费（元）",
    value: 5566778,
    data: [
      {
        label: "同比",
        value: "0",
      },
      {
        label: "环比",
        value: "0",
      },
    ],
  },
  {
    icon: icon3,
    color: "#ff6200",
    title: "功率因数",
    value: 0.9,
    data: [
      {
        label: "同比",
        value: "0",
      },
      {
        label: "环比",
        value: "0",
      },
    ],
  },
  {
    icon: icon4,
    color: "#ffce0c",
    title: "尖峰平谷用电",
    data: [
      {
        label: "尖",
        value: 0,
        data: [
            {
                label: "同比",
                value: '0',
            },
            {
                label: "环比",
                value: '0',
            },
        ],
    },
    {
        icon: icon2,
        color: "#f52528",
        title: "总电费（元）",
        value: 5566778,
        data: [
            {
                label: "同比",
                value: '0',
            },
            {
                label: "环比",
                value: '0',
            },
        ],
    },
    {
        icon: icon3,
        color: "#ff6200",
        title: "功率因数",
        value: 0.9,
        data: [
            {
                label: "同比",
                value: '0',
            },
            {
                label: "环比",
                value: '0',
            },
        ],
    },
    {
        icon: icon4,
        color: "#ffce0c",
        title: "尖峰平谷用电",
        data: [
            {
                label: "尖",
                value: 0,
            },
            {
                label: "峰",
                value: 0,
            },
            {
                label: "平",
                value: 0,
            },
            {
                label: "谷",
                value: 0,
            },
        ],
    },
]);
      },
      {
        label: "峰",
        value: 0,
      },
      {
        label: "平",
        value: 0,
      },
      {
        label: "谷",
        value: 0,
      },
    ],
  },
])


const periodList1 = ref(
    [{
        icon: icon1,
        color: "#3371eb",
        title: "总电量（千瓦时)",
const periodList1 = ref([
  {
    icon: icon1,
    color: "#3371eb",
    title: "总电量（千瓦时)",
    value: 0,
    data: [
      {
        label: "同比",
        value: "0",
      },
      {
        label: "环比",
        value: "0",
      },
      {
        label: "对比差值（千瓦时）",
        value: "0",
      },
    ],
  },
  {
    icon: icon2,
    color: "#f52528",
    title: "总电费（元）",
    value: 0,
    data: [
      {
        label: "同比",
        value: "0",
      },
      {
        label: "环比",
        value: "0",
      },
      {
        label: "对比差值（千瓦时）",
        value: "0",
      },
    ],
  },
  {
    icon: icon3,
    color: "#ff6200",
    title: "功率因数",
    value: 0,
    data: [
      {
        label: "同比",
        value: "0",
      },
      {
        label: "环比",
        value: "0",
      },
      {
        label: "对比差值（千瓦时）",
        value: "0",
      },
    ],
  },
  {
    icon: icon4,
    color: "#ffce0c",
    title: "尖峰平谷用电",
    data: [
      {
        label: "尖",
        value: 0,
        data: [
            {
                label: "同比",
                value: '0',
            },
            {
                label: "环比",
                value: '0',
            },
            {
                label: "对比差值（千瓦时）",
                value: '0',
            },
        ],
    },
    {
        icon: icon2,
        color: "#f52528",
        title: "总电费（元）",
      },
      {
        label: "峰",
        value: 0,
        data: [
            {
                label: "同比",
                value: '0',
            },
            {
                label: "环比",
                value: '0',
            },
            {
                label: "对比差值（千瓦时）",
                value: '0',
            },
        ],
    },
    {
        icon: icon3,
        color: "#ff6200",
        title: "功率因数",
      },
      {
        label: "平",
        value: 0,
        data: [
            {
                label: "同比",
                value: '0',
            },
            {
                label: "环比",
                value: '0',
            },
            {
                label: "对比差值（千瓦时）",
                value: '0',
            },
        ],
    },
    {
        icon: icon4,
        color: "#ffce0c",
        title: "尖峰平谷用电",
        data: [
            {
                label: "尖",
                value: 0,
            },
            {
                label: "峰",
                value: 0,
            },
            {
                label: "平",
                value: 0,
            },
            {
                label: "谷",
                value: 0,
            },
        ],
    },
    {
        icon: icon5,
        color: "#ffce0c",
        title: "尖峰平谷用电对比差值",
        data: [
            {
                label: "尖",
                value: 0,
            },
            {
                label: "峰",
                value: 0,
            },
            {
                label: "平",
                value: 0,
            },
            {
                label: "谷",
                value: 0,
            },
        ],
    },
    ]);
handleTimeType('YEAR')
      },
      {
        label: "谷",
        value: 0,
      },
    ],
  },
  {
    icon: icon5,
    color: "#ffce0c",
    title: "尖峰平谷用电对比差值",
    data: [
      {
        label: "尖",
        value: 0,
      },
      {
        label: "峰",
        value: 0,
      },
      {
        label: "平",
        value: 0,
      },
      {
        label: "谷",
        value: 0,
      },
    ],
  },
])
handleTimeType("YEAR")
function handleTimeType(e) {
    form.value.timeType = e;
    form.value.date = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM");
    getList()
    getTableList()
  form.value.timeType = e
  form.value.date = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : "YYYY-MM")
  getList()
  getTableList()
}

let tableData = ref([])
//获取列表
function getList() {
    deviationCardList(form.value).then(res => {
        if (res.code == 200) {
            let { CostElectricityData, CostStatisticsData } = res.data
            periodList.value = [
                {
                    icon: icon1,
                    color: "#3371eb",
                    title: "总电量（千瓦时)",
                    value: CostElectricityData.electricityNum ? CostElectricityData.electricityNum : 0,
                    data: [
                        {
                            label: "同比",
                            value: CostElectricityData.electricityNumYoy ? CostElectricityData.electricityNumYoy + '%' : 0,
                        },
                        {
                            label: "环比",
                            value: CostElectricityData.electricityNumQoq ? CostElectricityData.electricityNumQoq + '%' : 0,
                        },
                    ],
                },
                {
                    icon: icon2,
                    color: "#f52528",
                    title: "总电费（元）",
                    value: CostElectricityData.electricityFee ? CostElectricityData.electricityFee : 0,
                    data: [
                        {
                            label: "同比",
                            value: CostElectricityData.electricityFeeYoy ? CostElectricityData.electricityFeeYoy + '%' : 0,
                        },
                        {
                            label: "环比",
                            value: CostElectricityData.electricityFeeQoq ? CostElectricityData.electricityFeeQoq + '%' : 0,
                        },
                    ],
                },
                {
                    icon: icon3,
                    color: "#ff6200",
                    title: "功率因数",
                    value: CostElectricityData.powerFactor ? CostElectricityData.powerFactor : 0,
                    data: [
                        {
                            label: "同比",
                            value: CostElectricityData.powerFactorYoy ? CostElectricityData.powerFactorYoy + '%' : 0,
                        },
                        {
                            label: "环比",
                            value: CostElectricityData.powerFactorQoq ? CostElectricityData.powerFactorQoq + '%' : 0,
                        },
                    ],
                },
                {
                    icon: icon4,
                    color: "#ffce0c",
                    title: "尖峰平谷用电",
                    data: [
                        {
                            label: "尖（千瓦时)",
                            value: CostElectricityData.sharpElectricity ? CostElectricityData.sharpElectricity : 0,
                        },
                        {
                            label: "峰（千瓦时)",
                            value: CostElectricityData.peakElectricity ? CostElectricityData.peakElectricity : 0,
                        },
                        {
                            label: "平（千瓦时)",
                            value: CostElectricityData.flatElectricity ? CostElectricityData.flatElectricity : 0,
                        },
                        {
                            label: "谷（千瓦时)",
                            value: CostElectricityData.valleyElectricity ? CostElectricityData.valleyElectricity : 0,
                        },
                    ],
                },
            ]
  deviationCardList(form.value).then((res) => {
    if (res.code == 200) {
      let { CostElectricityData, CostStatisticsData } = res.data
      periodList.value = [
        {
          icon: icon1,
          color: "#3371eb",
          title: "总电量（千瓦时)",
          value: CostElectricityData.electricityNum ? CostElectricityData.electricityNum : 0,
          data: [
            {
              label: "同比",
              value: CostElectricityData.electricityNumYoy ? CostElectricityData.electricityNumYoy + "%" : 0,
            },
            {
              label: "环比",
              value: CostElectricityData.electricityNumQoq ? CostElectricityData.electricityNumQoq + "%" : 0,
            },
          ],
        },
        {
          icon: icon2,
          color: "#f52528",
          title: "总电费（元）",
          value: CostElectricityData.electricityFee ? CostElectricityData.electricityFee : 0,
          data: [
            {
              label: "同比",
              value: CostElectricityData.electricityFeeYoy ? CostElectricityData.electricityFeeYoy + "%" : 0,
            },
            {
              label: "环比",
              value: CostElectricityData.electricityFeeQoq ? CostElectricityData.electricityFeeQoq + "%" : 0,
            },
          ],
        },
        {
          icon: icon3,
          color: "#ff6200",
          title: "功率因数",
          value: CostElectricityData.powerFactor ? CostElectricityData.powerFactor : 0,
          data: [
            {
              label: "同比",
              value: CostElectricityData.powerFactorYoy ? CostElectricityData.powerFactorYoy + "%" : 0,
            },
            {
              label: "环比",
              value: CostElectricityData.powerFactorQoq ? CostElectricityData.powerFactorQoq + "%" : 0,
            },
          ],
        },
        {
          icon: icon4,
          color: "#ffce0c",
          title: "尖峰平谷用电",
          data: [
            {
              label: "尖（千瓦时)",
              value: CostElectricityData.sharpElectricity ? CostElectricityData.sharpElectricity : 0,
            },
            {
              label: "峰（千瓦时)",
              value: CostElectricityData.peakElectricity ? CostElectricityData.peakElectricity : 0,
            },
            {
              label: "平（千瓦时)",
              value: CostElectricityData.flatElectricity ? CostElectricityData.flatElectricity : 0,
            },
            {
              label: "谷（千瓦时)",
              value: CostElectricityData.valleyElectricity ? CostElectricityData.valleyElectricity : 0,
            },
          ],
        },
      ]

            periodList1.value = [{
                icon: icon1,
                color: "#3371eb",
                title: "总电量（千瓦时)",
                value: CostStatisticsData && CostStatisticsData.electricityNum ? CostStatisticsData.electricityNum : 0,
                data: [
                    {
                        label: "同比",
                        value: CostStatisticsData && CostStatisticsData.electricityNumYoy ? CostStatisticsData.electricityNumYoy : 0,
                    },
                    {
                        label: "环比",
                        value: CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
                    },
                    {
                        label: "对比差值（千瓦时）",
                        value: CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
                    },
                ],
      periodList1.value = [
        {
          icon: icon1,
          color: "#3371eb",
          title: "总电量（千瓦时)",
          value: CostStatisticsData && CostStatisticsData.electricityNum ? CostStatisticsData.electricityNum : 0,
          data: [
            {
              label: "同比",
              value:
                CostStatisticsData && CostStatisticsData.electricityNumYoy ? CostStatisticsData.electricityNumYoy : 0,
            },
            {
                icon: icon2,
                color: "#f52528",
                title: "总电费（元）",
                value: CostStatisticsData && CostStatisticsData.electricityFee ? CostStatisticsData.electricityFee : 0,
                data: [
                    {
                        label: "同比",
                        value: CostStatisticsData && CostStatisticsData.electricityFeeYoy ? CostStatisticsData.electricityFeeYoy : 0,
                    },
                    {
                        label: "环比",
                        value: CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
                    },
                    {
                        label: "对比差值（千瓦时）",
                        value: CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
                    },
                ],
              label: "环比",
              value:
                CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
            },
            {
                icon: icon3,
                color: "#ff6200",
                title: "功率因数",
                value: CostStatisticsData && CostStatisticsData.powerFactor ? CostStatisticsData.powerFactor : 0,
                data: [
                    {
                        label: "同比",
                        value: CostStatisticsData && CostStatisticsData.powerFactorYoy ? CostStatisticsData.powerFactorYoy : 0,
                    },
                    {
                        label: "环比",
                        value: CostStatisticsData && CostStatisticsData.powerFactorQoq ? CostStatisticsData.powerFactorQoq : 0,
                    },
                    {
                        label: "对比差值",
                        value: CostStatisticsData && CostStatisticsData.powerFactorDiff ? CostStatisticsData.powerFactorDiff : 0,
                    },
                ],
              label: "对比差值（千瓦时）",
              value:
                CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
            },
          ],
        },
        {
          icon: icon2,
          color: "#f52528",
          title: "总电费（元）",
          value: CostStatisticsData && CostStatisticsData.electricityFee ? CostStatisticsData.electricityFee : 0,
          data: [
            {
              label: "同比",
              value:
                CostStatisticsData && CostStatisticsData.electricityFeeYoy ? CostStatisticsData.electricityFeeYoy : 0,
            },
            {
                icon: icon4,
                color: "#ffce0c",
                title: "尖峰平谷用电",
                data: [
                    {
                        label: "尖",
                        value: CostStatisticsData && CostStatisticsData.sharpElectricity ? CostStatisticsData.sharpElectricity : 0,
                    },
                    {
                        label: "峰",
                        value: CostStatisticsData && CostStatisticsData.peakElectricity ? CostStatisticsData.peakElectricity : 0,
                    },
                    {
                        label: "平",
                        value: CostStatisticsData && CostStatisticsData.flatElectricity ? CostStatisticsData.flatElectricity : 0,
                    },
                    {
                        label: "谷",
                        value: CostStatisticsData && CostStatisticsData.valleyElectricity ? CostStatisticsData.valleyElectricity : 0,
                    },
                ],
              label: "环比",
              value:
                CostStatisticsData && CostStatisticsData.electricityNumQoq ? CostStatisticsData.electricityNumQoq : 0,
            },
            {
                icon: icon5,
                color: "#ffce0c",
                title: "尖峰平谷用电对比差值",
                data: [
                    {
                        label: "尖",
                        value: CostStatisticsData && CostStatisticsData.sharpElectricityDiff ? CostStatisticsData.sharpElectricityDiff : 0,
                    },
                    {
                        label: "峰",
                        value: CostStatisticsData && CostStatisticsData.peakElectricityDiff ? CostStatisticsData.peakElectricityDiff : 0,
                    },
                    {
                        label: "平",
                        value: CostStatisticsData && CostStatisticsData.flatElectricityDiff ? CostStatisticsData.flatElectricityDiff : 0,
                    },
                    {
                        label: "谷",
                        value: CostStatisticsData && CostStatisticsData.valleyElectricityDiff ? CostStatisticsData.valleyElectricityDiff : 0,
                    },
                ],
              label: "对比差值（千瓦时）",
              value:
                CostStatisticsData && CostStatisticsData.electricityNumDiff ? CostStatisticsData.electricityNumDiff : 0,
            },
            ]
        }
    })

          ],
        },
        {
          icon: icon3,
          color: "#ff6200",
          title: "功率因数",
          value: CostStatisticsData && CostStatisticsData.powerFactor ? CostStatisticsData.powerFactor : 0,
          data: [
            {
              label: "同比",
              value: CostStatisticsData && CostStatisticsData.powerFactorYoy ? CostStatisticsData.powerFactorYoy : 0,
            },
            {
              label: "环比",
              value: CostStatisticsData && CostStatisticsData.powerFactorQoq ? CostStatisticsData.powerFactorQoq : 0,
            },
            {
              label: "对比差值",
              value: CostStatisticsData && CostStatisticsData.powerFactorDiff ? CostStatisticsData.powerFactorDiff : 0,
            },
          ],
        },
        {
          icon: icon4,
          color: "#ffce0c",
          title: "尖峰平谷用电",
          data: [
            {
              label: "尖",
              value:
                CostStatisticsData && CostStatisticsData.sharpElectricity ? CostStatisticsData.sharpElectricity : 0,
            },
            {
              label: "峰",
              value: CostStatisticsData && CostStatisticsData.peakElectricity ? CostStatisticsData.peakElectricity : 0,
            },
            {
              label: "平",
              value: CostStatisticsData && CostStatisticsData.flatElectricity ? CostStatisticsData.flatElectricity : 0,
            },
            {
              label: "谷",
              value:
                CostStatisticsData && CostStatisticsData.valleyElectricity ? CostStatisticsData.valleyElectricity : 0,
            },
          ],
        },
        {
          icon: icon5,
          color: "#ffce0c",
          title: "尖峰平谷用电对比差值",
          data: [
            {
              label: "尖",
              value:
                CostStatisticsData && CostStatisticsData.sharpElectricityDiff
                  ? CostStatisticsData.sharpElectricityDiff
                  : 0,
            },
            {
              label: "峰",
              value:
                CostStatisticsData && CostStatisticsData.peakElectricityDiff
                  ? CostStatisticsData.peakElectricityDiff
                  : 0,
            },
            {
              label: "平",
              value:
                CostStatisticsData && CostStatisticsData.flatElectricityDiff
                  ? CostStatisticsData.flatElectricityDiff
                  : 0,
            },
            {
              label: "谷",
              value:
                CostStatisticsData && CostStatisticsData.valleyElectricityDiff
                  ? CostStatisticsData.valleyElectricityDiff
                  : 0,
            },
          ],
        },
      ]
    }
  })
}

function getTableList() {
    loading.value = true
    deviationTableList(form.value).then(res => {
        tableData.value = []
        if (res.code == 200) {
            tableData.value.push(res.data)
            loading.value = false
        }
    })
  loading.value = true
  deviationTableList(form.value).then((res) => {
    tableData.value = []
    if (res.code == 200) {
      tableData.value.push(res.data)
      loading.value = false
    }
  })
}

function resetQuery() {
    getList()
    getTableList()
  getList()
  getTableList()
}
function handleQuery() {
    getList()
    getTableList()
  getList()
  getTableList()
}

let InfoModalRef = ref()
function handleInfo(row) {
    if (InfoModalRef.value) {
        InfoModalRef.value.handleOpen(row, form.value)
    }

  if (InfoModalRef.value) {
    InfoModalRef.value.handleOpen(row, form.value)
  }
}
let treeNode = ref([])
function handleNodeTree() {
    treeList(useRoute().query).then((response) => {
        treeNode.value = response.data;
    })
  treeList(useRoute().query).then((response) => {
    treeNode.value = response.data
  })
}
handleNodeTree()

// 递归函数，根据id查找label
function findLabelById(tree, targetId) {
    for (const node of tree) {
        if (node.id === targetId) {
            return node.label;
        }
        if (node.children && node.children.length > 0) {
            const result = findLabelById(node.children, targetId);
            if (result) {
                return result;
            }
        }
  for (const node of tree) {
    if (node.id === targetId) {
      return node.label
    }
    return null;
    if (node.children && node.children.length > 0) {
      const result = findLabelById(node.children, targetId)
      if (result) {
        return result
      }
    }
  }
  return null
}

</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

:deep(.el-table__expand-icon>.el-icon) {
    color: #cac9c9 !important;
:deep(.el-table__expand-icon > .el-icon) {
  color: #cac9c9 !important;
}


.themeDark {
    .tree-title-box {
  .tree-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-list {
    display: flex;
    justify-content: space-between;
    padding: 18px;

    .card-list-item {
      width: 24%;
      height: 187px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 10px 18px 13px 16px;

      .item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-list {
        .icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .name {
          font-family: OPPOSans, OPPOSans;
          font-weight: bold;
          font-size: 18px;
          color: #fffdfd;
          margin-left: 7px;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        padding: 18px;
        margin-top: 10px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 16px;

        .card-list-item {
            width: 24%;
            height: 187px;
            background: #223386;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #4868b7;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 10px 18px 13px 16px;

            .item-top {
                display: flex;
                align-items: center;

                .icon {
                    width: 40px;
                    height: 40px;
                    background-size: 100% 100%;
                }

                .name {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: bold;
                    font-size: 20px;
                    color: #fffdfd;
                    margin-left: 7px;
                }
            }

            .item-bottom {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                font-family: OPPOSans, OPPOSans;
                font-weight: bold;
                font-size: 16px;

                .bottom-left {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 500;
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.7);
                }

                .bottom-right {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 800;
                    font-size: 16px;
                    color: #f52528;
                }
            }
        .bottom-left {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
        }

        .bottom-right {
          font-family: OPPOSans, OPPOSans;
          font-weight: 800;
          font-size: 16px;
          color: #f52528;
        }
      }
    }
  }
}

.themeLight {
    .tree-title-box {
  .tree-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-list {
    display: flex;
    justify-content: space-between;
    padding: 18px;

    .card-list-item {
      width: 24%;
      height: 187px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 10px 18px 13px 16px;

      .item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card-list {
        .icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .name {
          font-family: OPPOSans, OPPOSans;
          font-weight: bold;
          font-size: 18px;
          color: #000;
          margin-left: 7px;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        padding: 18px;
        margin-top: 10px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 16px;

        .card-list-item {
            width: 24%;
            height: 187px;
            background: #fff;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #e8e8e8;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 10px 18px 13px 16px;

            .item-top {
                display: flex;
                align-items: center;

                .icon {
                    width: 40px;
                    height: 40px;
                    background-size: 100% 100%;
                }

                .name {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: bold;
                    font-size: 20px;
                    color: #000;
                    margin-left: 7px;
                }
            }

            .item-bottom {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                font-family: OPPOSans, OPPOSans;
                font-weight: bold;
                font-size: 16px;

                .bottom-left {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 500;
                    font-size: 14px;
                    color: #5d5c5c;
                }

                .bottom-right {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 800;
                    font-size: 16px;
                    color: #f52528;
                }
            }
        .bottom-left {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 14px;
          color: #5d5c5c;
        }

        .bottom-right {
          font-family: OPPOSans, OPPOSans;
          font-weight: 800;
          font-size: 16px;
          color: #f52528;
        }
      }
    }
  }
}

.card-list19 {
    .card-list-item {
        width: 19% !important;
    }
  .card-list-item {
    width: 19% !important;
  }
}
</style>

 zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue

@@ -1,147 +1,163 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
                <!-- <el-form-item label="有效周期">
  <div class="page">
    <div class="form-card">
      <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
        <!-- <el-form-item label="有效周期">
                    <el-date-picker v-model="form.index1" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        placeholder="时间" style="width: 260px" unlink-panels />
                </el-form-item> -->
                <el-form-item label="能源品种">
                    <el-select v-model="form.energyType" placeholder="请选择能源品种" style="width: 100%">
                        <el-option v-for="dict in energyVarietiesList" :key="dict.enerclassid"
                            :label="dict.enerclassname" :value="dict.enerclassid" />
                    </el-select>
                </el-form-item>
                <el-form-item label="策略名称">
                    <el-input v-model="form.tacticsName" placeholder="请输入策略名称" />
                </el-form-item>
                <el-form-item label="策略编码">
                    <el-input v-model="form.tacticsNumber" placeholder="请输入策略编码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="mt20 mb20 ml20">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </div>
        <div class="table-box">
            <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)">
                <el-table-column type="index" label="序号" align="center" width="100" />
                <el-table-column label="策略编码" prop="tacticsNumber" align="center" show-overflow-tooltip />
                <el-table-column label="策略名称" prop="tacticsName" align="center" show-overflow-tooltip />
                <el-table-column label="能源品种" prop="energyType" align="center" show-overflow-tooltip
                    :formatter="(row, column) => formatterLabel(energyVarietiesList, row.energyType)" />
                <el-table-column label="是否阶梯价格" prop="type" align="center" show-overflow-tooltip
                    :formatter="(row, column) => row.type == 0 ? '否' : '是'" />
                <el-table-column label="操作" width="220" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row, scope.$index)">
                            编辑
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row, scope.$index)">
                            删除
                        </el-button>
                        <el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row, scope.$index)">
                            复制
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
        <EditModal ref="editModalRef" :energyVarietiesList='energyVarietiesList' @getList='getList' />
        <el-form-item label="能源品种">
          <el-select v-model="form.energyType" placeholder="请选择能源品种" style="width: 100%">
            <el-option
              v-for="dict in energyVarietiesList"
              :key="dict.enerclassid"
              :label="dict.enerclassname"
              :value="dict.enerclassid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="策略名称">
          <el-input v-model="form.tacticsName" placeholder="请输入策略名称" />
        </el-form-item>
        <el-form-item label="策略编码">
          <el-input v-model="form.tacticsNumber" placeholder="请输入策略编码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="mb20 ml20 theme-dark-mt20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)">
          <el-table-column type="index" label="序号" align="center" width="100" />
          <el-table-column label="策略编码" prop="tacticsNumber" align="center" show-overflow-tooltip />
          <el-table-column label="策略名称" prop="tacticsName" align="center" show-overflow-tooltip />
          <el-table-column
            label="能源品种"
            prop="energyType"
            align="center"
            show-overflow-tooltip
            :formatter="(row, column) => formatterLabel(energyVarietiesList, row.energyType)"
          />
          <el-table-column
            label="是否阶梯价格"
            prop="type"
            align="center"
            show-overflow-tooltip
            :formatter="(row, column) => (row.type == 0 ? '否' : '是')"
          />
          <el-table-column label="操作" width="220" align="center">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row, scope.$index)"> 编辑 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row, scope.$index)">
                删除
              </el-button>
              <el-button link type="primary" icon="DocumentCopy" @click="handleCopy(scope.row, scope.$index)">
                复制
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <EditModal ref="editModalRef" :energyVarietiesList="energyVarietiesList" @getList="getList" />
  </div>
</template>
<script setup>
import { unitPriceStrategyList, unitPriceStrategyDel } from '@/api/costManage/costManage.js'
const { proxy } = getCurrentInstance();
import EditModal from './components/EditModal'
import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties";
const energyVarietiesList = ref([]);
import { unitPriceStrategyList, unitPriceStrategyDel } from "@/api/costManage/costManage.js"
const { proxy } = getCurrentInstance()
import EditModal from "./components/EditModal"
import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties"
const energyVarietiesList = ref([])

getEnergyVarietiesList()
let loading = ref(false);
let tableData = ref([{}]);
let loading = ref(false)
let tableData = ref([{}])
let editModalRef = ref()
let form = ref({
    // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
    energyType: null,
    tacticsName: null,
    tacticsNumber: null
  // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
  energyType: null,
  tacticsName: null,
  tacticsNumber: null,
})
function getEnergyVarietiesList() {
    listEnergyVarietiesList().then((res) => {
        energyVarietiesList.value = res.data;
        form.value.energyType = res.data[0].enerclassid

    });
  listEnergyVarietiesList().then((res) => {
    energyVarietiesList.value = res.data
    form.value.energyType = res.data[0].enerclassid
  })
}
let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  pageNum: 1,
  pageSize: 10,
})
let total = ref(0)
getList()
//获取列表
function getList() {
    loading.value = true
    unitPriceStrategyList({ ...queryParams.value, ...form.value }).then(res => {
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    })
  loading.value = true
  unitPriceStrategyList({ ...queryParams.value, ...form.value }).then((res) => {
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}
function handleAdd(row) {
    if (editModalRef.value) {
        editModalRef.value.handleOpen(row, true)
    }
  if (editModalRef.value) {
    editModalRef.value.handleOpen(row, true)
  }
}
function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
  queryParams.value.pageNum = 1
  getList()
}
function resetQuery() {
    form.value = {
        // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
        energyType: null,
        tacticsName: null,
        tacticsNumber: null
    }
    queryParams.value.pageNum = 1
    getList()
  form.value = {
    // index1: [proxy.dayjs().startOf('year').format("YYYY-MM-DD"), proxy.dayjs().endOf('year').format("YYYY-MM-DD")],
    energyType: null,
    tacticsName: null,
    tacticsNumber: null,
  }
  queryParams.value.pageNum = 1
  getList()
}

function handleDel(row) {
    proxy.$modal
        .confirm('是否确认删除时间为"' + row.tacticsName + '"的数据项？')
        .then(function () {
            return unitPriceStrategyDel(row.id);
        })
        .then(() => {
            resetQuery();
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
  proxy.$modal
    .confirm('是否确认删除时间为"' + row.tacticsName + '"的数据项？')
    .then(function () {
      return unitPriceStrategyDel(row.id)
    })
    .then(() => {
      resetQuery()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

function handleCopy(row) {
    if (editModalRef.value) {
        editModalRef.value.handleOpen(row, false)
    }
  if (editModalRef.value) {
    editModalRef.value.handleOpen(row, false)
  }
}

function formatterLabel(list, value) {
    let dict = list.find(item => item.enerclassid == value)
    return dict ? dict.enerclassname : ''
  let dict = list.find((item) => item.enerclassid == value)
  return dict ? dict.enerclassname : ""
}


</script>

<style scoped lang="scss">
@import "@/assets/styles/page.scss";
</style>
</style>

 zhitan-vue/src/views/index.vue

@@ -1,27 +1,13 @@
<template>
  <div class="page">
    <CardHeader
      :showBtn="true"
      :active="'0'"
      :period="period"
      @handleClick="handleTimeType"
    >
  <div class="page" style="padding-left: 8px; padding-top: 8px">
    <CardHeader :showBtn="true" :active="'0'" :period="period" @handleClick="handleTimeType">
      <span>
        全厂能耗统计
        <el-button @click="dialogVisible = true" v-if="list.length > 1">
          查看更多
        </el-button>
        <el-button @click="dialogVisible = true" v-if="list.length > 1"> 查看更多 </el-button>
      </span>
    </CardHeader>
    <template
      v-for="(row, rowIndex) in list"
      :key="rowIndex"
      v-loading="loading02"
    >
      <div
        class="card-list"
        v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0"
      >
    <template v-for="(row, rowIndex) in list" :key="rowIndex" v-loading="loading02">
      <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0">
        <template v-for="(item, index) in row" :key="index">
          <div
            class="card-list-item"
@@ -30,10 +16,7 @@
            }"
          >
            <div class="item-top">
              <div
                class="top-icon"
                :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }"
              />
              <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon + ')' }" />
              <div class="top-right">
                <div class="right-name">
                  {{ item.energyName }}
@@ -48,11 +31,7 @@
              <div class="bottom-left">
                <span>
                  同比: {{ Math.abs(item.tongbi) }}
                  <el-icon
                    :color="
                      item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                    "
                  >
                  <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                    <Top v-if="item.tongbi > 0" />
                    <Bottom v-if="item.tongbi < 0" />
                  </el-icon>
@@ -61,11 +40,7 @@
              <div class="bottom-right">
                <span
                  >环比: {{ Math.abs(item.huanbi) }}
                  <el-icon
                    :color="
                      item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                    "
                  >
                  <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                    <Top v-if="item.huanbi > 0" />
                    <Bottom v-if="item.huanbi < 0" />
                  </el-icon>
@@ -75,23 +50,11 @@
          </div>
        </template>
      </div>
      <div
        class="card-list"
        v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0"
      >
        <template
          v-for="(item, index) in row"
          :key="index"
          v-show="rowIndex == 0"
        >
          <div
            class="card-list-item"
          >
      <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0">
        <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
          <div class="card-list-item">
            <div class="item-top">
              <div
                class="top-icon"
                :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }"
              />
              <div class="top-icon" :style="{ backgroundImage: 'url(' + bgList[index].icon2 + ')' }" />
              <div class="top-right">
                <div class="right-name">
                  {{ item.energyName }}
@@ -106,11 +69,7 @@
              <div class="bottom-left">
                <span>
                  同比: {{ Math.abs(item.tongbi) }}
                  <el-icon
                    :color="
                      item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                    "
                  >
                  <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                    <Top v-if="item.tongbi > 0" />
                    <Bottom v-if="item.tongbi < 0" />
                  </el-icon>
@@ -119,11 +78,7 @@
              <div class="bottom-right">
                <span
                  >环比: {{ Math.abs(item.huanbi) }}
                  <el-icon
                    :color="
                      item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                    "
                  >
                  <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                    <Top v-if="item.huanbi > 0" />
                    <Bottom v-if="item.huanbi < 0" />
                  </el-icon>
@@ -140,17 +95,13 @@
      <el-row :gutter="9" style="margin-bottom: 27px">
        <el-col :span="12">
          <el-card>
            <CardHeader :period="period" @handleClick="handleTimeType">
              能耗趋势
            </CardHeader>
            <CardHeader :period="period" @handleClick="handleTimeType"> 能耗趋势 </CardHeader>
            <div id="Chart1" class="chart" v-loading="loading1" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <CardHeader :period="period" @handleClick="handleTimeType">
              全厂能耗占比
            </CardHeader>
            <CardHeader :period="period" @handleClick="handleTimeType"> 全厂能耗占比 </CardHeader>
            <div id="Chart2" class="chart" v-loading="loading02" />
          </el-card>
        </el-col>
@@ -158,13 +109,8 @@
      <el-row :gutter="9">
        <el-col :span="12">
          <el-card>
            <CardHeader
              :showBtn="true"
              :period="period"
              :active="'3'"
              @handleClick="handleTimeType"
            >
              厂区能耗排名TOP{{ listEnergyConsumptionRankingLength }}
            <CardHeader :showBtn="true" :period="period" :active="'3'" @handleClick="handleTimeType">
              厂区能耗排名TOP{{ listEnergyConsumptionRankingLength || "" }}
            </CardHeader>
            <div class="top-header">
              <div class="header-left">
@@ -173,22 +119,12 @@
              </div>
              <div class="header-right">能耗量(tce)</div>
            </div>
            <div
              id="Chart3"
              class="chart"
              v-loading="loading3"
              style="height: 254px"
            />
            <div id="Chart3" class="chart" v-loading="loading3" style="height: 254px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <CardHeader
              :showBtn="true"
              :period="period"
              :active="'4'"
              @handleClick="handleTimeType"
            >
            <CardHeader :showBtn="true" :period="period" :active="'4'" @handleClick="handleTimeType">
              尖峰平谷占比
            </CardHeader>
            <div id="Chart4" class="chart" v-loading="loading4" />
@@ -196,7 +132,7 @@
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="dialogVisible" title="查看全厂能耗统计" width="80%" v-if='dialogVisible'>
    <el-dialog v-model="dialogVisible" title="查看全厂能耗统计" width="80%" v-if="dialogVisible">
      <template v-for="(row, rowIndex) in list" :key="rowIndex">
        <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark'">
          <template v-for="(item, index) in row" :key="index">
@@ -227,11 +163,7 @@
                <div class="bottom-left">
                  <span>
                    同比: {{ Math.abs(item.tongbi) }}
                    <el-icon
                      :color="
                        item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                      "
                    >
                    <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                      <Top v-if="item.tongbi > 0" />
                      <Bottom v-if="item.tongbi < 0" />
                    </el-icon>
@@ -240,11 +172,7 @@
                <div class="bottom-right">
                  <span
                    >环比: {{ Math.abs(item.huanbi) }}
                    <el-icon
                      :color="
                        item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                      "
                    >
                    <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                      <Top v-if="item.huanbi > 0" />
                      <Bottom v-if="item.huanbi < 0" />
                    </el-icon>
@@ -255,14 +183,8 @@
          </template>
        </div>
        <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark'">
          <template
            v-for="(item, index) in row"
            :key="index"
            v-show="rowIndex == 0"
          >
            <div
              class="card-list-item"
            >
          <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
            <div class="card-list-item">
              <div class="item-top">
                <div
                  class="top-icon"
@@ -284,11 +206,7 @@
                <div class="bottom-left">
                  <span>
                    同比: {{ Math.abs(item.tongbi) }}
                    <el-icon
                      :color="
                        item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''
                      "
                    >
                    <el-icon :color="item.tongbi > 0 ? 'green' : item.tongbi < 0 ? 'red' : ''">
                      <Top v-if="item.tongbi > 0" />
                      <Bottom v-if="item.tongbi < 0" />
                    </el-icon>
@@ -297,11 +215,7 @@
                <div class="bottom-right">
                  <span
                    >环比: {{ Math.abs(item.huanbi) }}
                    <el-icon
                      :color="
                        item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''
                      "
                    >
                    <el-icon :color="item.huanbi > 0 ? 'green' : item.huanbi < 0 ? 'red' : ''">
                      <Top v-if="item.huanbi > 0" />
                      <Bottom v-if="item.huanbi < 0" />
                    </el-icon>
@@ -317,43 +231,43 @@
  </div>
</template>
<script setup name="Index">
import * as echarts from "echarts";
import CardHeader from "@/components/CardHeader/CardHeader.vue";
import * as echarts from "echarts"
import CardHeader from "@/components/CardHeader/CardHeader.vue"
import {
  listEnergyConsumptionSummation,
  listEnergyConsumptionTrend,
  listEnergyConsumptionRanking,
  listPeakValley,
} from "@/api/home";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
} from "@/api/home"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getListEnergyConsumptionSummation();
    getListEnergyConsumptionTrend();
    getListEnergyConsumptionRanking();
    getListPeakValley();
    getListEnergyConsumptionSummation()
    getListEnergyConsumptionTrend()
    getListEnergyConsumptionRanking()
    getListPeakValley()
  }
);
import index_card_1 from "@/assets/images/home/index-card-1.png";
import index_card_2 from "@/assets/images/home/index-card-2.png";
import index_card_3 from "@/assets/images/home/index-card-3.png";
import index_card_4 from "@/assets/images/home/index-card-4.png";
import index_card_5 from "@/assets/images/home/index-card-5.png";
import card_icon_1 from "@/assets/images/home/card-icon-1.png";
import card_icon_2 from "@/assets/images/home/card-icon-2.png";
import card_icon_3 from "@/assets/images/home/card-icon-3.png";
import card_icon_4 from "@/assets/images/home/card-icon-4.png";
import card_icon_5 from "@/assets/images/home/card-icon-5.png";
import card_icon2_1 from "@/assets/images/home/card-icon2-1.png";
import card_icon2_2 from "@/assets/images/home/card-icon2-2.png";
import card_icon2_3 from "@/assets/images/home/card-icon2-3.png";
import card_icon2_4 from "@/assets/images/home/card-icon2-4.png";
import card_icon2_5 from "@/assets/images/home/card-icon2-5.png";
import { fa } from "element-plus/es/locales.mjs";
)
import index_card_1 from "@/assets/images/home/index-card-1.png"
import index_card_2 from "@/assets/images/home/index-card-2.png"
import index_card_3 from "@/assets/images/home/index-card-3.png"
import index_card_4 from "@/assets/images/home/index-card-4.png"
import index_card_5 from "@/assets/images/home/index-card-5.png"
import card_icon_1 from "@/assets/images/home/card-icon-1.png"
import card_icon_2 from "@/assets/images/home/card-icon-2.png"
import card_icon_3 from "@/assets/images/home/card-icon-3.png"
import card_icon_4 from "@/assets/images/home/card-icon-4.png"
import card_icon_5 from "@/assets/images/home/card-icon-5.png"
import card_icon2_1 from "@/assets/images/home/card-icon2-1.png"
import card_icon2_2 from "@/assets/images/home/card-icon2-2.png"
import card_icon2_3 from "@/assets/images/home/card-icon2-3.png"
import card_icon2_4 from "@/assets/images/home/card-icon2-4.png"
import card_icon2_5 from "@/assets/images/home/card-icon2-5.png"
import { fa } from "element-plus/es/locales.mjs"
const bgList = ref([
  {
    bg: index_card_1,
@@ -380,14 +294,14 @@
    icon: card_icon_5,
    icon2: card_icon2_5,
  },
]);
const list = ref([[{}, {}, {}, {}, {}]]);
const listEnergyConsumptionRankingLength = ref(0);
const dialogVisible = ref(false);
const loading02 = ref(false);
const loading1 = ref(false);
const loading3 = ref(false);
const loading4 = ref(false);
])
const list = ref([[{}, {}, {}, {}, {}]])
const listEnergyConsumptionRankingLength = ref(0)
const dialogVisible = ref(false)
const loading02 = ref(false)
const loading1 = ref(false)
const loading3 = ref(false)
const loading4 = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -395,54 +309,54 @@
    dataTime: null,
    nodeName: null,
  },
});
const { queryParams } = toRefs(data);
})
const { queryParams } = toRefs(data)
function handleTimeType(item, type) {
  queryParams.value.timeType = item;
  queryParams.value.type = type;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = item
  queryParams.value.type = type
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  if (type == 0) {
    getListEnergyConsumptionSummation();
    getListEnergyConsumptionTrend();
    getListEnergyConsumptionSummation()
    getListEnergyConsumptionTrend()
  } else if (type == 3) {
    getListEnergyConsumptionRanking();
    getListEnergyConsumptionRanking()
  } else if (type == 4) {
    getListPeakValley();
    getListPeakValley()
  }
}
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;
let myChart4 = null;
let myChart1 = null
let myChart2 = null
let myChart3 = null
let myChart4 = null
onMounted(() => {
  myChart1 = echarts.init(document.getElementById("Chart1"));
  myChart2 = echarts.init(document.getElementById("Chart2"));
  myChart3 = echarts.init(document.getElementById("Chart3"));
  myChart4 = echarts.init(document.getElementById("Chart4"));
});
  myChart1 = echarts.init(document.getElementById("Chart1"))
  myChart2 = echarts.init(document.getElementById("Chart2"))
  myChart3 = echarts.init(document.getElementById("Chart3"))
  myChart4 = echarts.init(document.getElementById("Chart4"))
})
// 首页-全厂能耗统计/全厂能耗占比-列表
function getListEnergyConsumptionSummation() {
  loading02.value = true;
  list.value = [];
  loading02.value = true
  list.value = []
  listEnergyConsumptionSummation(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading02.value = false;
    loading02.value = false
    if (!!res.code && res.code == 200) {
      let total = 0;
      let seriesData = [];
      let total = 0
      let seriesData = []
      if (!!res.data && res.data.length > 0) {
        res.data.map((item, index) => {
          total += Number(item.tonCount);
          item.name = item.energyName;
          item.value = Number(item.tonCount).toFixed(2);
          total += Number(item.tonCount)
          item.name = item.energyName
          item.value = Number(item.tonCount).toFixed(2)
          if (index % 5 === 0) {
            list.value.push(res.data.slice(index, index + 5));
            list.value.push(res.data.slice(index, index + 5))
          }
        });
        seriesData = res.data;
        })
        seriesData = res.data
      }
      setTimeout(() => {
        myChart2.setOption({
@@ -471,40 +385,30 @@
              verticalAlign: "middle",
              rich: {
                name: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                value: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                rate: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
              },
            },
            data: seriesData,
            formatter: (name) => {
              let target, percent, energyUnit;
              let target, percent, energyUnit
              for (let i = 0; i < seriesData.length; i++) {
                if (seriesData[i].name === name) {
                  target = seriesData[i].value;
                  energyUnit = seriesData[i].energyUnit;
                  percent =
                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                  target = seriesData[i].value
                  energyUnit = seriesData[i].energyUnit
                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                }
              }
              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`;
              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`
            },
          },
          series: [
@@ -516,8 +420,7 @@
              label: {
                show: false,
                fontSize: 11,
                color:
                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              },
              labelLine: {
                show: false,
@@ -526,44 +429,40 @@
              data: seriesData,
            },
          ],
        });
      }, 100);
        })
      }, 100)
      window.addEventListener(
        "resize",
        () => {
          myChart2.resize();
          myChart2.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
// 首页-全厂能耗趋势-列表
function getListEnergyConsumptionTrend() {
  loading1.value = true;
  loading1.value = true
  listEnergyConsumptionTrend(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading1.value = false;
    loading1.value = false
    if (!!res.code && res.code == 200) {
      let xdata = [];
      let series = [];
      let xdata = []
      let series = []
      if (!!res.data.xdata) {
        res.data.xdata.map((item) => {
          xdata.push(
            proxy
              .dayjs(item)
              .format(
                queryParams.value.timeType == "YEAR"
                  ? "MM月"
                  : queryParams.value.timeType == "MONTH"
                  ? "DD日"
                  : "HH时"
                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
              )
          );
        });
          )
        })
      }
      if (!!res.data.legend && !!res.data.ydata) {
        series = res.data.legend.map((item, index) => {
@@ -573,8 +472,8 @@
            stack: "total",
            barWidth: "16",
            data: !!res.data.ydata ? res.data.ydata[index] : [],
          };
        });
          }
        })
      }
      setTimeout(() => {
        myChart1.setOption({
@@ -590,8 +489,7 @@
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          grid: {
@@ -609,10 +507,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -625,8 +520,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -638,10 +532,7 @@
              type: "value",
              name: "tce",
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -652,10 +543,7 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
@@ -665,52 +553,47 @@
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
          ],
          series,
        });
      }, 100);
        })
      }, 100)
    }
  });
  })
  window.addEventListener(
    "resize",
    () => {
      myChart1.resize();
      myChart1.resize()
    },
    { passive: true }
  );
  )
}
// 首页-科室能耗排名TOP-列表
function getListEnergyConsumptionRanking() {
  loading3.value = true;
  loading3.value = true
  let opt = {
    index: 0,
  };
  }
  listEnergyConsumptionRanking(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading3.value = false;
    let nodeName = [];
    let energyConsumption = [];
    let maxenergyConsumption = [];
    
    loading3.value = false
    let nodeName = []
    let energyConsumption = []
    let maxenergyConsumption = []

    if (!!res.data) {
      res.data.map((item, index) => {
        nodeName.push(item.nodeName);
        energyConsumption.push(
          !!item.energyConsumption ? item.energyConsumption : 0
        );
        maxenergyConsumption[index] = res.data[0].energyConsumption;
      });
      listEnergyConsumptionRankingLength.value = res.data.length;
        nodeName.push(item.nodeName)
        energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0)
        maxenergyConsumption[index] = res.data[0].energyConsumption
      })
      listEnergyConsumptionRankingLength.value = res.data.length
    }
    setTimeout(() => {
      myChart3.setOption({
@@ -727,7 +610,7 @@
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
            return params[0].name + " : " + params[0].value
          },
        },
        xAxis: {
@@ -749,38 +632,17 @@
            },
            axisLabel: {
              interval: 0,
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              fontSize: 14,
              formatter: function (value, index) {
                if (index == 0) {
                  return (
                    "{idx0|" +
                    (1 + index + opt.index) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx0|" + (1 + index + opt.index) + "}{title|" + value + "}"
                } else if (index == 1) {
                  return (
                    "{idx1|" +
                    (1 + index + opt.index) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx1|" + (1 + index + opt.index) + "}{title|" + value + "}"
                } else if (index == 2) {
                  return (
                    "{idx2|" +
                    (1 + index + opt.index) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx2|" + (1 + index + opt.index) + "}{title|" + value + "}"
                } else {
                  return (
                    "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
                  );
                  return "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
                }
              },
              rich: {
@@ -822,8 +684,7 @@
            axisLine: "none",
            show: true,
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              fontSize: "12",
            },
            data: energyConsumption,
@@ -863,48 +724,41 @@
            data: energyConsumption,
          },
        ],
      });
    }, 100);
      })
    }, 100)
    window.addEventListener(
      "resize",
      () => {
        myChart3.resize();
        myChart3.resize()
      },
      { passive: true }
    );
  });
    )
  })
}
// 首页-尖峰平谷占比-列表
function getListPeakValley() {
  loading4.value = true;
  loading4.value = true
  listPeakValley(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    loading4.value = false;
    loading4.value = false
    if (!!res.code && res.code == 200) {
      let total = 0;
      let seriesData = [];
      let total = 0
      let seriesData = []
      if (!!res.data && res.data.length > 0) {
        res.data.map((item, index) => {
          total += Number(item.count);
          total += Number(item.count)
          seriesData.push({
            name: item.timeName,
            value: Number(item.count).toFixed(2),
          });
        });
          })
        })
      }
      setTimeout(() => {
        myChart4.setOption({
          color: [
            "#8B33FF",
            "#00DBFF",
            "#002ADB",
            "#5C92F7",
            "#76D2F1",
            "#8FADF9",
          ],
          color: ["#8B33FF", "#00DBFF", "#002ADB", "#5C92F7", "#76D2F1", "#8FADF9"],
          grid: {
            top: "20%",
            left: "15%",
@@ -929,39 +783,29 @@
              verticalAlign: "middle",
              rich: {
                name: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                value: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                rate: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
              },
            },
            data: seriesData,
            formatter: (name) => {
              let target, percent;
              let target, percent
              for (let i = 0; i < seriesData.length; i++) {
                if (seriesData[i].name === name) {
                  target = seriesData[i].value;
                  percent =
                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                  target = seriesData[i].value
                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                }
              }
              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`;
              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`
            },
          },
          series: [
@@ -973,8 +817,7 @@
              avoidLabelOverlap: false,
              label: {
                fontSize: 11,
                color:
                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              },
              labelLine: {
                show: true,
@@ -999,17 +842,17 @@
              data: seriesData,
            },
          ],
        });
      }, 100);
        })
      }, 100)
      window.addEventListener(
        "resize",
        () => {
          myChart4.resize();
          myChart4.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/login.vue

@@ -76,6 +76,7 @@
const router = useRouter()
const { proxy } = getCurrentInstance()
const systemInfo = JSON.parse(Cookies.get("SystemInfo") || "{}")
console.log(systemInfo)

const loginForm = ref({
  username: "admin",

 zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue

@@ -9,41 +9,53 @@
          <el-input v-model="queryParams.name" placeholder="名称" maxlength="30" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="mt20 mb20">
    <div class="table-bg-style">
      <div class="ml20 mb20 theme-dark-mt20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="energyTypeList">
        <el-table-column label="编号" align="center" key="code" prop="code" :show-overflow-tooltip="true" />
        <el-table-column label="名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="负责人" align="center" key="principals" prop="principals" :show-overflow-tooltip="true" />
        <el-table-column label="负责人电话" align="center" key="principalsTel" prop="principalsTel"
          :show-overflow-tooltip="true" />
        <el-table-column label="备注" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">
                编辑
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
      <div class="table-box">
        <el-table v-loading="loading" :data="energyTypeList">
          <el-table-column label="编号" align="center" key="code" prop="code" :show-overflow-tooltip="true" />
          <el-table-column label="名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
          <el-table-column
            label="负责人"
            align="center"
            key="principals"
            prop="principals"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="负责人电话"
            align="center"
            key="principalsTel"
            prop="principalsTel"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="备注" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="编辑" placement="top">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 编辑 </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="queryParams.total > 0"
          :total="queryParams.total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
@@ -93,12 +105,12 @@
  getDistributionRoom,
  updateDistributionRoom,
  delDistributionRoom,
} from "@/api/measuringinstruments/distributionroom";
const { proxy } = getCurrentInstance();
const energyTypeList = ref([]);
const open = ref(false);
const loading = ref(false);
const title = ref("");
} from "@/api/measuringinstruments/distributionroom"
const { proxy } = getCurrentInstance()
const energyTypeList = ref([])
const open = ref(false)
const loading = ref(false)
const title = ref("")
const data = reactive({
  form: {},
  queryParams: {
@@ -106,61 +118,61 @@
    pageSize: 10,
    total: 0,
    name: null,
    code: null
    code: null,
  },
  rules: {
    name: [
      { required: true, message: "名称不能为空", trigger: "blur" },
    ],
    name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    code: [
      { required: true, message: "编号不能为空", trigger: "blur" },
      // { pattern: /^[a-z0-9]*$/, message: "编号必须为数字/小写字母" },
    ],
    principalsTel: [{ required: false, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
    principalsTel: [
      { required: false, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);
getList();
})
const { queryParams, form, rules } = toRefs(data)
getList()
// 计量器具档案-配电室管理-列表
function getList() {
  loading.value = true;
  loading.value = true
  listDistributionRoom(proxy.addDateRange(queryParams.value)).then((res) => {
    loading.value = false;
    energyTypeList.value = res.data.records;
    queryParams.value.total = res.data.total;
  });
    loading.value = false
    energyTypeList.value = res.data.records
    queryParams.value.total = res.data.total
  })
}
// 计量器具档案-配电室管理-搜索
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
  queryParams.value.pageNo = 1
  getList()
}
// 计量器具档案-配电室管理-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  proxy.resetForm("queryRef")
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    total: 0,
    name: null,
    code: null
  };
  getList();
    code: null,
  }
  getList()
}
// 计量器具档案-配电室管理-新增
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增配电室";
  reset()
  open.value = true
  title.value = "新增配电室"
}
// 计量器具档案-配电室管理-编辑
function handleUpdate(row) {
  reset();
  reset()
  getDistributionRoom({ id: row.id }).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "编辑配电室";
  });
    form.value = response.data
    open.value = true
    title.value = "编辑配电室"
  })
}
// 计量器具档案-配电室管理-新增/编辑-保存
function submitForm() {
@@ -168,24 +180,24 @@
    if (valid) {
      if (form.value.id != undefined) {
        updateDistributionRoom(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addDistributionRoom(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
// 计量器具档案-配电室管理-新增/编辑-取消
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
// 计量器具档案-配电室管理-新增/编辑-表单重置
function reset() {
@@ -193,21 +205,21 @@
    name: null,
    code: null,
    remark: null,
  };
  proxy.resetForm("formRef");
  }
  proxy.resetForm("formRef")
}
// 计量器具档案-配电室管理-删除
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除配电室名称为"' + row.name + '"的数据项？')
    .then(function () {
      return delDistributionRoom({ ids: row.id });
      return delDistributionRoom({ ids: row.id })
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => { });
    .catch(() => {})
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue

@@ -1,162 +1,176 @@
<template>
    <div class="page">
        <div class="form-card">
            <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
                <el-form-item label="编码" prop="code">
                    <el-input v-model="form.code" placeholder="请输入编码" />
                </el-form-item>
                <el-form-item label="器具名称" prop="meterName">
                    <el-input v-model="form.meterName" placeholder="请输入器具名称" />
                </el-form-item>
                <el-form-item label="种类" prop="meterType">
                    <el-select v-model="form.meterType" placeholder="请选择种类" style="width: 170px;">
                        <el-option :label="item.label" :value="item.value" v-for="item in sys_device_type"
                            :key="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <div class=" mt20 mb20">
                <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="code" label="编码" show-overflow-tooltip align="center" />
                <el-table-column prop="meterName" label="器具名称" show-overflow-tooltip align="center" />
                <el-table-column prop="meterType" label="种类" show-overflow-tooltip align="center"
                    :formatter="(row, column) => proxy.selectDictLabel(sys_device_type, row.meterType)" />
                <el-table-column prop="energyType" label="能源类型" show-overflow-tooltip align="center"
                    :formatter="energyTypeFormatter" />
                <el-table-column prop="modelNumber" label="规格型号" show-overflow-tooltip align="center" />
                <el-table-column prop="measureRange" label="测量范围" show-overflow-tooltip align="center" />
                <el-table-column prop="manufacturer" label="生产厂商" show-overflow-tooltip align="center" />
                <el-table-column prop="installLocationName" label="配电室" show-overflow-tooltip align="center" />
                <el-table-column prop="meterStatus" label="状态" width="90" show-overflow-tooltip align="center"
                    :formatter="(row, column) => proxy.selectDictLabel(meter_status, row.meterStatus)" />
                <el-table-column label="操作" width="280" align="center">
                    <template #default="scope">
                        <!-- <el-button link type="primary" icon="Files" @click="handleAnnexModal(scope.row)">
  <div class="page">
    <div class="form-card">
      <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
        <el-form-item label="编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="器具名称" prop="meterName">
          <el-input v-model="form.meterName" placeholder="请输入器具名称" />
        </el-form-item>
        <el-form-item label="种类" prop="meterType">
          <el-select v-model="form.meterType" placeholder="请选择种类" style="width: 170px">
            <el-option :label="item.label" :value="item.value" v-for="item in sys_device_type" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="ml20 mb20 theme-dark-mt20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="code" label="编码" show-overflow-tooltip align="center" />
          <el-table-column prop="meterName" label="器具名称" show-overflow-tooltip align="center" />
          <el-table-column
            prop="meterType"
            label="种类"
            show-overflow-tooltip
            align="center"
            :formatter="(row, column) => proxy.selectDictLabel(sys_device_type, row.meterType)"
          />
          <el-table-column
            prop="energyType"
            label="能源类型"
            show-overflow-tooltip
            align="center"
            :formatter="energyTypeFormatter"
          />
          <el-table-column prop="modelNumber" label="规格型号" show-overflow-tooltip align="center" />
          <el-table-column prop="measureRange" label="测量范围" show-overflow-tooltip align="center" />
          <el-table-column prop="manufacturer" label="生产厂商" show-overflow-tooltip align="center" />
          <el-table-column prop="installLocationName" label="配电室" show-overflow-tooltip align="center" />
          <el-table-column
            prop="meterStatus"
            label="状态"
            width="90"
            show-overflow-tooltip
            align="center"
            :formatter="(row, column) => proxy.selectDictLabel(meter_status, row.meterStatus)"
          />
          <el-table-column label="操作" width="280" align="center">
            <template #default="scope">
              <!-- <el-button link type="primary" icon="Files" @click="handleAnnexModal(scope.row)">
                                        附件
                                    </el-button> -->
                        <el-button link type="primary" icon="Document" @click="handleTargetModal(scope.row)">
                            指标
                        </el-button>
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        <EditModal ref="EditModalRef" :typeArray="sys_device_type" :energyTypeArr="energyTypeArr" @getList="getList" />
        <AnnexModal ref="AnnexModalRef" />
        <TargetModal ref="TargetModalRef" />


              <el-button link type="primary" icon="Document" @click="handleTargetModal(scope.row)"> 指标 </el-button>
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <EditModal ref="EditModalRef" :typeArray="sys_device_type" :energyTypeArr="energyTypeArr" @getList="getList" />
    <AnnexModal ref="AnnexModalRef" />
    <TargetModal ref="TargetModalRef" />
  </div>
</template>

<script setup name="measuring">
import EditModal from './components/EditModal.vue'
import AnnexModal from './components/AnnexModal.vue'
import TargetModal from './components/TargetModal.vue'
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
import { getMaintainList, delMaintain } from '@/api/measuringInstruments/measuringInstruments'
const { proxy } = getCurrentInstance();
const { sys_device_type } = proxy.useDict("sys_device_type");
const { meter_status } = proxy.useDict("meter_status");
import EditModal from "./components/EditModal.vue"
import AnnexModal from "./components/AnnexModal.vue"
import TargetModal from "./components/TargetModal.vue"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import { getMaintainList, delMaintain } from "@/api/measuringInstruments/measuringInstruments"
const { proxy } = getCurrentInstance()
const { sys_device_type } = proxy.useDict("sys_device_type")
const { meter_status } = proxy.useDict("meter_status")

let form = ref({
    code: '',
    meterName: '',
    meterType: ''
  code: "",
  meterName: "",
  meterType: "",
})


function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  proxy.resetForm("queryRef")
  handleQuery()
}


let loading = ref(false);
let total = ref(0);
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  pageNum: 1,
  pageSize: 10,
})

//获取列表
function getList() {
    loading.value = true
    getMaintainList({ ...queryParams.value, ...form.value }).then(res => {
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    })
  loading.value = true
  getMaintainList({ ...queryParams.value, ...form.value }).then((res) => {
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

getList()

let EditModalRef = ref('')
let EditModalRef = ref("")
function handleAdd(row) {
    if (EditModalRef.value) {
        EditModalRef.value.handleOpen(row)
    }

  if (EditModalRef.value) {
    EditModalRef.value.handleOpen(row)
  }
}

function handleDel(row) {
    proxy.$modal.confirm('是否确认删除数据项?').then(function () {
        return delMaintain(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
  proxy.$modal
    .confirm("是否确认删除数据项?")
    .then(function () {
      return delMaintain(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

let AnnexModalRef = ref('')
let AnnexModalRef = ref("")

function handleAnnexModal(row) {
    if (AnnexModalRef.value) {
        AnnexModalRef.value.handleOpen(row)
    }
  if (AnnexModalRef.value) {
    AnnexModalRef.value.handleOpen(row)
  }
}

let TargetModalRef = ref('')
let TargetModalRef = ref("")

function handleTargetModal(row) {
    if (TargetModalRef.value) {
        TargetModalRef.value.handleOpen(row)
    }

  if (TargetModalRef.value) {
    TargetModalRef.value.handleOpen(row)
  }
}
let energyTypeArr = ref([])
function energyTypeFun() {
    listEnergyTypeList().then((res) => {
        energyTypeArr.value = res.data;
    });
  listEnergyTypeList().then((res) => {
    energyTypeArr.value = res.data
  })
}
energyTypeFun()

function energyTypeFormatter(value) {
    let dict = energyTypeArr.value.find(item => item.enersno == value.energyType)
    return dict ? dict.enername : ''
  let dict = energyTypeArr.value.find((item) => item.enersno == value.energyType)
  return dict ? dict.enername : ""
}
</script>


 zhitan-vue/src/views/powerbalance/powerbalance.vue

@@ -8,22 +8,22 @@
        <div class="table-box">
          <div class="table-header-box">
            <div>
              <div class="cell"> </div>
              <div class="cell"></div>
            </div>
            <div v-for=" (item, i) in tableHeaderData" :key="i">
            <div v-for="(item, i) in tableHeaderData" :key="i">
              <div class="cell">{{ item }}</div>
            </div>
          </div>

          <div class="table-content-box" v-for="(items, i) in ListData" :key="i">
            <div class="calc6_4 ">
              <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
            <div class="calc6_4">
              <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
                <div class="calc4">
                  {{ items.jinList.jinName }}
                </div>
                <div class="width50">
                  <div v-for="  (item, k) in items.jinList.list" :key="k" class="data-list-ul">
                    <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
                  <div v-for="(item, k) in items.jinList.list" :key="k" class="data-list-ul">
                    <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
                    <div class="width50">{{ item.num }}</div>
                  </div>
                </div>
@@ -31,16 +31,19 @@
                  {{ items.jinList.total }}
                </div>
              </div>
              <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
              <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
                <div class="calc4">
                  {{ items.chuList.chuName }}
                </div>
                <div class="width50">
                  <div v-for="  (item, k) in items.chuList.list" :key="k"
                    style="display: flex;align-items: center; width: 100%;" class="data-list-ul">
                    <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
                  <div
                    v-for="(item, k) in items.chuList.list"
                    :key="k"
                    style="display: flex; align-items: center; width: 100%"
                    class="data-list-ul"
                  >
                    <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
                    <div class="width50">{{ item.num }}</div>

                  </div>
                </div>
                <div class="calc4">
@@ -48,21 +51,23 @@
                </div>
              </div>
            </div>
            <div class="calc6"
              style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
            <div
              class="calc6"
              style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
            >
              <div>
                {{ items.cha }}
              </div>
            </div>
            <div class="calc6"
              style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
            <div
              class="calc6"
              style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
            >
              <div>
                {{ items.baifenbi }}
              </div>

            </div>
          </div>

        </div>
        <BaseCard title="能源流向分析">
          <div class="chart-box">
@@ -74,119 +79,111 @@
  </div>
</template>
<script setup>
import useSettingsStore from '@/store/modules/settings'
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import * as echarts from "echarts"
import { onMounted } from "vue"
/** 节点单击事件 */
function handleNodeClick(data) {
}
function handleNodeClick(data) {}


const tableHeaderData = ['线路名称', '耗电量', '小计', '差值', '百分比']
const tableHeaderData = ["线路名称", "耗电量", "小计", "差值", "百分比"]
const ListData = ref([
  {
    id: 1,
    jinList: {
      jinName: '进线',
      jinName: "进线",
      list: [
        { num: 24726900, title: '1#主变' },
        { num: 0, title: '冶三余热发电反向' },
        { num: 958880, title: '吉顺光伏1#线' },
        { num: 874720, title: '吉顺光伏2#线' }
        { num: 24726900, title: "1#主变" },
        { num: 0, title: "冶三余热发电反向" },
        { num: 958880, title: "吉顺光伏1#线" },
        { num: 874720, title: "吉顺光伏2#线" },
      ],
      total: 39375820
      total: 39375820,
    },

    chuList: {
      chuName: '出线',
      chuName: "出线",
      list: [
        { num: 1766800, title: '冶三鼓风机房1#线' },
        { num: 1046400, title: '冶三鼓风机房2#线' },
        { num: 1790400, title: '冶三硫酸1#线' },
        { num: 1385700, title: '冶三硫酸2#线' },
        { num: 5058600, title: '冶三制氧1#线' },
        { num: 3921600, title: '冶三制氧2#线' },
        { num: 215760, title: '生化2#线' },
        { num: 0, title: '侧吹精炼1#线' },
        { num: 5555000, title: '侧吹熔炼1#线' },
        { num: 4786530, title: '1#35kV生化线' },
        { num: 973980, title: '2#35kV生化线' },
        { num: 7680, title: '吉顺光伏1#线' },
        { num: 5280, title: '吉顺光伏2#线' }

        { num: 1766800, title: "冶三鼓风机房1#线" },
        { num: 1046400, title: "冶三鼓风机房2#线" },
        { num: 1790400, title: "冶三硫酸1#线" },
        { num: 1385700, title: "冶三硫酸2#线" },
        { num: 5058600, title: "冶三制氧1#线" },
        { num: 3921600, title: "冶三制氧2#线" },
        { num: 215760, title: "生化2#线" },
        { num: 0, title: "侧吹精炼1#线" },
        { num: 5555000, title: "侧吹熔炼1#线" },
        { num: 4786530, title: "1#35kV生化线" },
        { num: 973980, title: "2#35kV生化线" },
        { num: 7680, title: "吉顺光伏1#线" },
        { num: 5280, title: "吉顺光伏2#线" },
      ],
      total: 39173060
      total: 39173060,
    },
    cha: 202760,
    baifenbi: '0.51%'
    baifenbi: "0.51%",
  },
])

watch(
  () => settingsStore.sideTheme,
  (val) => {
    getChart()
  }

]);



watch(() => settingsStore.sideTheme, (val) => {
  getChart()
})
)

function getChart() {


  let colors = ['#FBB4AE', '#B3CDE3', '#CCEBC5', '#DECBE4', '#5470C6'];
  let colors = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#5470C6"]
  let mydata = [
    { id: 1, name: '1#主变', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 2, name: '吉顺光伏1#线', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 3, name: '吉顺光伏2#线', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 4, name: '冶三余热发电反向', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 1, name: "1#主变", itemStyle: { color: colors[0] }, depth: 0 },
    { id: 2, name: "吉顺光伏1#线", itemStyle: { color: colors[0] }, depth: 0 },
    { id: 3, name: "吉顺光伏2#线", itemStyle: { color: colors[0] }, depth: 0 },
    { id: 4, name: "冶三余热发电反向", itemStyle: { color: colors[0] }, depth: 0 },


    { id: 5, name: '进出线', itemStyle: { color: colors[1] }, depth: 1 },
    { id: 5, name: "进出线", itemStyle: { color: colors[1] }, depth: 1 },
    // { name: 'L2-1', itemStyle: { color: colors[1] }, depth: 1 },
    // { name: 'L2-2', itemStyle: { color: colors[1] }, depth: 1 },
    // { name: 'L2-3', itemStyle: { color: colors[1] }, depth: 1 },


    // { name: 'L3', itemStyle: { color: colors[2] }, depth: 2 },
    // { name: 'L3-1', itemStyle: { color: colors[2] }, depth: 2 },
    // { name: 'L3-2', itemStyle: { color: colors[2] }, depth: 2 },

    { id: 6, name: '冶三鼓风机房1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 7, name: '冶三鼓风机房2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 8, name: '冶三硫酸1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 9, name: '冶三硫酸2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 10, name: '冶三制氧1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 11, name: '冶三制氧2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 12, name: '生化2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 13, name: '侧吹精炼1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 14, name: '侧吹熔炼1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 15, name: '1#35kV生化线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 16, name: '2#35kV生化线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 17, name: '吉顺光伏1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 18, name: '吉顺光伏2#线', itemStyle: { color: colors[3] }, depth: 3 },
  ];
    { id: 6, name: "冶三鼓风机房1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 7, name: "冶三鼓风机房2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 8, name: "冶三硫酸1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 9, name: "冶三硫酸2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 10, name: "冶三制氧1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 11, name: "冶三制氧2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 12, name: "生化2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 13, name: "侧吹精炼1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 14, name: "侧吹熔炼1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 15, name: "1#35kV生化线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 16, name: "2#35kV生化线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 17, name: "吉顺光伏1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 18, name: "吉顺光伏2#线", itemStyle: { color: colors[3] }, depth: 3 },
  ]
  // mydata.reverse()
  let mylinks = [
    // L1→L4     9720
    { source: '1', target: '5', value: 24726900 },
    { source: '2', target: '5', value: 958880 },
    { source: '3', target: '5', value: 874720 },
    { source: '4', target: '5', value: 0 },
    { source: "1", target: "5", value: 24726900 },
    { source: "2", target: "5", value: 958880 },
    { source: "3", target: "5", value: 874720 },
    { source: "4", target: "5", value: 0 },
    // L2→L4     24396
    { source: '5', target: '6', value: 1766800 },
    { source: '5', target: '7', value: 1046400 },
    { source: '5', target: '8', value: 1790400 },
    { source: '5', target: '9', value: 1385700 },
    { source: '5', target: '10', value: 5058600 },
    { source: '5', target: '11', value: 3921600 },
    { source: '5', target: '12', value: 215760 },
    { source: '5', target: '13', value: 0 },
    { source: '5', target: '14', value: 5555000 },
    { source: '5', target: '15', value: 4786530 },
    { source: '5', target: '16', value: 973980 },
    { source: '5', target: '17', value: 7680 },
    { source: '5', target: '18', value: 5280 },

    { source: "5", target: "6", value: 1766800 },
    { source: "5", target: "7", value: 1046400 },
    { source: "5", target: "8", value: 1790400 },
    { source: "5", target: "9", value: 1385700 },
    { source: "5", target: "10", value: 5058600 },
    { source: "5", target: "11", value: 3921600 },
    { source: "5", target: "12", value: 215760 },
    { source: "5", target: "13", value: 0 },
    { source: "5", target: "14", value: 5555000 },
    { source: "5", target: "15", value: 4786530 },
    { source: "5", target: "16", value: 973980 },
    { source: "5", target: "17", value: 7680 },
    { source: "5", target: "18", value: 5280 },

    // // L3→L4     1462
    // { source: 'L3', target: 'L4', value: 1462 },
@@ -206,28 +203,26 @@
    // // L2→L3→L4     893
    // { source: 'L2-3', target: 'L3-3', value: 893 },
    // { source: 'L3-3', target: 'L4', value: 893 },
  ]

  ];


  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  myChart1.setOption({
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      trigger: "item",
      triggerOn: "mousemove",
    },
    series: {
      type: 'sankey',
      type: "sankey",
      lineStyle: {
        opacity: 0.3,
        color: 'gradient',
        color: "gradient",
        curveness: 0.7,
      },
      // nodeAlign: 'left',
      nodeGap: 18,
      layoutIterations: 1,
      emphasis: {
        focus: 'adjacency',
        focus: "adjacency",
      },
      data: mydata,
      links: mylinks,
@@ -237,15 +232,19 @@
          // position: 'left', // 标签位置
          formatter: function (node) {
            // 自定义标签内容
            return node.data.name;
          }
        }
            return node.data.name
          },
        },
      },
    },
  })
  window.addEventListener("resize", () => {
    myChart1.resize();
  }, { passive: true });
  window.addEventListener(
    "resize",
    () => {
      myChart1.resize()
    },
    { passive: true }
  )
}
onMounted(() => {
  getChart()
@@ -272,7 +271,7 @@
  padding: 8px 0;
  align-items: center;

  &>div {
  & > div {
    width: calc(100% / 6);
    word-break: break-word;
    background-color: #1d3778 !important;
@@ -296,13 +295,12 @@
      line-height: 23px;
      padding: 0 12px;
    }


  }
}

.table-content-box {
  color: #fff;
  background-color: #1d3778 !important;
  padding: 8px 0;
  width: 100%;
  display: flex;
@@ -311,24 +309,20 @@
  align-items: stretch;

  .calc6_4 {
    width: calc((100% / 6) * 4)
    width: calc((100% / 6) * 4);
  }



  .calc6 {
    width: calc(100% / 6)
    width: calc(100% / 6);
  }

  .calc4 {
    width: calc(100% / 4)
    width: calc(100% / 4);
  }

  .width50 {
    width: 50%;
  }



  .data-list-ul {
    width: 100%;
@@ -353,8 +347,6 @@
    //   /* 使用省略号表示溢出的文本 */
    // }
  }


}

.chart-box {
@@ -366,4 +358,4 @@
    height: 100%;
  }
}
</style>
</style>