From 9a34cc100384b0db98166e1a7e4f35dee44fb8ae Mon Sep 17 00:00:00 2001
From: zhitan-cloud <394600+ustcyc@user.noreply.gitee.com>
Date: 星期一, 13 一月 2025 21:49:16 +0800
Subject: [PATCH] !16 合并到主分支 Merge pull request !16 from zhitan-cloud/develop1.0
---
zhitan-vue/src/assets/styles/ruoyi.scss | 39
zhitan-vue/src/assets/styles/element-ui.scss | 12
zhitan-vue/src/assets/styles/sidebar.scss | 33
zhitan-vue/src/layout/components/AppMain.vue | 24
zhitan-vue/src/layout/components/TagsView/index.vue | 172 +-
zhitan-vue/src/views/login.vue | 1
zhitan-vue/src/layout/components/Sidebar/Logo.vue | 18
zhitan-vue/src/layout/components/Sidebar/index.vue | 43
zhitan-vue/src/views/monitor/server/index.vue | 184 +
zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue | 1014 +++++++-----
zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue | 240 +-
zhitan-vue/src/settings.js | 4
zhitan-vue/src/views/index.vue | 499 ++----
zhitan-vue/src/views/costmanage/deviation/deviation.vue | 1255 ++++++++-------
zhitan-vue/src/assets/styles/page.scss | 24
zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue | 205 +-
zhitan-vue/src/components/CardHeader/CardHeader.vue | 36
zhitan-vue/src/layout/components/Navbar.vue | 86
zhitan-vue/src/views/powerbalance/powerbalance.vue | 242 +-
zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue | 195 +-
zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue | 170 +-
zhitan-vue/src/assets/styles/variables.module.scss | 6
zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue | 230 +-
23 files changed, 2,451 insertions(+), 2,281 deletions(-)
diff --git a/zhitan-vue/src/assets/styles/element-ui.scss b/zhitan-vue/src/assets/styles/element-ui.scss
index a456a20..f6c2c3a 100644
--- a/zhitan-vue/src/assets/styles/element-ui.scss
+++ b/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;
}
}
diff --git a/zhitan-vue/src/assets/styles/page.scss b/zhitan-vue/src/assets/styles/page.scss
index c4c8e50..6b2a8b1 100644
--- a/zhitan-vue/src/assets/styles/page.scss
+++ b/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;
}
}
diff --git a/zhitan-vue/src/assets/styles/ruoyi.scss b/zhitan-vue/src/assets/styles/ruoyi.scss
index 4479086..d83440a 100644
--- a/zhitan-vue/src/assets/styles/ruoyi.scss
+++ b/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 {
diff --git a/zhitan-vue/src/assets/styles/sidebar.scss b/zhitan-vue/src/assets/styles/sidebar.scss
index ea9eb7e..c5a8670 100644
--- a/zhitan-vue/src/assets/styles/sidebar.scss
+++ b/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;
}
}
}
diff --git a/zhitan-vue/src/assets/styles/variables.module.scss b/zhitan-vue/src/assets/styles/variables.module.scss
index 85780cf..b324f60 100644
--- a/zhitan-vue/src/assets/styles/variables.module.scss
+++ b/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
diff --git a/zhitan-vue/src/components/CardHeader/CardHeader.vue b/zhitan-vue/src/components/CardHeader/CardHeader.vue
index 1456322..503a443 100644
--- a/zhitan-vue/src/components/CardHeader/CardHeader.vue
+++ b/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>
diff --git a/zhitan-vue/src/layout/components/AppMain.vue b/zhitan-vue/src/layout/components/AppMain.vue
index 328df52..552c76d 100644
--- a/zhitan-vue/src/layout/components/AppMain.vue
+++ b/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>
-
diff --git a/zhitan-vue/src/layout/components/Navbar.vue b/zhitan-vue/src/layout/components/Navbar.vue
index acb1951..3500f36 100644
--- a/zhitan-vue/src/layout/components/Navbar.vue
+++ b/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;
diff --git a/zhitan-vue/src/layout/components/Sidebar/Logo.vue b/zhitan-vue/src/layout/components/Sidebar/Logo.vue
index 4831fa2..36ee63f 100644
--- a/zhitan-vue/src/layout/components/Sidebar/Logo.vue
+++ b/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;
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index ce46e57..2fe645a 100644
--- a/zhitan-vue/src/layout/components/Sidebar/index.vue
+++ b/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>
diff --git a/zhitan-vue/src/layout/components/TagsView/index.vue b/zhitan-vue/src/layout/components/TagsView/index.vue
index 02baf0f..926a7b1 100644
--- a/zhitan-vue/src/layout/components/TagsView/index.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/zhitan-vue/src/settings.js b/zhitan-vue/src/settings.js
index 08a0108..3a7443d 100644
--- a/zhitan-vue/src/settings.js
+++ b/zhitan-vue/src/settings.js
@@ -6,7 +6,7 @@
/**
* 渚ц竟鏍忎富棰� 娣辫壊涓婚theme-dark锛屾祬鑹蹭富棰榯heme-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",
}
diff --git a/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue b/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue
index 1f73fb4..e832fe5 100644
--- a/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue
+++ b/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>
diff --git a/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue b/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue
index 51682f1..5be2000 100644
--- a/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue
+++ b/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>
diff --git a/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue b/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue
index 3f20ab8..74abd5f 100644
--- a/zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue
+++ b/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>
\ No newline at end of file
+
+.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>
diff --git a/zhitan-vue/src/views/costmanage/deviation/deviation.vue b/zhitan-vue/src/views/costmanage/deviation/deviation.vue
index 2f8dce6..126e1d9 100644
--- a/zhitan-vue/src/views/costmanage/deviation/deviation.vue
+++ b/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()
// 閫掑綊鍑芥暟锛屾牴鎹甶d鏌ユ壘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>
diff --git a/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue b/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue
index 0c2a4e3..4a2818f 100644
--- a/zhitan-vue/src/views/costmanage/unitpricestrategy/unitpricestrategy.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/zhitan-vue/src/views/index.vue b/zhitan-vue/src/views/index.vue
index 2d94da3..8c988a0 100644
--- a/zhitan-vue/src/views/index.vue
+++ b/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"
- >
- 鍘傚尯鑳借�楁帓鍚峊OP{{ listEnergyConsumptionRankingLength }}
+ <CardHeader :showBtn="true" :period="period" :active="'3'" @handleClick="handleTimeType">
+ 鍘傚尯鑳借�楁帓鍚峊OP{{ 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 }
- );
+ )
}
// 棣栭〉-绉戝鑳借�楁帓鍚峊OP-鍒楄〃
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">
diff --git a/zhitan-vue/src/views/login.vue b/zhitan-vue/src/views/login.vue
index 7308664..b58823d 100644
--- a/zhitan-vue/src/views/login.vue
+++ b/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",
diff --git a/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue b/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue
index 0b2d98f..f5f8e00 100644
--- a/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue
+++ b/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">
diff --git a/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue b/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue
index fced560..c99bef1 100644
--- a/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue
+++ b/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>
diff --git a/zhitan-vue/src/views/monitor/server/index.vue b/zhitan-vue/src/views/monitor/server/index.vue
index a1178b1..f10493b 100644
--- a/zhitan-vue/src/views/monitor/server/index.vue
+++ b/zhitan-vue/src/views/monitor/server/index.vue
@@ -3,9 +3,12 @@
<el-row>
<el-col :span="12" class="card-box">
<el-card>
- <template #header><Cpu style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">CPU</span></template>
+ <template #header
+ ><Cpu style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">CPU</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
- <table cellspacing="0" style="width: 100%;">
+ <table cellspacing="0" style="width: 100%">
<thead>
<tr>
<th class="el-table__cell is-leaf"><div class="cell">灞炴��</div></th>
@@ -15,19 +18,27 @@
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鏍稿績鏁�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鐢ㄦ埛浣跨敤鐜�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">绯荤粺浣跨敤鐜�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">褰撳墠绌洪棽鐜�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div>
+ </td>
</tr>
</tbody>
</table>
@@ -37,9 +48,12 @@
<el-col :span="12" class="card-box">
<el-card>
- <template #header><Tickets style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">鍐呭瓨</span></template>
+ <template #header
+ ><Tickets style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">鍐呭瓨</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
- <table cellspacing="0" style="width: 100%;">
+ <table cellspacing="0" style="width: 100%">
<thead>
<tr>
<th class="el-table__cell is-leaf"><div class="cell">灞炴��</div></th>
@@ -50,23 +64,43 @@
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鎬诲唴瀛�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.mem">{{ server.mem.total }}G</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">宸茬敤鍐呭瓨</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.mem">{{ server.mem.used }}G</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鍓╀綑鍐呭瓨</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.mem">{{ server.mem.free }}G</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">浣跨敤鐜�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.mem" :class="{ 'text-danger': server.mem.usage > 80 }">
+ {{ server.mem.usage }}%
+ </div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm" :class="{ 'text-danger': server.jvm.usage > 80 }">
+ {{ server.jvm.usage }}%
+ </div>
+ </td>
</tr>
</tbody>
</table>
@@ -76,21 +110,32 @@
<el-col :span="24" class="card-box">
<el-card>
- <template #header><Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">鏈嶅姟鍣ㄤ俊鎭�</span></template>
+ <template #header
+ ><Monitor style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">鏈嶅姟鍣ㄤ俊鎭�</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
- <table cellspacing="0" style="width: 100%;">
+ <table cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鏈嶅姟鍣ㄥ悕绉�</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">鎿嶄綔绯荤粺</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.sys">{{ server.sys.osName }}</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鏈嶅姟鍣↖P</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">绯荤粺鏋舵瀯</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div>
+ </td>
</tr>
</tbody>
</table>
@@ -100,33 +145,50 @@
<el-col :span="24" class="card-box">
<el-card>
- <template #header><CoffeeCup style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">Java铏氭嫙鏈轰俊鎭�</span></template>
+ <template #header
+ ><CoffeeCup style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">Java铏氭嫙鏈轰俊鎭�</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
- <table cellspacing="0" style="width: 100%;table-layout:fixed;">
+ <table cellspacing="0" style="width: 100%; table-layout: fixed">
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">Java鍚嶇О</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">Java鐗堟湰</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div>
+ </td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">鍚姩鏃堕棿</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div>
+ </td>
<td class="el-table__cell is-leaf"><div class="cell">杩愯鏃堕暱</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div>
+ </td>
</tr>
<tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">瀹夎璺緞</div></td>
- <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
+ <td colspan="3" class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div>
+ </td>
</tr>
<tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">椤圭洰璺緞</div></td>
- <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
+ <td colspan="3" class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div>
+ </td>
</tr>
<tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">杩愯鍙傛暟</div></td>
- <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
+ <td colspan="3" class="el-table__cell is-leaf">
+ <div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div>
+ </td>
</tr>
</tbody>
</table>
@@ -136,9 +198,12 @@
<el-col :span="24" class="card-box">
<el-card>
- <template #header><MessageBox style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">纾佺洏鐘舵��</span></template>
+ <template #header
+ ><MessageBox style="width: 1em; height: 1em; vertical-align: middle" />
+ <span style="vertical-align: middle">纾佺洏鐘舵��</span></template
+ >
<div class="el-table el-table--enable-row-hover el-table--medium">
- <table cellspacing="0" style="width: 100%;">
+ <table cellspacing="0" style="width: 100%">
<thead>
<tr>
<th class="el-table__cell el-table__cell is-leaf"><div class="cell">鐩樼璺緞</div></th>
@@ -152,13 +217,27 @@
</thead>
<tbody v-if="server.sysFiles">
<tr v-for="(sysFile, index) in server.sysFiles" :key="index">
- <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
- <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
- <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
- <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
- <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
- <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
- <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell">{{ sysFile.dirName }}</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell">{{ sysFile.sysTypeName }}</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell">{{ sysFile.typeName }}</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell">{{ sysFile.total }}</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell">{{ sysFile.free }}</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell">{{ sysFile.used }}</div>
+ </td>
+ <td class="el-table__cell is-leaf">
+ <div class="cell" :class="{ 'text-danger': sysFile.usage > 80 }">{{ sysFile.usage }}%</div>
+ </td>
</tr>
</tbody>
</table>
@@ -170,18 +249,25 @@
</template>
<script setup>
-import { getServer } from '@/api/monitor/server'
+import { getServer } from "@/api/monitor/server"
-const server = ref([]);
-const { proxy } = getCurrentInstance();
+const server = ref([])
+const { proxy } = getCurrentInstance()
function getList() {
- proxy.$modal.loading("姝ｅ湪鍔犺浇鏈嶅姟鐩戞帶鏁版嵁锛岃绋嶅�欙紒");
- getServer().then(response => {
- server.value = response.data;
- proxy.$modal.closeLoading();
- });
+ proxy.$modal.loading("姝ｅ湪鍔犺浇鏈嶅姟鐩戞帶鏁版嵁锛岃绋嶅�欙紒")
+ getServer().then((response) => {
+ server.value = response.data
+ proxy.$modal.closeLoading()
+ })
}
-getList();
+getList()
</script>
+
+<style lang="scss" scoped>
+.el-table {
+ color: #333;
+ font-size: 14px;
+}
+</style>
diff --git a/zhitan-vue/src/views/powerbalance/powerbalance.vue b/zhitan-vue/src/views/powerbalance/powerbalance.vue
index d559c09..4656d80 100644
--- a/zhitan-vue/src/views/powerbalance/powerbalance.vue
+++ b/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鈫扡4 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鈫扡4 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鈫扡4 1462
// { source: 'L3', target: 'L4', value: 1462 },
@@ -206,28 +203,26 @@
// // L2鈫扡3鈫扡4 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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3