整体样式修改

ali

2024-09-03 0ae83a895e80a4b9777a27f613d721a7e5e2ac18

整体样式修改

 energy_management_ui/public/logo.png

 energy_management_ui/public/toray_group_icon.png

Binary files differ

 energy_management_ui/src/App.vue

@@ -6,6 +6,6 @@

<script>
export default  {
  name:  'App'
}
  name: "App"
};
</script>

 energy_management_ui/src/api/electricityPrice/statistics.js

@@ -1,4 +1,4 @@
import request from '@/utils/request'
import request from "@/utils/request";

// æŸ¥è¯¢electricity列表
export function getStatisticsList(query) {
@@ -8,18 +8,28 @@
  if(query.timeType=='YEAR'){
    query.timeType="MONTH"
  }*/
  query.timeType="HOUR"
  query.timeType = "HOUR";
  return request({
    url: '/electricityPrice/statistics/getStatisticsList',
    method: 'get',
    url: "/electricityPrice/statistics/getStatisticsList",
    method: "get",
    params: query
  })
  });
}
// æŸ¥è¯¢electricity列表
export function getDataStatistics(query) {
  return request({
    url: '/electricityPrice/statistics/getDataStatistics',
    method: 'get',
    url: "/electricityPrice/statistics/getDataStatistics",
    method: "get",
    params: query
  })
  });
}

// å°–峰平谷 ç»Ÿè®¡ æŸ¥è¯¢
// æŽ¥å£ ï¼š electricityDataItem/getDataStatistics?modelCode=1&nodeId=1&timeType=DAY&queryTime=2024-08
export function getElectricityDataItemStatistics(query) {
  return request({
    url: "/electricityDataItem/getDataStatistics",
    method: "get",
    params: query
  });
}

 energy_management_ui/src/assets/image/image.png

 energy_management_ui/src/assets/image/index.png

 energy_management_ui/src/assets/image/index2.png

 energy_management_ui/src/assets/image/index3.png

 energy_management_ui/src/assets/image/index4.jpeg

 energy_management_ui/src/assets/logo/logo.png

 energy_management_ui/src/assets/logo/logo2.png

Binary files differ

 energy_management_ui/src/assets/styles/element-ui.scss

@@ -52,6 +52,10 @@
  left: 0;
  position: relative;
  margin: 0 auto;
  background: #001233;
  .el-dialog__title{
    color: #fff;
  }
}

// refine element ui upload
@@ -77,3 +81,97 @@
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

.el-form-item__label {
  color: #fff;
}

.el-table {
  background: none
}

.el-table .el-table__header-wrapper th, .el-table th {
  background-color: #054586 !important;
  color: #fff !important;
}

.el-table tr {
  color: #fff;
  background-color: #021441;
}

.el-table th.is-leaf, .el-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.el-table__footer-wrapper td {
  border-top: 1px solid rgba(255, 255, 255, 0.15);

}

.el-table__header-wrapper tbody td, .el-table__footer-wrapper tbody td {
  color: #fff;
  background-color: #021441;
}

.el-table--group, .el-table--border {
  border: 1px solid #366cb9;
}

.el-table--border th, .el-table--border td {
  border-right: 1px solid #366cb9 !important;
}

.el-table--border th {
  border-bottom: 1px solid #366cb9;
}

.el-table::before, .el-table--group::after, .el-table--border::after {
  background-color: rgba(0, 0, 0, 0);
}

.el-table__empty-block {
  color: #fff;
  background-color: #021441;
}

.el-table tbody tr:hover > .is-center {
  background-color: rgba(5, 64, 149, 0.5) !important;
}

.el-loading-mask {
  background-color: rgba(5, 64, 149, 0.3)
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid #366CB9;
}

.el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #366CB9;
}

.el-table__fixed::before {
  background-color: rgba(0, 0, 0, 0);
}

.el-card__body{
  .el-tabs--card {
    .el-tabs__header {
      .el-tabs__item{
        border-left:0;
        color: #95c1fd;
      }
      .el-tabs__item.is-active {
        color: #fff;
        background: #24CAFF;
        border-bottom: 0;
        border-left: 0;
      }
    }
  }
}





 energy_management_ui/src/assets/styles/index.scss

@@ -77,6 +77,10 @@
  display: block;
}

.flex{
  display: flex;
}

.pointer {
  cursor: pointer;
}
@@ -127,10 +131,6 @@
.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  margin-top: 30px;
}

.text-center {
@@ -189,3 +189,62 @@
.multiselect--active {
  z-index: 1000 !important;
}

.search-wrapper {
  // padding-bottom: 12px;
}

.el-dialog__footer {
  border-top: 1px solid #366cb9 ;
}

.el-dialog__header {
  border-bottom: 1px solid #366cb9;
}
.el-drawer {
  background: #061844;
}
.el-drawer__header {
  color: #fff;
}
.el-input__inner, .el-textarea__inner, .vue-treeselect__control {
  background: rgb(54, 108, 185, 0.2) !important;
  background-color: rgb(54, 108, 185, 0.2) !important;
  border: 1px solid #366cb9 !important;
  color: #fff !important;
}
.vue-treeselect__input {
  background-color: rgb(54, 108, 185, 0.2);
  border: 1px solid #366cb9;
  color: #fff;
}
.el-date-editor .el-range-input {
  background-color: transparent;
  color: #fff;
}
.el-date-editor .el-range-separator {
  color: #fff;
}
.vue-treeselect__single-value {
  color: #fff;
}
.el-pagination__total {
  color: #fff;
}
.el-pagination__jump {
  color: #fff;
}

aside {
  background: transparent;
}
.el-tabs__item {
  color: #fff;
}
.el-tabs__item.is-active {
  color: $primary-color;
}
.el-collapse-item__header {
  background-color: #061844;
  color: #fff;
}

 energy_management_ui/src/assets/styles/ruoyi.scss

@@ -3,7 +3,7 @@
* Copyright (c) 2019 ruoyi
*/
.el-table tbody tr:hover > td {
  background-color: #CFDCF5 !important
  background-color: rgba(5,64,149,.5) !important;
}

.el-table .el-table__header-wrapper th {
@@ -22,10 +22,7 @@
}


.el-table th {
  background: #D5D5D5;
  color: #515a6e;
}


/** åŸºç¡€é€šç”¨ **/
.pt5 {
@@ -106,14 +103,6 @@
  padding-bottom: 5px
}

/** è¡¨æ ¼å¸ƒå±€ **/
.pagination-container {
  position: relative;
  height: 25px;
  margin-bottom: 10px;
  margin-top: 15px;
  padding: 10px 20px !important;
}

.pagination-container .el-pagination {
  right: 0;
@@ -127,6 +116,42 @@
  width: inherit;
}

.el-button{
  background: #0083CF;
  border-radius: 6px 6px 6px 6px;
  color: #FFFFFF;
  border: none;
}
.el-button--text {
  background: transparent !important;
}
.el-button--primary{
  background: #24CAFF;
}
.el-button--primary:hover{
  background: #24CAFF;
}
.treeBg{
  background: url("../image/treeBg.png") no-repeat;
  background-size: 100% 100%;
}
.el-tree{
  background: rgba(0,0,0,0);
  color: #A3CBFF;
}
.el-tree-node:focus>.el-tree-node__content{
  background-color: rgba(5, 64, 149,0.3);
}

.el-tree-node__content:hover {
  background-color: rgba(5, 64, 149,0.3);
}

.el-collapse-item__wrap{
  background: #001233;
  border-bottom: none;
}
.el-button,
.el-tree-node__content > .el-checkbox {
  margin-right: 8px;
}
@@ -140,7 +165,7 @@
}

.list-group {
  padding-left: 0px;
  padding-left: 0;
  list-style: none;
}

@@ -148,7 +173,7 @@
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0px;
  padding: 11px 0;
  font-size: 13px;
}

@@ -156,14 +181,16 @@
  float: right !important;
}

.el-card__header {
  padding: 14px 15px 7px;
  min-height: 40px;
.el-card{
  border: none;
  background-color: #061844;
  overflow: hidden;
  color: #fff;
}

.el-card__body {
  padding: 27px 20px;
}
// .el-card__body {
//   padding: 27px 20px;
// }

.card-box {
  padding-right: 15px;
@@ -242,14 +269,19 @@
    overflow: auto;
  }
}
.el-card__header{
  border-bottom: none;
  background: #09256B;
}

.modelnode-tree {
  margin-top: 8px;
  // margin-top: 8px;

  .custom-tree-node {
    flex: 1;
    padding-right: 8px;
    // line-height: 26px;
    font-size: 14px;
  }

  .node-opt {
@@ -266,7 +298,7 @@
.model-node-setting {
  .el-card__body {
    padding: 8px 10px 10px 10px;
    height: calc(100vh - 220px);
    height: calc(100vh - 270px);
    overflow: auto;
  }
}
@@ -297,3 +329,45 @@
    margin-top: calc(50vh - 180px);
  }
}
.shrink-col-block {
  position: absolute;
  top: 20px;
  right: 16px;
  cursor: pointer;
}

// ç¾ŽåŒ–滚动条
::-webkit-scrollbar {
  width: 11px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1) ;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color:#4E6BBA;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color .3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144,147,153,.3);
}
::-webkit-scrollbar-track-piece {
  background-color: #021441
}
::-webkit-scrollbar-corner {
  background-color:  #061844 ;
}


 energy_management_ui/src/assets/styles/sidebar.scss

@@ -1,12 +1,13 @@
#app {

  .main-container {
    height: 100vh;
    // height: 100vh; //打开不显示滚动条
    overflow: hidden;
    transition: margin-left .28s;
    margin-left: $sideBarWidth;
    position: relative;
    background: rgba(235, 237, 240, 1);
    // background: rgba(235, 237, 240, 1);
    background: #001233;
  }

  .sidebar-container {
@@ -20,7 +21,13 @@
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    // overflow: hidden;

    // background: url("../image/navbar/Group.png") no-repeat;background-size: 100% 100%;     
    // padding-left: 13px;
    // padding-right: 31px;
    // padding-top: 27px;
    // margin-top: 10px;

    // reset element-ui css
    .horizontal-collapse-transition {
@@ -28,15 +35,26 @@
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
      // overflow-x: hidden !important; æ»šåŠ¨æ¡
      // overflow: auto;
      height: 100%;
    }
    ::-webkit-scrollbar {
      width: 5px;
    }


    .el-scrollbar__bar.is-vertical {
      right: 0px;
      width: 0;
    }

    .el-scrollbar {
      height: 100%;
      background: url("../image/navbar/Group.png") no-repeat;background-size: 100% 100%;     
      padding-left: 3px;
      padding-right: 24px;
      padding-top: 13px;
    }

    &.has-logo {
@@ -56,33 +74,38 @@
    }

    .svg-icon {
      margin-right: 16px;
      margin-right: 12px;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
      background-color: rgba(0, 0, 0, 0);
    }

    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
      font-size: 16px;
      height: 44px;
      line-height: 44px;
      &:hover {
        background-color: $menuHover !important;
      }
    }

    .is-active>.el-submenu__title {
      font-size: 16px;
      // color: rgba(11, 107, 241, 1) !important;
      font-weight: 500;
    }

    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
      height: 44px;
      line-height: 44px;
      min-width: $sideBarWidth !important;
      margin-left: 8px;
      padding-left: 32px !important;
      &:hover {
        background-color: $subMenuHover !important;
      }
@@ -179,17 +202,22 @@
.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 16px;
      margin-right: 12px;
    }
  }

  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
    height: 44px;
    line-height: 44px;
    &:hover {
      // you can use $subMenuHover
      background-color: $menuHover !important;
    }
  }
  .is-active {
    color: #38bcbf !important;
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {

 energy_management_ui/src/assets/styles/variables.scss

@@ -1,3 +1,26 @@
// // base color
// $primary-color: #38BCBF;
// $blue:#324157;
// $light-blue:#3A71A8;
// $red:#C03639;
// $pink: #E65D6E;
// $green: #30B08F;
// $tiffany: #4AB7BD;
// $yellow:#FEC171;
// $panGreen: #30B08F;

// // sidebar
// $menuText:#629FF2;
// $menuActiveText: #fff;
// $subMenuActiveText:#38BCBF; // https://github.com/ElemeFE/element/issues/12951

// $menuBg:rgba(255, 255, 255, 1);
// $menuHover:rgba(246, 250, 255, 1);

// $subMenuBg:#38BCBF;
// $subMenuHover:rgba(246, 250, 255, 1)s;
// $tabBarHeight: 40px;  //面包屑高度
// $sideBarWidth: 220px;
// base color
$primary-color: #38BCBF;
$blue:#324157;
@@ -8,19 +31,21 @@
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$Backgroundcolor: #001233;

// sidebar
$menuText:#333;
$subMenuActiveText:#14CC8F; // https://github.com/ElemeFE/element/issues/12951
$menuText:#629FF2;
$menuActiveText: #fff;
$subMenuActiveText:#38BCBF; // https://github.com/ElemeFE/element/issues/12951

$menuBg:rgba(255, 255, 255, 1);
$menuHover:rgba(246, 250, 255, 1);
$menuBg:#001233;;
$menuHover:rgba(0, 0, 0, 0);   //父

$subMenuBg:#38BCBF;
$subMenuHover:rgba(246, 250, 255, 1)s;
$subMenuBg:#14CC8F;
$subMenuHover:rgba(0, 0, 0, 0);  //子

$sideBarWidth: 220px;
$sideBarWidth: 230px;
$tabBarHeight: 32px;  //面包屑高度

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -34,4 +59,5 @@
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  primary-color: $primary-color;
  tabBarHeight: $tabBarHeight;
}

 energy_management_ui/src/components/IconSelect/index.vue

@@ -1,11 +1,22 @@
<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
    <el-input
      v-model="name"
      style="position: relative;color: #333;"
      clearable
      placeholder="请输入图标名称"
      @clear="filterIcons"
      @input.native="filterIcons"
    >
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div class="icon-list">
      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
      <div
        v-for="(item, index) in iconList"
        :key="index"
        @click="selectedIcon(item)"
      >
        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
        <span>{{ item }}</span>
      </div>
@@ -14,39 +25,40 @@
</template>

<script>
import icons from './requireIcons'
import icons from "./requireIcons";
export default {
  name: 'IconSelect',
  name: "IconSelect",
  data() {
    return {
      name: '',
      name: "",
      iconList: icons
    }
    };
  },
  methods: {
    filterIcons() {
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
        this.iconList = this.iconList.filter(item => item.includes(this.name));
      } else {
        this.iconList = icons
        this.iconList = icons;
      }
    },
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
      this.$emit("selected", name);
      document.body.click();
    },
    reset() {
      this.name = ''
      this.iconList = icons
      this.name = "";
      this.iconList = icons;
    }
  }
}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .icon-body {
    width: 100%;
    padding: 10px;
  z-index: 999;
    .icon-list {
      height: 200px;
      overflow-y: scroll;
@@ -65,5 +77,8 @@
        overflow: hidden;
      }
    }
  .el-input__inner {
    color: #333;
  }
  }
</style>

 energy_management_ui/src/components/Pagination/index.vue

@@ -1,5 +1,5 @@
<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
@@ -15,10 +15,10 @@
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'
import { scrollTo } from "@/utils/scroll-to";

export default {
  name: 'Pagination',
  name: "Pagination",
  props: {
    total: {
      required: true,
@@ -35,12 +35,12 @@
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
        return [10, 20, 30, 50];
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
      default: "total, sizes, prev, pager, next, jumper"
    },
    background: {
      type: Boolean,
@@ -58,44 +58,51 @@
  computed: {
    currentPage: {
      get() {
        return this.page
        return this.page;
      },
      set(val) {
        this.$emit('update:page', val)
        this.$emit("update:page", val);
      }
    },
    pageSize: {
      get() {
        return this.limit
        return this.limit;
      },
      set(val) {
        this.$emit('update:limit', val)
        this.$emit("update:limit", val);
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800)
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800)
        scrollTo(0, 800);
      }
    }
  }
}
};
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
  background: transparent;
  padding: 12px 20px;
  position: relative;
}
.pagination-container.hidden {
  display: none;
}
.el-pagination__total {
  color: #fff !important;
}
.el-pagination__jump {
  color: #fff;
}
</style>

 energy_management_ui/src/components/common/basic-container.vue

@@ -49,16 +49,15 @@
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.basic-container {
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
  // margin-bottom: 5px;

  .card-header {
    font-size: 18px;
    font-weight: 500;
    height: 34px;
    color: #272727;
    color: #a3cbff;
    position: relative;
    padding-left: 10px;

@@ -67,8 +66,8 @@
      position: absolute;
      display: block;
      width: 4px;
      height: 17px;
      background-color: #38bcbf;
      height: 16px;
      background-color: $primary-color;
      border-radius: 3px;
      top: 2px;
      left: 0;
@@ -92,7 +91,7 @@
  }
}

.basic-container:first-child {
  margin-top: 5px;
}
// .basic-container:first-child {
//   margin-top: 5px;
// }
</style>

 energy_management_ui/src/components/shrink/index.vue

@@ -1,9 +1,12 @@
<template>
  <el-col class="shrink-col">
    <div class="click-img">
      <img src="~@/assets/image/rectangle.png" alt=""
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
           style="transform:rotate(180deg)"
           @click="toggleCollapse">
        @click="toggleCollapse"
      />
    </div>
  </el-col>
</template>
@@ -12,17 +15,17 @@
export default {
  methods: {
    toggleCollapse() {
      this.$emit('toggleCollapse')
      this.$emit("toggleCollapse");
    }
  }
}
};
</script>

<style scoped lang="scss">
.shrink-col {
  width: 48px;
  background: white;
  margin: 5px 20px 5px 0;
  background: #09256b;
  margin: 0 12px 0 0;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 #0000001a;
  padding-top: 22px;

 energy_management_ui/src/layout/components/AppMain.vue

@@ -10,26 +10,27 @@

<script>
export default {
  name: 'AppMain',
  name: "AppMain",
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path
      return this.$route.path;
    }
  }
}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 160px);
  min-height: calc(100vh - 160px - #{$tabBarHeight});
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 12px 20px;
  padding: 12px;
}

.fixed-header+.app-main {
@@ -39,11 +40,11 @@
.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
    min-height: calc(100vh - 84px - #{$tabBarHeight});
  }

  .fixed-header+.app-main {
    padding-top: 84px;
    padding-top: 106px;
  }
}
</style>

 energy_management_ui/src/layout/components/Navbar.vue

@@ -95,8 +95,9 @@
  height: 64px;
  overflow: hidden;
  position: relative;
  background: #16a5b6;
  background: #001233;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  border-bottom: 1px solid #061844;

  .hamburger-container {
    line-height: 64px;

 energy_management_ui/src/layout/components/Sidebar/Logo.vue

@@ -4,22 +4,29 @@
      <router-link
        v-if="collapse"
        key="expand"
        class="sidebar-logo-link"
        class="sidebar-logo-link-collapse"
        to="/"
      >
        <div class="collapse-logo">
          <img v-if="logoImg2" :src="logoImg2" style="width: 44px" />
          <img
            v-if="logoImg2"
            :src="logoImg2"
            style="width: 40px;height: 40px;"
          />
        </div>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <img v-if="logoImg2" :src="logoImg2" class="sidebar-logo" />
        {{ title }}
      </router-link>
    </transition>
  </div>
</template>

<script>
// import logoImg2 from "@/assets/logo/toray_group_icon.png";
import { title } from "../../../settings";

import logoImg2 from "@/assets/logo/logo.png";

export default {
  name: "SidebarLogo",
@@ -31,9 +38,10 @@
  },
  data() {
    return {
      title: "东丽医疗能源管理系统",
      logo: "https://www.toray.cn/shared/images/toray_logo_ch.svg",
      logoImg2: "https://www.toray.cn/shared/images/toray_logo_ch.svg"
      title: "综合能源管理",
      logoImg2,
      logo: "https://www.toray.cn/shared/images/toray_logo_ch.svg"
      // logoImg2: "http://yunlu.com.cn/template/pc/skin/images/index/u21.png"
    };
  }
};
@@ -54,27 +62,45 @@
  width: 100%;
  height: 64px;
  line-height: 64px;
  background: #16a5b6;
  background: #001233;
  text-align: center;
  overflow: hidden;
  .sidebar-logo-link-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    .collapse-logo {
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      height: 100%;
      width: 100%;
    }
  }

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    color: #fff;
    font-weight: 600;
    font-size: 20px;

    .collapse-logo {
      display: flex;
      align-items: center;
      height: 100%;
      text-align: center;
      width: 100%;
      justify-content: center;
      height: 100%;
      width: 100%;
    }

    & .sidebar-logo {
      width: 190px;
      width: 40px;
      vertical-align: middle;
      margin-right: 12px;
      margin-right: 6px;
    }

    & .sidebar-title {

 energy_management_ui/src/layout/components/Sidebar/index.vue

@@ -53,9 +53,15 @@
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item.is-active {
  // background: rgba(246, 250, 255, 1) !important;
  background: linear-gradient(90deg, #4fdac9 0%, #32b5cb 100%) !important;
  // background: linear-gradient(90deg, #4fdac9 0%, #32b5cb 100%) !important;
  background: linear-gradient(
    90deg,
    #0559c8 0%,
    rgba(5, 89, 200, 0) 97%
  ) !important;
}
</style>

 energy_management_ui/src/router/index.js

@@ -1,10 +1,10 @@
import Vue from 'vue'
import Router from 'vue-router'
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router)
Vue.use(Router);

/* Layout */
import Layout from '@/layout'
import Layout from "@/layout";

/**
 * Note: è·¯ç”±é…ç½®é¡¹
@@ -25,150 +25,173 @@
 */

// å…¬å…±è·¯ç”±
export const constantRoutes = [{
    path: '/redirect',
export const constantRoutes = [
  {
    path: "/redirect",
    component: Layout,
    hidden: true,
    children: [{
      path: '/redirect/:path*',
      component: () => import('@/views/redirect')
    }]
    children: [
      {
        path: "/redirect/:path*",
        component: () => import("@/views/redirect")
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login'),
    path: "/login",
    component: () => import("@/views/login"),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404'),
    path: "/404",
    component: () => import("@/views/error/404"),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error/401'),
    path: "/401",
    component: () => import("@/views/error/401"),
    hidden: true
  },
  {
    path: '',
    path: "",
    component: Layout,
    redirect: 'index',
    children: [{
      path: 'index',
      component: () => import('@/views/index'),
      name: '首页',
    redirect: "index",
    children: [
      {
        path: "index",
        component: () => import("@/views/index"),
        name: "首页",
      meta: {
        title: '首页',
        icon: 'dashboard',
          title: "首页",
          icon: "dashboard",
        noCache: true,
        affix: true
      }
    }]
  },
  {
    path: '/indexdev',
    component: () => import('@/views/index_dev'),
    hidden: 'true'
  },
  {
    path: '/user',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [{
      path: 'profile',
      component: () => import('@/views/system/user/profile/index'),
      name: 'Profile',
      meta: {
        title: '个人中心',
        icon: 'user'
      }
    }]
  },
  {
    path: '/dict',
    component: Layout,
    hidden: true,
    children: [{
      path: 'type/data/:dictId(\\d+)',
      component: () => import('@/views/system/dict/data'),
      name: 'Data',
      meta: {
        title: '字典数据',
        icon: ''
      }
    }]
  },
  {
    path: '/gen',
    component: Layout,
    hidden: true,
    children: [{
      path: 'edit',
      component: () => import('@/views/tool/gen/editTable'),
      name: 'GenEdit',
      meta: {
        title: '修改生成配置'
      }
    }]
  },
  {
    path: '/model',
    component: Layout,
    hidden: true,
    children: [{
      path: '',
      component: () => import('@/views/basicsetting/model/index'),
      name: 'modelManage',
      meta: {
        title: '模型管理'
      }
    }]
  }, {
    path: '/electricityPrice',
    component: Layout,
    hidden: true,
    children: [{
      path: 'listHistory',
      component: () => import('@/views/electricityPrice/electricity/history'),
      name: 'electricity',
      meta: {
        title: '峰平谷历史记录',
        icon: ''
      }
    }]
  }, {
    path: '/energyConsumption',
    component: Layout,
    hidden: true,
    children: [{
      path: 'listEnergyConsumption/:timeType/:beginTime/:endTime/:indexCode/:id/:titleName',
      component: () => import('@/views/energyStatistics/energyConsumption/consumptionCost'),
      name: 'listEnergyConsumption',
      meta: {
        title: '能源消费成本分时分析报表'
      }
    }]
  },
  {
    path: '/rosteringSchemeitem',
    component: Layout,
    hidden: true,
    children: [{
      path: 'list/:id',
      component: () => import('@/views/workforce/management/schemeItem'),
      name: 'list',
      meta: {
        title: '轮值方案细则'
      }
    }]
  }
]
  },
  {
    path: "/indexdev",
    component: () => import("@/views/index"),
    hidden: "true"
  },
  {
    path: "/user",
    component: Layout,
    hidden: true,
    redirect: "noredirect",
    children: [
      {
        path: "profile",
        component: () => import("@/views/system/user/profile/index"),
        name: "Profile",
        meta: {
          title: "个人中心",
          icon: "user"
        }
      }
    ]
  },
  {
    path: "/dict",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "type/data/:dictId(\\d+)",
        component: () => import("@/views/system/dict/data"),
        name: "Data",
        meta: {
          title: "字典数据",
          icon: ""
        }
      }
    ]
  },
  {
    path: "/gen",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "edit",
        component: () => import("@/views/tool/gen/editTable"),
        name: "GenEdit",
        meta: {
          title: "修改生成配置"
        }
      }
    ]
  },
  {
    path: "/model",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "",
        component: () => import("@/views/basicsetting/model/index"),
        name: "modelManage",
        meta: {
          title: "模型管理"
        }
      }
    ]
  },
  {
    path: "/electricityPrice",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "listHistory",
        component: () => import("@/views/electricityPrice/electricity/history"),
        name: "electricity",
        meta: {
          title: "峰平谷历史记录",
          icon: ""
        }
      }
    ]
  },
  {
    path: "/energyConsumption",
    component: Layout,
    hidden: true,
    children: [
      {
        path:
          "listEnergyConsumption/:timeType/:beginTime/:endTime/:indexCode/:id/:titleName",
        component: () =>
          import("@/views/energyStatistics/energyConsumption/consumptionCost"),
        name: "listEnergyConsumption",
        meta: {
          title: "能源消费成本分时分析报表"
        }
      }
    ]
  },
  {
    path: "/rosteringSchemeitem",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "list/:id",
        component: () => import("@/views/workforce/management/schemeItem"),
        name: "list",
        meta: {
          title: "轮值方案细则"
        }
      }
    ]
  }
];

export default new Router({
  mode: 'history', // åŽ»æŽ‰url中的#
  mode: "history", // åŽ»æŽ‰url中的#
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})
});

 energy_management_ui/src/settings.js

@@ -1,5 +1,5 @@
module.exports = {
  title: '东丽医疗能源管理系统',
  title: "综合能源管理",

  /**
   * æ˜¯å¦ç³»ç»Ÿå¸ƒå±€é…ç½®
@@ -14,7 +14,7 @@
  /**
   * æ˜¯å¦å›ºå®šå¤´éƒ¨
   */
  fixedHeader: false,
  fixedHeader: true,

  /**
   * æ˜¯å¦æ˜¾ç¤ºlogo
@@ -27,5 +27,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"
};

 energy_management_ui/src/utils/index.js

@@ -3,14 +3,21 @@
 */
export function formatDate(cellValue) {
  if (cellValue == null || cellValue == "") return "";
  var date = new Date(cellValue) 
  var year = date.getFullYear()
  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
  var date = new Date(cellValue);
  var year = date.getFullYear();
  var month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return (
    year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
  );
}

/**
@@ -19,40 +26,40 @@
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  if (("" + time).length === 10) {
    time = parseInt(time) * 1000;
  } else {
    time = +time
    time = +time;
  }
  const d = new Date(time)
  const now = Date.now()
  const d = new Date(time);
  const now = Date.now();

  const diff = (now - d) / 1000
  const diff = (now - d) / 1000;

  if (diff < 30) {
    return '刚刚'
    return "刚刚";
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
    return Math.ceil(diff / 60) + "分钟前";
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
    return Math.ceil(diff / 3600) + "小时前";
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
    return "1天前";
  }
  if (option) {
    return parseTime(time, option)
    return parseTime(time, option);
  } else {
    return (
      d.getMonth() +
      1 +
      '月' +
      "月" +
      d.getDate() +
      '日' +
      "日" +
      d.getHours() +
      '时' +
      "时" +
      d.getMinutes() +
      '分'
    )
      "分"
    );
  }
}

@@ -61,18 +68,18 @@
 * @returns {Object}
 */
export function getQueryObject(url) {
  url = url == null ? window.location.href : url
  const search = url.substring(url.lastIndexOf('?') + 1)
  const obj = {}
  const reg = /([^?&=]+)=([^?&=]*)/g
  url = url == null ? window.location.href : url;
  const search = url.substring(url.lastIndexOf("?") + 1);
  const obj = {};
  const reg = /([^?&=]+)=([^?&=]*)/g;
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1)
    let val = decodeURIComponent($2)
    val = String(val)
    obj[name] = val
    return rs
  })
  return obj
    const name = decodeURIComponent($1);
    let val = decodeURIComponent($2);
    val = String(val);
    obj[name] = val;
    return rs;
  });
  return obj;
}

/**
@@ -81,14 +88,14 @@
 */
export function byteLength(str) {
  // returns the byte length of an utf8 string
  let s = str.length
  let s = str.length;
  for (var i = str.length - 1; i >= 0; i--) {
    const code = str.charCodeAt(i)
    if (code > 0x7f && code <= 0x7ff) s++
    else if (code > 0x7ff && code <= 0xffff) s += 2
    if (code >= 0xDC00 && code <= 0xDFFF) i--
    const code = str.charCodeAt(i);
    if (code > 0x7f && code <= 0x7ff) s++;
    else if (code > 0x7ff && code <= 0xffff) s += 2;
    if (code >= 0xdc00 && code <= 0xdfff) i--;
  }
  return s
  return s;
}

/**
@@ -96,13 +103,13 @@
 * @returns {Array}
 */
export function cleanArray(actual) {
  const newArray = []
  const newArray = [];
  for (let i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i])
      newArray.push(actual[i]);
    }
  }
  return newArray
  return newArray;
}

/**
@@ -110,13 +117,13 @@
 * @returns {Array}
 */
export function param(json) {
  if (!json) return ''
  if (!json) return "";
  return cleanArray(
    Object.keys(json).map(key => {
      if (json[key] === undefined) return ''
      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
      if (json[key] === undefined) return "";
      return encodeURIComponent(key) + "=" + encodeURIComponent(json[key]);
    })
  ).join('&')
  ).join("&");
}

/**
@@ -124,9 +131,9 @@
 * @returns {Object}
 */
export function param2Obj(url) {
  const search = url.split('?')[1]
  const search = url.split("?")[1];
  if (!search) {
    return {}
    return {};
  }
  return JSON.parse(
    '{"' +
@@ -134,9 +141,9 @@
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"')
        .replace(/\+/g, ' ') +
        .replace(/\+/g, " ") +
      '"}'
  )
  );
}

/**
@@ -144,9 +151,9 @@
 * @returns {string}
 */
export function html2Text(val) {
  const div = document.createElement('div')
  div.innerHTML = val
  return div.textContent || div.innerText
  const div = document.createElement("div");
  div.innerHTML = val;
  return div.textContent || div.innerText;
}

/**
@@ -156,21 +163,21 @@
 * @returns {Object}
 */
export function objectMerge(target, source) {
  if (typeof target !== 'object') {
    target = {}
  if (typeof target !== "object") {
    target = {};
  }
  if (Array.isArray(source)) {
    return source.slice()
    return source.slice();
  }
  Object.keys(source).forEach(property => {
    const sourceProperty = source[property]
    if (typeof sourceProperty === 'object') {
      target[property] = objectMerge(target[property], sourceProperty)
    const sourceProperty = source[property];
    if (typeof sourceProperty === "object") {
      target[property] = objectMerge(target[property], sourceProperty);
    } else {
      target[property] = sourceProperty
      target[property] = sourceProperty;
    }
  })
  return target
  });
  return target;
}

/**
@@ -179,18 +186,18 @@
 */
export function toggleClass(element, className) {
  if (!element || !className) {
    return
    return;
  }
  let classString = element.className
  const nameIndex = classString.indexOf(className)
  let classString = element.className;
  const nameIndex = classString.indexOf(className);
  if (nameIndex === -1) {
    classString += '' + className
    classString += "" + className;
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length)
      classString.substr(nameIndex + className.length);
  }
  element.className = classString
  element.className = classString;
}

/**
@@ -198,10 +205,10 @@
 * @returns {Date}
 */
export function getTime(type) {
  if (type === 'start') {
    return new Date().getTime() - 3600 * 1000 * 24 * 90
  if (type === "start") {
    return new Date().getTime() - 3600 * 1000 * 24 * 90;
  } else {
    return new Date(new Date().toDateString())
    return new Date(new Date().toDateString());
  }
}

@@ -212,38 +219,38 @@
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result
  let timeout, args, context, timestamp, result;

  const later = function() {
    // æ®ä¸Šä¸€æ¬¡è§¦å‘时间间隔
    const last = +new Date() - timestamp
    const last = +new Date() - timestamp;

    // ä¸Šæ¬¡è¢«åŒ…装函数被调用时间间隔 last å°äºŽè®¾å®šæ—¶é—´é—´éš” wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null
      timeout = null;
      // å¦‚果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  }
  };

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // å¦‚果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
      result = func.apply(context, args);
      context = args = null;
    }

    return result
  }
    return result;
  };
}

/**
@@ -254,18 +261,18 @@
 * @returns {Object}
 */
export function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  if (!source && typeof source !== "object") {
    throw new Error("error arguments", "deepClone");
  }
  const targetObj = source.constructor === Array ? [] : {}
  const targetObj = source.constructor === Array ? [] : {};
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    if (source[keys] && typeof source[keys] === "object") {
      targetObj[keys] = deepClone(source[keys]);
    } else {
      targetObj[keys] = source[keys]
      targetObj[keys] = source[keys];
    }
  })
  return targetObj
  });
  return targetObj;
}

/**
@@ -273,16 +280,16 @@
 * @returns {Array}
 */
export function uniqueArr(arr) {
  return Array.from(new Set(arr))
  return Array.from(new Set(arr));
}

/**
 * @returns {string}
 */
export function createUniqueString() {
  const timestamp = +new Date() + ''
  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
  return (+(randomNum + timestamp)).toString(32)
  const timestamp = +new Date() + "";
  const randomNum = parseInt((1 + Math.random()) * 65536) + "";
  return (+(randomNum + timestamp)).toString(32);
}

/**
@@ -292,7 +299,7 @@
 * @returns {boolean}
 */
export function hasClass(ele, cls) {
  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}

/**
@@ -301,7 +308,7 @@
 * @param {string} cls
 */
export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += ' ' + cls
  if (!hasClass(ele, cls)) ele.className += " " + cls;
}

/**
@@ -311,7 +318,27 @@
 */
export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
    ele.className = ele.className.replace(reg, ' ')
    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    ele.className = ele.className.replace(reg, " ");
  }
}

export function getTimePeriod(num) {
  let s1 = "";
  let s2 = "";
  let e1 = "";
  let e2 = "";

  if (num % 2 === 0) {
    s2 = "30";
    s1 = ~~(num / 2 - 1) < 10 ? "0" + ~~(num / 2 - 1) : ~~(num / 2 - 1);
    e1 = ~~(num / 2) < 10 ? "0" + ~~(num / 2) : ~~(num / 2);
    e2 = "00";
  } else {
    s1 = ~~(num / 2) < 10 ? "0" + ~~(num / 2) : ~~(num / 2);
    s2 = "00";
    e1 = s1;
    e2 = "30";
  }
  return s1 + ":" + s2 + "-" + e1 + ":" + e2;
}

 energy_management_ui/src/views/alarm/collectionIndex.vue

@@ -1,6 +1,12 @@
<template>
  <div class="app-container" style="padding:0">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="query-form"
    >
      <el-form-item label="指标编码" prop="code">
        <el-input
          v-model="queryParams.code"
@@ -35,7 +41,13 @@
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
@@ -50,7 +62,13 @@
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" v-loading="loading" border @selection-change=""  @cell-click="openDlg" >
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      @selection-change=""
      @cell-click="openDlg"
    >
      <el-table-column label="指标编码" align="center" prop="name"/>
      <el-table-column label="指标名称" align="center" prop="number"/>
      <el-table-column label="实际值" align="center" prop="value"/>
@@ -58,13 +76,20 @@
      <el-table-column label="上限值" align="center" prop="code"/>
      <el-table-column label="报警次数" align="center" prop="what">
        <template slot-scope="scope">
          <div style="color:blue;text-decoration:underline ;cursor:pointer">{{scope.row.what}}</div>
          <div style="color:blue;text-decoration:underline ;cursor:pointer">
            {{ scope.row.what }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--弹框-->
    <el-dialog :title="title" :visible.sync="open" width="1000px" :close-on-click-modal="false"  >
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
    >
      <el-row style="padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>
      <el-table  :data="tableData"   :show-header="hiddenTableHeader"  border="1px" >
@@ -81,16 +106,13 @@
        <el-button @click="cancel">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
  const lineChartData = {
    newVisitis: {
    }
  }
  newVisitis: {}
};
  import {
    addEnergyindex,
    delEnergyindex,
@@ -99,12 +121,10 @@
    listEnergyindex,
    updateEnergyindex
  } from "@/api/basicsetting/energyindex";
  import LineChart from './LiChart'


import LineChart from "./LiChart";

  export default {
    name: 'energyIndex',
  name: "energyIndex",
    components: {
      LineChart
    },
@@ -145,7 +165,7 @@
        unitIdOptions: [],
        // æŸ¥è¯¢å‚æ•°
        lineChartData:{
          newVisitis:null,
        newVisitis: null
        },
        queryParams: {
          pageNum: 1,
@@ -157,53 +177,54 @@
        },

        tableData: [],
        datas: [{
          name: 'BUG',
          number: '98013',
          value: '500',
          values: '450',
          code: '480',
          what: '5',
          one: '报警时间',
          two: '0点',
          three: '1点',
          four : '2点',
          five :'3点',
          six : '4点',
          seven :'5点',
          eieght:'6点',
      datas: [
        {
          name: "BUG",
          number: "98013",
          value: "500",
          values: "450",
          code: "480",
          what: "5",
          one: "报警时间",
          two: "0点",
          three: "1点",
          four: "2点",
          five: "3点",
          six: "4点",
          seven: "5点",
          eieght: "6点"
        },
          {
            name: 'BUG',
            number: '98013',
            value : '500',
            values : '450',
            code : '480',
            what: '5',
            one :'报警限值',
            two :'210',
            three :'172',
            four : '181',
            five :'224',
            six : '280',
            seven :'310',
            eieght:'300',
          name: "BUG",
          number: "98013",
          value: "500",
          values: "450",
          code: "480",
          what: "5",
          one: "报警限值",
          two: "210",
          three: "172",
          four: "181",
          five: "224",
          six: "280",
          seven: "310",
          eieght: "300"
        },
       {
         name: 'BUG',
           number: '98013',
         value : '500',
         values : '450',
         code : '480' ,
         what: '5',
         one :'报警时值',
         two :'300',
         three :'182',
         four : '191',
         five :'234',
         six : '290',
         seven :'330',
         eieght:'310',
          name: "BUG",
          number: "98013",
          value: "500",
          values: "450",
          code: "480",
          what: "5",
          one: "报警时值",
          two: "300",
          three: "182",
          four: "191",
          five: "234",
          six: "290",
          seven: "330",
          eieght: "310"
       }
        ],

@@ -213,12 +234,22 @@
        rules: {
          name: [
            {required: true, message: "指标名称不能为空", trigger: "blur"},
            {min: 2, max: 20, message: '长度在 2 åˆ° 20 ä¸ªå­—符', trigger: 'blur'}
          ], code: [
          { min: 2, max: 20, message: "长度在 2 åˆ° 20 ä¸ªå­—符", trigger: "blur" }
        ],
        code: [
            {required: true, message: "指标编码不能为空", trigger: "blur"},
            {min: 2, max: 20, message: '长度在 2 åˆ° 20 ä¸ªå­—符', trigger: 'blur'},
            {pattern: /^[a-zA-Z][A-Za-z0-9_-]+$/, message: '必须为数字、字母、- æˆ–_ ï¼Œä¸”首字符只能为字母'}
          ], indexCategory: [
          {
            min: 2,
            max: 20,
            message: "长度在 2 åˆ° 20 ä¸ªå­—符",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z][A-Za-z0-9_-]+$/,
            message: "必须为数字、字母、- æˆ–_ ï¼Œä¸”首字符只能为字母"
          }
        ],
        indexCategory: [
            {required: true, message: "请选择指标分类", trigger: "blur"}
          ]
        },
@@ -232,16 +263,17 @@
      /*  this.getList();*/
      this.getDicts("sys_index_category").then(response => {
        this.indexCategoryOptions = response.data;
        this.indexCategoryDefaultVal = this.indexCategoryOptions.find(f => f.isDefault === 'Y');
      this.indexCategoryDefaultVal = this.indexCategoryOptions.find(
        f => f.isDefault === "Y"
      );
      });
      this.getDicts("sys_unit").then(response => {
        this.unitIdOptions = response.data;
        this.unitDefaultVal = this.unitIdOptions.find(f => f.isDefault === 'Y');
      this.unitDefaultVal = this.unitIdOptions.find(f => f.isDefault === "Y");
      });
      setInterval(this.getList(), 30000);

      this.bpy()

    this.bpy();
    },
    methods: {
      /** æŸ¥è¯¢æŒ‡æ ‡ä¿¡æ¯åˆ—表 */
@@ -258,7 +290,6 @@
        } else {
          this.energyindexList = [];
        }

      },
      bpy() {
        this.tableData = this.datas;
@@ -310,6 +341,5 @@
        this.open=true;
      }
    }

  };
</script>

 energy_management_ui/src/views/alarmItem/modelWarnSetting.vue

@@ -27,7 +27,7 @@
  setDevice,
  setEnergy,
  setProduct
} from '@/api/basicsetting/modelNode'
} from "@/api/basicsetting/modelNode";
import zbIndex from "./zbIndex";
import cjdIndex from "./cjdIndex";

@@ -36,7 +36,7 @@
  components: {zbIndex, cjdIndex},
  data() {
    return {
      currentNode: '',
      currentNode: "",
      deviceDialog: false,
      energyDialog: false,
      productDialog: false,
@@ -50,19 +50,20 @@
      settingProductList: [],
      settingIndexList: [],
      disabledSetting: true
    }
    };
  },
  methods: {
    modelNodeChange(modelNode) {
      this.settingDeviceList = [];
      this.settingIndexList = [];
      this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null;
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
      this.$refs.zbIndex.setModelNode(modelNode);
      this.$refs.cjdIndex.setModelNode(modelNode);
      if (modelNode) {
        this.currentNode = modelNode;
        this.deviceLoading = true;
        getSettingDevice(modelNode.id).then((response) => {
        getSettingDevice(modelNode.id).then(response => {
          if (response.code === 200) {
            this.settingDeviceList = response.data;
          } else {
@@ -72,7 +73,7 @@
        });

        this.energyLoading = true;
        getSettingEnergy(modelNode.id).then((response) => {
        getSettingEnergy(modelNode.id).then(response => {
          if (response.code === 200) {
            this.settingEnergyList = response.data;
          } else {
@@ -82,7 +83,7 @@
        });

        this.productLoading = true;
        getSettingProduct(modelNode.id).then((response) => {
        getSettingProduct(modelNode.id).then(response => {
          if (response.code === 200) {
            this.settingProductList = response.data;
          } else {
@@ -92,7 +93,7 @@
        });

        this.indexLoading = true;
        getSettingIndex(modelNode.id).then((response) => {
        getSettingIndex(modelNode.id).then(response => {
          if (response.code === 200) {
            this.settingIndexList = response.data;
          } else {
@@ -107,13 +108,14 @@
    },
    showCollectIndexDialog() {
      this.$nextTick(() => {
        this.$refs.collectIndexSetting.init(this.currentNode, this.settingIndexList);
      })
    },
        this.$refs.collectIndexSetting.init(
          this.currentNode,
          this.settingIndexList
        );
      });
  }
}
};
</script>

<style scoped>

</style>
<style scoped></style>

 energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue

@@ -1,29 +1,53 @@
<template>
  <div class="trendLineChart-right">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form"
             style="margin-bottom: 20px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="query-form"
      style="margin-bottom: 20px"
    >
      <el-select v-model="value" placeholder="请选择" style="width: 120px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-form-item label="" prop="minute" :rules="rules.numRule">
        æœ€æ–°
        <el-input v-model="queryParams.minute" :min="1" :max="120" style="width: 120px" type="number"></el-input>
        <el-input
          v-model="queryParams.minute"
          :min="1"
          :max="120"
          style="width: 120px"
          type="number"
        ></el-input>
        åˆ†é’Ÿ
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tableStyle" v-if="value=='tableOpen'">
      <el-table :data="tableData" ref="dataTable" border style="margin-top: 20px"
      <el-table
        :data="tableData"
        ref="dataTable"
        border
        style="margin-top: 20px"
                :height="height"
                @selection-change="handleSelectionChange">
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="statusName" align="center" label="坐标轴">
          <template slot-scope="scope">
@@ -31,7 +55,6 @@
                v-model="scope.row.yValue"
                @change="selectNumber(scope.row,scope.$index)"
            >

              <el-option
                  v-for="(item,index) in addTableSelect"
                  :key="item.yValue"
@@ -41,30 +64,58 @@
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="meteName"
            align="center"
            label="表具名称">
        <el-table-column prop="meteName" align="center" label="表具名称">
        </el-table-column>
        <el-table-column prop="indexName" align="center" label="点位名称"/>
        <el-table-column prop="indexUnit" align="center" label="单位" :formatter="unitFormat"/>
        <el-table-column
          prop="indexUnit"
          align="center"
          label="单位"
          :formatter="unitFormat"
        />
        <el-table-column prop="value" align="center" label="当前值">
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="openDialog(scope.row,'line')">趋势图
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="openDialog(scope.row, 'line')"
              >趋势图
            </el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="openDialog(scope.row,'table')">数据
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="openDialog(scope.row, 'table')"
              >数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <component ref="lincharVue" :is="vuename" :chart-data="liveLineChartData" style="margin-top: 20px"></component>
    <component
      ref="lincharVue"
      :is="vuename"
      :chart-data="liveLineChartData"
      style="margin-top: 20px"
    ></component>
    <!--历史曲线dialog-->
    <el-dialog :title="title" :visible.sync="open" width="1000px" :close-on-click-modal="false" @close="closeDialog">
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <history-alarm-view ref="historyAlarmView" :code="code" :activeName="activeName" v-if="dialogType==='line'"/>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-row style="padding:16px 16px 0;margin-bottom:32px;">
        <history-alarm-view
          ref="historyAlarmView"
          :code="code"
          :activeName="activeName"
          v-if="dialogType === 'line'"
        />
        <TableDialog :code="code" v-else :open="open"/>
      </el-row>
      <div slot="footer" class="dialog-footer">
@@ -78,34 +129,35 @@
import {
  getTrendSettingIndexLineData,
  getSvgTrendSettingIndex
} from '@/api/dataMonitoring/realTimeTrend/realTimeTrend'
import historyAlarmView from '../../energyAlarm/realTimeAlarm/historyAlarmView'
import mixins from '@/layout/mixin/getHeight'
import TableDialog from './tableDialog'
} from "@/api/dataMonitoring/realTimeTrend/realTimeTrend";
import historyAlarmView from "../../energyAlarm/realTimeAlarm/historyAlarmView";
import mixins from "@/layout/mixin/getHeight";
import TableDialog from "./tableDialog";

let timers
let timers;
export default {
  name: 'energyIndex',
  name: "energyIndex",
  components: {
    lincharVue: () => import('../../dataMonitoring/realTimeTrend/LineChart.vue'),
    lincharVue: () =>
      import("../../dataMonitoring/realTimeTrend/LineChart.vue"),
    historyAlarmView,
    TableDialog
  },
  mixins: [mixins],
  data() {
    const checkNum = (rule, value, callback) => {
      let reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/
      if ('' === value && !reg.test(value)) {
        callback(new Error('分钟需数字并且不能为空'))
      let reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
      if ("" === value && !reg.test(value)) {
        callback(new Error("分钟需数字并且不能为空"));
      } else if (0 > value || 120 < value) {
        callback(new Error('数字范围1~120的正整数'))
        callback(new Error("数字范围1~120的正整数"));
      } else {
        callback()
        callback();
      }
    }
    };
    return {
      value: 'tableOpen',
      yValue: '',
      value: "tableOpen",
      yValue: "",
      minute: undefined,
      count: undefined,
      pickerOptions: {
@@ -149,11 +201,13 @@
        minute: undefined,
        nodeId: undefined,
        //指标index
        indexType: 'COLLECT',
        params: [{
          'minute': undefined,
          'count': undefined
        }]
        indexType: "COLLECT",
        params: [
          {
            minute: undefined,
            count: undefined
          }
        ]
      },
      tableData: [],
      lineData: [],
@@ -166,17 +220,18 @@
      form: {},
      // è¡¨å•æ ¡éªŒ
      rules: {
        numRule: [
          { type: 'number', validator: checkNum, trigger: 'change' }
        ]
        numRule: [{ type: "number", validator: checkNum, trigger: "change" }]
      },
      options: [{
        value: 'tableOpen',
        label: '参数打开'
      }, {
        value: 'tableClose',
        label: '参数收缩'
      }],
      options: [
        {
          value: "tableOpen",
          label: "参数打开"
        },
        {
          value: "tableClose",
          label: "参数收缩"
        }
      ],
      addTableSelect: [],
      liveLineChartData: {
        datas: [],
@@ -185,7 +240,7 @@
        legendNameArr: []
      },
      selectYaxis: [],
      activeName: 'second',
      activeName: "second",
      code: undefined,
      rows: [],
      //单位
@@ -195,89 +250,96 @@
      unitDefaultVal: undefined,
      intervalTime: undefined,
      timer: undefined,
      vuename: '',
      vuename: "",
      height: null
    }
    };
  },
  created() {
    this.getConfigKey('dataMonitoring.realTimeTrend.pastMinute').then(response => {
      this.queryParams.minute = response.msg
    })
    this.getConfigKey('dataMonitoring.realTimeTrend.piontCount').then(response => {
      this.count = response.msg
    })
    this.getDicts('sys_unit').then(response => {
      this.unitOptions = response.data
    })
    this.getConfigKey("dataMonitoring.realTimeTrend.pastMinute").then(
      response => {
        this.queryParams.minute = response.msg;
      }
    );
    this.getConfigKey("dataMonitoring.realTimeTrend.piontCount").then(
      response => {
        this.count = response.msg;
      }
    );
    this.getDicts("sys_unit").then(response => {
      this.unitOptions = response.data;
    });
  },
  mounted() {
    clearInterval(this.timer)
    clearInterval(timers)
    timers = setInterval(this.setTimer, 50)
    this.getConfigKey('dataMonitoring.realTimeTrend.intervalTime').then(response => {
    clearInterval(this.timer);
    clearInterval(timers);
    timers = setInterval(this.setTimer, 50);
    this.getConfigKey("dataMonitoring.realTimeTrend.intervalTime").then(
      response => {
      if (response.code === 200) {
        this.intervalTime = response.msg
        this.timer = setInterval(this.getLineDataList, this.intervalTime)
          this.intervalTime = response.msg;
          this.timer = setInterval(this.getLineDataList, this.intervalTime);
      }
    })
      }
    );
  },
  beforeDestroy() {
    // é¡µé¢é”€æ¯æ—¶ è¦åœæ­¢è®¡æ—¶å™¨ï¼Œå¦åˆ™é€‰é¡¹å¡åˆ‡æ¢è®¡æ—¶å™¨ä¸åœæ­¢ï¼Œä¼šè¶Šæ¥è¶Šå¿«ï¼Œå¤šä¸ªçº¿ç¨‹
    clearInterval(this.timer)
    clearInterval(timers)
    clearInterval(this.timer);
    clearInterval(timers);
  },
  methods: {
    setTimer() {
      let that = this
      let that = this;
      this.$nextTick(() => {
        that.$refs.dataTable && that.$refs.dataTable.doLayout()
      })
        that.$refs.dataTable && that.$refs.dataTable.doLayout();
      });
    },
    setCharts() {
      this.height = window.innerHeight - 300 + 'px'
      this.height = window.innerHeight - 300 + "px";
    },
    modelNodeChange(modelNode) {
      this.queryParams.nodeId = modelNode
      this.getList()
      this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null
      this.queryParams.nodeId = modelNode;
      this.getList();
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
      if (modelNode) {
        this.currentNode = modelNode
        this.currentNode = modelNode;
      }
      if (this.$refs.lincharVue != undefined && this.$refs.lincharVue != null) {
        this.$refs.lincharVue.closeLineChar()
        this.$refs.lincharVue.closeLineChar();
      }
    },
    /** æŸ¥è¯¢æŒ‡æ ‡ä¿¡æ¯åˆ—表 */
    getList() {
      this.$refs['queryForm'].validate(valid => {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.loading = true
          var search = this.queryParams
          search.params[0].minute = this.queryParams.minute
          search.params[0].count = this.count
          this.loading = true;
          var search = this.queryParams;
          search.params[0].minute = this.queryParams.minute;
          search.params[0].count = this.count;
          //表格数据
          getSvgTrendSettingIndex(search).then(response => {
            this.tableData = response.data
            this.total = response.total
            this.addTableSelect = []
            this.tableData = response.data;
            this.total = response.total;
            this.addTableSelect = [];
            //表格下拉选择
            for (let j = 0; j < 5 && j < this.tableData.length; j++) {
              let optionItem = {
                yValue: 'y' + j,
                yLable: 'Y' + j
                yValue: "y" + j,
                yLable: "Y" + j
              };
              this.addTableSelect.push(optionItem);
              }
              this.addTableSelect.push(optionItem)
            this.loading = false;
          });
            }
            this.loading = false
          })
        }
      })
      });
    },

    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getTime() {
      //显示时间
@@ -285,88 +347,97 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.drawChars(selection)
      this.drawChars(selection);
      // if(selection.length > 1){  //单选时为1，需要选择n项改数值为n就可以
      //   this.$refs.dataTable.toggleRowSelection(selection[0],false);//超出指定选择个数后，把第一个选中的selection设为false
      //   selection.splice(0,1);//同时要把选中第一项移除
      // }
    },
    drawChars(selection) {
      this.codes = selection.map(item => item.code)
      this.indexNames = selection.map(item => item.indexName)
      this.selectYaxis = selection.map(item => item.yValue ? item.yValue : '')
      this.codes = selection.map(item => item.code);
      this.indexNames = selection.map(item => item.indexName);
      this.selectYaxis = selection.map(item =>
        item.yValue ? item.yValue : ""
      );
      if (this.codes.length > 0) {
        this.cleanLineData()
        this.vuename = 'lincharVue'
        this.getLineDataList()
        this.cleanLineData();
        this.vuename = "lincharVue";
        this.getLineDataList();
      } else {
        this.cleanLineData()
        if (this.$refs.lincharVue != undefined && this.$refs.lincharVue != null) {
          this.$refs.lincharVue.closeLineChar()
        this.cleanLineData();
        if (
          this.$refs.lincharVue != undefined &&
          this.$refs.lincharVue != null
        ) {
          this.$refs.lincharVue.closeLineChar();
        }
      }
    },
    getLineDataList() {
      let that = this
      let that = this;
      this.$nextTick(() => {
        that.$refs.dataTable.doLayout()
      })
        that.$refs.dataTable.doLayout();
      });
      if (this.codes.length > 0) {
        this.cleanLineData()
        this.cleanLineData();
        //折线图数据
        getTrendSettingIndexLineData(this.codes, this.queryParams.minute, this.count).then(response => {
        getTrendSettingIndexLineData(
          this.codes,
          this.queryParams.minute,
          this.count
        ).then(response => {
          //数据添加
          this.liveLineChartData.datas = response.data
          this.liveLineChartData.datas = response.data;
          this.$nextTick(() => {
            that.$refs.dataTable.doLayout()
          })
            that.$refs.dataTable.doLayout();
          });
          // x轴时间添加
          for (let i = 0; i < this.liveLineChartData.datas[0].length; i++) {
            this.liveLineChartData.timeList.push(this.liveLineChartData.datas[0][i].showDataTime)
            this.liveLineChartData.timeList.push(
              this.liveLineChartData.datas[0][i].showDataTime
            );
          }
          //曲线名称添加
          this.liveLineChartData.legendNameArr = this.indexNames
          this.liveLineChartData.legendArr = this.selectYaxis
        })
          this.liveLineChartData.legendNameArr = this.indexNames;
          this.liveLineChartData.legendArr = this.selectYaxis;
        });
      }
    },
    selectNumber(row, index) {
      let selection = this.$refs.dataTable.selection
      this.drawChars(selection)
      let selection = this.$refs.dataTable.selection;
      this.drawChars(selection);
    },
    cleanLineData() {
      this.liveLineChartData.legendArr = []
      this.liveLineChartData.timeList = []
      this.liveLineChartData.datas = []
      this.liveLineChartData.legendNameArr = []
      this.liveLineChartData.legendArr = [];
      this.liveLineChartData.timeList = [];
      this.liveLineChartData.datas = [];
      this.liveLineChartData.legendNameArr = [];
    },
    closeDialog() {
      this.activeName = ''
      this.activeName = "";
    },
    openDialog(e, type) {
      this.dialogType = type
      this.dialogType = type;
      if (e) {
        this.code = e.code
        this.open = true
        this.activeName = 'second'
        this.title = type === 'line' ? '历史曲线查询' : '历史数据'
        this.code = e.code;
        this.open = true;
        this.activeName = "second";
        this.title = type === "line" ? "历史曲线查询" : "历史数据";
      }
    },
    cancelDialog() {
      this.open = false
      this.open = false;
    },
    // å•ä½å­—典翻译
    unitFormat(row, column) {
      return this.selectDictLabel(this.unitOptions, row.indexUnit)
    }

      return this.selectDictLabel(this.unitOptions, row.indexUnit);
  }
}

};
</script>
<style scoped lang="scss">
.tableStyle .el-table__header-wrapper .el-checkbox {
  display: none
  display: none;
}

.trendLineChart-right {

 energy_management_ui/src/views/basicsetting/device/index.vue

@@ -1,58 +1,81 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'280px'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            è®¾å¤‡å¯åœç®¡ç†
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-containercard title="设备启停管理" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
            :showOpt="false"
          ></ModelNode>
        </basic-containercard>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container class="search-wrapper" :style="bodyStyleRight">
          <deviceTabSetting ref="deviceTabSetting"></deviceTabSetting>
        </el-main>
      </el-container>
    </el-container>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import deviceTabSetting from "./deviceTabSetting";
import ModelNode from "../../basicsetting/modelNode/modelNode";
import ShrinkCol from "@/components/shrink/index.vue";
import mixins from "@/layout/mixin/getHeight";

export default {
  components: {deviceTabSetting, ModelNode},
  components: { deviceTabSetting, ModelNode, ShrinkCol },
  mixins: [mixins],
  created() {
    this.modelCode=this.$route.query.modelCode;
  },
  data() {
    return {
      modelData: '',
      bodyStyleRight: {},
      modelData: "",
      modelInfoOptions: [],
      modelCode:undefined,
      isCollapse: false,
    }
      isCollapse: false
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 105 + "px"
      };
    },
    changeNode: function (node) {
      this.$refs.deviceTabSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
      this.$router.push("/model");
    },
    changeModel: function (item) {
      this.$refs.modelNode.getList(item);
    },
    // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};

 energy_management_ui/src/views/basicsetting/energyIndex/energyIndex.vue

@@ -1,13 +1,22 @@
<template>
  <div class="app-container" style="padding:0">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="0"
             class="query-form">
  <div class="app-container" style="padding:0 0 30px 0">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="0"
      class="query-form"
    >
      <el-row :gutter="24">
        <el-col :span="5">
          <el-form-item>
            <el-select v-model="queryParams.indexCategory" placeholder="请选择指标分类" clearable
            <el-select
              v-model="queryParams.indexCategory"
              placeholder="请选择指标分类"
              clearable
                       size="small"
                       @change="handleQuery">
              @change="handleQuery"
            >
              <el-option
                  v-for="dict in indexCategoryOptions"
                  :key="dict.dictValue"
@@ -64,10 +73,12 @@
                @click="handleImport"
            >导入
            </el-button>
            <el-button type="text"
            <el-button
              type="text"
                       icon="el-icon-setting"
                       @click="collectIndexSetting"
                       v-if="!statisticIndex">
              v-if="!statisticIndex"
            >
              é…ç½®é‡‡é›†ç‚¹
            </el-button>
          </el-form-item>
@@ -75,15 +86,33 @@
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="energyindexList" border
              @selection-change="handleSelectionChange">
    <el-table
      v-loading="loading"
      :data="energyindexList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="指标编码" align="center" prop="code"/>
      <el-table-column label="指标名称" align="center" prop="name"/>
      <el-table-column label="系统指标分类" align="center" prop="indexCategory"
                       :formatter="indexCategoryFormat"/>
      <el-table-column label="单位" align="center" prop="unitId" :formatter="unitIdFormat"/>
      <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
      <el-table-column
        label="系统指标分类"
        align="center"
        prop="indexCategory"
        :formatter="indexCategoryFormat"
      />
      <el-table-column
        label="单位"
        align="center"
        prop="unitId"
        :formatter="unitIdFormat"
      />
      <el-table-column
        label="操作"
        width="200"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
@@ -123,7 +152,12 @@
    />

    <!-- æ·»åŠ æˆ–修改指标信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="指标名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入指标名称"/>
@@ -132,7 +166,11 @@
          <el-input v-model="form.code" placeholder="请输入指标编码"/>
        </el-form-item>
        <el-form-item label="指标分类">
          <el-select v-model="form.indexCategory" placeholder="请选择指标分类" prop="indexCategory">
          <el-select
            v-model="form.indexCategory"
            placeholder="请选择指标分类"
            prop="indexCategory"
          >
            <el-option
                v-for="dict in indexCategoryOptions"
                :key="dict.dictValue"
@@ -152,7 +190,11 @@
          </el-select>
        </el-form-item>
        <el-form-item label="顺序号">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
          <el-input-number
            v-model="form.orderNum"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
        <el-form-item label="设备">
          <el-select v-model="form.equipment" placeholder="请选择设备">
@@ -181,24 +223,40 @@
      </div>
    </el-dialog>

    <el-drawer title="配置指标存储" :visible.sync="indexStorageShow" direction="rtl"
    <el-drawer
      title="配置指标存储"
      :visible.sync="indexStorageShow"
      direction="rtl"
               @open="showIndexStorageDialog"
               size="45%"
               :wrapperClosable="false">
      <IndexStorage ref="indexStorage"
                    :nodeId="currentNode===undefined?'':currentNode.id"></IndexStorage>
      :wrapperClosable="false"
    >
      <IndexStorage
        ref="indexStorage"
        :nodeId="currentNode === undefined ? '' : currentNode.id"
      ></IndexStorage>
    </el-drawer>
    <!--选择采集指标-->
    <el-drawer title="选择采集指标" :visible.sync="collectIndexDialog" direction="rtl"
    <el-drawer
      title="选择采集指标"
      :visible.sync="collectIndexDialog"
      direction="rtl"
               @open="showCollectIndexDialog"
               size="45%">
      <CollectIndexSetting ref="collectIndexSetting"
                           @collectIndexConfirmSelect="collectIndexConfirmSelect"></CollectIndexSetting>
      size="45%"
    >
      <CollectIndexSetting
        ref="collectIndexSetting"
        @collectIndexConfirmSelect="collectIndexConfirmSelect"
      ></CollectIndexSetting>
    </el-drawer>

    <!-- å¯¼å…¥å¯¹è¯æ¡† -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" :destroy-on-close="true"
               width="400px">
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      :destroy-on-close="true"
      width="400px"
    >
      <el-upload
          ref="upload"
          :limit="1"
@@ -219,9 +277,13 @@
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport"/>
          æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
          <el-link type="info" style="font-size:12px" @click="importTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
        <div class="el-upload__tip" style="color:red" slot="tip">
          æç¤ºï¼šä»…允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
@@ -242,13 +304,13 @@
  updateEnergyindex
} from "../../../api/basicsetting/energyindex";
import {getToken} from "@/utils/auth";
import {setNodeToIndex} from '@/api/basicsetting/modelNode'
import { setNodeToIndex } from "@/api/basicsetting/modelNode";
import IndexStorage from "./indexStorage";
import CollectIndexSetting from "../nodeSetting/collectIndexSetting";
import {getPointFacility} from "@/api/comprehensiveStatistics/comprehensive";

export default {
  name: 'EnergyIndex',
  name: "EnergyIndex",
  components: {CollectIndexSetting, IndexStorage},
  props: ["indexType"],
  data() {
@@ -298,12 +360,22 @@
      rules: {
        name: [
          {required: true, message: "指标名称不能为空", trigger: "blur"},
          {min: 2, max: 20, message: '长度在 2 åˆ° 20 ä¸ªå­—符', trigger: 'blur'}
        ], code: [
          { min: 2, max: 20, message: "长度在 2 åˆ° 20 ä¸ªå­—符", trigger: "blur" }
        ],
        code: [
          {required: true, message: "指标编码不能为空", trigger: "blur"},
          {min: 2, max: 20, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur'},
          {pattern: /^[a-zA-Z][A-Za-z0-9#_-]+$/, message: '必须为数字、字母、#、- æˆ–_ ï¼Œä¸”首字符只能为字母'}
        ], indexCategory: [
          {
            min: 2,
            max: 20,
            message: "长度在 2 åˆ° 30 ä¸ªå­—符",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z][A-Za-z0-9#_-]+$/,
            message: "必须为数字、字母、#、- æˆ–_ ï¼Œä¸”首字符只能为字母"
          }
        ],
        indexCategory: [
          {required: true, message: "请选择指标分类", trigger: "blur"}
        ]
      },
@@ -324,20 +396,23 @@
        // è®¾ç½®ä¸Šä¼ çš„请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // ä¸Šä¼ çš„地址
        url: process.env.VUE_APP_BASE_API + "/basicsetting/energyindex/importData"
      },
        url:
          process.env.VUE_APP_BASE_API + "/basicsetting/energyindex/importData"
      }
    };
  },
  created() {
    this.getDicts("sys_index_category").then(response => {
      this.indexCategoryOptions = response.data;
      this.indexCategoryDefaultVal = this.indexCategoryOptions.find(f => f.isDefault === 'Y');
      this.indexCategoryDefaultVal = this.indexCategoryOptions.find(
        f => f.isDefault === "Y"
      );
    });
    this.getDicts("sys_unit").then(response => {
      this.unitIdOptions = response.data;
      this.unitDefaultVal = this.unitIdOptions.find(f => f.isDefault === 'Y');
      this.unitDefaultVal = this.unitIdOptions.find(f => f.isDefault === "Y");
    });
    this.statisticIndex = this.$props.indexType === 'STATISTIC';
    this.statisticIndex = this.$props.indexType === "STATISTIC";
    this.getDicts("energy_type").then(response => {
      this.energyIdList = response.data;
    });
@@ -399,7 +474,7 @@
      this.ids = selection.map(item => item.indexId);
      this.names = selection.map(item => item.name);
      this.single = selection.length !== 1;
      this.multiple = !selection.length
      this.multiple = !selection.length;
    },
    getFacilityArchivesList() {
      getPointFacility().then(response => {
@@ -465,55 +540,64 @@
    handleDelete(row) {
      const indexIds = row.indexId || this.ids;
      const indexNames = row.name || this.names;
      this.$confirm('是否确认删除指标名为"' + indexNames + '"的数据项?', "警告", {
      this.$confirm(
        '是否确认删除指标名为"' + indexNames + '"的数据项?',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        }
      )
        .then(() => {
        return delEnergyindex(this.currentNode.id, indexIds);
      }).then(() => {
        })
        .then(() => {
        this.getList(this.currentNode);
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有指标信息数据项?', "警告", {
      this.$confirm("是否确认导出所有指标信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
      })
        .then(function() {
        return exportEnergyindex(queryParams);
      }).then(response => {
        })
        .then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    dataStorage(row) {
      this.indexStorageShow = true;
      this.$nextTick(() => {
        this.$refs.indexStorage.getIndexStorage(row.indexId);
      })
      });
    },
    showIndexStorageDialog() {
    },
    showIndexStorageDialog() {},
    collectIndexSetting() {
      this.collectIndexDialog = true;
    },
    showCollectIndexDialog() {
      this.$nextTick(() => {
        this.$refs.collectIndexSetting.init(this.currentNode);
      })
      });
    },
    collectIndexConfirmSelect(selectedIndex) {
      let indexIds = selectedIndex.map(item => item.indexId);
      setNodeToIndex(this.currentNode.id, indexIds, "COLLECT").then((response) => {
      setNodeToIndex(this.currentNode.id, indexIds, "COLLECT")
        .then(response => {
        if (response.code !== 200) {
          this.$message.error(response.msg);
        }
      }).then(() => {
        })
        .then(() => {
        this.getList(this.currentNode);
      });
    },

 energy_management_ui/src/views/basicsetting/energyIndex/index.vue

@@ -1,67 +1,82 @@
<template>
  <el-row type="flex">
    <el-col :style="{width:isCollapse?'0': '280px',position:'relative'}" v-show="!isCollapse">
    <el-col
      :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
      v-show="!isCollapse"
    >
      <basic-container title="指标库管理" :bodyStyle="bodyStyle">
        <ModelNode ref="modelNode" @changeNode="changeNode"
        <ModelNode
          ref="modelNode"
          @changeNode="changeNode"
                   modelCode="statistic_index_model"
                   :showOpt="true"
                   :auth="false"/>
          :auth="false"
        />
      </basic-container>
      <img src="~@/assets/image/rectangle.png" alt=""
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
           class="shrink-col-block"
           @click="toggleCollapse">
        @click="toggleCollapse"
      />
    </el-col>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse"/>
    <el-col :style="{width:isCollapse? 'calc(100% - 48px)':'calc(100% - 280px)',paddingLeft:isCollapse? 0:'14px'}">
      <basic-container :title="currentNode ? currentNode.label+'--节点配置' : '节点配置'" :bodyStyle="bodyStyleRight">
    <el-col
      :style="{
        width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
        paddingLeft: isCollapse ? 0 : '14px'
      }"
    >
      <basic-container
        :title="currentNode ? currentNode.label + '--节点配置' : '节点配置'"
        :bodyStyle="bodyStyleRight"
      >
        <IndexNodeSetting ref="modelNodeSetting"/>
      </basic-container>
    </el-col>
  </el-row>

</template>
<script>
import ModelNode from "../modelNode/modelNode";
import IndexNodeSetting from "./indexNodeSetting";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from '@/components/shrink/index.vue'
import ShrinkCol from "@/components/shrink/index.vue";

export default {
  components: {IndexNodeSetting, ModelNode,ShrinkCol},
  mixins: [mixins],
  created() {
  },
  created() {},
  data() {
    return {
      modelData: '',
      modelData: "",
      isCollapse: false,
      bodyStyleRight: {},
      currentNode: ''
    }
      currentNode: ""
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + 'px';
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 155 + 'px'
        height: window.innerHeight - 185 + "px"
      };
    },
    changeNode: function (node) {
      if (node) {
        this.currentNode = node
        this.currentNode = node;
      }
      this.$refs.modelNodeSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
      this.$router.push("/model");
    },
    changeModel: function (item) {
      this.$refs.modelNode.getList(item);
    },
    // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};

 energy_management_ui/src/views/basicsetting/limitType/index.vue

@@ -1,7 +1,12 @@
<template>
  <div>
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" label-width="120px" class="special-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        label-width="120px"
        class="special-form"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="限值类型名称" prop="limitName">
@@ -16,8 +21,16 @@
          </el-col>
          <el-col :span="18">
            <el-form-item class="operation">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
@@ -67,18 +80,35 @@
        <!--        >导出</el-button>-->
        <!--      </el-col>-->
      </el-row>
      <el-table :height="height" v-loading="loading" :data="limitTypeList" @selection-change="handleSelectionChange">
      <el-table
        v-loading="loading"
        :data="limitTypeList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="限值类型名称" align="center" prop="limitName"/>
        <el-table-column label="限值类型编号" align="center" prop="limitCode"/>
        <el-table-column label="报警限制类型" align="center" prop="alarmType" :formatter="typeFormat"/>
        <el-table-column
          label="报警限制类型"
          align="center"
          prop="alarmType"
          :formatter="typeFormat"
        />
        <el-table-column label="色号" align="center" prop="colorNumber">
          <template slot-scope="scope">
            <el-tag :color="scope.row.colorNumber" disable-transitions></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="比较运算符" align="center" prop="comparatorOperator"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <el-table-column
          label="比较运算符"
          align="center"
          prop="comparatorOperator"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
@@ -116,12 +146,18 @@
          <el-input v-model="form.limitCode" placeholder="请输入限值类型编码"/>
        </el-form-item>
        <el-form-item label="报警限制类型" prop="alarmType">
          <el-select v-model="form.alarmType" placeholder="请选择报警限制类型" clearable size="small">
          <el-select
            v-model="form.alarmType"
            placeholder="请选择报警限制类型"
            clearable
            size="small"
          >
            <el-option
                v-for="item in alarmTypeList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
@@ -129,11 +165,17 @@
          <el-color-picker
              v-model="form.colorNumber"
              color-format="hex"
              :predefine="predefineColors">
            :predefine="predefineColors"
          >
          </el-color-picker>
        </el-form-item>
        <el-form-item label="比较运算符" prop="comparatorOperator">
          <el-select v-model="form.comparatorOperator" placeholder="比较运算符" clearable size="small">
          <el-select
            v-model="form.comparatorOperator"
            placeholder="比较运算符"
            clearable
            size="small"
          >
            <el-option label="大于" value=">"/>
            <el-option label="大于等于" value=">="/>
            <el-option label="小于" value="<"/>
@@ -189,7 +231,7 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        limitName: undefined,
        limitName: undefined
      },
      // è¡¨å•å‚æ•°
      form: {},
@@ -200,34 +242,36 @@
        ],
        limitCode: [
          {required: true, message: "限值类型编码不能为空", trigger: "blur"}
        ],
        ]
      },
      //色号选择器
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585'
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585"
      ]
    };
  },
  created() {
    this.getDicts("alarm_type").then(response => {
      this.alarmTypeList = response.data;
      this.alarmTypeDefaultVal = this.alarmTypeList.find(f => f.isDefault === 'Y');
      this.alarmTypeDefaultVal = this.alarmTypeList.find(
        f => f.isDefault === "Y"
      );
    });
    this.getList();
  },
  methods: {
    setCharts() {
      this.bodyStyle = {
        height: window.innerHeight - 210 + 'px',
        overflow: 'hidden'
      }
      this.height = window.innerHeight - 370;
        height: window.innerHeight - 220 + "px",
        overflow: "hidden"
      };
      // this.height = window.innerHeight - 370;
    },
    /** æŸ¥è¯¢æŠ¥è­¦é™å€¼ç±»åž‹ç»´æŠ¤åˆ—表 */
    getList() {
@@ -279,10 +323,10 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.limitName = selection.map(item => item.limitName)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.limitName = selection.map(item => item.limitName);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
      console.log(JSON.stringify(selection));
    },
    /** æ–°å¢žæŒ‰é’®æ“ä½œ */
@@ -296,7 +340,7 @@
    /** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      const id = row.id || this.ids;
      getLimitType(id).then(response => {
        this.form = response.data;
        this.open = true;
@@ -335,37 +379,45 @@
    /** åˆ é™¤æŒ‰é’®æ“ä½œ */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除报警限值类型维护名称为"' + ids + '"的数据项?', "警告", {
      this.$confirm(
        '是否确认删除报警限值类型维护名称为"' + ids + '"的数据项?',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        }
      )
        .then(function() {
        return delLimitType(ids);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有报警限值类型维护数据项?', "警告", {
      this.$confirm("是否确认导出所有报警限值类型维护数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
      })
        .then(function() {
        return exportLimitType(queryParams);
      }).then(response => {
        })
        .then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    initAlarmType() {
      for (let i = 0; i < this.model.energyindexList.length; i++) {
        let ndy = "";
        getAlarmType(this.model.energyindexList[i].indexId).then(response => {
          if (response.code == '200') {
          if (response.code == "200") {
            if (response.msg == "1") {
              this.model.energyindexList[i].indexCategory = "启动";
            } else if (response.msg == "2") {
@@ -378,7 +430,7 @@
          }
        });
      }
    },
    }
  }
};
</script>

 energy_management_ui/src/views/basicsetting/modelNode/index.vue

@@ -1,13 +1,19 @@
<template>
  <el-row type="flex">
    <el-col :style="{width:isCollapse?'0': '280px',position:'relative'}" v-show="!isCollapse">
    <el-col
      :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
      v-show="!isCollapse"
    >
      <basic-container title="数据模型管理" :bodyStyle="bodyStyle">
        <el-row :gutter="24">
          <el-col :span="20">
            <el-select v-model="modelData" placeholder="请选择模型"
            <el-select
              v-model="modelData"
              placeholder="请选择模型"
                       size="small"
                       filterable
                       @change="changeModel">
              @change="changeModel"
            >
              <el-option
                  v-for="model in modelInfoOptions"
                  :key="model.modelCode"
@@ -17,19 +23,39 @@
            </el-select>
          </el-col>
          <el-col :span="4" style="margin-bottom: 16px">
            <el-button icon="el-icon-setting" circle title="管理模型" style="float:right;padding:8px"
                       @click="manageModel"></el-button>
            <el-button
              icon="el-icon-setting"
              circle
              title="管理模型"
              style="float:right;padding:8px"
              @click="manageModel"
            ></el-button>
          </el-col>
        </el-row>
        <ModelNode ref="modelNode" @changeNode="changeNode" :auth="false"></ModelNode>
        <ModelNode
          ref="modelNode"
          @changeNode="changeNode"
          :auth="false"
        ></ModelNode>
      </basic-container>
      <img src="~@/assets/image/rectangle.png" alt=""
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
           class="shrink-col-block"
           @click="toggleCollapse">
        @click="toggleCollapse"
      />
    </el-col>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse"/>
    <el-col :style="{width:isCollapse? 'calc(100% - 48px)':'calc(100% - 280px)',paddingLeft:isCollapse? 0:'14px'}">
      <basic-container :title="currentNode ? currentNode.label+'--节点配置' : '节点配置'" :bodyStyle="bodyStyleRight">
    <el-col
      :style="{
        width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
        paddingLeft: isCollapse ? 0 : '14px'
      }"
    >
      <basic-container
        :title="currentNode ? currentNode.label + '--节点配置' : '节点配置'"
        :bodyStyle="bodyStyleRight"
      >
        <ModelNodeSetting ref="modelNodeSetting"/>
      </basic-container>
    </el-col>
@@ -40,7 +66,7 @@
import {listModel} from "@/api/basicsetting/model";
import ModelNodeSetting from "./modelNodeSetting";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from '@/components/shrink/index.vue'
import ShrinkCol from "@/components/shrink/index.vue";

export default {
  components: {ModelNodeSetting, ModelNode,ShrinkCol},
@@ -56,19 +82,19 @@
  mixins: [mixins],
  data() {
    return {
      modelData: '',
      modelData: "",
      modelInfoOptions: [],
      isCollapse: false,
      bodyStyleRight: {},
      currentNode: ''
    }
      currentNode: ""
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight -155 + 'px'
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 155 + 'px'
        height: window.innerHeight - 185 + "px"
      };
    },
    changeNode: function (node) {
@@ -78,23 +104,36 @@
      this.$refs.modelNodeSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
      this.$router.push("/model");
    },
    changeModel: function (item) {
      this.$refs.modelNode.getList(item);
    },
    // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.shrink-col-block {
  position: absolute;
  top: 20px;
  right: 16px;
  cursor: pointer;
}
::v-deep {
  .el-tabs__item {
    color: #fff;
  }
  .el-tabs__item.is-active {
    color: $primary-color;
  }
  .el-collapse-item__header {
    background-color: #061844;
    color: #fff;
  }
}
</style>

 energy_management_ui/src/views/basicsetting/modelNode/modelNode.vue

@@ -424,16 +424,12 @@
    margin-top: 10px;
    height: 35px;
  }
  // .is-current {
  //   .el-tree-node__content {
  //     border: 1px solid red;
  //   }
  // }

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #f7f7f7;
    border: 1px solid #38bcbf;
    background-color: #213d7a;
    border: 1px solid #3d5b9b;
  }
}
</style>

 energy_management_ui/src/views/benchmarking/phaseBenchmarking/LineChart.vue

@@ -3,128 +3,140 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  import resize from '../../dashboard/mixins/resize'
  const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "../../dashboard/mixins/resize";
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData,actualData,expecteData} = {}) {
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          title: {
            x: 'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          legend: {
            data:['标杆值','实际值'],
            left: '60%',
          data: ["标杆值", "实际值"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisPointer: {
              type: 'shadow'
              type: "shadow"
            }
          }],
          yAxis: [{
          }
        ],
        yAxis: [
          {
            //name: '综合能耗',
            type: 'value',
            type: "value",
            nameTextStyle: {
              color: "#333",
              color: "#333"
            },
            axisLabel: {
              formatter: '{value}'
              formatter: "{value}"
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            }
          }
        ],
        series: [
          {
            name:"标杆值",
            type: 'bar',
            type: "bar",
            data: expectedData,
            //stack: 'vistors',
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
            animationEasing: "quadraticOut"
          },
          {
            name:"实际值",
            type: 'bar',
            type: "bar",
            data: expecteData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
            animationEasing: "quadraticOut"
          }
        ]
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/benchmarking/phaseBenchmarking/phaseBenchmarking.vue

@@ -1,9 +1,20 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="报表类型">
        <el-radio-group v-model="queryParams.timeType">
          <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
          <el-radio
            v-for="dict in dateTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            @change="handleTime(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="统计区间">
@@ -13,12 +24,14 @@
          :value-format="valueFormat"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="指标名称">
        <el-select v-model="queryParams.indexId" placeholder="请选择指标">
          <el-option style="width: 150px"
          <el-option
            style="width: 150px"
                     v-for="dict in arraylist"
                     :key="dict.indexId"
                     :label="dict.name"
@@ -27,11 +40,19 @@
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-row style="padding:16px 16px 0;margin-bottom:32px;">
      <line-chart  ref="LineChart" :chart-data="lineChartData"/>
    </el-row>
    <el-table :data="energyEenchmarkingList">
@@ -41,7 +62,12 @@
        </template>
      </el-table-column>
      <el-table-column label="指标名称" align="center" prop="indexName"  />
      <el-table-column label="指标单位" align="center" prop="unitId" :formatter="unitIdFormat" />
      <el-table-column
        label="指标单位"
        align="center"
        prop="unitId"
        :formatter="unitIdFormat"
      />
      <el-table-column label="标杆值" align="center" prop="value"/>
      <el-table-column label="实际值" align="center" prop="actualValue"/>
    </el-table>
@@ -50,12 +76,12 @@

<script>
  import { listPhaseBenchmarking} from "@/api/benchmarking/phaseBenchmarking";
  import LineChart from './LineChart'
  import {getSettingIndex} from '@/api/basicsetting/modelNode'
import LineChart from "./LineChart";
import { getSettingIndex } from "@/api/basicsetting/modelNode";
  export default {
  components: {LineChart},
  name: 'enchmarking',
  name: 'Index',
  name: "enchmarking",
  name: "Index",
  data() {
    return {
      // é®ç½©å±‚
@@ -87,8 +113,8 @@
      form: {},
      label:"",
      lineChartData:{},
      dateTypes: 'daterange',
      valueFormat:"yyyy-MM-dd",
      dateTypes: "daterange",
      valueFormat: "yyyy-MM-dd"
    };
  },
  created() {
@@ -99,7 +125,9 @@
    });
      this.getDicts("energyPlan").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
  },
  methods: {
@@ -107,18 +135,20 @@
    modelNodeChange(modelNode) {
      this.queryParams.indexId=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.getList(this.queryParams);
      //获取模型获取指标
      getSettingIndex(modelNode.id).then(response => {
        if(response.data.length>0){
          this.arraylist=response.data;
          this.queryParams.indexId=this.arraylist[0].indexId;
        }
      })
      });
    },
    getList() {
      listPhaseBenchmarking(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.energyEenchmarkingList=response.data
      listPhaseBenchmarking(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then(response => {
        this.energyEenchmarkingList = response.data;
        let actualData=[];
        let expectedData=[];
        let expecteData=[];
@@ -127,7 +157,7 @@
          actualData.push(this.parseTime(item.dateTime));
          expectedData.push(item.value);
          expecteData.push(item.actualValue);
        })
        });
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.expecteData=expecteData;
@@ -155,28 +185,25 @@
      this.handleQuery();
    },
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      let startTime = year + '-' + month + '-' + (date-1)
      let endTime = year + '-' + month + '-' + date
      this.dateRange=[startTime,endTime]
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      let startTime = year + "-" + month + "-" + (date - 1);
      let endTime = year + "-" + month + "-" + date;
      this.dateRange = [startTime, endTime];
    },
    handleTime(date){
      if(date=='YEAR'){
        this.dateTypes= 'year',
          this.valueFormat='yyyy'
      }else if(date=='MONTH'){
        this.dateTypes= 'monthrange',
        this.valueFormat='yyyy-MM'
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
        (this.dateTypes = "monthrange"), (this.valueFormat = "yyyy-MM");
      }else{
        this.dateTypes= 'daterange',
        this.valueFormat='yyyy-MM-dd'
        (this.dateTypes = "daterange"), (this.valueFormat = "yyyy-MM-dd");
      }
    },
    }
  }
};
</script>

 energy_management_ui/src/views/benchmarking/realTimeBenchmarking/LineChart.vue

@@ -3,128 +3,140 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  import resize from '../../dashboard/mixins/resize'
  const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "../../dashboard/mixins/resize";
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData,actualData,expecteData} = {}) {
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          title: {
            x: 'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          legend: {
            data:['标杆值','实际值'],
            left: '60%',
          data: ["标杆值", "实际值"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisPointer: {
              type: 'shadow'
              type: "shadow"
            }
          }],
          yAxis: [{
          }
        ],
        yAxis: [
          {
            //name: '综合能耗',
            type: 'value',
            type: "value",
            nameTextStyle: {
              color: "#333",
              color: "#333"
            },
            axisLabel: {
              formatter: '{value}'
              formatter: "{value}"
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            }
          }
        ],
        series: [
          {
            name:"标杆值",
            type: 'bar',
            type: "bar",
            data: expectedData,
            //stack: 'vistors',
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
            animationEasing: "quadraticOut"
          },
          {
            name:"实际值",
            type: 'bar',
            type: "bar",
            data: expecteData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
            animationEasing: "quadraticOut"
          }
        ]
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/benchmarking/realTimeBenchmarking/realTimeBenchmarking.vue

@@ -1,12 +1,19 @@
<template>
  <div class="app-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-row style="padding:16px 16px 0;margin-bottom:32px;">
      <line-chart  ref="LineChart" :chart-data="lineChartData"/>
    </el-row>
    <el-table :data="energyEenchmarkingList">
      <el-table-column label="单位名称" align="center" prop="label">{{label}}</el-table-column>
      <el-table-column label="单位名称" align="center" prop="label">{{
        label
      }}</el-table-column>
      <el-table-column label="指标名称" align="center" prop="indexName"  />
      <el-table-column label="指标单位" align="center" prop="unitId" :formatter="unitIdFormat" />
      <el-table-column
        label="指标单位"
        align="center"
        prop="unitId"
        :formatter="unitIdFormat"
      />
      <el-table-column label="标杆值" align="center" prop="value"/>
      <el-table-column label="实际值" align="center" prop="actualValue"/>
    </el-table>
@@ -15,11 +22,11 @@

<script>
  import { listRealTimeListrealTime} from "@/api/benchmarking/phaseBenchmarking";
  import LineChart from './LineChart'
import LineChart from "./LineChart";
  export default {
  components: {LineChart},
  name: 'enchmarking',
  name: 'Index',
  name: "enchmarking",
  name: "Index",
  data() {
    return {
      // é®ç½©å±‚
@@ -48,7 +55,7 @@
      // è¡¨å•å‚æ•°
      form: {},
      label:"",
      lineChartData:{},
      lineChartData: {}
    };
  },
  created() {
@@ -59,7 +66,9 @@
    });
    this.getDicts("energyPlan").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
  },
  methods: {
@@ -67,11 +76,11 @@
    modelNodeChange(modelNode) {
      this.queryParams.indexId=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.getList(this.queryParams);
    },
    getList() {
      listRealTimeListrealTime(this.queryParams).then(response => {
        this.energyEenchmarkingList=response.data
        this.energyEenchmarkingList = response.data;
        let actualData=[];
        let expectedData=[];
        let expecteData=[];
@@ -79,7 +88,7 @@
          actualData.push(item.indexName);
          expectedData.push(item.value);
          expecteData.push(item.actualValue);
        })
        });
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.expecteData=expecteData;
@@ -91,14 +100,14 @@
      return this.selectDictLabel(this.unitIdOptions, row.unitId);
    },
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dateTime = year + '-' + month + '-' + date
    },
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dateTime = year + "-" + month + "-" + date;
    }
  }
};
</script>

 energy_management_ui/src/views/comprehensiveStatistics/comprehensiveStatistics/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    },
    autoResize: {
      type: Boolean,
@@ -34,45 +34,45 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: 'left',
          left: "left",
          textStyle: {
            color: '#606266',
            color: "#606266"
          }
        },
        xAxis: {
          data: actualData,
          type: 'category',
          type: "category"
        },
        grid: {
          left: 10,
@@ -82,9 +82,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -94,27 +94,32 @@
          }
        },
        legend: {
          data: []
          data: [],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
        series: [
          {
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            animationEasing: "cubicInOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/comprehensiveStatistics/comprehensiveStatistics/comprehensive.vue

@@ -1,8 +1,16 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="能源类型">
        <el-select v-model="queryParams.indexStorageId" placeholder="请选择能源品种">
        <el-select
          v-model="queryParams.indexStorageId"
          placeholder="请选择能源品种"
        >
          <el-option
            v-for="dict in indexCategoryOptions"
            :key="dict.dictValue"
@@ -17,50 +25,173 @@
        </el-radio-group>
      </el-form-item>-->
      <el-form-item label="统计时间">
        <el-date-picker clearable size="small" style="width: 200px"
        <el-date-picker
          clearable
          size="small"
          style="width: 200px"
                        v-model="queryParams.dataTime"
                        :type="dateTypes"
                        :value-format="valueFormat"
                        placeholder="选择日期">
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <!--<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="energyList" border style="width: 100%; margin-top: 20px" class="tableList" >
    <el-table
      :data="energyList"
      border
      style="width: 100%; margin-top: 20px"
      class="tableList"
    >
      <el-table-column label="曲线选择">
        <template slot-scope="scope">
          <el-button icon="el-icon-search" circle @click="selectChange(scope.row.indexId)" style="font-size: 10px"></el-button>
          <el-button
            icon="el-icon-search"
            circle
            @click="selectChange(scope.row.indexId)"
            style="font-size: 10px"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="indexName" align="center" label="能源名称" min-width="240px"></el-table-column>
      <el-table-column label="1时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value1)}}</template></el-table-column>
      <el-table-column label="2时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value2)}}</template></el-table-column>
      <el-table-column label="3时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value3)}}</template></el-table-column>
      <el-table-column label="4时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value4)}}</template></el-table-column>
      <el-table-column label="5时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value5)}}</template></el-table-column>
      <el-table-column label="6时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value6)}}</template></el-table-column>
      <el-table-column label="7时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value7)}}</template></el-table-column>
      <el-table-column label="8时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value8)}}</template></el-table-column>
      <el-table-column label="9时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value9)}}</template></el-table-column>
      <el-table-column label="10时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value10)}}</template></el-table-column>
      <el-table-column label="11时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value11)}}</template></el-table-column>
      <el-table-column label="12时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value12)}}</template></el-table-column>
      <el-table-column label="13时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value13)}}</template></el-table-column>
      <el-table-column label="14时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value14)}}</template></el-table-column>
      <el-table-column label="15时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value15)}}</template></el-table-column>
      <el-table-column label="16时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value16)}}</template></el-table-column>
      <el-table-column label="17时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value17)}}</template></el-table-column>
      <el-table-column label="18时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value18)}}</template></el-table-column>
      <el-table-column label="19时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value19)}}</template></el-table-column>
      <el-table-column label="10时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value20)}}</template></el-table-column>
      <el-table-column label="21时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value21)}}</template></el-table-column>
      <el-table-column label="22时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value22)}}</template></el-table-column>
      <el-table-column label="23时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value23)}}</template></el-table-column>
      <el-table-column label="24时" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value24)}}</template></el-table-column>
      <el-table-column
        prop="indexName"
        align="center"
        label="能源名称"
        min-width="240px"
      ></el-table-column>
      <el-table-column label="1时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value1)
        }}</template></el-table-column
      >
      <el-table-column label="2时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value2)
        }}</template></el-table-column
      >
      <el-table-column label="3时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value3)
        }}</template></el-table-column
      >
      <el-table-column label="4时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value4)
        }}</template></el-table-column
      >
      <el-table-column label="5时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value5)
        }}</template></el-table-column
      >
      <el-table-column label="6时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value6)
        }}</template></el-table-column
      >
      <el-table-column label="7时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value7)
        }}</template></el-table-column
      >
      <el-table-column label="8时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value8)
        }}</template></el-table-column
      >
      <el-table-column label="9时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value9)
        }}</template></el-table-column
      >
      <el-table-column label="10时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value10)
        }}</template></el-table-column
      >
      <el-table-column label="11时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value11)
        }}</template></el-table-column
      >
      <el-table-column label="12时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value12)
        }}</template></el-table-column
      >
      <el-table-column label="13时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value13)
        }}</template></el-table-column
      >
      <el-table-column label="14时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value14)
        }}</template></el-table-column
      >
      <el-table-column label="15时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value15)
        }}</template></el-table-column
      >
      <el-table-column label="16时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value16)
        }}</template></el-table-column
      >
      <el-table-column label="17时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value17)
        }}</template></el-table-column
      >
      <el-table-column label="18时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value18)
        }}</template></el-table-column
      >
      <el-table-column label="19时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value19)
        }}</template></el-table-column
      >
      <el-table-column label="10时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value20)
        }}</template></el-table-column
      >
      <el-table-column label="21时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value21)
        }}</template></el-table-column
      >
      <el-table-column label="22时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value22)
        }}</template></el-table-column
      >
      <el-table-column label="23时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value23)
        }}</template></el-table-column
      >
      <el-table-column label="24时" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value24)
        }}</template></el-table-column
      >
    </el-table>
    <!--<div class="el-table el-table&#45;&#45;fit el-table&#45;&#45;scrollable-x el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium" >
      <div class="el-table__body-wrapper is-scrolling-left">
@@ -154,8 +285,12 @@
</template>

<script>
  import {getDataList,exportList,getlistChart} from "@/api/comprehensiveStatistics/comprehensive";
  import LineChart from './LineChart'
import {
  getDataList,
  exportList,
  getlistChart
} from "@/api/comprehensiveStatistics/comprehensive";
import LineChart from "./LineChart";
  import BarChart from "./BarChart";
  export default {
    components: {
@@ -194,18 +329,20 @@
        dataTime:undefined,
        timeType:"HOUR",
        indexType:undefined,
        indexStorageId:undefined,
        indexStorageId: undefined
      },
      skinName:"",
      dateTypes: 'date',
      dateTypes: "date",
      valueFormat:"yyyy-MM-dd",
      lineChartData:{expectedData: [],actualData: []},
      lineChartData: { expectedData: [], actualData: [] }
    };
  },
  created() {
    this.getDicts("report_form").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
    this.getConfigKey("comprehensive").then(response => {
      this.skinName=response.msg;
@@ -224,7 +361,7 @@
        /*this.tableData=response.data.tabledata;
        this.tableHead=response.data.tablehead;*/
        this.energyList = response.data;
      })
      });
    },
    selectChange(data){
      this.queryParams.indexId=data;
@@ -234,15 +371,17 @@
        let title="";
        response.data.forEach(item => {
          expectedData.push(this.numFilter(item.value));
          actualData.push(item.timeCode.slice(item.timeCode.length-2,item.timeCode.length));
          actualData.push(
            item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length)
          );
          title=item.indexName;
        })
        });
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.title=title
        this.lineChartData.title = title;
        this.$refs.LineChart.initChart(this.lineChartData);
        this.$refs.BarChart.initChart(this.lineChartData);
      })
      });
    },
    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
@@ -257,34 +396,36 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出综合能耗?', "警告", {
      this.$confirm("是否确认导出综合能耗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
      })
        .then(function() {
        return exportList(queryParams);
      }).then(response => {
        })
        .then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '';
          sums[index] = "";
          return;
        }
        if (index === 1) {
          sums[index] = '合计';
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
@@ -298,47 +439,45 @@
            }
          }, 0);
          //sums[index];
          sums[index] = this.numFilter(sums[index])
          sums[index] = this.numFilter(sums[index]);
        } else {
          sums[index] = '0';
          sums[index] = "0";
        }
      });
      return sums;
    },
    numFilter(value) {// æˆªå–当前数据到小数点后的几位
      let realVal = '';
      if (!isNaN(value) && value !== '') {
        realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = '0'
        realVal = "0";
      }
      return realVal
      return realVal;
    },
    getTime() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dataTime=year + '-' + month + '-' + date
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month + "-" + date;
      /*let startTime = year + '-' + month + '-' + date
      let endTime = year + '-' + month + '-' + (date + 1)
      this.dateRange = [startTime, endTime]*/
    },

    handleTime(date){
      if(date=='MONTH'){
        this.dateTypes= 'year',
          this.valueFormat='yyyy'
      }else if(date=='DAY'){
        this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
      if (date == "MONTH") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "DAY") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      }else{
        this.dateTypes= 'date',
          this.valueFormat='yyyy-MM-dd'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
    },
    }
  }
};
</script>
@@ -346,7 +485,8 @@
 .el-table__body{
    border: 1px solid #000000 !important;
  }
 .el-table th.is-leaf, .el-table td {
.el-table th.is-leaf,
.el-table td {
   border-bottom: 1px solid #000000 !important;
   border-right: 1px solid #000000 !important;
 }
@@ -355,10 +495,9 @@
  }
.dashboard-editor-container {
 padding: 32px;
 background-color: rgb(240, 242, 245);
  // background-color: rgb(240, 242, 245);
 position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
@@ -395,25 +534,25 @@
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }
</style>

 energy_management_ui/src/views/comprehensiveStatistics/dailyComprehensive/BarChart.vue

@@ -67,7 +67,7 @@
          text: title,
          left: "left",
          textStyle: {
            color: "#606266"
            color: "#fff"
          }
        },
        tooltip: {

 energy_management_ui/src/views/comprehensiveStatistics/dailyComprehensive/LineChart.vue

@@ -67,7 +67,7 @@
          text: title,
          left: "left",
          textStyle: {
            color: "#606266"
            color: "#fff"
          }
        },
        xAxis: {
@@ -94,7 +94,10 @@
          }
        },
        legend: {
          data: []
          data: [],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {

 energy_management_ui/src/views/comprehensiveStatistics/dailyComprehensive/index.vue

@@ -86,7 +86,7 @@
          fixed
          prop="indexName"
          label="指标名称"
          min-width="180px"
          min-width="200"
        >
          <template slot-scope="scope">
            <div style="width: 100%; text-align: left">
@@ -102,7 +102,7 @@
                icon="el-icon-search"
                circle
                @click="selectChange(scope.row)"
                style="margin-right: 8px"
                style="margin-right: 8px;background: #999;"
              ></el-button>
              <el-tooltip
                v-if="scope.row.indexName.length > 9"
@@ -124,7 +124,7 @@
          :key="index"
          :label="index - 1 + '时'"
          align="center"
          min-width="50"
          min-width="100"
        >
          <template slot-scope="scope">{{
            numFilter(scope.row[`value${index - 1}`])

 energy_management_ui/src/views/comprehensiveStatistics/monthlyComprehensive/BarChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '300px'
      default: "300px"
      },
      autoResize: {
        type: Boolean,
@@ -34,46 +34,47 @@
    data() {
      return {
        chart: null
      }
    };
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#fff"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
@@ -83,30 +84,36 @@
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            }
          }],
          series: [{
          }
        ],
        series: [
          {
            name: title,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            type: "bar",
            stack: "vistors",
            barWidth: "60%",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
            animationEasing: "cubicInOut"
          }
        ]
        });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/comprehensiveStatistics/monthlyComprehensive/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    },
    autoResize: {
      type: Boolean,
@@ -34,45 +34,45 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: 'left',
          left: "left",
          textStyle: {
            color: '#606266',
            color: "#fff"
          }
        },
        xAxis: {
          data: actualData,
          type: 'category',
          type: "category"
        },
        grid: {
          left: 10,
@@ -82,9 +82,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -94,27 +94,32 @@
          }
        },
        legend: {
          data: []
          data: [],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
        series: [
          {
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            animationEasing: "cubicInOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/comprehensiveStatistics/monthlyComprehensive/index.vue

@@ -86,7 +86,7 @@
          prop="indexName"
          align="left"
          label="指标名称"
          width="130px"
          min-width="200"
        >
          <template slot-scope="scope">
            <div style="width: 100%; text-align: left">
@@ -102,17 +102,17 @@
                icon="el-icon-search"
                circle
                @click="selectChange(scope.row)"
                style="margin-right: 4px"
                style="margin-right: 4px; background: #999;"
              ></el-button>
              <el-tooltip
                v-if="scope.row.indexName.length > 5"
                v-if="scope.row.indexName.length > 8"
                class="item"
                effect="dark"
                :content="scope.row.indexName"
                placement="top-end"
              >
                <span>
                  {{ scope.row.indexName.substr(0, 5) + "..." }}
                  {{ scope.row.indexName.substr(0, 8) + "..." }}
                </span>
              </el-tooltip>
              <span v-else>{{ scope.row.indexName }}</span>
@@ -124,7 +124,7 @@
          :key="index"
          :label="`${index}日`"
          align="center"
          min-width="40"
          min-width="100"
        >
          <template slot-scope="scope">
            <span style="font-size: 12px">
@@ -369,7 +369,6 @@
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

 energy_management_ui/src/views/comprehensiveStatistics/yearComprehensive/BarChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '300px'
      default: "300px"
      },
      autoResize: {
        type: Boolean,
@@ -34,46 +34,47 @@
    data() {
      return {
        chart: null
      }
    };
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#fff"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
@@ -83,30 +84,49 @@
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            }
          }],
          series: [{
          }
        ],
        series: [
          {
            name: title,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            type: "bar",
            stack: "vistors",
            barWidth: "60%",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
            animationEasing: "cubicInOut"
          }
        ]
        });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/comprehensiveStatistics/yearComprehensive/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    },
    autoResize: {
      type: Boolean,
@@ -34,45 +34,58 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: 'left',
          left: "left",
          textStyle: {
            color: '#606266',
            color: "#fff"
          }
        },
        xAxis: {
          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
          type: 'category',
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          type: "category"
        },
        grid: {
          left: 10,
@@ -82,9 +95,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -94,27 +107,32 @@
          }
        },
        legend: {
          data: []
          data: [],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
        series: [
          {
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            animationEasing: "cubicInOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/comprehensiveStatistics/yearComprehensive/index.vue

@@ -103,7 +103,7 @@
                icon="el-icon-search"
                circle
                @click="selectChange(scope.row)"
                style="font-size: 10px"
                style="font-size: 10px;background: #999;"
              ></el-button>
              <span>{{ scope.row.indexName }}</span>
            </div>
@@ -417,7 +417,6 @@
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

 energy_management_ui/src/views/dashboard/BarChart.vue

@@ -120,7 +120,10 @@
          }
        },
        legend: {
          right: "1"
          right: "1",
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "1",
@@ -134,7 +137,12 @@
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
          boundaryGap: [0, 0.01],
          splitLine: {
            lineStyle: {
              color: "rgba(32, 121, 160, 0.5)" // y轴分割线颜色
            }
          }
        },
        series: [
          {

 energy_management_ui/src/views/dashboard/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    autoResize: {
      type: Boolean,
@@ -34,37 +34,37 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          boundaryGap: false,
          axisTick: {
            show: false
@@ -78,9 +78,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -90,46 +90,52 @@
          }
        },
        legend: {
          data: ['expected', 'actual']
          data: ["expected", "actual"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
          name: 'expected', itemStyle: {
        series: [
          {
            name: "expected",
            itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
            animationEasing: "cubicInOut"
        },
        {
          name: 'actual',
            name: "actual",
          smooth: true,
          type: 'line',
            type: "line",
          itemStyle: {
            normal: {
              color: '#3888fa',
                color: "#3888fa",
              lineStyle: {
                color: '#3888fa',
                  color: "#3888fa",
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
                  color: "#f3f8ff"
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
            animationEasing: "quadraticOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/dashboard/PanelGroup.vue

@@ -9,7 +9,12 @@
          <div class="card-panel-text">
            è®¿å®¢
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
          <count-to
            :start-val="0"
            :end-val="102400"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
@@ -22,7 +27,12 @@
          <div class="card-panel-text">
            æ¶ˆæ¯
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
          <count-to
            :start-val="0"
            :end-val="81212"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
@@ -35,7 +45,12 @@
          <div class="card-panel-text">
            é‡‘额
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
          <count-to
            :start-val="0"
            :end-val="9280"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
@@ -48,7 +63,12 @@
          <div class="card-panel-text">
            è®¢å•
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
          <count-to
            :start-val="0"
            :end-val="13600"
            :duration="3600"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
@@ -56,7 +76,7 @@
</template>

<script>
import CountTo from 'vue-count-to'
import CountTo from "vue-count-to";

export default {
  components: {
@@ -64,10 +84,10 @@
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
      this.$emit("handleSetLineChartData", type);
    }
  }
}
};
</script>

<style lang="scss" scoped>
@@ -85,9 +105,8 @@
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
@@ -107,7 +126,7 @@
      }

      .icon-shopping {
        background: #34bfa3
        background: #34bfa3;
      }
    }

@@ -124,7 +143,7 @@
    }

    .icon-shopping {
      color: #34bfa3
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {

 energy_management_ui/src/views/dashboard/PieChart.vue

@@ -6,6 +6,7 @@
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { color } from "echarts/lib/export";

export default {
  mixins: [resize],
@@ -24,7 +25,7 @@
    },
    height: {
      type: String,
      default: "363px"
      default: "300px"
    },
    chartData: {
      type: Array,
@@ -80,7 +81,10 @@
          left: this.legend == "right" ? "auto" : "center",
          top: "0",
          right: this.legend == "right" ? "40" : "auto",
          orient: this.legend == "right" ? "vertical" : "horizontal"
          orient: this.legend == "right" ? "vertical" : "horizontal",
          textStyle: {
            color: "#fff"
          }
          // data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"]
        },
        label: {

 energy_management_ui/src/views/dashboard/RaddarChart.vue

@@ -3,91 +3,96 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 3000
const animationDuration = 3000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    }
  },
  data() {
    return {
      chart: null
    }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          }
        },
        radar: {
          radius: '66%',
          center: ['50%', '42%'],
          radius: "66%",
          center: ["50%", "42%"],
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowColor: "rgba(0,0,0,.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          indicator: [
            { name: 'Sales', max: 10000 },
            { name: 'Administration', max: 20000 },
            { name: 'Information Techology', max: 20000 },
            { name: 'Customer Support', max: 20000 },
            { name: 'Development', max: 20000 },
            { name: 'Marketing', max: 20000 }
            { name: "Sales", max: 10000 },
            { name: "Administration", max: 20000 },
            { name: "Information Techology", max: 20000 },
            { name: "Customer Support", max: 20000 },
            { name: "Development", max: 20000 },
            { name: "Marketing", max: 20000 }
          ]
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
          left: "center",
          bottom: "10",
          data: ["Allocated Budget", "Expected Spending", "Actual Spending"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
          type: 'radar',
        series: [
          {
            type: "radar",
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
                shadowColor: "rgba(0,0,0,.2)",
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
@@ -96,21 +101,22 @@
          data: [
            {
              value: [5000, 7000, 12000, 11000, 15000, 14000],
              name: 'Allocated Budget'
                name: "Allocated Budget"
            },
            {
              value: [4000, 9000, 15000, 15000, 13000, 11000],
              name: 'Expected Spending'
                name: "Expected Spending"
            },
            {
              value: [5500, 11000, 12000, 15000, 12000, 12000],
              name: 'Actual Spending'
                name: "Actual Spending"
            }
          ],
          animationDuration: animationDuration
        }]
      })
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/dataMonitoring/energyPercent/energyPercent.vue

@@ -352,7 +352,7 @@
      this.handleQuery();
    },
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyle.height = window.innerHeight - 195 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 100 + "px"

 energy_management_ui/src/views/dataMonitoring/energyPercent/waterPercent.vue

@@ -380,7 +380,7 @@
      this.handleQuery();
    },
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyle.height = window.innerHeight - 195 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 100 + "px"
@@ -391,6 +391,7 @@
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.dashboard-editor-container {
  margin-bottom: 16px;
  ::v-deep {
@@ -404,13 +405,12 @@
  }
  .table-wrapper {
    margin-top: 16px;
    background: #fff;
    // background: #fff;
  }
}
.table-wrapper {
  // margin-top: 16px;
  padding-top: 16px;
  background: #fff;
  padding-top: 0px;
  background: #061844;
  .demo-tabs {
    padding: 0 16px;
  }
@@ -418,6 +418,12 @@
    .el-card {
      border: none;
    }
    .el-tabs__item {
      color: #fff;
    }
    .el-tabs__item.is-active {
      color: $primary-color;
    }
  }
}
</style>

 energy_management_ui/src/views/dataMonitoring/historyDataTrend/historyMonitoringSetting.vue

@@ -286,7 +286,10 @@
          }
        },
        legend: {
          right: "center"
          right: "center",
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "1",
@@ -300,14 +303,19 @@
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
          boundaryGap: [0, 0.01],
          splitLine: {
            lineStyle: {
              color: "rgba(32, 121, 160, 0.5)" // y轴分割线颜色
            }
          }
        },
        series: [
          {
            name: titleName,
            type: "line",
            data: legendArr
            // color: "#919191"
            data: legendArr,
            color: "#e6e6e6"
          }
        ]
      };
@@ -337,7 +345,7 @@
  align-items: center;
  height: 100px;
  z-index: 1000;
  background: #fff;
  background: #061844;
  border-radius: 4px;
  margin-bottom: 12px;
  padding: 0 24px;

 energy_management_ui/src/views/dataMonitoring/historyDataTrend/index.vue

@@ -64,10 +64,10 @@
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 212 + "px"
        height: window.innerHeight - 248 + "px"
      };
    },
    changeNode: function(node) {

 energy_management_ui/src/views/dataMonitoring/realTimeTrend/LineChart.vue

@@ -75,7 +75,10 @@
          }
        },
        legend: {
          right: "1"
          right: "1",
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "1",

 energy_management_ui/src/views/dataMonitoring/realTimeTrend/index.vue

@@ -60,10 +60,10 @@
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 100 + "px"
        height: window.innerHeight - 130 + "px"
      };
    },
    changeNode: function(node) {

 energy_management_ui/src/views/electricityPrice/electricity/index.vue

@@ -1,28 +1,24 @@
<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
<template>
  <div class="app-container">
    <el-form :model="forms" label-width="100px">
      <el-row :gutter="24" class="mb8">
        <el-col :span="16">
          <el-form-item prop="effective_date" label="生效时间：" label-width="100px">
          <el-form-item
            prop="effective_date"
            label="生效时间："
            label-width="100px"
          >
            <!--{{changeTime(parseTime(effective_date))}}-->
            <el-date-picker clearable size="small" style="width: 200px"
            <el-date-picker
              clearable
              size="small"
              style="width: 200px"
                            v-model="forms.effectiveDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="设置生效时间">
              placeholder="设置生效时间"
            >
            </el-date-picker>
           <!-- <el-input :disabled="isDisabled" v-model="item.effectiveDate"></el-input>-->
            <!--<el-button size="mini" @click="addDate">设置生效时间</el-button>-->
@@ -34,14 +30,17 @@
            size="mini"
            @click="handleAdd()"
            v-hasPermi="['electricityPrice:electricity:add']"
          >新增时段</el-button>
            >新增时段</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button plain
          <el-button
            plain
            size="mini"
            @click="handlePrice()"
            v-hasPermi="['electricityPrice:price:add']"
          >设置单价</el-button>
            >设置单价</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <router-link :to="'/electricityPrice/listHistory'"  class="link-type">
@@ -49,13 +48,36 @@
          </router-link>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="electricityList" @selection-change="handleSelectionChange">
      <el-table
        v-loading="loading"
        :data="electricityList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="时段名称" align="center" prop="effectiveName" :formatter="effectiveNameFormat" />
        <el-table-column
          label="时段名称"
          align="center"
          prop="effectiveName"
          :formatter="effectiveNameFormat"
        />
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="时段开始时间" align="center" prop="beginDate" width="180"/>
        <el-table-column label="时段结束时间" align="center" prop="endDate" width="180"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <el-table-column
          label="时段开始时间"
          align="center"
          prop="beginDate"
          width="180"
        />
        <el-table-column
          label="时段结束时间"
          align="center"
          prop="endDate"
          width="180"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
@@ -63,7 +85,8 @@
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['electricityPrice:electricity:remove']"
            >删除</el-button>
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
@@ -77,14 +100,23 @@
    />
    <!-- æ·»åŠ æˆ–修改electricityPrice对话框 -->
    <el-dialog :title="title" :visible.sync="time" width="500px">
      <el-form ref="form" :model="form" :rulesTime="rulesTime" label-width="120px">
      <el-form
        ref="form"
        :model="form"
        :rulesTime="rulesTime"
        label-width="120px"
      >
        <el-form-item label="生效日期" prop="effectiveDate">
          <el-date-picker clearable size="small" style="width: 200px"
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
                          v-model="form.effectiveDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          placeholder="选择生效日期">
            placeholder="选择生效日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
@@ -96,7 +128,9 @@
    <!-- æ·»åŠ æˆ–修改electricityPrice对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="生效时间" prop="effectiveDate">{{changeTime(parseTime(form.effectiveDate))}}</el-form-item>
        <el-form-item label="生效时间" prop="effectiveDate">{{
          changeTime(parseTime(form.effectiveDate))
        }}</el-form-item>
        <el-form-item label="时段名称" prop="effectiveName">
          <el-select v-model="form.effectiveName" placeholder="请选择时段名称">
            <el-option
@@ -111,7 +145,7 @@
          <el-time-picker
            v-model="form.beginDate"
            class="date-box"
            format='HH:mm'
            format="HH:mm"
            value-format="HH:mm"
            placeholder="选择时段开始时间"
            >
@@ -121,7 +155,7 @@
          <el-time-picker
            v-model="form.endDate"
            class="date-box"
            format='HH:mm'
            format="HH:mm"
            value-format="HH:mm"
            placeholder="选择时段开始时间"
          ></el-time-picker>
@@ -136,11 +170,23 @@
    <el-dialog :title="title" :visible.sync="openPrice" width="500px">
      <el-form ref="formPrice" :model="formPrice" :rulesPrice="rulesPrice">
        <el-input type="hidden" v-model="formPrice.effectiveDate"></el-input>
        <el-table :data="effective_name" ref="multipleTable" tooltip-effect="dark">
          <el-table-column align="center" property="dictLabel" label="时段名称" ></el-table-column>
        <el-table
          :data="effective_name"
          ref="multipleTable"
          tooltip-effect="dark"
        >
          <el-table-column
            align="center"
            property="dictLabel"
            label="时段名称"
          ></el-table-column>
          <el-table-column align="center" property="price" label="单价(元)">
           <template scope="scope">
             <el-input step="0.1" v-model="scope.row.price" placeholder="请输入单价(元)"></el-input>
              <el-input
                step="0.1"
                v-model="scope.row.price"
                placeholder="请输入单价(元)"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
@@ -154,9 +200,25 @@
</template>

<script>
  import { listElectricity, getElectricity, delElectricity, addElectricity, updateElectricity, exportElectricity,listDate} from "@/api/electricityPrice/electricity";
import {
  listElectricity,
  getElectricity,
  delElectricity,
  addElectricity,
  updateElectricity,
  exportElectricity,
  listDate
} from "@/api/electricityPrice/electricity";

  import { listPrice, getPrice, delPrice, addPrice, updatePrice ,EdictType,dictTypeList } from "@/api/electricityPrice/price";
import {
  listPrice,
  getPrice,
  delPrice,
  addPrice,
  updatePrice,
  EdictType,
  dictTypeList
} from "@/api/electricityPrice/price";

  export default {
    data() {
@@ -185,9 +247,9 @@
        effective_name: [],
        ifeffective: [],
        effective:{
          dictLabel:'',
          dictValue:'',
          price:''
        dictLabel: "",
        dictValue: "",
        price: ""
        },
        dictType:"",
        effective_date:"",
@@ -200,7 +262,7 @@
          beginDate: undefined,
          endDate: undefined,
          effectiveName: undefined,
          dictType: undefined,
        dictType: undefined
        },
        // è¡¨å•å‚æ•°
        form: {},
@@ -232,9 +294,10 @@
          ],
          price:[{ required: true, message: "单价不能为空", trigger: "blur" }]
        },
        pickerOptions: { // ä¸è®©é€‰æ‹©ä»Šå¤©ä»¥å‰çš„
      pickerOptions: {
        // ä¸è®©é€‰æ‹©ä»Šå¤©ä»¥å‰çš„
          disabledDate(time) {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          }
        }
      };
@@ -303,9 +366,9 @@
      // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
      handleSelectionChange(selection) {
        console.log(selection);
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
      },
      /** æ–°å¢žæŒ‰é’®æ“ä½œ */
      handleAdd() {
@@ -324,8 +387,11 @@
        });
      },
      handlePrice(){
        this.queryParams.effectiveDate = this.forms.effectiveDate.substring(0, 10);
        this.queryParams.dictType="electricity_price",
      this.queryParams.effectiveDate = this.forms.effectiveDate.substring(
        0,
        10
      );
      (this.queryParams.dictType = "electricity_price"),
        dictTypeList(this.queryParams).then(response => {
          this.reset();
          this.formPrice.effectiveDate=this.forms.effectiveDate;
@@ -338,21 +404,30 @@
      submitPrice: function() {
        this.formPrice.effectiveDate;
        this.$nextTick(() => {
          this.formPrice.TimeJson=this.$refs['multipleTable'].data
          let tourId = '';
          let tourLabels = '';
          let tourValue = '';
          let tourPrice = '';
        this.formPrice.TimeJson = this.$refs["multipleTable"].data;
        let tourId = "";
        let tourLabels = "";
        let tourValue = "";
        let tourPrice = "";
          for (let i = 0; i < this.formPrice.TimeJson.length; i++) {
            tourLabels +=this.formPrice.TimeJson[i].dictLabel+",";
            tourValue +=this.formPrice.TimeJson[i].dictValue+",";
            tourPrice +=this.formPrice.TimeJson[i].price+",";
            tourId +=this.formPrice.TimeJson[i].id+",";
          }
          this.formPrice.dictLabel=tourLabels.substring(0, tourLabels.lastIndexOf(','));
          this.formPrice.dictValue=tourValue.substring(0, tourValue.lastIndexOf(','));
          this.formPrice.price=tourPrice.substring(0, tourPrice.lastIndexOf(','));
          this.formPrice.id=tourId.substring(0, tourId.lastIndexOf(','));
        this.formPrice.dictLabel = tourLabels.substring(
          0,
          tourLabels.lastIndexOf(",")
        );
        this.formPrice.dictValue = tourValue.substring(
          0,
          tourValue.lastIndexOf(",")
        );
        this.formPrice.price = tourPrice.substring(
          0,
          tourPrice.lastIndexOf(",")
        );
        this.formPrice.id = tourId.substring(0, tourId.lastIndexOf(","));
          //console.log(this.formPrice.TimeJson[0].id);
         if (this.formPrice.TimeJson[0].id != undefined) {
           updatePrice(this.formPrice).then(response => {
@@ -373,7 +448,7 @@
            }
          });
        }
        })
      });
        this.loading = false;
      },
      addDate() {
@@ -384,7 +459,7 @@
      /** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
      handleUpdate() {
        this.reset();
        const id =this.ids
      const id = this.ids;
        getElectricity(id).then(response => {
          this.form = response.data;
          this.open = true;
@@ -424,30 +499,40 @@
      /** åˆ é™¤æŒ‰é’®æ“ä½œ */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除新增时段编号为"' + ids + '"的数据项?', "警告", {
      this.$confirm(
        '是否确认删除新增时段编号为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }
      )
        .then(function() {
          return delElectricity(ids);
        }).then(() => {
        })
        .then(() => {
          this.getList();
          this.getLists();
          this.msgSuccess("删除成功");
        }).catch(function() {});
        })
        .catch(function() {});
      },
      /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有electricityPrice数据项?', "警告", {
      this.$confirm("是否确认导出所有electricityPrice数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
      })
        .then(function() {
          return exportElectricity(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function() {});
        })
        .catch(function() {});
      },
      changeTime(time) {
        if (time !== null && time !== undefined && time !== "") {

 energy_management_ui/src/views/electricityPrice/statistics/index.vue

@@ -1,54 +1,82 @@

<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            å³°å¹³è°·æ•°æ®ç»Ÿè®¡
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :modelCode="modelCode"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
         <electricityIndex ref="electricityIndex" style="padding:10px"></electricityIndex>
        </el-main>
      </el-container>
    </el-container>
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="峰平谷数据统计" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
            :modelCode="modelCode"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <electricityIndexNew
            ref="electricityIndex"
            style="padding:10px"
          ></electricityIndexNew>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ModelNode from "../../basicsetting/modelNode/modelNode";
  import electricityIndex from "./electricityIndex";
import electricityIndexNew from "./electricityIndexNew";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

  export default {
    components: { ModelNode,electricityIndex},
  components: { ModelNode, electricityIndexNew, ShrinkCol },
  mixins: [mixins],
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
    data() {
      return {
      bodyStyleRight: {},
        modelCode:undefined,
        isCollapse: false,
      }
      isCollapse: false
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.electricityIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/electricityPrice/statistics/pieChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
        //required: true
      }
    },
@@ -31,70 +31,73 @@
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null
      }
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({legend,data} = {}) {
        this.chart.setOption({
          title: {
            text: '数据分析',
            left: 'left',
          text: "数据分析",
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#606266"
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            //bottom: 10,
            top:"30",
            orient: 'vertical',
            left: '10',
          orient: "vertical",
          left: "10",
            data: legend,
          textStyle: {
            color: "#fff"
          }
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
              data:data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        })
      },
      });
    }
  }
};
</script>

 energy_management_ui/src/views/energyAlarm/historicalAlarm/LChart.vue

@@ -1,11 +1,10 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />

</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
/*import resize from './mixins/resize'*/

export default {
@@ -13,15 +12,15 @@
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    autoResize: {
      type: Boolean,
@@ -35,37 +34,58 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00' , '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
          data: [
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ],
          boundaryGap: false,
          axisTick: {
            show: false
@@ -79,9 +99,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -91,48 +111,100 @@
          }
        },
        legend: {
          data: ['预警值','限值']
          data: ["预警值", "限值"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
          name: '预警值', itemStyle: {
        series: [
          {
            name: "预警值",
            itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                width: 2,

              },

                  color: "#FF005A",
                  width: 2
                }
            }
          },
          smooth: true,
          type: 'line',
          data:[200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
            type: "line",
            data: [
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200,
              200
            ],
          animationDuration: 1000,
          animationEasing: 'cubicInOut'
            animationEasing: "cubicInOut"
        },
          {
            name: '限值',
            name: "限值",
            smooth: true,
            type: 'line',
            type: "line",
            itemStyle: {
              normal: {
                color: '#3888fa',
                color: "#3888fa",
                lineStyle: {
                  color: '#3888fa',
                  color: "#3888fa",
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                  color: "#f3f8ff"
                }
              }
            },
            data:[200, 200, 181, 224,210, 172, 181, 224,210, 172, 181, 224,210, 172, 181, 224,210, 172, 181, 224,210, 172, 181],
            data: [
              200,
              200,
              181,
              224,
              210,
              172,
              181,
              224,
              210,
              172,
              181,
              224,
              210,
              172,
              181,
              224,
              210,
              172,
              181,
              224,
              210,
              172,
              181
            ],
            animationDuration: 800,
            animationEasing: 'quadraticOut'
          }]
      })
            animationEasing: "quadraticOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyAlarm/historicalAlarm/historyAlarmNote.vue

@@ -2,24 +2,40 @@
<template>
  <div class="app-container" style="padding:0">
    <el-card class="box-card">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="query-form"
      >
        <el-form-item label="限值类型" prop="limitType">
          <el-select v-model="queryParams.limitType"    placeholder="限值类型" clearable>
          <el-select
            v-model="queryParams.limitType"
            placeholder="限值类型"
            clearable
          >
            <el-option
              v-for="dict in limitTypeOptions"
              :key="dict.limitCode"
              :label="dict.limitName"
              :value="dict.limitCode">
              :value="dict.limitCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警级别" prop="alarmLevel">
          <el-select v-model="queryParams.alarmLevel" placeholder="报警级别" clearable>
          <el-select
            v-model="queryParams.alarmLevel"
            placeholder="报警级别"
            clearable
          >
            <el-option
              v-for="dict in alarmLevelOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue">
              :value="dict.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
@@ -40,13 +56,19 @@
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>

      </el-form>
      <el-row :gutter="10" class="mb8">
<!--        <el-col :span="1.5">-->
@@ -61,22 +83,43 @@
<!--        </el-col>-->
      </el-row>
      <el-form>
      <el-table :data="JkHistoryAlarmList" v-loading="loading" border @selection-change="" @cell-click="openDialog"  >
        <el-table
          :data="JkHistoryAlarmList"
          v-loading="loading"
          border
          @selection-change=""
          @cell-click="openDialog"
        >
        <el-table-column label="序号" type="index"  align="center"/>
        <el-table-column label="指标编码" align="center" prop="code"/>
        <el-table-column label="指标名称" align="center" prop="indexName">
          <template slot-scope="scope">
            <div style="color:blue;text-decoration:underline ;cursor:pointer">{{scope.row.indexName}}</div>
              <div style="color:blue;text-decoration:underline ;cursor:pointer">
                {{ scope.row.indexName }}
              </div>
          </template>
        </el-table-column>
        <el-table-column label="指标单位" align="center" prop="unitId"  />
        <el-table-column label="报警级别" align="center" prop="alarmLevel" />
        <el-table-column label="限值类型" align="center" prop="limitType"  />
        <el-table-column label="限值"     align="center" prop="limitingValue"/>
        <el-table-column label="报警时间起" align="center" prop="alarmBeginTime"/>
        <el-table-column label="报警时间止" align="center" prop="alarmEndTime"/>
          <el-table-column
            label="报警时间起"
            align="center"
            prop="alarmBeginTime"
          />
          <el-table-column
            label="报警时间止"
            align="center"
            prop="alarmEndTime"
          />
        <el-table-column label="报警值"   align="center" prop="alarmValue" />
        <el-table-column label="持续时长(分钟)" align="center" prop="duration" width="96px" />
          <el-table-column
            label="持续时长(分钟)"
            align="center"
            prop="duration"
            width="96px"
          />
      </el-table>
      </el-form>
      <pagination
@@ -87,14 +130,31 @@
        @pagination="getList"
      />
      <!--弹框-->
      <el-dialog :title="title" :visible.sync="open" width="1000px" :close-on-click-modal="false">
        <el-row style="background:#fff;margin-bottom:32px;">
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="1000px"
        :close-on-click-modal="false"
      >
        <el-row style="margin-bottom:32px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane label="历史数据曲线图" name="second">
              <history-alarm-view ref="historyAlarmView" :code="code" :activeName="activeName" :limitVal="limitVal"></history-alarm-view>
              <history-alarm-view
                ref="historyAlarmView"
                :code="code"
                :activeName="activeName"
                :limitVal="limitVal"
              ></history-alarm-view>
            </el-tab-pane>
            <el-tab-pane label="历史数据查询" name="third">
              <history-alarm-table ref="historyAlarmTable" :code="code" :indexName="indexName" :activeName="activeName" :indexUnit="indexUnit" :limitVal="limitVal"></history-alarm-table>
              <history-alarm-table
                ref="historyAlarmTable"
                :code="code"
                :indexName="indexName"
                :activeName="activeName"
                :indexUnit="indexUnit"
                :limitVal="limitVal"
              ></history-alarm-table>
            </el-tab-pane>
          </el-tabs>
        </el-row>
@@ -107,25 +167,27 @@
</template>

<script>

  import {listHistoryAlarmNote,exportHistoricalAlarm } from  "@/api/basicsetting/historyAlarm";
  import {listLimitType} from "@/api/basicsetting/limitType"
  import historyAlarmView from "../realTimeAlarm/historyAlarmView"
  import historyAlarmTable from "../realTimeAlarm/historyAlarmTable"
import {
  listHistoryAlarmNote,
  exportHistoricalAlarm
} from "@/api/basicsetting/historyAlarm";
import { listLimitType } from "@/api/basicsetting/limitType";
import historyAlarmView from "../realTimeAlarm/historyAlarmView";
import historyAlarmTable from "../realTimeAlarm/historyAlarmTable";

  export default {
    components: {historyAlarmView,historyAlarmTable},
    name: 'historyAlarmNote',
    props:['svgId','tagId'],
  name: "historyAlarmNote",
  props: ["svgId", "tagId"],
    data() {
      return {
        num: 20,
        num1:5,
        code:undefined,
        value:'',
      value: "",
        options:undefined,
        radio: 'B',
        activeName: 'second',
      radio: "B",
      activeName: "second",
        indexId:undefined,
        indexName:undefined,
        indexUnit:undefined,
@@ -164,12 +226,12 @@
        unitIdOptions: [],
        // æŸ¥è¯¢å‚æ•°
        lineChartData:{
          newVisitis:null,
        newVisitis: null
        },
        queryParams: {
           pageNum: 1,
           pageSize: 10,
          indexType:'COLLECT',
        indexType: "COLLECT",
          code: undefined,
          indexName:undefined,
          limitType: undefined,
@@ -178,7 +240,7 @@
          beginTime: undefined,
          endTime:undefined,
          svgId:undefined,
          nodeId:undefined,
        nodeId: undefined
        },
        // è¡¨å•å‚æ•°
        form: {},
@@ -203,14 +265,15 @@
      });
    },
    methods: {
      show(nodeId)
      {
    show(nodeId) {
        this.queryParams.nodeId = nodeId;
        this.getList();
      },
      getList() {
        this.loading = true;
        listHistoryAlarmNote(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      listHistoryAlarmNote(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then(response => {
          this.JkHistoryAlarmList = response.rows;
          this.total = response.total;
          this.loading = false;
@@ -255,18 +318,17 @@
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
      MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
      d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
      h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
      m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      },


      /** æœç´¢æŒ‰é’®æ“ä½œ */
      handleQuery() {
@@ -278,8 +340,7 @@
        this.resetForm("queryForm");
      },

      handleSelectionChange() {
      },
    handleSelectionChange() {},
      openDialog(row,column,event,cell){
        if("indexName"==column.property){
          this.open = true;
@@ -294,30 +355,32 @@
      /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有报警数据项?', "警告", {
      this.$confirm("是否确认导出所有报警数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
      })
        .then(function() {
          return exportHistoricalAlarm(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function() {});

        })
        .catch(function() {});
      },
      //限制类型翻译
      limitTypeFormat(row,column){
        var actions = [];
        Object.keys(this.limitTypeOptions).map((key) => {
          if (this.limitTypeOptions[key].limitCode == ('' + row.limitType)) {
      Object.keys(this.limitTypeOptions).map(key => {
        if (this.limitTypeOptions[key].limitCode == "" + row.limitType) {
            actions.push(this.limitTypeOptions[key].limitName);
          }
        });
        return actions.join('');
      return actions.join("");
      },
      handleClick(tab, event){
        this.activeName = tab.name;
      },
    }
    }
  };
</script>

 energy_management_ui/src/views/energyAlarm/historicalAlarm/realIndex.vue

@@ -1,29 +1,50 @@
<template>
  <div class="historicalAlarm-right">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="query-form"
    >
      <el-form-item>
        <el-radio-group v-model="queryParams.eierarchyFlag">
          <el-radio label="B" style="margin-right: 10px!important;" onselect="true">本级</el-radio>
          <el-radio
            label="B"
            style="margin-right: 10px!important;"
            onselect="true"
            >本级</el-radio
          >
          <el-radio label="ALL">包含下级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="限值类型" prop="limitType">
        <el-select v-model="queryParams.limitType" placeholder="限值类型" clearable>
        <el-select
          v-model="queryParams.limitType"
          placeholder="限值类型"
          clearable
        >
          <el-option
              v-for="dict in limitTypeOptions"
              :key="dict.limitCode"
              :label="dict.limitName"
              :value="dict.limitCode">
            :value="dict.limitCode"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报警级别" prop="alarmLevel">
        <el-select v-model="queryParams.alarmLevel" placeholder="报警级别" clearable>
        <el-select
          v-model="queryParams.alarmLevel"
          placeholder="报警级别"
          clearable
        >
          <el-option
              v-for="dict in alarmLevelOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue">
            :value="dict.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
@@ -44,11 +65,18 @@
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button
            type="warning"
            icon="el-icon-download"
@@ -58,10 +86,14 @@
        >导出
        </el-button>
      </el-form-item>

    </el-form>
    <el-form>
      <el-table :data="JkHistoryAlarmList" v-loading="loading" border @selection-change="" @cell-click="openDialog"
      <el-table
        :data="JkHistoryAlarmList"
        v-loading="loading"
        border
        @selection-change=""
        @cell-click="openDialog"
                :height="height"
      >
        <el-table-column label="序号" type="index" align="center"/>
@@ -69,17 +101,47 @@
        <el-table-column label="指标编码" align="center" prop="code"/>
        <el-table-column label="指标名称" align="center" prop="indexName">
          <template slot-scope="scope">
            <div style="color:blue;text-decoration:underline ;cursor:pointer">{{ scope.row.indexName }}</div>
            <div style="color:blue;text-decoration:underline ;cursor:pointer">
              {{ scope.row.indexName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="指标单位" align="center" prop="unitId" :formatter="unitIdFormat"/>
        <el-table-column label="报警级别" align="center" prop="alarmLevel" :formatter="alarmLevelFormat"/>
        <el-table-column label="限值类型" align="center" prop="limitType" :formatter="limitTypeFormat"/>
        <el-table-column
          label="指标单位"
          align="center"
          prop="unitId"
          :formatter="unitIdFormat"
        />
        <el-table-column
          label="报警级别"
          align="center"
          prop="alarmLevel"
          :formatter="alarmLevelFormat"
        />
        <el-table-column
          label="限值类型"
          align="center"
          prop="limitType"
          :formatter="limitTypeFormat"
        />
        <el-table-column label="限值" align="center" prop="limitingValue"/>
        <el-table-column label="报警时间起" align="center" prop="alarmBeginTime"/>
        <el-table-column label="报警时间止" align="center" prop="alarmEndTime"/>
        <el-table-column
          label="报警时间起"
          align="center"
          prop="alarmBeginTime"
        />
        <el-table-column
          label="报警时间止"
          align="center"
          prop="alarmEndTime"
        />
        <el-table-column label="预警值" align="center" prop="alarmValue"/>
        <el-table-column label="持续时长(分钟)" align="center" prop="duration" width="96px"/>
        <el-table-column
          label="持续时长(分钟)"
          align="center"
          prop="duration"
          width="96px"
        />
      </el-table>
    </el-form>
    <pagination
@@ -89,16 +151,31 @@
        @pagination="getList"
    />
    <!--弹框-->
    <el-dialog :title="title" :visible.sync="open" width="1000px" :close-on-click-modal="false">
      <el-row style="background:#fff;margin-bottom:32px;">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
    >
      <el-row style="margin-bottom:32px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="历史数据曲线图" name="second">
            <history-alarm-view ref="historyAlarmView" :code="code" :activeName="activeName"
                                :limitVal="limitVal"></history-alarm-view>
            <history-alarm-view
              ref="historyAlarmView"
              :code="code"
              :activeName="activeName"
              :limitVal="limitVal"
            ></history-alarm-view>
          </el-tab-pane>
          <el-tab-pane label="历史数据查询" name="third">
            <history-alarm-table ref="historyAlarmTable" :code="code" :indexName="indexName" :activeName="activeName"
                                 :indexUnit="indexUnit" :limitVal="limitVal"></history-alarm-table>
            <history-alarm-table
              ref="historyAlarmTable"
              :code="code"
              :indexName="indexName"
              :activeName="activeName"
              :indexUnit="indexUnit"
              :limitVal="limitVal"
            ></history-alarm-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
@@ -110,16 +187,19 @@
</template>

<script>

import {listHistoryAlarm, exportHistoricalAlarm, getHistoricalAlarm} from "@/api/basicsetting/historyAlarm";
import {listLimitType} from "@/api/basicsetting/limitType"
import historyAlarmView from "../realTimeAlarm/historyAlarmView"
import historyAlarmTable from "../realTimeAlarm/historyAlarmTable"
import {
  listHistoryAlarm,
  exportHistoricalAlarm,
  getHistoricalAlarm
} from "@/api/basicsetting/historyAlarm";
import { listLimitType } from "@/api/basicsetting/limitType";
import historyAlarmView from "../realTimeAlarm/historyAlarmView";
import historyAlarmTable from "../realTimeAlarm/historyAlarmTable";
import mixins from "@/layout/mixin/getHeight";

export default {
  components: {historyAlarmView, historyAlarmTable},
  name: 'historyAlarm',
  name: "historyAlarm",
  mixins: [mixins],
  data() {
    return {
@@ -129,11 +209,11 @@
        /*  value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],*/
      },
      code: undefined,
      value: '',
      value: "",
      options: undefined,
      // handleClick:'simple',
      radio: 'B',
      activeName: 'second',
      radio: "B",
      activeName: "second",
      indexId: undefined,
      indexName: undefined,
      indexUnit: undefined,
@@ -174,13 +254,13 @@
      unitIdOptions: [],
      // æŸ¥è¯¢å‚æ•°
      lineChartData: {
        newVisitis: null,
        newVisitis: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        eierarchyFlag: 'B',
        indexType: 'COLLECT',
        eierarchyFlag: "B",
        indexType: "COLLECT",
        code: undefined,
        indexName: undefined,
        /* unitId: undefined,*/
@@ -190,8 +270,7 @@
        /* limitingValue:undefined,*/
        nodeId: undefined,
        beginTime: undefined,
        endTime: undefined,

        endTime: undefined
      },
      // è¡¨å•å‚æ•°
      form: {},
@@ -216,11 +295,13 @@
  },
  methods: {
    setCharts() {
      this.height = window.innerHeight - 370 + 'px'
      this.height = window.innerHeight - 370 + "px";
    },
    getList() {
      this.loading = true;
      listHistoryAlarm(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      listHistoryAlarm(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then(response => {
        this.JkHistoryAlarmList = response.rows;
        this.total = response.total;
        this.loading = false;
@@ -266,7 +347,8 @@
      this.queryParams.nodeId = modelNode.id;
      this.settingDeviceList = [];
      this.settingIndexList = [];
      this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null;
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
      if (modelNode) {
        this.currentNode = modelNode;
        this.deviceLoading = true;
@@ -292,7 +374,6 @@
    //   return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    // },


    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
      this.getList();
@@ -303,8 +384,7 @@
      this.resetForm("queryForm");
    },

    handleSelectionChange() {
    },
    handleSelectionChange() {},
    openDialog(row, column, event, cell) {
      if ("indexName" == column.property) {
        this.open = true;
@@ -319,51 +399,56 @@
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有报警数据项?', "警告", {
      this.$confirm("是否确认导出所有报警数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
      })
        .then(function() {
        return exportHistoricalAlarm(queryParams);
      }).then(response => {
        })
        .then(response => {
        this.download(response.msg);
      }).catch(function () {
      });

        })
        .catch(function() {});
    },
    //限制类型翻译
    limitTypeFormat(row, column) {
      var actions = [];
      Object.keys(this.limitTypeOptions).map((key) => {
        if (this.limitTypeOptions[key].limitCode == ('' + row.limitType)) {
      Object.keys(this.limitTypeOptions).map(key => {
        if (this.limitTypeOptions[key].limitCode == "" + row.limitType) {
          actions.push(this.limitTypeOptions[key].limitName);
        }
      });
      return actions.join('');
      return actions.join("");
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    getTime() {
      var myDate = new Date();
      var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1);
      var monthFirst = new Date(
        myDate.getFullYear(),
        parseInt(myDate.getMonth()),
        1
      );
      this.dateRange = [this.formatDate(monthFirst), this.formatDate(myDate)];
    },
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  }
};
</script>

 energy_management_ui/src/views/energyAlarm/realTimeAlarm/LineChart.vue

@@ -3,8 +3,8 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons'); // echarts theme
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from './mixins/resize'

export default {
@@ -12,56 +12,55 @@
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      type: Object
      // required: true
    },

    }
  },
  data() {
    return {
      chart: null,
      alarmLimitName:undefined
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose();
    this.chart = null
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,timeList } = {}) {
      if(expectedData.length>0){
@@ -85,9 +84,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -97,48 +96,53 @@
          }
        },
        legend: {
          data: [this.alarmLimitName, '实时值']
          data: [this.alarmLimitName, "实时值"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [{
        series: [
          {
          symbol: "none",
          name: '报警限值',
            name: "报警限值",
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
            animationEasing: "cubicInOut"
        },
        {
          name: '实时值',
            name: "实时值",
          smooth: true,
          type: 'line',
            type: "line",
          itemStyle: {
            normal: {
              color: '#3888fa',
                color: "#3888fa",
              lineStyle: {
                color: '#3888fa',
                  color: "#3888fa",
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
                  color: "#f3f8ff"
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
            animationEasing: "quadraticOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyAlarm/realTimeAlarm/index.vue

@@ -1,16 +1,35 @@
<template>
  <el-row type="flex">
    <el-col :style="{width:isCollapse?'0': '280px',position:'relative'}" v-show="!isCollapse">
    <el-col
      :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
      v-show="!isCollapse"
    >
      <basic-container title="实时报警" :bodyStyle="bodyStyle">
        <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :modelCode="modelCode"/>
        <ModelNode
          ref="modelNode"
          @changeNode="changeNode"
          :showOpt="false"
          :modelCode="modelCode"
        />
      </basic-container>
      <img src="~@/assets/image/rectangle.png" alt=""
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
           class="shrink-col-block"
           @click="toggleCollapse">
        @click="toggleCollapse"
      />
    </el-col>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse"/>
    <el-col :style="{width:isCollapse? 'calc(100% - 48px)':'calc(100% - 280px)',paddingLeft:isCollapse? 0:'14px'}">
      <basic-container :title="currentNode ? currentNode.label+'--节点配置' : '节点配置'" :bodyStyle="bodyStyleRight">
    <el-col
      :style="{
        width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
        paddingLeft: isCollapse ? 0 : '14px'
      }"
    >
      <basic-container
        :title="currentNode ? currentNode.label + '--节点配置' : '节点配置'"
        :bodyStyle="bodyStyleRight"
      >
        <realTimeSetting ref="realTimeSetting"/>
      </basic-container>
    </el-col>
@@ -21,7 +40,7 @@
import realTimeSetting from "./modelRealTimeAlarmSetting";
import ModelNode from "../../basicsetting/modelNode/modelNode";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from '@/components/shrink/index.vue'
import ShrinkCol from "@/components/shrink/index.vue";

export default {
  components: {realTimeSetting, ModelNode,ShrinkCol},
@@ -31,37 +50,37 @@
  mixins: [mixins],
  data() {
    return {
      modelData: '',
      modelData: "",
      modelInfoOptions: [],
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {},
      currentNode: ''
    }
      currentNode: ""
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight -155 + 'px'
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 155 + 'px'
        height: window.innerHeight - 185 + "px"
      };
    },
    changeNode: function (node) {
      if (node) {
        this.currentNode = node
        this.currentNode = node;
      }
      this.$refs.realTimeSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
      this.$router.push("/model");
    },
    changeModel: function (item) {
      // this.$refs.modelNode.getList(item);
    },
    // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};

 energy_management_ui/src/views/energyAlarm/realTimeAlarm/modelRealTimeAlarmSetting.vue

@@ -3,17 +3,32 @@
    <el-tabs>
      <el-tab-pane :disabled="disabledSetting">
        <span slot="label"><i class="el-icon-setting"></i>实时报警</span>
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
          class="query-form"
        >
          <el-form-item>
            <el-radio-group v-model="queryParams.eierarchyFlag">
              <el-radio label="B" style="margin-right: 10px!important;" onselect="true">本级</el-radio>
              <el-radio
                label="B"
                style="margin-right: 10px!important;"
                onselect="true"
                >本级</el-radio
              >
              <el-radio label="ALL">包含下级</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="限值名称" prop="limitValName">
            <el-select v-model="queryParams.limitType" placeholder="限值名称" clearable
            <el-select
              v-model="queryParams.limitType"
              placeholder="限值名称"
              clearable
                       style="width:100px"
                       size="mini">
              size="mini"
            >
              <el-option
                  v-for="dict in limitTypeOptions"
                  :key="dict.limitCode"
@@ -23,9 +38,13 @@
            </el-select>
          </el-form-item>
          <el-form-item label="报警级别" prop="alarmLevel">
            <el-select v-model="queryParams.alarmLevel" placeholder="报警级别" clearable
            <el-select
              v-model="queryParams.alarmLevel"
              placeholder="报警级别"
              clearable
                       style="width:100px"
                       size="mini">
              size="mini"
            >
              <el-option
                  v-for="dict in alarmLevelOptions"
                  :key="dict.dictValue"
@@ -35,7 +54,8 @@
            </el-select>
          </el-form-item>
          <el-form-item label="指标名称">
            <el-input style="width: 120px"
            <el-input
              style="width: 120px"
                      v-model="queryParams.indexName"
                      placeholder="指标名称"
                      clearable
@@ -44,32 +64,109 @@
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="selectList">查询</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="selectList"
              >查询</el-button
            >
            <!--<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
          </el-form-item>
        </el-form>
        <!--表格-->
        <el-form :model="model" ref="form" class="mainTable">
          <el-table v-loading="loading" :data="model.tableOptions" border @selection-change="handleSelectionChange"
                    :default-sort="{prop: 'date', order: 'descending'}" @cell-click="openDialog"
          <el-table
            v-loading="loading"
            :data="model.tableOptions"
            border
            @selection-change="handleSelectionChange"
            :default-sort="{ prop: 'date', order: 'descending' }"
            @cell-click="openDialog"
                    :height="height"
          >
            <el-table-column type="selection" width="55" align="center" show-overflow-tooltip/>
            <el-table-column label="序号" type="index" align="center" show-overflow-tooltip/>
            <el-table-column label="单位名称" align="center" width="100" prop="modelName" show-overflow-tooltip/>
            <el-table-column label="指标编码" align="center" prop="code" show-overflow-tooltip/>
            <el-table-column label="指标名称" align="center" width="100" prop="indexName" show-overflow-tooltip>
            <el-table-column
              type="selection"
              width="55"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="序号"
              type="index"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="单位名称"
              align="center"
              width="100"
              prop="modelName"
              show-overflow-tooltip
            />
            <el-table-column
              label="指标编码"
              align="center"
              prop="code"
              show-overflow-tooltip
            />
            <el-table-column
              label="指标名称"
              align="center"
              width="100"
              prop="indexName"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div style="color:blue;text-decoration:underline;cursor:pointer">{{ scope.row.indexName }}</div>
                <div
                  style="color:blue;text-decoration:underline;cursor:pointer"
                >
                  {{ scope.row.indexName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="指标单位" align="center" prop="unitId" :formatter="unitFormat" show-overflow-tooltip/>
            <el-table-column label="报警级别" align="center" prop="alarmLevel" width="100" :formatter="alarmLevelFormat" show-overflow-tooltip/>
            <el-table-column label="限值类型" align="center" prop="limitType" width="100" :formatter="limitTypeFormat" show-overflow-tooltip/>
            <el-table-column label="限值" align="center" prop="limitingValue" show-overflow-tooltip/>
            <el-table-column label="报警开始时间" align="center" prop="alarmBeginTime" width="180" show-overflow-tooltip/>
            <el-table-column label="报警值" align="center" prop="alarmValue" show-overflow-tooltip/>

            <el-table-column
              label="指标单位"
              align="center"
              prop="unitId"
              :formatter="unitFormat"
              show-overflow-tooltip
            />
            <el-table-column
              label="报警级别"
              align="center"
              prop="alarmLevel"
              width="100"
              :formatter="alarmLevelFormat"
              show-overflow-tooltip
            />
            <el-table-column
              label="限值类型"
              align="center"
              prop="limitType"
              width="100"
              :formatter="limitTypeFormat"
              show-overflow-tooltip
            />
            <el-table-column
              label="限值"
              align="center"
              prop="limitingValue"
              show-overflow-tooltip
            />
            <el-table-column
              label="报警开始时间"
              align="center"
              prop="alarmBeginTime"
              width="180"
              show-overflow-tooltip
            />
            <el-table-column
              label="报警值"
              align="center"
              prop="alarmValue"
              show-overflow-tooltip
            />
          </el-table>
          <pagination
              :total="total"
@@ -79,22 +176,40 @@
          />
        </el-form>
      </el-tab-pane>

    </el-tabs>
    <el-dialog :title="title" :visible.sync="open" width="1000px" :close-on-click-modal="false" @close="closeDialog">
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-row style="padding:16px 16px 0;margin-bottom:32px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="实时数据曲线图" name="first">
            <live-alarm-view ref="liveAlarmView" :code="code" :activeName="activeName"
                             :limitVal="limitVal"></live-alarm-view>
            <live-alarm-view
              ref="liveAlarmView"
              :code="code"
              :activeName="activeName"
              :limitVal="limitVal"
            ></live-alarm-view>
          </el-tab-pane>
          <el-tab-pane label="历史数据曲线图" name="second">
            <history-alarm-view ref="historyAlarmView" :code="code" :activeName="activeName"
                                :limitVal="limitVal"></history-alarm-view>
            <history-alarm-view
              ref="historyAlarmView"
              :code="code"
              :activeName="activeName"
              :limitVal="limitVal"
            ></history-alarm-view>
          </el-tab-pane>
          <el-tab-pane label="历史数据查询" name="third">
            <history-alarm-table ref="historyAlarmTable" :code="code" :indexName="indexName" :activeName="activeName"
                                 :indexUnit="indexUnit"></history-alarm-table>
            <history-alarm-table
              ref="historyAlarmTable"
              :code="code"
              :indexName="indexName"
              :activeName="activeName"
              :indexUnit="indexUnit"
            ></history-alarm-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
@@ -106,11 +221,11 @@
</template>

<script>
import {getRealTimeAlarmList} from "@/api/energyAlarm/realTimeAlarm/realTimeAlarm"
import {listLimitType} from "@/api/basicsetting/limitType"
import liveAlarmView from "./liveAlarmView"
import historyAlarmView from "./historyAlarmView"
import historyAlarmTable from "./historyAlarmTable"
import { getRealTimeAlarmList } from "@/api/energyAlarm/realTimeAlarm/realTimeAlarm";
import { listLimitType } from "@/api/basicsetting/limitType";
import liveAlarmView from "./liveAlarmView";
import historyAlarmView from "./historyAlarmView";
import historyAlarmTable from "./historyAlarmTable";
import mixins from "@/layout/mixin/getHeight";

export default {
@@ -131,10 +246,10 @@
      indexName: undefined,
      indexUnit: undefined,
      //计时器对象
      timer: '',
      timer: "",
      //计时器间隔
      intervalTime: 30000,
      currentNode: '',
      currentNode: "",
      deviceDialog: false,
      energyDialog: false,
      productDialog: false,
@@ -152,7 +267,7 @@
        limitType: undefined,
        indexType: "COLLECT",
        pageNum: 1,
        pageSize: 10,
        pageSize: 10
      },
      height: null,
      //报警级别
@@ -161,9 +276,9 @@
      unitOptions: [],
      //表格模型
      model: {
        tableOptions: [],
      },
        tableOptions: []
    }
    };
  },
  created() {
    this.getDicts("alarm_level").then(response => {
@@ -177,10 +292,12 @@
    });
  },
  mounted() {
    this.getConfigKey("energyAlarm.realTimeAlarm.intervalTime").then(response => {
    this.getConfigKey("energyAlarm.realTimeAlarm.intervalTime").then(
      response => {
      this.intervalTime = response.msg;
      this.timer = setInterval(this.getList, this.intervalTime);
    });
      }
    );
  },
  beforeDestroy() {
    //页面销毁时 è¦åœæ­¢è®¡æ—¶å™¨ï¼Œå¦åˆ™é€‰é¡¹å¡åˆ‡æ¢è®¡æ—¶å™¨ä¸åœæ­¢ï¼Œä¼šè¶Šæ¥è¶Šå¿«ï¼Œå¤šä¸ªçº¿ç¨‹
@@ -190,11 +307,12 @@
  },
  methods: {
    setCharts() {
      this.height = window.innerHeight - 380 + 'px'
      this.height = window.innerHeight - 390 + "px";
    },
    modelNodeChange(modelNode) {
      this.queryParams.nodeId = modelNode.id;
      this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null;
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
      if (modelNode) {
        this.currentNode = modelNode;
        this.getList();
@@ -205,7 +323,7 @@
      this.ids = selection.map(item => item.indexId);
      this.names = selection.map(item => item.name);
      this.single = selection.length !== 1;
      this.multiple = !selection.length
      this.multiple = !selection.length;
    },

    getList() {
@@ -253,20 +371,20 @@
    // é™å€¼ç±»åž‹å­—典翻译
    limitTypeFormat(row, column) {
      var actions = [];
      Object.keys(this.limitTypeOptions).map((key) => {
        if (this.limitTypeOptions[key].limitCode == ('' + row.limitType)) {
      Object.keys(this.limitTypeOptions).map(key => {
        if (this.limitTypeOptions[key].limitCode == "" + row.limitType) {
          actions.push(this.limitTypeOptions[key].limitName);
        }
      });
      return actions.join('');
      return actions.join("");
    },
    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    resetQuery() {
      this.resetForm("queryForm");
      this.selectList();
    },
  }
}
};
</script>

<style scoped lang="scss">

 energy_management_ui/src/views/energyBalance/energyBalance/LineChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '600px'
      default: "600px"
      },
      chartData: {
        type:Object,
      type: Object
        //required: true
      }
    },
@@ -31,58 +31,58 @@
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null
      }
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({actualData,expectedData,title} = {}) {
        this.chart.setOption({
          title: {
            text: '能源平衡分析',
            x:'left',
            y: 'top',
          text: "能源平衡分析",
          x: "left",
          y: "top",
            textStyle: {
              color: "#333",
            color: "#fff",
              fontSize:16
            },
          }
          },
          xAxis: {
            data: actualData,
            type: 'category',
          type: "category"
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: '15%',
          top: "15%",
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
          trigger: "axis",
            axisPointer: {
              type: 'cross'
            type: "cross"
            },
            padding: [5, 10]
          },
@@ -92,19 +92,24 @@
            }
          },
          legend: {
            data: []
          data: [],
          textStyle: {
            color: "#fff"
          }
          },
          series: [{
        series: [
          {
            name: title,
            smooth: true,
            type: 'bar',
            barWidth: '60%',
            type: "bar",
            barWidth: "60%",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
        })
            animationEasing: "cubicInOut"
          }
        ]
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/energyBalance/energyBalance/PieChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    chartData: {
      type:Object,
      type: Object
      //required: true
    }
  },
@@ -31,76 +31,77 @@
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null
    }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({actualData,expectedData,title} = {}) {
      this.chart.setOption({
        title: {
          text: '能源平衡分析',
          x:'left',
          y: 'top',
          text: "能源平衡分析",
          x: "left",
          y: "top",
          textStyle: {
            color: "#333"
          },
          }
        },
        tooltip: {
          trigger: 'item',
          trigger: "item",
          formatter: actualData
        },
        grid: {
          top: 40,
          left: '2%',
          right: '2%',
          bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          // orient è®¾ç½®å¸ƒå±€æ–¹å¼ï¼Œé»˜è®¤æ°´å¹³å¸ƒå±€ï¼Œå¯é€‰å€¼ï¼š'horizontal'（水平） Â¦ 'vertical'（垂直）
          orient: 'vertical',
          orient: "vertical",
          // x è®¾ç½®æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œé»˜è®¤å…¨å›¾å±…中，可选值：'center' Â¦ 'left' Â¦ 'right' Â¦ {number}（x坐标，单位px）
          x: 'left',
          x: "left",
          // y è®¾ç½®åž‚直安放位置，默认全图顶端，可选值：'top' Â¦ 'bottom' Â¦ 'center' Â¦ {number}（y坐标，单位px）
          y: '10%',
          y: "10%",
          //left: 10,
          itemWidth: 24,   // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„宽
          itemHeight: 18,  // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„高
          textStyle: {
            color: '#666'  // å›¾ä¾‹æ–‡å­—颜色
            color: "#fff" // å›¾ä¾‹æ–‡å­—颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          // itemGap: 30,
          backgroundColor: '#eee',  // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          data: actualData,
          backgroundColor: "#eee", // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          data: actualData
        },
        series: [{
        series: [
          {
          //name: '能源',
          type: 'pie',
          radius: ['50%', '80%'],  // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
          center: ['50%', '50%'],  // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
            type: "pie",
            radius: ["50%", "80%"], // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
            center: ["50%", "50%"], // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
          data: expectedData,
          // itemStyle è®¾ç½®é¥¼çŠ¶å›¾æ‰‡å½¢åŒºåŸŸæ ·å¼
          itemStyle: {
@@ -109,7 +110,7 @@
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(30, 144, 255，0.5)'
                shadowColor: "rgba(30, 144, 255，0.5)"
            }
          },
          // è®¾ç½®å€¼åŸŸçš„那指向线
@@ -123,17 +124,17 @@
          // è®¾ç½®å€¼åŸŸçš„标签
          label: {
            normal: {
              position: 'inner',  // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
                position: "inner", // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
              // formatter: '{a} {b} : {c}个 ({d}%)'   è®¾ç½®æ ‡ç­¾æ˜¾ç¤ºå†…容 ï¼Œé»˜è®¤æ˜¾ç¤º{b}
              // {a}指series.name  {b}指series.data的name
              // {c}指series.data的value  {d}%指这一部分占总数的百分比
              formatter: '{b} : ({d}%)'
                formatter: "{b} : ({d}%)"
            }
          }
        }
        ],
      })
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyBalance/energyBalance/energyBalance.vue

@@ -1,20 +1,43 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="报表类型">
        <el-radio-group v-model="queryParams.timeType">
          <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
          <el-radio
            v-for="dict in dateTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            @change="handleTime(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-date-picker clearable size="small" style="width: 200px"
      <el-date-picker
        clearable
        size="small"
        style="width: 200px"
                      v-model="queryParams.dataTime"
                      :type="dateTypes"
                      :value-format="valueFormat"
                      placeholder="选择日期">
        placeholder="选择日期"
      >
      </el-date-picker>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
@@ -25,18 +48,35 @@
      </el-col>
    </el-row>
    <el-table :data="list" border>
      <el-table-column label="名称" align="center" prop="label">{{label}}</el-table-column>
      <el-table-column label="产出" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_CC)}}</template></el-table-column>
      <el-table-column label="消耗" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_XH)}}</template></el-table-column>
      <el-table-column label="外供" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_WG)}}</template></el-table-column>
      <el-table-column label="损耗" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_SH)}}</template></el-table-column>
      <el-table-column label="名称" align="center" prop="label">{{
        label
      }}</el-table-column>
      <el-table-column label="产出" align="center">
        <template slot-scope="scope">{{
          numFilter(scope.row.value_CC)
        }}</template></el-table-column
      >
      <el-table-column label="消耗" align="center">
        <template slot-scope="scope">{{
          numFilter(scope.row.value_XH)
        }}</template></el-table-column
      >
      <!-- <el-table-column label="外供" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_WG)}}</template></el-table-column> -->
      <el-table-column label="损耗" align="center">
        <template slot-scope="scope">{{
          numFilter(scope.row.value_SH)
        }}</template></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
  import {energyBalanceList,energyBalanceTable} from '@/api/energyBalance/energyBalance'
  import LineChart from './LineChart'
import {
  energyBalanceList,
  energyBalanceTable
} from "@/api/energyBalance/energyBalance";
import LineChart from "./LineChart";
export default {
  components: {LineChart},
  data() {
@@ -49,21 +89,22 @@
        pageSize: 10,
        indexCode: undefined,
        timeType:"DAY",
        dataTime: undefined,
        dataTime: undefined
      },
      dateTypes: 'date',
      dateTypes: "date",
      valueFormat:"yyyy-MM-dd",
      skinName:"",
      label:"",
      lineChartData:{expectedData: [],
        actualData: [],label:""},
      lineChartData: { expectedData: [], actualData: [], label: "" }
    };
  },
  created() {
    this.getTime();
    this.getDicts("energyBalance").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
    this.getConfigKey("energyBalance").then(response => {
      this.skinName=response.msg;
@@ -73,7 +114,7 @@
    modelNodeChange(modelNode) {
      this.queryParams.indexCode=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.getList(this.queryParams);
    },
    getList() {
      energyBalanceList(this.queryParams).then(response => {
@@ -82,9 +123,12 @@
        let actualData=[];
        let total="";
        response.data.forEach(item => {
          actualData.push(item.indexName)
          expectedData.push({"name":item.indexName,"value":this.numFilter(item.value)});
        })
          actualData.push(item.indexName);
          expectedData.push({
            name: item.indexName,
            value: this.numFilter(item.value)
          });
        });
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.title=this.label;
@@ -105,35 +149,33 @@
      this.handleQuery();
    },
    handleTime(date){
      if(date=='YEAR'){
        this.dateTypes= 'year',
          this.valueFormat='yyyy'
      }else if(date=='MONTH'){
        this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      }else{
        this.dateTypes= 'date',
          this.valueFormat='yyyy-MM-dd'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
    },
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dataTime = year + '-' + month + '-' + (date-1)
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month + "-" + (date - 1);
    },
    numFilter(value) {// æˆªå–当前数据到小数点后的几位
      let realVal = '' ;
      if (!isNaN(value) && value !== '' && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = '--'
        realVal = "--";
      }
      return realVal
    },
      return realVal;
    }
  }
};
</script>
@@ -181,25 +223,25 @@
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }
</style>

 energy_management_ui/src/views/energyBalance/energyBalance/index.vue

@@ -1,34 +1,52 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½æºå¹³è¡¡åˆ†æž
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能源平衡分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div>
          <energyBalance
            ref="energyBalance"
            style="padding:10px"
          ></energyBalance>
        </div>
        <el-main style="padding:0">
          <energyBalance ref="energyBalance" style="padding:10px"></energyBalance>
        </el-main>
      </el-container>
    </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import energyBalance from "./energyBalance";
  import ModelNode from "../../basicsetting/modelNode/modelNode";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

  export default {
    components: { ModelNode,energyBalance},
  mixins: [mixins],
  components: { ModelNode, energyBalance, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -36,21 +54,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.energyBalance.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyBalance/energyBalance/pie_chart.vue

@@ -3,101 +3,104 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    }
  },
  data() {
    return {
      chart: null
    }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        title: {
          text: '输出能量分析',
          left: '25%',
          textAlign: 'center',
          text: "输出能量分析",
          left: "25%",
          textAlign: "center",
          textStyle: {
            fontStyle: 'normal',
            "color": "#333",
          },
            fontStyle: "normal",
            color: "#333"
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          orient: "vertical",
          left: 10,
          top:'10%',
          data: ['水输入量', '电输入量']
          top: "10%",
          data: ["水输入量", "电输入量"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: '能量输出',
            type: 'pie',
            radius: ['30%', '60%'],
            name: "能量输出",
            type: "pie",
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
                fontSize: "16",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 340, name: '水输入量'},
              {value: 150, name: '电输入量'}
              { value: 340, name: "水输入量" },
              { value: 150, name: "电输入量" }
            ]
          }
        ]
      })
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyBalance/energyLoss/PieChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '600px'
      default: "600px"
    },
    chartData: {
      type:Object,
      type: Object
      //required: true
    }
  },
@@ -31,76 +31,77 @@
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null
    }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({actualData,expectedData,title,total} = {}) {
      this.chart.setOption({
        title: {
          text: title+"产出："+total,
          x:'left',
          y: 'top',
          text: (title || "") + " " + total,
          x: "left",
          y: "top",
          textStyle: {
            color: "#333"
          },
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item',
          trigger: "item",
          formatter: actualData
        },
        grid: {
          top: 40,
          left: '2%',
          right: '2%',
          bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          // orient è®¾ç½®å¸ƒå±€æ–¹å¼ï¼Œé»˜è®¤æ°´å¹³å¸ƒå±€ï¼Œå¯é€‰å€¼ï¼š'horizontal'（水平） Â¦ 'vertical'（垂直）
          orient: 'vertical',
          orient: "vertical",
          // x è®¾ç½®æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œé»˜è®¤å…¨å›¾å±…中，可选值：'center' Â¦ 'left' Â¦ 'right' Â¦ {number}（x坐标，单位px）
          x: 'left',
          x: "left",
          // y è®¾ç½®åž‚直安放位置，默认全图顶端，可选值：'top' Â¦ 'bottom' Â¦ 'center' Â¦ {number}（y坐标，单位px）
          y: '10%',
          y: "10%",
          //left: 10,
          itemWidth: 24,   // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„宽
          itemHeight: 18,  // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„高
          textStyle: {
            color: '#666'  // å›¾ä¾‹æ–‡å­—颜色
            color: "#fff" // å›¾ä¾‹æ–‡å­—颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          // itemGap: 30,
          backgroundColor: '#eee',  // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          data: actualData,
          // backgroundColor: "#eee", // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          data: actualData
        },
        series: [{
        series: [
          {
          //name: '能源',
          type: 'pie',
          radius: ['50%', '80%'],  // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
          center: ['50%', '50%'],  // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
            type: "pie",
            radius: ["50%", "80%"], // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
            center: ["50%", "50%"], // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
          data: expectedData,
          // itemStyle è®¾ç½®é¥¼çŠ¶å›¾æ‰‡å½¢åŒºåŸŸæ ·å¼
          itemStyle: {
@@ -109,42 +110,42 @@
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(30, 144, 255，0.5)'
                shadowColor: "rgba(30, 144, 255，0.5)"
            },
            normal: {
              label:{
                fontSize:25,
                  fontSize: 25
              }
            }
          },
          // è®¾ç½®å€¼åŸŸçš„那指向线
          labelLine: {
            normal: {
              show: false ,  // show设置线是否显示，默认为true，可选值：true Â¦ false
                show: false // show设置线是否显示，默认为true，可选值：true Â¦ false
            }
          },
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
                fontSize: "40",
                fontWeight: "bold"
            }
          },
          // è®¾ç½®å€¼åŸŸçš„标签
          label: {
            normal: {
              position: 'inner',  // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
                position: "inner", // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
              // formatter: '{a} {b} : {c}个 ({d}%)'   è®¾ç½®æ ‡ç­¾æ˜¾ç¤ºå†…容 ï¼Œé»˜è®¤æ˜¾ç¤º{b}
              // {a}指series.name  {b}指series.data的name
              // {c}指series.data的value  {d}%指这一部分占总数的百分比
              formatter: '{b} : ({d}%)'
            },
          }
        }
        ],
      })
                formatter: "{b} : ({d}%)"
    }
  }
}
        ]
      });
    }
  }
};
</script>

 energy_management_ui/src/views/energyBalance/energyLoss/energyLoss.vue

@@ -1,20 +1,43 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="报表类型">
        <el-radio-group v-model="queryParams.timeType">
          <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
          <el-radio
            v-for="dict in dateTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            @change="handleTime(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-date-picker clearable size="small" style="width: 200px"
      <el-date-picker
        clearable
        size="small"
        style="width: 200px"
                      v-model="queryParams.dataTime"
                      :type="dateTypes"
                      :value-format="valueFormat"
                      placeholder="选择日期">
        placeholder="选择日期"
      >
      </el-date-picker>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
@@ -25,19 +48,36 @@
      </el-col>
    </el-row>
    <el-table :data="list" border>
      <el-table-column label="名称" align="center" prop="label">{{label}}</el-table-column>
      <el-table-column label="名称" align="center" prop="label">{{
        label
      }}</el-table-column>
      <el-table-column label="总量" align="center"
        ><template slot-scope="scope">{{
          numFilter(scope.row.value_total)
        }}</template></el-table-column
      >
      <!--<el-table-column label="产出" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_CC)}}</template></el-table-column>-->
      <el-table-column label="消耗" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_XH)}}</template></el-table-column>
      <el-table-column label="外供" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_WG)}}</template></el-table-column>
      <el-table-column label="损耗" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_SH)}}</template></el-table-column>
      <el-table-column label="总量" align="center"><template slot-scope="scope">{{numFilter(scope.row.value_total)}}</template></el-table-column>
      <el-table-column label="消耗" align="center">
        <template slot-scope="scope">{{
          numFilter(scope.row.value_XH)
        }}</template></el-table-column
      >
      <!-- <el-table-column label="外供" align="center"> <template slot-scope="scope">{{numFilter(scope.row.value_WG)}}</template></el-table-column> -->
      <el-table-column label="损耗" align="center">
        <template slot-scope="scope">{{
          numFilter(scope.row.value_SH)
        }}</template></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
  import {lossAnalysisList,energyLossTable} from '@/api/energyBalance/energyBalance'
  import PieChart from './PieChart'
import {
  lossAnalysisList,
  energyLossTable
} from "@/api/energyBalance/energyBalance";
import PieChart from "./PieChart";
export default {
  components: {PieChart},
  data() {
@@ -50,21 +90,22 @@
        pageSize: 10,
        indexCode: undefined,
        timeType:"DAY",
        dataTime: undefined,
        dataTime: undefined
      },
      dateTypes: 'date',
      dateTypes: "date",
      valueFormat:"yyyy-MM-dd",
      skinName:"",
      label:"",
      lineChartData:{expectedData: [],
        actualData: [],label:""},
      lineChartData: { expectedData: [], actualData: [], label: "" }
    };
  },
  created() {
    this.getTime();
    this.getDicts("energyBalance").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
    this.getConfigKey("energyBalance").then(response => {
      this.skinName=response.msg;
@@ -74,7 +115,7 @@
    modelNodeChange(modelNode) {
      this.queryParams.indexCode=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.getList(this.queryParams);
    },
    getList() {
      lossAnalysisList(this.queryParams).then(response => {
@@ -84,12 +125,15 @@
        let total="";
        response.data.forEach(item => {
          if(item.indexCode.indexOf("_total")==-1){
            actualData.push(item.indexName)
            expectedData.push({"name":item.indexName,"value":this.numFilter(item.value)});
            actualData.push(item.indexName);
            expectedData.push({
              name: item.indexName,
              value: this.numFilter(item.value)
            });
          }else{
            total=this.numFilter(item.value)
            total = this.numFilter(item.value);
          }
        })
        });
        this.lineChartData.total=total;
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
@@ -111,35 +155,33 @@
      this.handleQuery();
    },
    handleTime(date){
      if(date=='YEAR'){
        this.dateTypes= 'year',
          this.valueFormat='yyyy'
      }else if(date=='MONTH'){
        this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      }else{
        this.dateTypes= 'date',
          this.valueFormat='yyyy-MM-dd'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
    },
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dataTime = year + '-' + month + '-' + (date-1)
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month + "-" + (date - 1);
    },
    numFilter(value) {// æˆªå–当前数据到小数点后的几位
      let realVal = '' ;
      if (!isNaN(value) && value !== '' && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = '--'
        realVal = "--";
      }
      return realVal
    },
      return realVal;
    }
  }
};
</script>
@@ -187,25 +229,25 @@
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }
</style>

 energy_management_ui/src/views/energyBalance/energyLoss/index.vue

@@ -1,34 +1,48 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½æºæŸå¤±åˆ†æž
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能源损失分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div>
          <energyLoss ref="energyLoss" style="padding:10px"></energyLoss>
        </el-main>
      </el-container>
    </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import energyLoss from "./energyLoss";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
    components: { ModelNode,energyLoss},
  components: { ModelNode, energyLoss, ShrinkCol },
  mixins: [mixins],
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -36,21 +50,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.energyLoss.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyBalance/energyPic/energyPic.vue

@@ -2,17 +2,32 @@
  <div class="app-container" style="padding:0">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{moNode?moNode.label:''}}--能流分析</span>
        <span>{{ moNode ? moNode.label : "" }}--能流分析</span>
      </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form">
      <el-date-picker clearable size="small" style="width: 200px"
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="query-form"
      >
        <el-date-picker
          clearable
          size="small"
          style="width: 200px"
                      v-model="queryParams.dataTime"
                      :type="dateTypes"
                      :value-format="valueFormat"
                      placeholder="选择日期">
          placeholder="选择日期"
        >
      </el-date-picker>
      <el-form-item label="小时" prop="selectHour">
        <el-select v-model="queryParams.selectHour" placeholder="请选择小时" clearable size="small">
          <el-select
            v-model="queryParams.selectHour"
            placeholder="请选择小时"
            clearable
            size="small"
          >
          <el-option
            v-for="dict in selectHourOptions"
            :key="dict.dictValue"
@@ -22,15 +37,31 @@
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
      </el-form-item>
    </el-form>
      <div>
      <el-table :data="energyPicList" v-loading="loading" border style="width: 100%; margin-top: 20px">
        <el-table-column label="单位名称" align="center" prop="modename" min-width="200px"/>
        <el-table
          :data="energyPicList"
          v-loading="loading"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            label="单位名称"
            align="center"
            prop="modename"
            min-width="200px"
          />
        <el-table-column label="产出" align="center" prop="a1"/>
        <el-table-column label="消耗" align="center" prop="a2"/>
        <el-table-column label="外供" align="center" prop="a3"/>
          <!-- <el-table-column label="外供" align="center" prop="a3"/> -->
        <el-table-column label="损耗" align="center" prop="a4"/>
      </el-table>
  </div>
@@ -46,15 +77,15 @@
</template>

<script>
  import {selectEnergyPicList} from "@/api/energyBalance/energyPic"
import { selectEnergyPicList } from "@/api/energyBalance/energyPic";

  export default {
    name: 'energyIndex',
  name: "energyIndex",

    data() {
      return {
        timeArr:[],
        currentNode: '',
      currentNode: "",
        deviceCategory:undefined,
        // é®ç½©å±‚
        loading: false,
@@ -77,29 +108,30 @@
        // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
        open: false,
        selectHour:"01",
        selectHourOptions:[{"dictLabel":"01","dictValue":"01","dictType":"selecthour"},
          {"dictLabel":"02","dictValue":"02","dictType":"selecthour"},
          {"dictLabel":"03","dictValue":"03","dictType":"selecthour"},
          {"dictLabel":"04","dictValue":"04","dictType":"selecthour"},
          {"dictLabel":"05","dictValue":"05","dictType":"selecthour"},
          {"dictLabel":"06","dictValue":"06","dictType":"selecthour"},
          {"dictLabel":"07","dictValue":"07","dictType":"selecthour"},
          {"dictLabel":"08","dictValue":"08","dictType":"selecthour"},
          {"dictLabel":"09","dictValue":"09","dictType":"selecthour"},
          {"dictLabel":"10","dictValue":"10","dictType":"selecthour"},
          {"dictLabel":"11","dictValue":"11","dictType":"selecthour"},
          {"dictLabel":"12","dictValue":"12","dictType":"selecthour"},
          {"dictLabel":"13","dictValue":"13","dictType":"selecthour"},
          {"dictLabel":"14","dictValue":"14","dictType":"selecthour"},
          {"dictLabel":"15","dictValue":"15","dictType":"selecthour"},
          {"dictLabel":"16","dictValue":"16","dictType":"selecthour"},
          {"dictLabel":"17","dictValue":"17","dictType":"selecthour"},
          {"dictLabel":"18","dictValue":"18","dictType":"selecthour"},
          {"dictLabel":"19","dictValue":"19","dictType":"selecthour"},
          {"dictLabel":"20","dictValue":"20","dictType":"selecthour"},
          {"dictLabel":"21","dictValue":"21","dictType":"selecthour"},
          {"dictLabel":"22","dictValue":"22","dictType":"selecthour"},
          {"dictLabel":"23","dictValue":"23","dictType":"selecthour"}
      selectHourOptions: [
        { dictLabel: "01", dictValue: "01", dictType: "selecthour" },
        { dictLabel: "02", dictValue: "02", dictType: "selecthour" },
        { dictLabel: "03", dictValue: "03", dictType: "selecthour" },
        { dictLabel: "04", dictValue: "04", dictType: "selecthour" },
        { dictLabel: "05", dictValue: "05", dictType: "selecthour" },
        { dictLabel: "06", dictValue: "06", dictType: "selecthour" },
        { dictLabel: "07", dictValue: "07", dictType: "selecthour" },
        { dictLabel: "08", dictValue: "08", dictType: "selecthour" },
        { dictLabel: "09", dictValue: "09", dictType: "selecthour" },
        { dictLabel: "10", dictValue: "10", dictType: "selecthour" },
        { dictLabel: "11", dictValue: "11", dictType: "selecthour" },
        { dictLabel: "12", dictValue: "12", dictType: "selecthour" },
        { dictLabel: "13", dictValue: "13", dictType: "selecthour" },
        { dictLabel: "14", dictValue: "14", dictType: "selecthour" },
        { dictLabel: "15", dictValue: "15", dictType: "selecthour" },
        { dictLabel: "16", dictValue: "16", dictType: "selecthour" },
        { dictLabel: "17", dictValue: "17", dictType: "selecthour" },
        { dictLabel: "18", dictValue: "18", dictType: "selecthour" },
        { dictLabel: "19", dictValue: "19", dictType: "selecthour" },
        { dictLabel: "20", dictValue: "20", dictType: "selecthour" },
        { dictLabel: "21", dictValue: "21", dictType: "selecthour" },
        { dictLabel: "22", dictValue: "22", dictType: "selecthour" },
        { dictLabel: "23", dictValue: "23", dictType: "selecthour" }
        ],
        queryParams: {
          eierarchyFlag:"B",
@@ -112,16 +144,15 @@
          selectHour:"01",
          nodeid:""
        },
        dateTypes: 'date',
      dateTypes: "date",
        valueFormat:"yyyy-MM-dd",
        tableData: [],
        datas: [],
        // è¡¨å•å‚æ•°
        form: {},
        // è¡¨å•æ ¡éªŒ
        rules: {
        },
        moNode: undefined,
      rules: {},
      moNode: undefined
      };
    },
    created() {
@@ -139,13 +170,13 @@
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          day: nowDate.getDate(),
        }
        this.queryParams.dataTime = date.year + '-' + this.gshRq(date.month) + '-' +this.gshRq(date.day);
        day: nowDate.getDate()
      };
      this.queryParams.dataTime =
        date.year + "-" + this.gshRq(date.month) + "-" + this.gshRq(date.day);
      },
      gshRq(rq)
      {
          return ((rq*1)<10)?'0'+rq:rq;
    gshRq(rq) {
      return rq * 1 < 10 ? "0" + rq : rq;
      },
      /** æŸ¥è¯¢æŒ‡æ ‡ä¿¡æ¯åˆ—表 */
      getList() {
@@ -184,7 +215,7 @@
        this.endTime = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1;
        //显示时间
        this.timeArr = [this.startTime,this.endTime];
      },
    }
    }
  };
</script>

 energy_management_ui/src/views/energyBalance/energyPic/index.vue

@@ -1,57 +1,110 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能流分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
            :auth="false"
            :modelCode="modelCode"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div :style="bodyStyleRight">
          <energyPic ref="energyPic"></energyPic>
        </div>
      </el-col>
    </el-row>
    <!-- <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½æµåˆ†æž
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :auth="false" :modelCode="modelCode"></ModelNode>
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
            :auth="false"
            :modelCode="modelCode"
          ></ModelNode>
          <img
            src="~@/assets/image/rectangle.png"
            alt=""
            class="shrink-col-block"
            @click="toggleCollapse"
          />
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
          <energyPic ref="energyPic"></energyPic>
        </el-main>
      </el-container>
    </el-container>
    </el-container> -->
  </div>
</template>

<script>
  import energyPic from "./energyPic";
import ShrinkCol from "@/components/shrink/index.vue";
import mixins from "@/layout/mixin/getHeight";
  import ModelNode from "../../basicsetting/modelNode/modelNode";
  export default {
    components: {energyPic, ModelNode},
  components: { energyPic, ModelNode, ShrinkCol },
  mixins: [mixins],
    created() {
      this.modelCode=this.$route.query.modelCode;
      this.deviceCategory = this.$route.query.device_category;
    },
    data() {
      return {
        modelData: '',
      modelData: "",
        modelInfoOptions: [],
        modelCode:undefined,
        deviceCategory:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
      changeNode: function (node) {
        this.$refs.energyPic.modelNodeChange(node,this.deviceCategory);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    },
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
      }
    }
  };

 energy_management_ui/src/views/energyConsumptionAlarm/monitorAlarm/index.vue

@@ -1,4 +1,4 @@
<template>
<!-- <template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content">
@@ -16,14 +16,51 @@
      </el-container>
    </el-container>
  </div>
</template> -->
<template>
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能耗监测报警" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div>
          <MonitorAlarmSetting ref="MonitorAlarmSetting"></MonitorAlarmSetting>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MonitorAlarmSetting from "./monitorAlarmSetting";
import ModelNode from "../../basicsetting/modelNode/modelNode";
import {listModel} from "@/api/basicsetting/model";
import mixins from "@/layout/mixin/getHeight";

export default {
  mixins: [mixins],
  components: {MonitorAlarmSetting, ModelNode},
  created() {
    listModel({isShow: 1}).then(response => {
@@ -36,16 +73,24 @@
  },
  data() {
    return {
      modelData: '',
      bodyStyleRight: {},
      modelData: "",
      modelInfoOptions: []
    }
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    changeNode: function (node) {
      this.$refs.MonitorAlarmSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
      this.$router.push("/model");
    },
    changeModel: function (item) {
      this.$refs.modelNode.getList(item);

 energy_management_ui/src/views/energyExamine/assessmentIndex/addIndexTable.vue

@@ -1,6 +1,13 @@
<template>
  <!-- å¯¼å…¥è¡¨ -->
  <el-dialog :title="title" :visible.sync="open"  :destroy-on-close="true" :append-to-body="true" width="800px" top="5vh">
  <el-dialog
    :title="title"
    :visible.sync="open"
    :destroy-on-close="true"
    :append-to-body="true"
    width="800px"
    top="5vh"
  >
    <!--
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item>
@@ -8,9 +15,13 @@
      </el-form-item>
    </el-form>-->


    <el-row>
      <el-table v-loading="loading" :data="impIndexList" @selection-change="handleSelectionChange" stripe max-height="350">
      <el-table
        v-loading="loading"
        :data="impIndexList"
        @selection-change="handleSelectionChange"
        max-height="350"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="指标编码" align="center" prop="code"  />
        <el-table-column label="指标名称" align="center" prop="name"  />
@@ -30,7 +41,7 @@
  data() {
    return {
      //模型节点
      modeNode:'',
      modeNode: "",
      // é®ç½©å±‚
      loading: true,
      // é€‰ä¸­æ•°ç»„
@@ -54,13 +65,12 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      },
      }
    };
  },
  created() {
  },
  created() {},
  methods: {
    // æ˜¾ç¤ºå¼¹æ¡†
    show(modeNode) {
@@ -75,7 +85,7 @@
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      };
      //清空上传组件的文件列表
@@ -90,18 +100,16 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.indexId)
      this.ids = selection.map(item => item.indexId);
    },
    /** ä¿å­˜æŒ‰é’®æ“ä½œ */
    handsave()
    {
    handsave() {
      if(this.ids==null || this.ids.length<=0){
        this.msgSuccess("请选择指标!");
        return;
      }
      addIndex(this.ids,this.modeNode.id).then(response => {
        if(response!=null && response.code=="200")
        {
        if (response != null && response.code == "200") {
          this.msgSuccess(response.msg);
          this.open=false;
        }else{
@@ -110,12 +118,9 @@
      });
    },
    /** å…³é—­æŒ‰é’®æ“ä½œ */
    handclose()
    {
    handclose() {
      this.open=false;
    },

    }
  }
};

</script>

 energy_management_ui/src/views/energyExamine/assessmentIndex/index.vue

@@ -1,26 +1,41 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            è€ƒæ ¸æ ‡å‡†ç®¡ç†
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="考核标准管理" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"
                     :auth="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
          <assessmentIndex ref="assessmentIndex" style="padding:10px"></assessmentIndex>
        </el-main>
      </el-container>
    </el-container>
            :auth="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <assessmentIndex
            ref="assessmentIndex"
            style="padding:10px"
          ></assessmentIndex>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

@@ -28,33 +43,43 @@
  // import assessmentIndex from "./assessmentIndex";
  import assessmentIndex from "./create_index";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
    components: { ModelNode,assessmentIndex},
  mixins: [mixins],
  components: { ModelNode, assessmentIndex, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
    data() {
      return {
        modelData: '',
      modelData: "",
        modelInfoOptions: [],
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.assessmentIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyExamine/assessmentResults/assessmentResults.vue

@@ -1,6 +1,11 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-radio v-model="radio" label="1">当前单元</el-radio>
        <el-radio v-model="radio" label="2">包含下一级</el-radio>
@@ -10,7 +15,8 @@
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="考核依据">
@@ -22,16 +28,21 @@
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
          >搜索</el-button
        >
        <el-button icon="el-icon-download" size="mini">导出</el-button>
      </el-form-item>
    </el-form>
    <div style="margin: 20px;text-align: center;font-weight: 600;">
    <div style="margin: 20px;text-align: center;font-weight: 600;color:#fff">
      <span style="float: left;">统计范围：全厂</span>
      <span>能效考核结果</span>
      <span style="float: right;">统计区间：{{times}}</span>
    </div>
    <el-table :data="energyEenchmarkingList" @selection-change="handleSelectionChange">
    <el-table
      :data="energyEenchmarkingList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="日期" align="center" prop="time"/>
      <el-table-column label="电耗量" align="center">
        <el-table-column label="实际量" align="center" prop="dsjl"/>
@@ -75,89 +86,91 @@
      multiple: true,
      // æ€»æ¡æ•°
      total: 0,
      radio: '1',
      checkList: ['能耗计划'],
      radio: "1",
      checkList: ["能耗计划"],
      // energy_benchmarking表格数据
      energyEenchmarkingList:[{
        "time": "2019-02-01",
        "dsjl":"-",
        "dnhjh":"-",
        "tsjl":"244.42",
        "tnhjh":"-",
        "ssjl":"343.42",
        "snhjh":"-",
        "jsjl":"196.12",
        "jnhjh":"-",
        "ysjl":"358.44",
        "ynhjh":"-",
        "zsjl":"1716.39",
        "znhjh":"-",
        "createBy": null,
        "createTime": "",
        "updateBy": null,
        "updateTime": null,
        "remark": "",
      energyEenchmarkingList: [
        {
          time: "2019-02-01",
          dsjl: "-",
          dnhjh: "-",
          tsjl: "244.42",
          tnhjh: "-",
          ssjl: "343.42",
          snhjh: "-",
          jsjl: "196.12",
          jnhjh: "-",
          ysjl: "358.44",
          ynhjh: "-",
          zsjl: "1716.39",
          znhjh: "-",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
      },
      {
        "time": "2019-02-02",
        "dsjl":"-",
        "dnhjh":"-",
        "tsjl":"392.13",
        "tnhjh":"-",
        "ssjl":"382.95",
        "snhjh":"-",
        "jsjl":"164.3",
        "jnhjh":"-",
        "ysjl":"278.17",
        "ynhjh":"-",
        "zsjl":"1813.69",
        "znhjh":"-",
        "createBy": null,
        "createTime": "",
        "updateBy": null,
        "updateTime": null,
        "remark": "",
          time: "2019-02-02",
          dsjl: "-",
          dnhjh: "-",
          tsjl: "392.13",
          tnhjh: "-",
          ssjl: "382.95",
          snhjh: "-",
          jsjl: "164.3",
          jnhjh: "-",
          ysjl: "278.17",
          ynhjh: "-",
          zsjl: "1813.69",
          znhjh: "-",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
      },
      {
        "time": "2019-02-03",
        "dsjl":"-",
        "dnhjh":"-",
        "tsjl":"213.91",
        "tnhjh":"-",
        "ssjl":"263.23",
        "snhjh":"-",
        "jsjl":"308.81",
        "jnhjh":"-",
        "ysjl":"327.49",
        "ynhjh":"-",
        "zsjl":"1698.82",
        "znhjh":"-",
        "createBy": null,
        "createTime": "",
        "updateBy": null,
        "updateTime": null,
        "remark": "",
          time: "2019-02-03",
          dsjl: "-",
          dnhjh: "-",
          tsjl: "213.91",
          tnhjh: "-",
          ssjl: "263.23",
          snhjh: "-",
          jsjl: "308.81",
          jnhjh: "-",
          ysjl: "327.49",
          ynhjh: "-",
          zsjl: "1698.82",
          znhjh: "-",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
      },
      {
        "time": "2019-02-04",
        "dsjl":"-",
        "dnhjh":"-",
        "tsjl":"355.44",
        "tnhjh":"-",
        "ssjl":"260.75",
        "snhjh":"-",
        "jsjl":"232.01",
        "jnhjh":"-",
        "ysjl":"253.9",
        "ynhjh":"-",
        "zsjl":"1486.82",
        "znhjh":"-",
        "createBy": null,
        "createTime": "",
        "updateBy": null,
        "updateTime": null,
        "remark": "",
      }],
          time: "2019-02-04",
          dsjl: "-",
          dnhjh: "-",
          tsjl: "355.44",
          tnhjh: "-",
          ssjl: "260.75",
          snhjh: "-",
          jsjl: "232.01",
          jnhjh: "-",
          ysjl: "253.9",
          ynhjh: "-",
          zsjl: "1486.82",
          znhjh: "-",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
        }
      ],
      // æŸ¥è¯¢å‚æ•°
      queryParams: {
        pageNum: 1,
@@ -169,13 +182,12 @@
        type: undefined,
        value: undefined,
        termValidity: undefined,
        modelNode:"",
        modelNode: ""
      },
      times:"",
      times: ""
    };
  },
  created() {
  },
  created() {},
  methods: {
    // å–消按钮
    cancel() {
@@ -208,19 +220,19 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.times = year + '-' + month + '-' + date
    },
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.times = year + "-" + month + "-" + date;
    }
  }
};
</script>

 energy_management_ui/src/views/energyExamine/assessmentResults/index.vue

@@ -1,26 +1,41 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½æ•ˆè€ƒæ ¸ç»“æžœ
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能效考核结果" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"
                     :auth="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
          <assessmentResults ref="assessmentResults" style="padding:10px"></assessmentResults>
        </el-main>
      </el-container>
    </el-container>
            :auth="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <assessmentResults
            ref="assessmentResults"
            style="padding:10px"
          ></assessmentResults>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

@@ -28,7 +43,10 @@
  import assessmentResults from "./assessmentResults";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
  mixins: [mixins],
    components: { ModelNode,assessmentResults},
    created() {
      this.modelCode=this.$route.query.modelCode;
@@ -37,21 +55,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        //this.$refs.EnergyActual.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyMonitoring/e-gasMonitoring/index.vue

@@ -9,9 +9,7 @@
          <div slot="header" class="clearfix" style="height:32px">
            å®žæ—¶æ•°æ®ç»„态图
          </div>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>

          <el-tree
@@ -20,7 +18,8 @@
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree">
            ref="tree"
          >
          </el-tree>
        </el-card>
      </el-aside>
@@ -32,7 +31,10 @@
<!--            <el-tab-pane label="趋势图" name="third">角色管理</el-tab-pane>-->
<!--            <el-tab-pane label="报警记录" name="fourth">定时任务补偿</el-tab-pane>-->
<!--          </el-tabs>-->
          <svg-icon v-bind:iconClass="imgShow.realName" className='icon'></svg-icon>
          <svg-icon
            v-bind:iconClass="imgShow.realName"
            className="icon"
          ></svg-icon>
        </el-main>
<!--        <el-main style="padding:0">-->
<!--          <realTimeSetting ref="realTimeSetting"></realTimeSetting>-->
@@ -50,9 +52,7 @@
  }
</style>
<script>
    import {
        listEquipmentfile,
    } from "@/api/basicSetup/equipmentfile";
import { listEquipmentfile } from "@/api/basicSetup/equipmentfile";
    export default {
        watch: {
            filterText(val) {
@@ -65,7 +65,7 @@
            var realName = "2020-03-12-275a44966506b783f033058f9e0e3472";
            return {
                //右边菜单栏
                activeName: '实时监测',
      activeName: "实时监测",
                // é®ç½©å±‚
                loading: true,
                // é€‰ä¸­æ•°ç»„
@@ -77,15 +77,11 @@
                // æ€»æ¡æ•°
                total: 0,
                //
                imgShow:[
                    realName=""
                ],
      imgShow: [(realName = "")],
                // ç»„态图表格数据
                equipmentfileList: [],
                //测点表格数据
                equipmentfilecdList: [
                    choiceIndex = ""
                ],
      equipmentfilecdList: [(choiceIndex = "")],
                // å¼¹å‡ºå±‚标题
                title: "",
                // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
@@ -119,26 +115,32 @@
                rules: {
                    filename: [
                        {required: true, message: "文件名称不能为空", trigger: "blur"}
                    ], fileno: [
                        {required: true, message: "文件编号不能为空", trigger: "blur"}
                    ],
        fileno: [
          { required: true, message: "文件编号不能为空", trigger: "blur" }
        ]
                },
                filterText: '',
                svgData:[{
      filterText: "",
      svgData: [
        {
                    id:1,
                    label:"生产企业",
                    children:[{
          children: [
            {
                        id:2,
                        label:"水系统",
                    },{
                        id:3,
                        label: "电系统",
                    }],
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
              label: "水系统"
                },
            {
              id: 3,
              label: "电系统"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
            };
        },
        created() {
@@ -152,10 +154,10 @@
            },
            //切换组态图查看
            updateImg(row){
                var pos = row.filepath.lastIndexOf('/');
      var pos = row.filepath.lastIndexOf("/");
                var str = row.filepath.substr(pos+1);
                this.imgShow.realName = str.substring(0,str.length-4);
                console.log(this.imgShow.realName)
      console.log(this.imgShow.realName);
            },
            //通过关键字进行过滤组态图
            filterNode(value, data) {
@@ -199,7 +201,7 @@
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
    }
        }
    };
</script>

 energy_management_ui/src/views/energyPlan/actualOutput/index.vue

@@ -1,34 +1,49 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            è®¡åˆ’产量
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="实际产量" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <EnergyActual ref="EnergyActual" style="padding:10px"></EnergyActual>
        </el-main>
      </el-container>
    </el-container>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import EnergyActual from "./EnergyActual";
  import ModelNode from "../../basicsetting/modelNode/modelNode";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

  export default {
    components: { ModelNode,EnergyActual},
  mixins: [mixins],
  components: { ModelNode, EnergyActual, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -36,22 +51,30 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        console.log(node);
        //this.$refs.EnergyActual.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyPlan/energyEstablishment/index.vue

@@ -1,34 +1,51 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½æºæ¶ˆè€—计划
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能源消耗计划" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
          <energyEstablishment ref="energyEstablishment" style="padding:10px"></energyEstablishment>
        </el-main>
      </el-container>
    </el-container>
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <energyEstablishment
            ref="energyEstablishment"
            style="padding:10px"
          ></energyEstablishment>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import energyEstablishment from "./energyEstablishment";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
    components: { ModelNode,energyEstablishment},
  components: { ModelNode, energyEstablishment, ShrinkCol },
  mixins: [mixins],
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -36,21 +53,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.energyEstablishment.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyPlan/energyForecast/LineChart.vue

@@ -3,138 +3,160 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
  const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(this.$el, "macarons");

        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          title: {
            x:'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          legend: {
            data:['焦台','粉碎机'],
            left: '60%',
          },
          xAxis: [{
            type: 'category',
            data: ['12日','13日','14日','15日','16日','17日','18日','19日','20日'],
            axisPointer: {
              type: 'shadow'
          data: ["焦台", "粉碎机"],
          left: "60%",
          textStyle: {
            color: "#fff"
            }
          }],
          yAxis: [{
            name: '',
            type: 'value',
            nameTextStyle:{
              color:"#333",
            },
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false
            },
          },{
            name: '',
            type: 'value',
            nameTextStyle:{
              color:"#333",
            },
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false
            },
        xAxis: [
          {
            type: "category",
            data: [
              "12日",
              "13日",
              "14日",
              "15日",
              "16日",
              "17日",
              "18日",
              "19日",
              "20日"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
          ],
          series:[{
            type: 'bar',
        yAxis: [
          {
            name: "",
            type: "value",
            nameTextStyle: {
              color: "#333"
            },
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              show: false
            }
          },
          {
            name: "",
            type: "value",
            nameTextStyle: {
              color: "#333"
            },
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            type: "bar",
            data: [289,430,350,375,374,204,300,194,184],
            smooth: true,//线条平滑
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
            type: 'line',
            animationEasing: "quadraticOut"
          },
          {
            type: "line",
            yAxisIndex: 1,
            data: [289,430,350,375,374,204,300,194,184],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
            animationEasing: "quadraticOut"
          }
        ]
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/energyPlan/energyForecast/energyForecast.vue

@@ -1,6 +1,11 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-radio v-model="radio" label="1">按日</el-radio>
        <el-radio v-model="radio" label="2">按月</el-radio>
@@ -11,7 +16,8 @@
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="values" placeholder="请选择">
@@ -19,23 +25,29 @@
            v-for="item in optionList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini">预测</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
          >预测</el-button
        >
        <el-button icon="el-icon-refresh" size="mini">导出</el-button>
      </el-form-item>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-row style="padding:16px 16px 0;margin-bottom:32px;">
      <line-chart/>
    </el-row>
    <div>
      <span>统计范围：全厂</span>
      <span style="float: right;">统计区间：{{times}}</span>
    </div>
    <el-table :data="energyEenchmarkingList" @selection-change="handleSelectionChange">
    <el-table
      :data="energyEenchmarkingList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="date" align="center"  label="日期"  width="150"/>
      <el-table-column label="计划产量" align="center">
        <el-table-column label="产品种类" align="center" prop="cpname"/>
@@ -52,7 +64,7 @@
</template>

<script>
  import LineChart from './LineChart'
import LineChart from "./LineChart";
export default {
  components: {
    LineChart
@@ -69,69 +81,78 @@
      multiple: true,
      // æ€»æ¡æ•°
      total: 0,
      radio: '1',
      value: '',
      values: '',
      options: [{
        value: '选项1',
        label: '未来三天'
      }, {
        value: '选项2',
        label: '未来五天'
      }, {
        value: '选项3',
        label: '未来七天'
      }],
      optionList: [{
        value: '选项1',
        label: '电耗'
      }, {
        value: '选项2',
        label: '水耗'
      }],
      radio: "1",
      value: "",
      values: "",
      options: [
        {
          value: "选项1",
          label: "未来三天"
        },
        {
          value: "选项2",
          label: "未来五天"
        },
        {
          value: "选项3",
          label: "未来七天"
        }
      ],
      optionList: [
        {
          value: "选项1",
          label: "电耗"
        },
        {
          value: "选项2",
          label: "水耗"
        }
      ],
      // energy_benchmarking表格数据
      energyEenchmarkingList: [{
        "date":"2020-11-20",
        "cpname": "煤气",
        "jldw":"立方米",
        "jhcl":"12212121",
        "dian":"99",
        "shui":"20",
        "zq":"60",
        "createBy": null,
        "createTime": "",
        "updateBy": null,
        "updateTime": null,
        "remark": "",
      energyEenchmarkingList: [
        {
          date: "2020-11-20",
          cpname: "煤气",
          jldw: "立方米",
          jhcl: "12212121",
          dian: "99",
          shui: "20",
          zq: "60",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
      },
        {
          "date":"2020-11-20",
          "cpname": "粗苯",
          "jldw":"吨",
          "jhcl":"22212",
          "dian":"79",
          "shui":"26",
          "zq":"50",
          "createBy": null,
          "createTime": "",
          "updateBy": null,
          "updateTime": null,
          "remark": "",
          date: "2020-11-20",
          cpname: "粗苯",
          jldw: "吨",
          jhcl: "22212",
          dian: "79",
          shui: "26",
          zq: "50",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
        },
        {
          "date":"2020-11-20",
          "cpname": "焦油",
          "jldw":"吨",
          "jhcl":"1211212",
          "dian":"109",
          "shui":"30",
          "zq":"85",
          "createBy": null,
          "createTime": "",
          "updateBy": null,
          "updateTime": null,
          "remark": "",
        }],
          date: "2020-11-20",
          cpname: "焦油",
          jldw: "吨",
          jhcl: "1211212",
          dian: "109",
          shui: "30",
          zq: "85",
          createBy: null,
          createTime: "",
          updateBy: null,
          updateTime: null,
          remark: ""
        }
      ],
      // å¼¹å‡ºå±‚标题
      // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
      open: false,
@@ -146,21 +167,23 @@
        type: undefined,
        value: undefined,
        termValidity: undefined,
        modelNode:"",
        modelNode: ""
      },
      times:"",
      times: ""
    };
  },
  created() {this.getTime()},
  created() {
    this.getTime();
  },
  methods: {
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.times = year + '-' + month + '-' + date
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.times = year + "-" + month + "-" + date;
    },
    // å–消按钮
    cancel() {
@@ -193,10 +216,10 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    }
  }
};
</script>
@@ -244,25 +267,25 @@
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    opacity: 1;
    }
  }
</style>

 energy_management_ui/src/views/energyPlan/energyForecast/index.vue

@@ -1,35 +1,53 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½æºé¢„测
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能源预测" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"
                     :auth="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
          <energyForecast ref="energyForecast" style="padding:10px"></energyForecast>
        </el-main>
      </el-container>
    </el-container>
            :auth="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <energyForecast
            ref="energyForecast"
            style="padding:10px"
          ></energyForecast>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import energyForecast from "./energyForecast";
  import ModelNode from "../../basicsetting/modelNode/modelNode";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

  export default {
    components: { ModelNode,energyForecast},
  components: { ModelNode, energyForecast, ShrinkCol },
  mixins: [mixins],
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -37,21 +55,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        //this.$refs.EnergyActual.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyPlan/energyMonitoring/LineChart.vue

@@ -3,128 +3,137 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  import resize from '../../dashboard/mixins/resize'
  const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "../../dashboard/mixins/resize";
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData,actualData,expecteData} = {}) {
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          title: {
            x: 'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
            color: "#fff"
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          /*legend: {
            data:['',''],
            left: '60%',
          },*/
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisPointer: {
              type: 'shadow'
              type: "shadow"
            }
          }],
          yAxis: [{
          }
        ],
        yAxis: [
          {
            //name: '综合能耗',
            type: 'value',
            type: "value",
            nameTextStyle: {
              color: "#333",
              color: "#333"
            },
            axisLabel: {
              formatter: '{value}'
              formatter: "{value}"
            },
            axisTick: {
              show: false
            },
          }],
          series: [{
            }
          }
        ],
        series: [
          {
            //name:"综合能耗",
            type: 'bar',
            type: "bar",
            data: expectedData,
            //stack: 'vistors',
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
            animationEasing: "quadraticOut"
          },
          {
            //name:"能源占比",
            type: 'bar',
            type: "bar",
            data: expecteData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
            animationEasing: "quadraticOut"
          }
        ]
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/energyPlan/energyMonitoring/energyMonitoring.vue

@@ -1,31 +1,62 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="报表类型">
        <el-radio-group v-model="queryParams.timeType">
          <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
          <el-radio
            v-for="dict in dateTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            @change="handleTime(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="统计区间">
        <el-date-picker clearable size="small" style="width: 200px"
        <el-date-picker
          clearable
          size="small"
          style="width: 200px"
                        v-model="queryParams.dataTime"
                        :type="dateTypes"
                        :value-format="valueFormat"
                        placeholder="选择日期">
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-row style="padding:16px 16px 0;margin-bottom:32px;">
      <line-chart  ref="LineChart" :chart-data="lineChartData"/>
    </el-row>
    <el-table :data="energyEenchmarkingList" @selection-change="handleSelectionChange">
      <el-table-column prop="label" align="center"  label="用能单元">{{label}}</el-table-column>
    <el-table
      :data="energyEenchmarkingList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="label" align="center" label="用能单元">{{
        label
      }}</el-table-column>
      <el-table-column label="产品产量" align="center">
        <el-table-column label="产品种类" align="center" prop="productname"/>
        <el-table-column label="计量单位" align="center" prop="muid" :formatter="unitIdFormat"/>
        <el-table-column
          label="计量单位"
          align="center"
          prop="muid"
          :formatter="unitIdFormat"
        />
        <el-table-column label="计划值" align="center" prop="planValue" />
        <el-table-column label="实际值" align="center" prop="actualValue" />
      </el-table-column>
@@ -51,7 +82,7 @@

<script>
  import { listEnergyMonitoring } from "@/api/plannedOutput/energyMonitoring";
  import LineChart from './LineChart'
import LineChart from "./LineChart";
  export default {
  components: {LineChart},
  data() {
@@ -60,7 +91,7 @@
      //loading: true,
      // é€‰ä¸­æ•°ç»„
      ids: [],
      radio: '1',
      radio: "1",
      // éžå•ä¸ªç¦ç”¨
      single: true,
      // éžå¤šä¸ªç¦ç”¨
@@ -76,12 +107,12 @@
        pageNum: 1,
        pageSize: 10,
        dataTime: undefined,
        timeType:"DAY",
        timeType: "DAY"
      },
      dateTypes: 'date',
      dateTypes: "date",
      valueFormat:"yyyy-MM-dd",
      label:"",
      lineChartData:{expectedData: [],actualData: [],expecteData:[]},
      lineChartData: { expectedData: [], actualData: [], expecteData: [] }
    };
  },
  created() {
@@ -91,14 +122,16 @@
    });
    this.getDicts("energyPlan").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
  },
  methods: {
    modelNodeChange(modelNode) {
      this.queryParams.indexCode=modelNode.id;
      this.label=modelNode.label
      this.getList(this.queryParams)
      this.label = modelNode.label;
      this.getList(this.queryParams);
    },
    getList() {
      this.loading = true;
@@ -111,7 +144,7 @@
          actualData.push(item.productname);
          expectedData.push(item.planValue);
          expecteData.push(item.actualValue);
        })
        });
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.expecteData=expecteData;
@@ -153,31 +186,28 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleTime(date){
      if(date=='YEAR'){
        this.dateTypes= 'year',
        this.valueFormat='yyyy'
      }else if(date=='MONTH'){
        this.dateTypes= 'month',
        this.valueFormat='yyyy-MM'
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      }else{
        this.dateTypes= 'date',
        this.valueFormat='yyyy-MM-dd'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
    },
    getTime(){
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dataTime = year + '-' + month + '-' + date
    },
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month + "-" + date;
    }
  }
};
</script>

 energy_management_ui/src/views/energyPlan/energyMonitoring/index.vue

@@ -1,25 +1,40 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            è®¡åˆ’于实绩对比分析
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="计划于实际对比分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
         <energyMonitoring ref="energyMonitoring" style="padding:10px"></energyMonitoring>
        </el-main>
      </el-container>
    </el-container>
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <energyMonitoring
            ref="energyMonitoring"
            style="padding:10px"
          ></energyMonitoring>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

@@ -27,8 +42,11 @@
  import energyMonitoring from "./energyMonitoring";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
    components: { ModelNode,energyMonitoring},
  mixins: [mixins],
  components: { ModelNode, energyMonitoring, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -36,21 +54,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.energyMonitoring.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyPlan/plannedOutput/index.vue

@@ -1,34 +1,48 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            è®¡åˆ’产量
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode"
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="计划产量" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
                     :modelCode="modelCode"
                     :showOpt="false"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
            :showOpt="false"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <basic-container :bodyStyle="bodyStyleRight">
          <EnergyPlan ref="EnergyPlan" style="padding:10px"></EnergyPlan>
        </el-main>
      </el-container>
    </el-container>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import EnergyPlan from "./EnergyPlan";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
    components: { ModelNode,EnergyPlan},
  mixins: [mixins],
  components: { ModelNode, EnergyPlan, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -36,21 +50,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.EnergyPlan.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyPrice/index.vue

@@ -240,6 +240,7 @@
import ruleApi from "@/api/energyPrice/price";
import { getTimePeriod } from "@/utils/index";
import mixins from "@/layout/mixin/getHeight";
import moment from "moment";
export default {
  name: "energyPrice",
  mixins: [mixins],
@@ -460,7 +461,7 @@
            name: this.form.name,
            id: this.form.id,
            remark: this.form.remark,
            effectiveDate: this.form.effectiveDate,
            effectiveDate: moment(this.form.effectiveDate).format("yyyy-MM-DD"),
            sharpFee: this.priceTypeList[0].price, //尖时段
            peakFee: this.priceTypeList[1].price, //峰时段
            flatFee: this.priceTypeList[2].price, //平时段

 energy_management_ui/src/views/energyStatistics/energyConsumption/BarChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
const animationDuration = 6000;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    chartData: {
      type:Object,
      type: Object
      //required: true
    }
  },
@@ -31,32 +31,32 @@
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: [],
    }
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
     },
     setOptions({newVisitis,xAxis,actualData} = {}) {
       var series=[];
@@ -64,14 +64,13 @@
         newVisitis.forEach(rowData => {
           series.push({
               name: actualData,
               type: 'bar',
            type: "bar",
               data: newVisitis,
               smooth: true,//线条平滑
               stack: 'vistors',
            stack: "vistors",
               animationDuration: 2800,
               animationEasing: 'quadraticOut'
             },
           );
            animationEasing: "quadraticOut"
          });
         });
         /*for(var i=0;i<newVisitis.length;i++){
           series.push({
@@ -88,37 +87,45 @@
       }
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: '1%',
          right: '2%',
          bottom: '3%',
          left: "1%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data:actualData,
          left: '60%',
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: 'category',
        xAxis: [
          {
            type: "category",
          data: xAxis,
          axisTick: {
            alignWithLabel: true
          },
        }],
        yAxis: [{
          name: '吨标煤',
          type: 'value',
            }
          }
        ],
        yAxis: [
          {
            name: "吨标煤",
            type: "value",
          axisTick: {
            show: false
          },
        }],
        series:series,/*[{
            }
          }
        ],
        series: series /*[{
          name: '本期',
           type: 'bar',
          data: [
@@ -138,8 +145,8 @@
             animationDuration: 2800,
             animationEasing: 'quadraticOut'
         }]*/
      })
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyStatistics/energyConsumption/BarCharts.vue

@@ -3,27 +3,27 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
const animationDuration = 6000;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    chartData: {
      type:Object,
      type: Object
      //required: true
    }
  },
@@ -31,32 +31,32 @@
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: [],
    }
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
     },
     setOptions({newVisitis,xAxis,actualData} = {}) {
       var series=[];
@@ -66,52 +66,59 @@
           for(var j=0;j<aa.length;j++) {
             series.push({
                 name: actualData[i],
                 type: 'bar',
              type: "bar",
                 data: aa[j],
                 smooth: true,//线条平滑
                 //stack: 'vistors',
                 animationDuration: 2800,
                 animationEasing: 'quadraticOut'
               }
             );
              animationEasing: "quadraticOut"
            });
           }
         }
       }
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: '1%',
          right: '2%',
          bottom: '3%',
          left: "1%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data:actualData,
          left: '40%',
          left: "40%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: 'category',
        xAxis: [
          {
            type: "category",
          data: xAxis,
          axisTick: {
            alignWithLabel: true
          },
        }],
        yAxis: [{
          name: '万元',
          type: 'value',
            }
          }
        ],
        yAxis: [
          {
            name: "万元",
            type: "value",
          axisTick: {
            show: false
          },
        }],
            }
          }
        ],
        series: series
      })
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyStatistics/energyConsumption/PieChart.vue

@@ -3,27 +3,27 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    chartData: {
      type:Object,
      type: Object
      //required: true
    }
  },
@@ -31,69 +31,69 @@
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null
    }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({newVisitis,title,datas } = {}) {
      this.chart.setOption({
        title: {
          text: '能源消费结构构成',
          x:'left',
          y: 'top',
          text: "能源消费结构构成",
          x: "left",
          y: "top",
          textStyle: {
            color: "#333"
          },
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item',
          trigger: "item",
          formatter: title
        },
        grid: {
          top: 40,
          left: '2%',
          right: '2%',
          bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          // orient è®¾ç½®å¸ƒå±€æ–¹å¼ï¼Œé»˜è®¤æ°´å¹³å¸ƒå±€ï¼Œå¯é€‰å€¼ï¼š'horizontal'（水平） Â¦ 'vertical'（垂直）
          orient: 'vertical',
          orient: "vertical",
          // x è®¾ç½®æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œé»˜è®¤å…¨å›¾å±…中，可选值：'center' Â¦ 'left' Â¦ 'right' Â¦ {number}（x坐标，单位px）
          x: 'left',
          x: "left",
          // y è®¾ç½®åž‚直安放位置，默认全图顶端，可选值：'top' Â¦ 'bottom' Â¦ 'center' Â¦ {number}（y坐标，单位px）
          y: '10%',
          y: "10%",
          //left: 10,
          itemWidth: 24,   // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„宽
          itemHeight: 18,  // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„高
          textStyle: {
            color: '#666'  // å›¾ä¾‹æ–‡å­—颜色
            color: "#fff" // å›¾ä¾‹æ–‡å­—颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
         // itemGap: 30,
          backgroundColor: '#eee',  // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          backgroundColor: "#eee", // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          data: title,
          formatter:function(item){
            let target;
@@ -101,19 +101,22 @@
            for(let i=0;i<newVisitis.length;i++){
              if(datas[i].name===item){
                target=datas[i].value;
                unitId=datas[i].unitId
                unitId = datas[i].unitId;
              }
            }
            let arr=[item+ +target+ unitId]/*["{a|"+target+"}","{b|"+item+"}"]*/
            return arr/*.join("\n")*/
            let arr = [
              item + +target + unitId
            ]; /*["{a|"+target+"}","{b|"+item+"}"]*/
            return arr; /*.join("\n")*/
          }
          },
        },
        series: [{
        series: [
          {
            //name: '能源',
            type: 'pie',
             radius: '60%',  // è®¾ç½®é¥¼çŠ¶å›¾å¤§å°ï¼Œ100%时，最大直径=整个图形的min(宽，高)
            type: "pie",
            radius: "60%", // è®¾ç½®é¥¼çŠ¶å›¾å¤§å°ï¼Œ100%时，最大直径=整个图形的min(宽，高)
            //radius: ['30%', '60%'],  // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
            center: ['65%', '50%'],  // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
            center: ["65%", "50%"], // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
            data: newVisitis,//[{value:335, name:'洗精煤' },{value:310, name:'工业用电'}],/*selected: true*/
            // itemStyle è®¾ç½®é¥¼çŠ¶å›¾æ‰‡å½¢åŒºåŸŸæ ·å¼
            itemStyle: {
@@ -122,7 +125,7 @@
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(30, 144, 255，0.5)'
                shadowColor: "rgba(30, 144, 255，0.5)"
              }
            },
            // è®¾ç½®å€¼åŸŸçš„那指向线
@@ -134,17 +137,17 @@
            // è®¾ç½®å€¼åŸŸçš„标签
            label: {
              normal: {
                position: 'inner',  // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
                position: "inner", // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
                // formatter: '{a} {b} : {c}个 ({d}%)'   è®¾ç½®æ ‡ç­¾æ˜¾ç¤ºå†…容 ï¼Œé»˜è®¤æ˜¾ç¤º{b}
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                formatter: '{c}'
                formatter: "{c}"
              }
            }
          }
        ],
      })
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyStatistics/energyConsumption/consumption.vue

@@ -1,35 +1,77 @@
<template>
  <div class="dashboard-editor-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="日期">
        <el-radio-group v-model="queryParams.timeType">
          <el-radio style="margin-right: 10px" v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
          <el-radio
            style="margin-right: 10px"
            v-for="dict in dateTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            @change="handleTime(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
        <el-date-picker
          v-model="queryParams.beginTime"
          :type="dateTypes"
          :value-format="valueFormat"
          placeholder="开始日期">
          placeholder="开始日期"
        >
        </el-date-picker>
        åˆ°
        <el-date-picker
          v-model="queryParams.endTime"
          :type="dateTypes"
          :value-format="valueFormat"
          placeholder="结束日期">
          placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
      <el-form-item>
        <router-link :to="'/energyConsumption/listEnergyConsumption/'+queryParams.timeType+'/'+queryParams.beginTime+'/'+queryParams.endTime+'/'+queryParams.indexCode+'/'+queryParams.id+'/'+titleName"  class="link-type">
        <router-link
          :to="
            '/energyConsumption/listEnergyConsumption/' +
              queryParams.timeType +
              '/' +
              queryParams.beginTime +
              '/' +
              queryParams.endTime +
              '/' +
              queryParams.indexCode +
              '/' +
              queryParams.id +
              '/' +
              titleName
          "
          class="link-type"
        >
          <el-button size="mini">能源消费成本分时分析报表</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <h4 style="float: left; text-align:center;padding: 0;margin: 0px 0px 10px;width: 90%;">生产企业能源消耗成本分析</h4>
    <h4
      style="color:#fff;float: left; text-align:center;padding: 0;margin: 0px 0px 10px;width: 90%;"
    >
      ç”Ÿäº§ä¼ä¸šèƒ½æºæ¶ˆè€—成本分析
    </h4>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper" >
@@ -45,20 +87,48 @@
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper" >
          <span style="display: block;color: #333;">能源消费结构情况对比</span>
          <el-checkbox-group v-model="checkList1" style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"  @change="handleCheckedCitiesChange1"><!--clickMe -->
            <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全选</el-checkbox>
            <el-checkbox v-for="dict in list" :key="dict.code" :label="dict.code">{{dict.name}}</el-checkbox>
          <span style="display: block;color: #fff;">能源消费结构情况对比</span>
          <el-checkbox-group
            v-model="checkList1"
            style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"
            @change="handleCheckedCitiesChange1"
            ><!--clickMe -->
            <el-checkbox
              :indeterminate="isIndeterminate1"
              v-model="checkAll1"
              @change="handleCheckAllChange1"
              >全选</el-checkbox
            >
            <el-checkbox
              v-for="dict in list"
              :key="dict.code"
              :label="dict.code"
              >{{ dict.name }}</el-checkbox
            >
          </el-checkbox-group>
          <bar-chart ref="BarChart" :chart-data="lineChartData2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper">
          <span style="display: block;color: #333;">能源消费成本情况对比</span>
          <el-checkbox-group v-model="checkList2" style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"  @change="handleCheckedCitiesChange2"><!--clickMe -->
            <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
            <el-checkbox v-for="dict in list" :key="dict.code" :label="dict.code">{{dict.name}}</el-checkbox>
          <span style="display: block;color: #fff;">能源消费成本情况对比</span>
          <el-checkbox-group
            v-model="checkList2"
            style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"
            @change="handleCheckedCitiesChange2"
            ><!--clickMe -->
            <el-checkbox
              :indeterminate="isIndeterminate2"
              v-model="checkAll2"
              @change="handleCheckAllChange2"
              >全选</el-checkbox
            >
            <el-checkbox
              v-for="dict in list"
              :key="dict.code"
              :label="dict.code"
              >{{ dict.name }}</el-checkbox
            >
          </el-checkbox-group>
         <!-- <el-checkbox-group v-model="checkList2" style="padding: 10px;border: 1px solid #ddd;margin:10px 0;"  @change="clickMe(2)">
            <el-checkbox v-for="dict in list" :key="dict.code" :label="dict.code">{{dict.name}}</el-checkbox>
@@ -71,14 +141,18 @@
</template>

<script>
  import BarChart from './BarChart'
  import BarCharts from './BarCharts'
  import PieChart from './PieChart'
  import pieChartCost from './pieChartCost'
  import {getEnergyConstitute,getEnergyConsumption,getSettingIndex} from "@/api/energyStatistics/statistics";
import BarChart from "./BarChart";
import BarCharts from "./BarCharts";
import PieChart from "./PieChart";
import pieChartCost from "./pieChartCost";
import {
  getEnergyConstitute,
  getEnergyConsumption,
  getSettingIndex
} from "@/api/energyStatistics/statistics";
  export default {
    name: 'consumption',
    name: 'Index',
  name: "consumption",
  name: "Index",
    components: {BarChart,BarCharts,PieChart,pieChartCost},
    props: ["modelCode"],
    data() {
@@ -96,11 +170,11 @@
          beginTime: undefined,
          endTime: undefined,
          dataTime: undefined,
          timeType:'MONTH',
        timeType: "MONTH",
          indexId: undefined,
          procedure: undefined,
          indexCode: "",
          id: undefined,
        id: undefined
        },
        list:[],
        arraylist1:[],
@@ -111,50 +185,65 @@
        xAxisListXFCB:[],
        xAxisListZBL:[],
        lineChartData:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData1:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData2:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData3:{
          newVisitis:null,
        newVisitis: null
        },
        lineChartData4:{
          newVisitis:null,
        newVisitis: null
        },
        //dateTypes: 'monthrange',//时间范围
        dateTypes: 'month',
        valueFormat:'yyyy-MM',
      dateTypes: "month",
      valueFormat: "yyyy-MM",
        title:"",
        titleName: "",
        checkAll1: false,
        checkAll2: false,
        isIndeterminate1: true,
        isIndeterminate2: true,
      }
      isIndeterminate2: true
    };
    },
    watch: {
      modelCode: {
        deep: true,
        handler(val) {
          this.getList(val)
        this.getList(val);
        }
      },
    }
    },
    created() {
      //this.getList();
      this.getDicts("timeType").then(response => {
        this.dateTypeOptions = response.data;
        this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
      });
      this.getConfigKey("energyStatistics.energyStatisticConsum").then(response => {
    this.getConfigKey("energyStatistics.energyStatisticConsum").then(
      response => {
        this.skinName=response.msg;
      });
      let endTtime=(new Date().getFullYear()) +'-' +((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):"0"+(new Date().getMonth() + 1));
      let starTtime= (new Date().getFullYear()-1)+'-' +((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):"0"+(new Date().getMonth() + 1));
      }
    );
    let endTtime =
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1 > 9
        ? new Date().getMonth() + 1
        : "0" + (new Date().getMonth() + 1));
    let starTtime =
      new Date().getFullYear() -
      1 +
      "-" +
      (new Date().getMonth() + 1 > 9
        ? new Date().getMonth() + 1
        : "0" + (new Date().getMonth() + 1));
      this.queryParams.beginTime=starTtime;
      this.queryParams.endTime=endTtime;
    },
@@ -174,10 +263,17 @@
        let title=[];
        for (let i=0; i<this.arraylist1.length;i++){
          title.push(this.arraylist1[i].indexName);
          unitId.push({"name":this.arraylist1[i].indexName,"value":this.numFilter(this.arraylist1[i].value),"unitId":this.arraylist1[i].unitId});
        };
          unitId.push({
            name: this.arraylist1[i].indexName,
            value: this.numFilter(this.arraylist1[i].value),
            unitId: this.arraylist1[i].unitId
          });
        }
        for (let i=0; i<this.arraylist2.length;i++){
         source.push({"name":this.arraylist2[i].indexName,"value":this.numFilter(this.arraylist2[i].value)});
          source.push({
            name: this.arraylist2[i].indexName,
            value: this.numFilter(this.arraylist2[i].value)
          });
        }
        this.lineChartData.datas=unitId;
        this.lineChartData.title=title;
@@ -188,8 +284,15 @@
        let sourceXFCB=[];
        let titleXFCB=[];
        for (let i=0; i<this.arraylist4.length;i++){
          sourceXFCB.push({"name":this.arraylist4[i].indexName,"value":this.numFilter(this.arraylist4[i].value)});
          unitIdXFCB.push({"name":this.arraylist4[i].indexName,"value":this.numFilter(this.arraylist4[i].value),"unitId":"万元"});
          sourceXFCB.push({
            name: this.arraylist4[i].indexName,
            value: this.numFilter(this.arraylist4[i].value)
          });
          unitIdXFCB.push({
            name: this.arraylist4[i].indexName,
            value: this.numFilter(this.arraylist4[i].value),
            unitId: "万元"
          });
          titleXFCB +=this.numFilter(this.arraylist4[i].value);
        }
        this.lineChartData1.title=titleXFCB;
@@ -215,7 +318,9 @@
            let xAxis=[];
            for(let i=0; i<this.arraylist3.length; i++){
              currentValue.push(this.numFilter(this.arraylist3[i].currentValue));
              lastYearValue.push(this.numFilter(this.arraylist3[i].lastYearValue));
            lastYearValue.push(
              this.numFilter(this.arraylist3[i].lastYearValue)
            );
            }
            resultZBL.push(currentValue);
            resultZBL.push(lastYearValue);
@@ -225,7 +330,7 @@
            }
            this.lineChartData2.xAxis=xAxis;
            this.lineChartData2.newVisitis=resultZBL;
            this.lineChartData2.actualData=['本期','同期'];
          this.lineChartData2.actualData = ["本期", "同期"];
            this.$refs.BarChart.initChart(this.lineChartData2);
            //能耗消费成本 å¯¹æ¯”
            let resultXFCB=[];
@@ -248,9 +353,9 @@
            }
            this.lineChartData3.xAxis=xAxisXFCB;
            this.lineChartData3.newVisitis=resultXFCB;
            this.lineChartData3.actualData=['本期','同期','预算'];
          this.lineChartData3.actualData = ["本期", "同期", "预算"];
            this.$refs.BarCharts.initChart(this.lineChartData3);
          })
        });
        });
      },

@@ -266,7 +371,8 @@
      handleCheckedCitiesChange1(value) {
        let checkedCount = value.length;
        this.checkAll1 = checkedCount === this.list.length;
        this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.list.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.list.length;
        this.resultListZBL(value);
      },
      handleCheckAllChange2(val) {
@@ -282,10 +388,11 @@
        this.resultListXFCB(value);
        let checkedCount = value.length;
        this.checkAll2 = checkedCount === this.list.length;
        this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.list.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.list.length;
      },
      resultListZBL(value){
        this.queryParams.indexName=value.join(',');
      this.queryParams.indexName = value.join(",");
        getEnergyConsumption(this.queryParams).then(response => {
          this.arraylist3=response.data.resultListZBL;//折标量
          //能耗消费结构 å¯¹æ¯”
@@ -306,12 +413,12 @@
          }
          this.lineChartData2.xAxis=xAxis;
          this.lineChartData2.newVisitis=resultZBL;
          this.lineChartData2.actualData=['本期','同期'];
        this.lineChartData2.actualData = ["本期", "同期"];
          this.$refs.BarChart.initChart(this.lineChartData2);
        });
      },
      resultListXFCB(value){
        this.queryParams.indexName=value.join(',');
      this.queryParams.indexName = value.join(",");
        //能源消费成本情况
        getEnergyConsumption(this.queryParams).then(response => {
          this.arraylist5=response.data.resultListXFCB;//折标量
@@ -336,7 +443,7 @@
          }
          this.lineChartData3.xAxis=xAxisXFCB;
          this.lineChartData3.newVisitis=resultXFCB;
          this.lineChartData3.actualData=['本期','同期','预算'];
        this.lineChartData3.actualData = ["本期", "同期", "预算"];
          this.$refs.BarCharts.initChart(this.lineChartData3);
        });
      },
@@ -355,51 +462,52 @@
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          frontMonth: nowDate.getMonth(),
        }
        if(data=='YEAR'){
          this.dateTypes= 'year',
          this.valueFormat='yyyy'
        }else if(data=='MONTH'){
        frontMonth: nowDate.getMonth()
      };
      if (data == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (data == "MONTH") {
          //this.dateTypes='monthrange'
          this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
        }
      },
      /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有能耗指标趋势分析数据项?', "警告", {
      this.$confirm("是否确认导出所有能耗指标趋势分析数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
      })
        .then(function() {
          //return exportEnergyindex(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
        })
        .catch(function() {});
      },
      numFilter(value) {// æˆªå–当前数据到小数点后的几位
        let realVal = '' ;
        if (!isNaN(value) && value !== '') {
          realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(this.skinName);
        } else {
          realVal = '--'
        realVal = "--";
        }
        return realVal
      },
      return realVal;
    }
  }
};
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
  // background-color: rgb(240, 242, 245);
    position: relative;
    .chart-wrapper {
      background: #fff;
    // background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

 energy_management_ui/src/views/energyStatistics/energyConsumption/index.vue

@@ -1,32 +1,48 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½è€—消费成本分析
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :modelCode="modelCode"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能耗消费成本分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
            :modelCode="modelCode"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div>
          <consumption ref="consumption" style="padding:10px"></consumption>
        </el-main>
      </el-container>
    </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import consumption from "./consumption";
  import ModelNode from "../../basicsetting/modelNode/modelNode";

import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
  export default {
    components: { ModelNode,consumption},
  mixins: [mixins],
  components: { ModelNode, consumption, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -34,21 +50,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.consumption.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyStatistics/energyConsumption/pieChartCost.vue

@@ -3,27 +3,27 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    chartData: {
      type:Object,
      type: Object
      //required: true
    }
  },
@@ -31,70 +31,70 @@
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null
    }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({newVisitis,datas,title } = {}) {
      let scale = 1;
      this.chart.setOption({
        title: {
          text: '能源消费成本分析',
          x:'left',
          y: 'top',
          text: "能源消费成本分析",
          x: "left",
          y: "top",
          textStyle: {
            color: "#333",
          },
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item',
          trigger: "item",
          formatter: datas
        },
        grid: {
          top: 40,
          left: '2%',
          right: '2%',
          bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          // orient è®¾ç½®å¸ƒå±€æ–¹å¼ï¼Œé»˜è®¤æ°´å¹³å¸ƒå±€ï¼Œå¯é€‰å€¼ï¼š'horizontal'（水平） Â¦ 'vertical'（垂直）
          orient: 'vertical',
          orient: "vertical",
          // x è®¾ç½®æ°´å¹³å®‰æ”¾ä½ç½®ï¼Œé»˜è®¤å…¨å›¾å±…中，可选值：'center' Â¦ 'left' Â¦ 'right' Â¦ {number}（x坐标，单位px）
          x: 'left',
          x: "left",
          // y è®¾ç½®åž‚直安放位置，默认全图顶端，可选值：'top' Â¦ 'bottom' Â¦ 'center' Â¦ {number}（y坐标，单位px）
          y: '10%',
          y: "10%",
          //left: 10,
          itemWidth: 24,   // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„宽
          itemHeight: 18,  // è®¾ç½®å›¾ä¾‹å›¾å½¢çš„高
          textStyle: {
            color: '#666'  // å›¾ä¾‹æ–‡å­—颜色
            color: "#fff" // å›¾ä¾‹æ–‡å­—颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
         // itemGap: 30,
          backgroundColor: '#eee',  // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          backgroundColor: "#eee", // è®¾ç½®æ•´ä¸ªå›¾ä¾‹åŒºåŸŸèƒŒæ™¯é¢œè‰²
          data: datas,
          formatter:function(item){
            let target;
@@ -102,19 +102,22 @@
            for(let i=0;i<newVisitis.length;i++){
              if(datas[i].name===item){
                target=datas[i].value;
                unitId=datas[i].unitId
                unitId = datas[i].unitId;
              }
            }
            let arr=[item+ +target+ unitId]/*["{a|"+target+"}","{b|"+item+"}"]*/
            return arr/*.join("\n")*/
            let arr = [
              item + +target + unitId
            ]; /*["{a|"+target+"}","{b|"+item+"}"]*/
            return arr; /*.join("\n")*/
          }
          },
        },
        series: [{
        series: [
          {
            //name: '用水',
            type: 'pie',
            type: "pie",
            avoidLabelOverlap: false,
            radius: ['40%', '60%'], // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
            center: ['65%', '50%'],  // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
            radius: ["40%", "60%"], // è®¾ç½®çŽ¯å½¢é¥¼çŠ¶å›¾ï¼Œ ç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è®¾ç½®å†…圈大小，第二个百分数设置外圈大小
            center: ["65%", "50%"], // è®¾ç½®é¥¼çŠ¶å›¾ä½ç½®ï¼Œç¬¬ä¸€ä¸ªç™¾åˆ†æ•°è°ƒæ°´å¹³ä½ç½®ï¼Œç¬¬äºŒä¸ªç™¾åˆ†æ•°è°ƒåž‚直位置
            data: newVisitis,//[{value:335, name:'用水' },{value:310, name:'用电'},{value:234, name:'用煤'}],/*selected: true*/
            // itemStyle è®¾ç½®é¥¼çŠ¶å›¾æ‰‡å½¢åŒºåŸŸæ ·å¼
            itemStyle: {
@@ -123,7 +126,7 @@
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(30, 144, 255，0.5)'
                shadowColor: "rgba(30, 144, 255，0.5)"
              }
            },
            // è®¾ç½®å€¼åŸŸçš„那指向线
@@ -136,13 +139,13 @@
          label: {
            normal: {
              show: true,
              position: 'center',
              formatter: ['累计成本',title].join('\n'),
                position: "center",
                formatter: ["累计成本", title].join("\n")
            },
            emphasis: {
              show: true,
            },
          },
                show: true
              }
            }
            /*label: {
              normal: {
                position: 'inner',  // è®¾ç½®æ ‡ç­¾ä½ç½®ï¼Œé»˜è®¤åœ¨é¥¼çŠ¶å›¾å¤– å¯é€‰å€¼ï¼š'outer' Â¦ 'inner（饼状图上）'
@@ -153,9 +156,9 @@
              }
            }*/
          }
        ],
      })
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/EnergyIndex.vue

@@ -1,9 +1,19 @@
<template>
  <div class="dashboard-editor-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="查看指标">
        <el-select v-model="queryParams.procedure" placeholder="请选择指标" @change="currentSel">
          <el-option style="width: 150px"
        <el-select
          v-model="queryParams.procedure"
          placeholder="请选择指标"
          @change="currentSel"
        >
          <el-option
            style="width: 150px"
            v-for="dict in list"
            :key="dict.indexId"
            :label="dict.name"
@@ -13,14 +23,22 @@
      </el-form-item>
      <el-form-item label="日期" label-width="40px">
        <el-radio-group v-model="queryParams.timeType">
          <el-radio style="margin-right: 10px" v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictValue" @change="handleTime(dict.dictValue)">{{dict.dictLabel}}</el-radio>
          <el-radio
            style="margin-right: 10px"
            v-for="dict in dateTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            @change="handleTime(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
          <el-date-picker
            v-model="queryParams.beginTime"
            :type="dateTypes"
            style="width: 150px"
            :value-format="valueFormat"
            placeholder="开始日期">
          placeholder="开始日期"
        >
          </el-date-picker>
          åˆ°
        <el-date-picker
@@ -28,7 +46,8 @@
          :type="dateTypes"
          style="width: 150px"
          :value-format="valueFormat"
          placeholder="结束日期">
          placeholder="结束日期"
        >
        </el-date-picker>
        <!--<el-date-picker
          v-model="dateRange"
@@ -43,8 +62,16 @@
        ></el-date-picker>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="32">
@@ -57,10 +84,27 @@
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" >
        <div class="chart-wrapper" >
          <h4 style="float: left; text-align:center;padding: 0;margin: 0;width: 90%;">{{title}}1</h4>
          <el-button type="warning" icon="el-icon-download" size="mini" style="float: right" @click="handleExport" >导出</el-button><!--v-hasPermi="['system:post:export']"-->
          <h4
            style="float: left; text-align:center;padding: 0;margin: 0;width: 90%;"
          >
            {{ title }}1
          </h4>
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            style="float: right"
            @click="handleExport"
            >导出</el-button
          ><!--v-hasPermi="['system:post:export']"-->
          <el-table v-loading="loading" :data="arraylist">
            <el-table-column prop="dataTime" label="日期" align="center" width="150" show-overflow-tooltip>
            <el-table-column
              prop="dataTime"
              label="日期"
              align="center"
              width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ changeTime(parseTime(scope.row.dataTime)) }}</span>
              </template>
@@ -80,7 +124,12 @@
                <span>{{numFilter(scope.row.yoy)}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="queryParams.timeType ==='MONTH'" prop="qoq" label="环比"  align="center">
            <el-table-column
              v-if="queryParams.timeType === 'MONTH'"
              prop="qoq"
              label="环比"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{numFilter(scope.row.qoq)}}</span>
              </template>
@@ -98,12 +147,17 @@
</template>

<script>
  import LineChart from './lineChart'
  import {getSettingIndex,getSettingEnergy,exportEnergyindex,getEnergyStatisticsTrend} from "@/api/energyStatistics/statistics";
import LineChart from "./lineChart";
import {
  getSettingIndex,
  getSettingEnergy,
  exportEnergyindex,
  getEnergyStatisticsTrend
} from "@/api/energyStatistics/statistics";

  export default {
    name: 'EnergyIndex',
    name: 'Index',
  name: "EnergyIndex",
  name: "Index",
    components: {LineChart},
    props: ["modelCode"],
    data() {
@@ -121,39 +175,54 @@
          dataTime: undefined,
          timeType:undefined,
          indexId: undefined,
          procedure: undefined,
        procedure: undefined
        },
        list:[],
        arraylist:[],
        lineChartData:{
          newVisitis:null,
        newVisitis: null
        },
        //dateTypes: 'monthrange',//时间范围
        dateTypes: 'month',
        valueFormat:'yyyy-MM',
      dateTypes: "month",
      valueFormat: "yyyy-MM",
        title:"",
        skinName:"",
      }
      skinName: ""
    };
    },
    watch: {
      modelCode: {
        deep: true,
        handler(val) {
          this.getList(val)
        this.getList(val);
        }
      },
    }
    },
    created() {
      //this.getList();
      this.getDicts("timeType").then(response => {
        this.dateTypeOptions = response.data;
        this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
      });
      this.getConfigKey("energyStatistics.energyStatisticsTrend").then(response => {
    this.getConfigKey("energyStatistics.energyStatisticsTrend").then(
      response => {
        this.skinName=response.msg;
      });
      let endTtime=(new Date().getFullYear()) +'-' +((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):"0"+(new Date().getMonth() + 1));
      let starTtime= (new Date().getFullYear()-1)+'-' +((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):"0"+(new Date().getMonth() + 1));
      }
    );
    let endTtime =
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1 > 9
        ? new Date().getMonth() + 1
        : "0" + (new Date().getMonth() + 1));
    let starTtime =
      new Date().getFullYear() -
      1 +
      "-" +
      (new Date().getMonth() + 1 > 9
        ? new Date().getMonth() + 1
        : "0" + (new Date().getMonth() + 1));
      this.queryParams.beginTime=starTtime;
      this.queryParams.endTime=endTtime;
    },
@@ -163,7 +232,7 @@
        this.loading = true;
        getSettingIndex(this.queryParams.id).then(response => {
          let result=response.data;
          this.list = result.filter(f => f.indexType === 'STATISTIC');
        this.list = result.filter(f => f.indexType === "STATISTIC");
          this.loading = false;
          if (this.list.length > 0) {
            this.queryParams.procedure = this.list[0].indexId;
@@ -171,12 +240,16 @@
            this.queryParams.procedure = "";
            this.title="";
          }
          if(this.queryParams.timeType=='YEAR'){
            this.queryParams.beginTime=this.queryParams.beginTime.substring(0, 4)+'-01-01';
            this.queryParams.endTime=this.queryParams.endTime.substring(0, 4)+'-01-01';
          }else if(this.queryParams.timeType=='MONTH'){
            this.queryParams.beginTime=this.queryParams.beginTime.substring(0, 7)+'-01';
            this.queryParams.endTime=this.queryParams.endTime.substring(0, 7)+'-01';
        if (this.queryParams.timeType == "YEAR") {
          this.queryParams.beginTime =
            this.queryParams.beginTime.substring(0, 4) + "-01-01";
          this.queryParams.endTime =
            this.queryParams.endTime.substring(0, 4) + "-01-01";
        } else if (this.queryParams.timeType == "MONTH") {
          this.queryParams.beginTime =
            this.queryParams.beginTime.substring(0, 7) + "-01";
          this.queryParams.endTime =
            this.queryParams.endTime.substring(0, 7) + "-01";
          }
          this.getList();
        });
@@ -195,21 +268,22 @@
            currentValue.push(this.arraylist[i].currentValue);
            lastYearValue.push(this.arraylist[i].lastYearValue);
            minValue.push(this.arraylist[i].minValue);
            if(this.queryParams.timeType=='MONTH') {
              xAxis.push(this.arraylist[i].dataTime.substring(0, 7))
            }else if(this.queryParams.timeType=='YEAR'){
              xAxis.push(this.arraylist[i].dataTime.substring(0, 4))
          if (this.queryParams.timeType == "MONTH") {
            xAxis.push(this.arraylist[i].dataTime.substring(0, 7));
          } else if (this.queryParams.timeType == "YEAR") {
            xAxis.push(this.arraylist[i].dataTime.substring(0, 4));
            }
          }
          source.push(currentValue);
          source.push(lastYearValue);
          let yAxis="";
          if(this.arraylist.length>0){
            this.title=this.arraylist[0].indexName+"("+this.arraylist[0].unitId+")";
            yAxis=this.arraylist[0].unitId
          this.title =
            this.arraylist[0].indexName + "(" + this.arraylist[0].unitId + ")";
          yAxis = this.arraylist[0].unitId;
          }
          this.lineChartData.newVisitis=source;
          this.lineChartData.actualData=['本期值','同期值'];
        this.lineChartData.actualData = ["本期值", "同期值"];
          this.lineChartData.actual=minValue;
          this.lineChartData.xAxis=xAxis;
          this.lineChartData.title=this.title;
@@ -217,31 +291,31 @@
          this.$refs.lineChart.initChart(this.lineChartData);
        });
      },
      numFilter(value) {// æˆªå–当前数据到小数点后的几位
        let realVal = '' ;
        if (!isNaN(value) && value !== '') {
          realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(this.skinName);
        } else {
          realVal = '--'
        realVal = "--";
        }
        return realVal
      return realVal;
      },
      currentSel(selVal) {//获取下拉框的text
    currentSel(selVal) {
      //获取下拉框的text
        let obj = {};
        obj = this.list.find((item) => {
          return item.indexId === selVal
      obj = this.list.find(item => {
        return item.indexId === selVal;
        });
        this.title=obj.name;
        this.queryParams.procedure=obj.indexId;
      },
      handleTime(date){
        if(date=='YEAR'){
          this.dateTypes= 'year',
          this.valueFormat='yyyy'
        }else if(date=='MONTH'){
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
          //this.dateTypes='monthrange'
          this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
        }
      },
      /** æœç´¢æŒ‰é’®æ“ä½œ */
@@ -259,16 +333,18 @@
      /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有能耗指标趋势分析数据项?', "警告", {
      this.$confirm("是否确认导出所有能耗指标趋势分析数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
      })
        .then(function() {
          return exportEnergyindex(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
        })
        .catch(function() {});
      },
      changeTime(time) {
        if (time !== null && time !== undefined && time !== "") {
@@ -278,23 +354,20 @@
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .chart-title{
    display: block;
    background: #f2f6fc;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;

 energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/index.vue

@@ -1,32 +1,49 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            èƒ½è€—指标趋势分析
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :modelCode="modelCode"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="能耗指标趋势分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
            :modelCode="modelCode"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div>
          <EnergyIndex ref="EnergyIndex" style="padding:10px"></EnergyIndex>
        </el-main>
      </el-container>
    </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import EnergyIndex from "./EnergyIndex";
  import ModelNode from "../../basicsetting/modelNode/modelNode";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

  export default {
    components: { ModelNode,EnergyIndex},
  mixins: [mixins],
  components: { ModelNode, EnergyIndex, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -34,21 +51,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.EnergyIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyStatistics/energyStatisticsTrend/lineChart.vue

@@ -3,59 +3,59 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({newVisitis,xAxis,actualData,actual,title,yAxis} = {}) {
        var series=[];
@@ -63,74 +63,80 @@
          for(var i=0;i<newVisitis.length;i++){
            series.push({
                name: actualData[i],
                type: 'bar',
            type: "bar",
                data: newVisitis[i],
                smooth: true,//线条平滑
                //stack: 'vistors',
                animationDuration: 2800,
                animationEasing: 'quadraticOut'
              }
            );
            animationEasing: "quadraticOut"
          });
          }
          series.push({
            name:'历史最优' ,
            type: 'line',
          name: "历史最优",
          type: "line",
            data: actual,
            smooth: true,//线条平滑
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          })
          animationEasing: "quadraticOut"
        });
        }
        this.chart.setOption({
          title: {
            text: title,
            x:'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          legend: {
            data:['本期值', '同期值','历史最优'],
            left: '60%',
          data: ["本期值", "同期值", "历史最优"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            },
          }],
          yAxis: [{
            }
          }
        ],
        yAxis: [
          {
              name: yAxis,
              type: 'value',
            type: "value",
              nameTextStyle:{
                color:"#333",
              color: "#333"
              },
              axisLabel: {
                formatter: '{value}'
              formatter: "{value}"
              },
              axisTick: {
                show: false
              },
            }
            }
          ],
          series:series
        })
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/energyStatistics/energyStructure/EnergyIndex.vue

@@ -324,20 +324,18 @@
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.chart-title {
  display: block;
  background: #f2f6fc;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #fff;
}
@media (max-width: 1024px) {
  .chart-wrapper {

 energy_management_ui/src/views/energyStatistics/energyStructure/index.vue

@@ -1,33 +1,49 @@

<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            ç”¨èƒ½å•å…ƒèƒ½è€—分析
          </div>
          <ModelNode ref="modelNode" @changeNode="changeNode" :showOpt="false" :modelCode="modelCode"></ModelNode>
        </el-card>
      </el-aside>
      <el-container>
        <div style="cursor:pointer;" @click="toggleCollapse">
          <img src="@/assets/image/configureChart.png" style="width: 100%;height: 100%">
        </div>
        <el-main style="padding:0">
  <div>
    <el-row type="flex">
      <el-col
        :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
        v-show="!isCollapse"
      >
        <basic-container title="用能单元能耗分析" :bodyStyle="bodyStyle">
          <ModelNode
            ref="modelNode"
            @changeNode="changeNode"
            :showOpt="false"
            :modelCode="modelCode"
          ></ModelNode>
        </basic-container>
        <img
          src="~@/assets/image/rectangle.png"
          alt=""
          class="shrink-col-block"
          @click="toggleCollapse"
        />
      </el-col>
      <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
      <el-col
        :style="{
          width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
          paddingLeft: isCollapse ? 0 : '14px'
        }"
      >
        <div>
          <EnergyIndex ref="EnergyIndex" style="padding:10px"></EnergyIndex>
        </el-main>
      </el-container>
    </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import EnergyIndex from "./EnergyIndex";
  import ModelNode from "../../basicsetting/modelNode/modelNode";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

  export default {
    components: { ModelNode,EnergyIndex},
  mixins: [mixins],
  components: { ModelNode, EnergyIndex, ShrinkCol },
    created() {
      this.modelCode=this.$route.query.modelCode;
    },
@@ -35,21 +51,29 @@
      return {
        modelCode:undefined,
        isCollapse: false,
      }
      bodyStyleRight: {}
    };
    },
    methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
      changeNode: function (node) {
        this.$refs.EnergyIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      this.$router.push("/model");
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // ç‚¹å‡»æŒ‰é’®ï¼Œåˆ‡æ¢æŠ˜å ä¸Žå±•å¼€
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
      }
    }
  };

 energy_management_ui/src/views/energyStatistics/energyStructure/lineChart.vue

@@ -3,59 +3,60 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../mixins/resize'
  const animationDuration = 6000
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
import { color } from "echarts/lib/export";
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({currentValue,xAxis,lastYearValue,title} = {}) {
        var series=[];
@@ -66,81 +67,92 @@
        this.chart.setOption({
          title: {
            text: title,
            x:'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
            color: "#fff"
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          legend: {
            data:['消费量', '产量'],
            left: '60%',
          data: ["消费量", "产量"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisPointer: {
              type: 'shadow'
              type: "shadow"
            }
          }],
          yAxis: [{
              name: '消费量',
              type: 'value',
              nameTextStyle:{
                color:"#333",
              },
              axisLabel: {
                formatter: '{value}'
              },
              axisTick: {
                show: false
              },
            },{
            name: '产量',
            type: 'value',
            nameTextStyle:{
              color:"#333",
            },
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false
            },
          }
          ],
          series:[{
        yAxis: [
          {
            name: "消费量",
            type: 'bar',
            type: "value",
            nameTextStyle: {
              color: "#fff"
            },
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              show: false
            }
          },
          {
            name: "产量",
            type: "value",
            nameTextStyle: {
              color: "#fff"
            },
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "消费量",
            type: "bar",
            data: currentValue,
            smooth: true,//线条平滑
            //stack: 'vistors',
            barMaxWidth:30,//最大宽度
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
          name: '产量',
            type: 'line',
            animationEasing: "quadraticOut"
          },
          {
            name: "产量",
            type: "line",
            yAxisIndex: 1,
            data: lastYearValue,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
        }]
        })
            animationEasing: "quadraticOut"
          }
        ]
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/equipmentMonitor/energyConsumption/lineChart.vue

@@ -3,59 +3,59 @@
</template>

<script>
  import echarts from 'echarts'
import echarts from "echarts";
  import resize from "../../energyStatistics/mixins/resize";
  require('echarts/theme/macarons') // echarts theme
  const animationDuration = 6000
require("echarts/theme/macarons"); // echarts theme
const animationDuration = 6000;
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '350px'
      default: "350px"
      },
      chartData: {
        type:Object,
      type: Object
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
      seriesData: []
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({newVisitis,xAxis,actualData,title,yAxis} = {}) {
        var series=[];
@@ -63,66 +63,72 @@
          for(var i=0;i<newVisitis.length;i++){
            series.push({
                name: actualData[i],
                type: 'bar',
            type: "bar",
                data: newVisitis[i],
                smooth: true,//线条平滑
                //stack: 'vistors',
                animationDuration: 2800,
                animationEasing: 'quadraticOut'
              }
            );
            animationEasing: "quadraticOut"
          });
          }
        }
        this.chart.setOption({
          title: {
            text: title,
            x:'center',
            y: 'top',
          x: "center",
          y: "top",
            textStyle: {
              color: "#333"
            },
          }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'     line为直线  shadow为柱状阴影
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'     line为直线  shadow为柱状阴影
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
          left: "2%",
          right: "2%",
          bottom: "3%",
            containLabel: true
          },
          legend: {
            data:['设备1','设备2'],
            left: '60%',
          data: ["设备1", "设备2"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            },
          }],
          yAxis: [{
            }
          }
        ],
        yAxis: [
          {
            name: yAxis,
            type: 'value',
            type: "value",
            nameTextStyle:{
              color:"#333",
              color: "#333"
            },
            axisLabel: {
              formatter: '{value}'
              formatter: "{value}"
            },
            axisTick: {
              show: false
            },
            }
          }
          ],
          series:series
        })
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/equipmentMonitor/keyEquipment/LineChart.vue

@@ -3,8 +3,8 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons'); // echarts theme
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from './mixins/resize'

export default {
@@ -12,55 +12,54 @@
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '350px'
      default: "350px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      type: Object
      // required: true
    },

    }
  },
  data() {
    return {
      chart: null,
      alarmLimitName:undefined
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose();
    this.chart = null
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ datas,legendArr,timeList,legendNameArr } = {}) {
@@ -73,10 +72,10 @@
        for(let i = 0;i<datas.length;i++){
          //yè½´
          let yAxisItem = {
            type: 'value',
            type: "value",
            // name:legendNameArr[i],
            minInterval : 1,
            boundaryGap : [ 0, 0.2 ],
            boundaryGap: [0, 0.2]
          };
          if(i>1){
            let positionKey = "position";
@@ -97,16 +96,16 @@
            }
            let seriesItem = {
              name:legendNameArr[i],
              type: 'line',
              type: "line",
              data: datas[i],
              yAxisIndex:yAxisIndexArr.indexOf(yAxisNumArr[i]),
              yAxisIndex: yAxisIndexArr.indexOf(yAxisNumArr[i])
            };
            seriesArr.push(seriesItem);
          }else {
            let seriesItem = {
              name:legendNameArr[i],
              type: 'line',
              data: datas[i],
              type: "line",
              data: datas[i]
            };
            if(i>0){
              let key = "yAxisIndex";
@@ -125,30 +124,33 @@
            }
          },
          grid: {
            left: '2%',
            right: '18%',
            left: "2%",
            right: "18%",
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            trigger: "axis",
            axisPointer: {
              type: 'cross'
              type: "cross"
            },
            padding: [5, 10]
          },
          yAxis: yAxisDataArr,
          legend: {
            data: legendNameArr,
            textStyle: {
              color: "#fff"
            }
          },
          series: seriesArr
        })
        });
      }
    },
    closeLineChar(){
      this.chart.clear();
    }
  }
}
};
</script>

 energy_management_ui/src/views/equipmentMonitor/keyEquipment/pieChart.vue

@@ -3,8 +3,8 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons'); // echarts theme
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
  // import resize from './mixins/resize'

  export default {
@@ -12,42 +12,42 @@
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '130px'
      default: "130px"
      }
    },
    data() {
      return {
        chart: null
      }
    };
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose();
      this.chart = null
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
      this.chart = echarts.init(this.$el, "macarons");

        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          // legend: {
          //   left: 'center',
@@ -55,32 +55,35 @@
          //   data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
          // },
          legend: {
            type: 'scroll',
            orient: 'vertical',
          type: "scroll",
          orient: "vertical",
            right: 10,
            top: 20,
            bottom: 20,
            data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
          data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"],
          textStyle: {
            color: "#fff"
          }
          },
          series: [
            {
              name: 'WEEKLY WRITE ARTICLES',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
            name: "WEEKLY WRITE ARTICLES",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
              data: [
                { value: 320, name: 'Industries' },
                { value: 240, name: 'Technology' },
                { value: 149, name: 'Forex' },
                { value: 100, name: 'Gold' },
                { value: 59, name: 'Forecasts' }
              { value: 320, name: "Industries" },
              { value: 240, name: "Technology" },
              { value: 149, name: "Forex" },
              { value: 100, name: "Gold" },
              { value: 59, name: "Forecasts" }
              ],
              // animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
      });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/equipmentMonitor/parameters/modelMonitorSetting.vue

@@ -2,7 +2,9 @@
  <div class="app-container" style="padding:0">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{currentNode?currentNode.label+'--节点配置':'节点配置'</span>
        <span>{{
          currentNode ? currentNode.label + "--节点配置" : "节点配置"
        }}</span>
      </div>

      <el-tabs>
@@ -10,17 +12,26 @@
          <span slot="label"><i class="el-icon-setting"></i>实时能耗</span>
          <!--表格-->
          <el-form :model="model"  ref="form">
            <el-table v-loading="loading" :data="model.tableOptions" border @selection-change="handleSelectionChange"
                      :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table
              v-loading="loading"
              :data="model.tableOptions"
              border
              @selection-change="handleSelectionChange"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column type="selection" width="55" align="center"/>
              <el-table-column label="序号" align="center" prop="index"/>
              <el-table-column label="名称" align="center" prop="name"/>
              <el-table-column label="数据" align="center" prop="data" class-name="small-padding fixed-width"/>
              <el-table-column
                label="数据"
                align="center"
                prop="data"
                class-name="small-padding fixed-width"
              />
              <el-table-column label="单位" align="center" prop="unit"/>
            </el-table>
          </el-form>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
@@ -40,13 +51,13 @@
    setDevice,
    setEnergy,
    setProduct
  } from '@/api/basicsetting/modelNode'
} from "@/api/basicsetting/modelNode";

  export default {
    name: "modelMonitorSetting",
    data() {
      return {
        currentNode: '',
      currentNode: "",
        deviceDialog: false,
        energyDialog: false,
        productDialog: false,
@@ -77,9 +88,9 @@
              data:"30000",
              unit:"WH"
            }
          ],
        ]
        }
      }
    };
    },
    created() {
      // setInterval(alert("哈哈哈！！"),5000);
@@ -88,11 +99,12 @@
      modelNodeChange(modelNode) {
        this.settingDeviceList = [];
        this.settingIndexList = [];
        this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null;
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
        if (modelNode) {
          this.currentNode = modelNode;
          this.deviceLoading = true;
          getSettingDevice(modelNode.id).then((response) => {
        getSettingDevice(modelNode.id).then(response => {
            if (response.code === 200) {
              this.settingDeviceList = response.data;
            } else {
@@ -101,7 +113,7 @@
            this.deviceLoading = false;
          });
          this.energyLoading = true;
          getSettingEnergy(modelNode.id).then((response) => {
        getSettingEnergy(modelNode.id).then(response => {
            if (response.code === 200) {
              this.settingEnergyList = response.data;
            } else {
@@ -110,7 +122,7 @@
            this.energyLoading = false;
          });
          this.productLoading = true;
          getSettingProduct(modelNode.id).then((response) => {
        getSettingProduct(modelNode.id).then(response => {
            if (response.code === 200) {
              this.settingProductList = response.data;
            } else {
@@ -119,7 +131,7 @@
            this.productLoading = false;
          });
          this.indexLoading = true;
          getSettingIndex(modelNode.id).then((response) => {
        getSettingIndex(modelNode.id).then(response => {
            if (response.code === 200) {
              this.settingIndexList = response.data;
            } else {
@@ -134,15 +146,18 @@
      },
      showCollectIndexDialog() {
        this.$nextTick(() => {
          this.$refs.collectIndexSetting.init(this.currentNode, this.settingIndexList);
        })
        this.$refs.collectIndexSetting.init(
          this.currentNode,
          this.settingIndexList
        );
      });
      },
      // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.indexId);
        this.names = selection.map(item => item.name);
        this.single = selection.length !== 1;
        this.multiple = !selection.length
      this.multiple = !selection.length;
      },
      getList() {
        // console.log(this.myModelNode)
@@ -159,11 +174,9 @@
        // } else {
          this.model.tableOptions = [];
        // }
      },
    }
  }
};
</script>

<style scoped>

</style>
<style scoped></style>

 energy_management_ui/src/views/equipmentMonitor/realTimeMonitoring/parametersTable.vue

@@ -1,52 +1,66 @@
<template>
  <div class="app-container" style="padding: 0">
    <div style="margin-bottom:10px;">
      <span>{{currentNode?currentNode.label:''}}测点参数列表</span>
      <span>{{ currentNode ? currentNode.label : "" }}测点参数列表</span>
    </div>
    <el-table
      :data="parameterTableData"
      border
      style="width: 100%"
      @cell-click="openDialog">
      <el-table-column
        prop="code"
        label="指标编码"
        width="180"
        align="center">
      @cell-click="openDialog"
    >
      <el-table-column prop="code" label="指标编码" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="indexName"
        label="指标名称"
        align="center">
      <el-table-column prop="indexName" label="指标名称" align="center">
        <template slot-scope="scope">
          <div style="color:blue;text-decoration:underline;cursor:pointer">{{scope.row.indexName}}</div>
          <div style="color:blue;text-decoration:underline;cursor:pointer">
            {{ scope.row.indexName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="indexUnit"
        label="指标单位"
        align="center"
        :formatter="unitFormat">
        :formatter="unitFormat"
      >
      </el-table-column>
      <el-table-column
        prop="value"
        label="指标值(实时值)"
        align="center">
      <el-table-column prop="value" label="指标值(实时值)" align="center">
      </el-table-column>
    </el-table>

    <!--曲线图与表格-->
    <el-dialog :title="title" :visible.sync="open" width="1000px" :close-on-click-modal="false" @close="closeDialog">
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-row style="padding:16px 16px 0;margin-bottom:32px;">
        <el-tabs v-model="activeName" @tab-click="handleClick" >
          <el-tab-pane label="实时数据曲线图" name="first">
            <live-alarm-view ref="liveAlarmView" :code="code" :activeName="activeName"></live-alarm-view>
            <live-alarm-view
              ref="liveAlarmView"
              :code="code"
              :activeName="activeName"
            ></live-alarm-view>
          </el-tab-pane>
          <el-tab-pane label="历史数据曲线图" name="second">
            <history-alarm-view ref="historyAlarmView" :code="code" :activeName="activeName"></history-alarm-view>
            <history-alarm-view
              ref="historyAlarmView"
              :code="code"
              :activeName="activeName"
            ></history-alarm-view>
          </el-tab-pane>
          <el-tab-pane label="历史数据查询" name="third">
            <history-alarm-table ref="historyAlarmTable" :code="code" :indexName="indexName" :activeName="activeName" :indexUnit="indexUnit"></history-alarm-table>
            <history-alarm-table
              ref="historyAlarmTable"
              :code="code"
              :indexName="indexName"
              :activeName="activeName"
              :indexUnit="indexUnit"
            ></history-alarm-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
@@ -83,21 +97,22 @@
            queryParams:{
              nodeId:undefined,
              //指标index
              indexType:"COLLECT",
        indexType: "COLLECT"
            }
          }
    };
      },
      created() {
        this.getDicts("sys_unit").then(response => {
          this.unitOptions = response.data;
        });
      },
      mounted()
      {
        this.getConfigKey("equipmentMonitor.realTimeMonitoring.intervalTime").then(response => {
  mounted() {
    this.getConfigKey("equipmentMonitor.realTimeMonitoring.intervalTime").then(
      response => {
          this.intervalTime = response.msg;
          this.timer = setInterval(this.getList, this.intervalTime);
        });
      }
    );
      },
      beforeDestroy() {
        //页面销毁时 è¦åœæ­¢è®¡æ—¶å™¨ï¼Œå¦åˆ™é€‰é¡¹å¡åˆ‡æ¢è®¡æ—¶å™¨ä¸åœæ­¢ï¼Œä¼šè¶Šæ¥è¶Šå¿«ï¼Œå¤šä¸ªçº¿ç¨‹
@@ -150,11 +165,9 @@
        },
        handleClick(tab, event){
          this.activeName = tab.name;
        },
      }
    }
};
</script>

<style scoped>

</style>
<style scoped></style>

 energy_management_ui/src/views/history/query/historyIndex.vue

@@ -1,11 +1,16 @@

<template>
  <div class="app-container" style="padding:0">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{currentNode?currentNode.label:''}}--节点设置</span>
        <span>{{ currentNode ? currentNode.label : "" }}--节点设置</span>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="query-form"
      >
        <el-form-item label="起止时间">
          <el-date-picker
            v-model="dateRange"
@@ -13,14 +18,20 @@
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
          <!--<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
        </el-form-item>

      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
@@ -35,16 +46,29 @@
        </el-col>
      </el-row>
      <el-form>
        <el-table :data="JkHistoryAlarmList" v-loading="loading" border @selection-change="" @cell-click="openDialog"  >
        <el-table
          :data="JkHistoryAlarmList"
          v-loading="loading"
          border
          @selection-change=""
          @cell-click="openDialog"
        >
          <el-table-column label="序号" type="index"  align="center"/>
          <el-table-column label="单位名称" align="center" prop="modelName"/>
          <el-table-column label="指标编码" align="center" prop="code"/>
          <el-table-column label="指标名称" align="center" prop="indexName">
            <template slot-scope="scope">
              <div style="color:blue;text-decoration:underline ;cursor:pointer">{{scope.row.indexName}}</div>
              <div style="color:blue;text-decoration:underline ;cursor:pointer">
                {{ scope.row.indexName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="指标单位" align="center" prop="unitId" :formatter="unitIdFormat" />
          <el-table-column
            label="指标单位"
            align="center"
            prop="unitId"
            :formatter="unitIdFormat"
          />
        <!--  <el-table-column label="报警级别" align="center" prop="alarmLevel" :formatter="alarmLevelFormat"/>
          <el-table-column label="限值类型" align="center" prop="limitType"  :formatter="limitTypeFormat"/>
          <el-table-column label="限值"     align="center" prop="limitingValue"/>
@@ -62,14 +86,31 @@
        @pagination="getList"
      />
      <!--弹框-->
      <el-dialog :title="title" :visible.sync="open" width="1500px" :close-on-click-modal="false">
        <el-row style="background:#fff;margin-bottom:32px;">
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="1500px"
        :close-on-click-modal="false"
      >
        <el-row style="margin-bottom:32px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane label="历史数据曲线图" name="second">
              <history-alarm-view ref="historyAlarmView" :code="code" :activeName="activeName" :limitVal="limitVal"></history-alarm-view>
              <history-alarm-view
                ref="historyAlarmView"
                :code="code"
                :activeName="activeName"
                :limitVal="limitVal"
              ></history-alarm-view>
            </el-tab-pane>
            <el-tab-pane label="历史数据查询" name="third">
              <history-alarm-table ref="historyAlarmTable" :code="code" :indexName="indexName" :activeName="activeName" :indexUnit="indexUnit" :limitVal="limitVal"></history-alarm-table>
              <history-alarm-table
                ref="historyAlarmTable"
                :code="code"
                :indexName="indexName"
                :activeName="activeName"
                :indexUnit="indexUnit"
                :limitVal="limitVal"
              ></history-alarm-table>
            </el-tab-pane>
          </el-tabs>
        </el-row>
@@ -82,15 +123,18 @@
</template>

<script>

  import {listHistoryAlarm,exportHistoricalAlarm , getHistoricalAlarm} from  "@/api/basicsetting/historyAlarm";
  import {listLimitType} from "@/api/basicsetting/limitType"
  import historyAlarmView from "../../energyAlarm/realTimeAlarm/historyAlarmView"
  import historyAlarmTable from "../../energyAlarm/realTimeAlarm/historyAlarmTable"
import {
  listHistoryAlarm,
  exportHistoricalAlarm,
  getHistoricalAlarm
} from "@/api/basicsetting/historyAlarm";
import { listLimitType } from "@/api/basicsetting/limitType";
import historyAlarmView from "../../energyAlarm/realTimeAlarm/historyAlarmView";
import historyAlarmTable from "../../energyAlarm/realTimeAlarm/historyAlarmTable";

  export default {
    components: {historyAlarmView,historyAlarmTable},
    name: 'historyAlarm',
  name: "historyAlarm",

    data() {
      return {
@@ -100,15 +144,15 @@
          /*  value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],*/
        },
        code:undefined,
        value:'',
      value: "",
        options:undefined,
        // handleClick:'simple',
        radio: 'B',
        activeName: 'second',
      radio: "B",
      activeName: "second",
        indexId:undefined,
        indexName:undefined,
        indexUnit:undefined,
        currentNode: '',
      currentNode: "",
        limitVal:undefined,
        hiddenTableHeader:false,
       /* lineChartData: lineChartData.newVisitis,*/
@@ -146,13 +190,13 @@
        unitIdOptions: [],
        // æŸ¥è¯¢å‚æ•°
        lineChartData:{
          newVisitis:null,
        newVisitis: null
        },
        queryParams: {
           pageNum: 1,
           pageSize: 10,
          eierarchyFlag:'B',
          indexType:'COLLECT',
        eierarchyFlag: "B",
        indexType: "COLLECT",
          code: undefined,
          indexName:undefined,
          /* unitId: undefined,*/
@@ -162,8 +206,7 @@
          /* limitingValue:undefined,*/
          nodeId:undefined,
          beginTime: undefined,
          endTime:undefined,

        endTime: undefined
        },
        // è¡¨å•å‚æ•°
        form: {},
@@ -183,13 +226,13 @@
      listLimitType(this.queryParams).then(response => {
        this.limitTypeOptions = response.rows;
      });

    },
    methods: {

      getList() {
        this.loading = true;
        listHistoryAlarm(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      listHistoryAlarm(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then(response => {
          this.JkHistoryAlarmList = response.rows;
          this.total = response.total;
          this.loading = false;
@@ -235,7 +278,8 @@
        this.queryParams.nodeId = modelNode.id;
        this.settingDeviceList = [];
        this.settingIndexList = [];
        this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null;
      this.disabledSetting =
        modelNode === undefined || modelNode === "" || modelNode === null;
        if (modelNode) {
          this.currentNode = modelNode;
          this.deviceLoading = true;
@@ -249,18 +293,17 @@
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
      MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
      d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
      h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
      m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      },


      /** æœç´¢æŒ‰é’®æ“ä½œ */
      handleQuery() {
@@ -272,8 +315,7 @@
        this.resetForm("queryForm");
      },

      handleSelectionChange() {
      },
    handleSelectionChange() {},
      openDialog(row,column,event,cell){
        if("indexName"==column.property){
          this.open = true;
@@ -288,30 +330,32 @@
      /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有报警数据项?', "警告", {
      this.$confirm("是否确认导出所有报警数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
      })
        .then(function() {
          return exportHistoricalAlarm(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function() {});

        })
        .catch(function() {});
      },
      //限制类型翻译
      limitTypeFormat(row,column){
        var actions = [];
        Object.keys(this.limitTypeOptions).map((key) => {
          if (this.limitTypeOptions[key].limitCode == ('' + row.limitType)) {
      Object.keys(this.limitTypeOptions).map(key => {
        if (this.limitTypeOptions[key].limitCode == "" + row.limitType) {
            actions.push(this.limitTypeOptions[key].limitName);
          }
        });
        return actions.join('');
      return actions.join("");
      },
      handleClick(tab, event){
        this.activeName = tab.name;
      },
    }
    }
  };
</script>

 energy_management_ui/src/views/index copy.vue

ÎļþÒÑɾ³ý

 energy_management_ui/src/views/index.vue

@@ -1,767 +1,25 @@
<template>
  <div class="home-show">
    <!-- <el-card :bordered="false">
      <div class="home-head">
        <div class="home-select-label">日期切换</div>
        <div>
          <el-button
            :type="dateType === 'DAY' ? 'primary' : ''"
            @click="dateClickHandle('DAY')"
            >日</el-button
  <div class="app-container" style="padding: 0;margin: 10px;">
    <div
      class="dashboard-editor-container"
      style="width: 100%;height: 100%;display: block;margin: 0 auto;"
          >
          <el-button
            :type="dateType === 'MONTH' ? 'primary' : ''"
            @click="dateClickHandle('MONTH')"
            class="select-month"
            >月
          </el-button>
          <el-button
            :type="dateType === 'YEAR' ? 'primary' : ''"
            @click="dateClickHandle('YEAR')"
            >å¹´</el-button
          >
      <div class="title">欢迎使用云路综合能源管理平台</div>
      <!-- <img src="@/assets/image/index3.png" style="width: 55%;" /> -->
      <img src="@/assets/image/image.png" style="height: 80vh;" />
        </div>
      </div>
    </el-card> -->
    <el-card
      class="body-left-title"
      :bordered="false"
      style="margin-bottom: 12px;"
    >
      <div slot="header" class="clearfix">
        <span>当日双控数据指标总览</span>
      </div>
      <el-row class="double-data-show-content">
        <el-col :span="5" class="total">
          <img alt="" src="~@/assets/home/zonghe.svg" />
          <div class="left-title-style">
            <div>
              <div>全厂综合能耗</div>
              <div class="unit">{{ summation }} tce</div>
            </div>
          </div>
        </el-col>
        <el-col
          :span="5"
          class="co2"
          v-for="(item, index) in energyStatistic"
          :key="index"
          style="border-left: 1px solid #999;"
        >
          <img
            v-if="item.item.includes('电')"
            src="~@/assets/home/haodian.svg"
            alt=""
          />
          <img
            v-if="item.item.includes('æ°´')"
            src="~@/assets/home/haoshui.svg"
            alt=""
          />
          <img
            v-if="item.item.includes('气')"
            src="~@/assets/home/haoqi.svg"
            alt=""
          />
          <img
            v-if="item.item.includes('蒸汽')"
            src="~@/assets/home/haozhengqi.svg"
            alt=""
          />
          <div class="left-title-style">
            <div>
              <div>
                è€—{{
                  item.item.indexOf("天然") !== -1
                    ? item.item.replace("天然", "")
                    : item.item
                }}量
                {{ item.unit ? `（${item.unit}）` : "" }}
              </div>
              <div class="unit">
                {{ item.count || 0 }}
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5" class="total" style="border-left: 1px solid #999;">
          <img alt="" src="~@/assets/home/wen.png" />
          <div class="left-title-style">
            <div>
              <div>室外温度</div>
              <div class="unit">{{ temperature }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5" class="total" style="border-left: 1px solid #999;">
          <img alt="" src="~@/assets/home/shi.png" />
          <div class="left-title-style">
            <div>
              <div>室外湿度</div>
              <div class="unit">{{ humidity }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row type="flex" class="data-indicator-overview">
      <el-col class="home-body-left">
        <el-card :bordered="false" class="body-left-title">
          <div slot="header" class="clearfix">
            <span>能源实时监测</span>
          </div>
          <div class="chart-wrapper">
            <span class="chart-left-unit">{{
              `电/单位${monitoringUnit}`
            }}</span>
            <BarChart class="line-content" :chartData="chartDataObj" />
          </div>
          <div class="chart-wrapper" style="border-top: 1px solid #999">
            <span class="chart-left-unit">{{
              `æ°´/单位${monitoringWaterUnit}`
            }}</span>
            <BarChart class="line-content" :chartData="chartDataWaterObj" />
          </div>
        </el-card>
        <!-- <div class="left-line-style">
          <div>能源实时监测</div>
          <el-row type="flex" justify="space-between">
            <el-col class="radio-list">
                <div class="radio-list-content">
                  <el-radio-group
                    v-model="energyType"
                    @change="onPowerTypeChange"
                  >
                    <el-radio
                      :style="radioStyle"
                      :label="item.value"
                      v-for="item in powerTypeOptions"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-col>
          </el-row>
        </div> -->
      </el-col>
      <el-col class="home-body-right">
        <el-card :bordered="false" class="right-first-card-title">
          <div slot="header" class="clearfix">
            <span>综合能耗占比分析</span>
          </div>
          <PieChart
            class="first-chat"
            :chartData="firstPieData"
            pieTitle="综合能耗占比分析"
          />
        </el-card>
        <el-card :bordered="false" class="second-card-title">
          <div slot="header" class="clearfix">
            <span>能耗设备占比</span>
          </div>
          <PieChart
            class="second-chat"
            :chartData="secondPieData"
            pieTitle="能耗设备占比"
            height="280px"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getEnergyConsumptionRatio,
  getEnergyConsumptionSummation,
  getEnergyStatistic,
  getHomeEnergyMonitoring,
  listEnergyType,
  getHomeEnergyUnitConsumptionRatio,
  getHomeOutdoorTemperature
} from "@/api/home/home";
import mixins from "@/layout/mixin/getHeight";
import PieChart from "./dashboard/PieChart";
import LineChart from "./dashboard/LineChart";
import BarChart from "./dashboard/BarChart";

export default {
  components: {
    LineChart,
    BarChart,
    PieChart
  },
  mixins: [mixins],

  data() {
    return {
      firstPieData: [],
      secondPieData: [],
      monitoringUnit: "kWh",
      chartDataObj: {},
      monitoringWaterUnit: "m³",
      chartDataWaterObj: {},
      energyType: "electric",
      energyTypeName: "电",
      dateType: "DAY",
      powerTypeOptions: [
        {
          label: "电",
          value: "electric",
          energyUnit: "kWh"
        },
        { label: "æ°´", value: "Water", energyUnit: "m³" },
        { label: "蒸汽", value: "Steam", energyUnit: "吨" },
        { label: "天然气", value: "Gas", energyUnit: "Nm³" }
      ],
      isClick: true,
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px"
      },
      chart1: null,
      chart2: null,
      data: [],
      pieDta: [],
      pieDtatwo: [],
      energyCostSum: 0,
      energyStatistic: [],
      summation: 10776,
      totalCo2Emissions: 0,
      humidity: "",
      temperature: "",
      timer: null,
      timer30: null
    };
  },
  mounted() {
    this.getEnergyType();
    this.getSummationData();
    this.getEnergyConsumptionRatioData();
    this.getEnergyStatisticData();
    this.getHomeEnergyUnitConsumptionRatioData();

    const ele = document.createEvent("Event");
    ele.initEvent("resize", true, true);
    window.dispatchEvent(ele);

    clearInterval(this.timer);
    clearInterval(this.timer30);
    this.getHomeOutdoorTemperatureData();
    // this.timer = setInterval(() => {
    //   this.getHomeOutdoorTemperatureData();
    // }, 12000);
    this.timer30 = setInterval(() => {
      // this.getEnergyType();
      this.getSummationData();
      this.getEnergyConsumptionRatioData();
      this.getEnergyStatisticData();
      this.getHomeEnergyUnitConsumptionRatioData();
    }, 180000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer30);
  },
  methods: {
    getHomeOutdoorTemperatureData() {
      getHomeOutdoorTemperature().then(res => {
        this.temperature = res.data.temperature;
        this.humidity = res.data.humidity;
      });
    },
    getEnergyType() {
      listEnergyType()
        .then(res => {
          if (res.code === 200) {
            this.powerTypeOptions =
              res.data.map(item => ({
                ...item,
                value: item.energy,
                label: item.energyName
              })) || [];
            this.energyType =
              this.powerTypeOptions.length > 0
                ? this.powerTypeOptions[0].value
                : "";
            this.energyTypeName =
              this.powerTypeOptions.length > 0
                ? this.powerTypeOptions[0].label
                : "";
            for (let i = 0; i < this.powerTypeOptions.length; i++) {
              this.getEnergyMonitoring(this.powerTypeOptions[i].value);
            }
          }
        })
        .catch(e => {
          console.log("获取能源类型列表", e);
        });
    },
    // ç¢³æŽ’量核算查询
    getCarbonEmission() {
      getHomeCarbonEmission(this.dateType).then(res => {
        this.totalCo2Emissions = res.result.totalCo2Emissions;
      });
    },
    // èŽ·å–全厂综合能耗
    getSummationData() {
      getEnergyConsumptionSummation(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.summation = res.data;
          }
        })
        .catch(e => {
          console.log("获取全厂综合能耗", e);
        });
    },
    // èŽ·å–综合能耗占比环形图分析数据
    getEnergyConsumptionRatioData() {
      getEnergyConsumptionRatio(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.firstPieData = res.data.map(item => {
              return {
                ...item,
                name: item.item,
                value: item.count || 0
                // unit: filterUint
              };
            });
          }
        })
        .catch(e => {
          console.log("获取综合能耗占比环形图分析数据", e);
        });
    },

    // èƒ½æºè®¾å¤‡çŽ¯å½¢å›¾æ•°æ®æ•°æ®
    getHomeEnergyUnitConsumptionRatioData() {
      getHomeEnergyUnitConsumptionRatio(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.secondPieData = res.data.map(item => {
              return {
                ...item,
                name: item.name,
                value: item.value || 0
                // unit: filterUint
              };
            });
          }
        })
        .catch(e => {
          console.log("能源设备分析环形图数据数据", e);
        });
    },

    // åˆ†ç±»èƒ½æºç»Ÿè®¡æ•°æ®
    getEnergyStatisticData() {
      getEnergyStatistic(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.energyStatistic = res.data;
          }
        })
        .catch(e => {
          console.log("分类能源统计数据", e);
        });
    },

    // èƒ½æºç›‘测柱状图数据
    getEnergyMonitoring(energyType) {
      getHomeEnergyMonitoring(this.dateType, energyType)
        .then(res => {
          if (res.code === 200) {
            let chartData = res.data.chartData.sort((a, b) => {
              return a.date - b.date;
            });
            let nameList = Array.from(
              new Set(
                chartData.map(item => {
                  return item.name;
                })
              )
            ).sort((a, b) => {
              return new Date(b.date).getTime() - new Date(a.date).getTime();
            });
            // è¡¥å…¨æ•°æ®
            let oneArr = chartData.filter(item => {
              return item.name === nameList[0];
            });
            let twoArr = chartData.filter(item => {
              return item.name === nameList[1];
            });

            let maxDate =
              this.dateType === "DAY"
                ? 23
                : Math.max(
                    ...chartData.map(item => {
                      return item.date;
                    })
                  );
            oneArr.forEach(element => {
              if (this.dateType === "DAY") {
                let hour = new Date("2022 " + element.date).getHours() + "时";
                element.date = hour;
              } else {
                element.date =
                  this.dateType === "MONTH"
                    ? element.date + "日"
                    : element.date + "月";
              }
            });
            twoArr.forEach(element => {
              if (this.dateType === "DAY") {
                let hour = new Date("2022 " + element.date).getHours() + "时";
                element.date = hour;
              } else {
                element.date =
                  this.dateType === "MONTH"
                    ? element.date + "日"
                    : element.date + "月";
              }
            });
            if (oneArr.length < maxDate) {
              if (this.dateType === "DAY") {
                for (let d = oneArr.length; d < maxDate + 1; d++) {
                  oneArr.push({
                    date: d + "时",
                    name: nameList[0],
                    count: 0,
                    value: null
                  });
                }
              } else {
                console.log("one111111111");
                for (let d = oneArr.length + 1; d < maxDate + 1; d++) {
                  oneArr.push({
                    date: this.dateType === "MONTH" ? d + "日" : d + "月",
                    name: nameList[0],
                    count: 0,
                    value: null
                  });
                }
              }
            }
            if (twoArr.length < maxDate) {
              if (this.dateType === "DAY") {
                for (let d = twoArr.length; d < maxDate + 1; d++) {
                  twoArr.push({
                    date: d + "时",
                    name: nameList[1],
                    count: 0,
                    value: 0
                  });
                }
              } else {
                for (let d = twoArr.length + 1; d < maxDate + 1; d++) {
                  twoArr.push({
                    date: this.dateType === "MONTH" ? d + "日" : d + "月",
                    name: nameList[1],
                    count: 0,
                    value: 0
                  });
                }
              }
            }

            let chartData2 = oneArr
              .concat(twoArr)
              .map(item => {
                return {
                  ...item,
                  len: item.date,
                  count: item.value === "--" ? null : +item.value
                };
              })
              .sort((a, b) => {
                return new Date(a.name).getTime() - new Date(b.name).getTime();
              });
            this.data = chartData2;
            if (energyType == "water") {
              this.monitoringWaterUnit = res.data.unit;
              this.chartDataWaterObj = {
                expectedData: twoArr.map(one => {
                  return one.value;
                }),
                actualData: oneArr.map(e => {
                  return e.value;
                }),
                xData: oneArr.map(one => {
                  return one.date;
                })
              };
            } else if (energyType == "electric") {
              this.monitoringUnit = res.data.unit;
              this.chartDataObj = {
                expectedData: twoArr.map(one => {
                  return one.value;
                }),
                actualData: oneArr.map(e => {
                  return e.value;
                }),
                xData: oneArr.map(one => {
                  return one.date;
                })
              };
            }
          }
        })
        .catch(e => {
          console.log("能源监测柱状图数据", e);
        });
    },

    dateClickHandle(type) {
      this.dateType = type;
      this.isClick = !this.isClick;
      this.getSummationData();
      this.getEnergyConsumptionRatioData();
      this.getEnergyCostRatioData();
      this.getEnergyStatisticData();
      this.getEnergyMonitoring();
      this.getCarbonEmission();
    },

    onPowerTypeChange(e) {
      this.energyType = e;
      for (let i = 0; i < this.powerTypeOptions.length; i++) {
        if (this.energyType === this.powerTypeOptions[i].value) {
          this.energyTypeName = this.powerTypeOptions[i].label;
          this.monitoringUnit = this.powerTypeOptions[i].energyUnit || "";
        }
      }
      this.getEnergyMonitoring();
    }
  }
};
</script>

<style lang="scss" scoped>
.home-show {
  overflow: hidden;
  overflow-y: scroll;
  // height: calc(100vh - 88px);
  .home-head {
    display: flex;
    align-items: center;

    .home-select-label {
      margin-right: 10px;
      color: #fff;
// http://yunlu.com.cn/template/pc/skin/images/index/u21.png
.dashboard-editor-container {
  text-align: center;
  .title {
    color: #999;
    font-size: 30px;
      font-weight: 600;
    }

    .select-month {
      margin: 0 8px;
    }
  }
  .double-data-show-content {
    display: flex;
    align-items: center;
    // border-bottom: 1px solid #e9e9e9;
    // padding: 23px 0 24px 40px;
    .el-col {
      padding: 23px 0 24px 10px;
    }

    & > div {
      display: flex;
      align-items: center;
    }

    img {
      width: 20px;
      height: 20px;
    }

    .left-title-style {
      display: flex;
      align-items: center;
      margin-left: 10px;
      // border-right: 1px solid #e9e9e9;

      .unit {
        font-size: 22px;
        color: #fff;
        margin-top: 4px;
      }
    }
  }

  .chart-wrapper {
    padding: 10px 24px;
    position: relative;
    .chart-left-unit {
      position: absolute;
      top: 16px;
      left: 24px;
      color: #fff;
      font-size: 18px;
    }

    .line-content {
      margin: 4px 0 0 0;
      height: 300px;
    }
  }

  .data-indicator-overview {
    ::v-deep .el-card__body {
      padding: 0 !important;
    }

    .home-body-left {
      width: 66.3%;
      height: 100%;

      .body-left-title {
        margin: 0 16px 0px 0;
      }

      .left-line-style {
        padding: 24px;
        color: #fff;

        .radio-list {
          width: 122px;

          .radio-list-content {
            margin: 16px 12px 0 0;
            background: #f3f7f7;
            padding: 21px 9px;
            border-radius: 2px;
            overflow: auto;
            height: 360px;
          }
        }

        .right-line {
          width: calc(100% - 122px);
          position: relative;

          .chart-left-unit {
            position: absolute;
            top: 16px;
            left: 0;
            color: #fff;
          }

          .line-content {
            margin: 12px 0 0 0;
            height: 300px;
          }
        }
      }

      .left-bottom-type {
        margin: 16px 16px 16px 0;

        .card-list {
          display: flex;
          flex-wrap: wrap;
          height: 100%;

          .classify-energy {
            border-left: 1px solid #e9e9e9;
            flex: 1;
            display: flex;
            align-items: center;
            padding: 0 0 0 24px;

            &:first-child {
              border-left: none;
            }

            .img-list {
              display: flex;
              align-items: center;
              img {
                width: 20px;
                height: 20px;
              }

              .text-describe {
                display: flex;
                align-items: center;
                margin-left: 18px;

                .number {
                  font-size: 24px;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }

    .home-body-right {
      width: 33.7%;
      height: 100%;

      .right-first-card-title {
        margin: 0 0 16px 0;

        .first-chat {
          margin: 10px 0 0 0;
          height: 300px;
        }
      }

      .second-card-title {
        // padding-top: 16px;

        .second-chat {
          margin: 10px 0 0 0;
          height: 290px;
        }

        .bottom-description-list {
          display: flex;
          padding: 0 23px 16px 10px;
          height: 106px;
          align-items: center;

          .total {
            border-right: 1px solid #e9e9e9;
            padding-left: 10px;
            min-width: 180px;
            max-width: 180px;

            .energy-cost-sum {
              font-size: 24px;
              color: #fff;
            }
          }

          .legend {
            padding: 6px 0 0 20px;

            .legend-list {
              display: flex;
              // width: 280px;
              flex-wrap: wrap;
            }
          }
        }
      }
    }
  }

  .power-cost {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    margin: 40px auto 50px;
  }
}
</style>

 energy_management_ui/src/views/index_bak.vue

@@ -1,146 +1,767 @@
<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
  <div class="home-show">
    <!-- <el-card :bordered="false">
      <div class="home-head">
        <div class="home-select-label">日期切换</div>
        <div>
          <el-button
            :type="dateType === 'DAY' ? 'primary' : ''"
            @click="dateClickHandle('DAY')"
            >日</el-button
          >
          <el-button
            :type="dateType === 'MONTH' ? 'primary' : ''"
            @click="dateClickHandle('MONTH')"
            class="select-month"
            >月
          </el-button>
          <el-button
            :type="dateType === 'YEAR' ? 'primary' : ''"
            @click="dateClickHandle('YEAR')"
            >å¹´</el-button
          >
        </div>
      </div>
    </el-card> -->
    <el-card
      class="body-left-title"
      :bordered="false"
      style="margin-bottom: 12px;"
    >
      <div slot="header" class="clearfix">
        <span>当日双控数据指标总览</span>
      </div>
      <el-row class="double-data-show-content">
        <el-col :span="5" class="total">
          <img alt="" src="~@/assets/home/zonghe.svg" />
          <div class="left-title-style">
            <div>
              <div>全厂综合能耗</div>
              <div class="unit">{{ summation }} tce</div>
            </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        <el-col
          :span="5"
          class="co2"
          v-for="(item, index) in energyStatistic"
          :key="index"
          style="border-left: 1px solid #999;"
        >
          <img
            v-if="item.item.includes('电')"
            src="~@/assets/home/haodian.svg"
            alt=""
          />
          <img
            v-if="item.item.includes('æ°´')"
            src="~@/assets/home/haoshui.svg"
            alt=""
          />
          <img
            v-if="item.item.includes('气')"
            src="~@/assets/home/haoqi.svg"
            alt=""
          />
          <img
            v-if="item.item.includes('蒸汽')"
            src="~@/assets/home/haozhengqi.svg"
            alt=""
          />
          <div class="left-title-style">
            <div>
              <div>
                è€—{{
                  item.item.indexOf("天然") !== -1
                    ? item.item.replace("天然", "")
                    : item.item
                }}量
                {{ item.unit ? `（${item.unit}）` : "" }}
              </div>
              <div class="unit">
                {{ item.count || 0 }}
              </div>
            </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        <el-col :span="5" class="total" style="border-left: 1px solid #999;">
          <img alt="" src="~@/assets/home/wen.png" />
          <div class="left-title-style">
            <div>
              <div>室外温度</div>
              <div class="unit">{{ temperature }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5" class="total" style="border-left: 1px solid #999;">
          <img alt="" src="~@/assets/home/shi.png" />
          <div class="left-title-style">
            <div>
              <div>室外湿度</div>
              <div class="unit">{{ humidity }}</div>
            </div>
        </div>
      </el-col>
    </el-row>

    <!--&lt;!&ndash;实时&ndash;&gt;-->
    <!--<div class="live">-->
    <!--<div class="live_content">实时报警</div>-->
    <!--<div class="live_number">35</div>-->
    <!--</div>-->
    </el-card>
    <el-row type="flex" class="data-indicator-overview">
      <el-col class="home-body-left">
        <el-card :bordered="false" class="body-left-title">
          <div slot="header" class="clearfix">
            <span>能源实时监测</span>
          </div>
          <div class="chart-wrapper">
            <span class="chart-left-unit">{{
              `电/单位${monitoringUnit}`
            }}</span>
            <BarChart class="line-content" :chartData="chartDataObj" />
          </div>
          <div class="chart-wrapper" style="border-top: 1px solid #999">
            <span class="chart-left-unit">{{
              `æ°´/单位${monitoringWaterUnit}`
            }}</span>
            <BarChart class="line-content" :chartData="chartDataWaterObj" />
          </div>
        </el-card>
        <!-- <div class="left-line-style">
          <div>能源实时监测</div>
          <el-row type="flex" justify="space-between">
            <el-col class="radio-list">
                <div class="radio-list-content">
                  <el-radio-group
                    v-model="energyType"
                    @change="onPowerTypeChange"
                  >
                    <el-radio
                      :style="radioStyle"
                      :label="item.value"
                      v-for="item in powerTypeOptions"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-col>
          </el-row>
        </div> -->
      </el-col>
      <el-col class="home-body-right">
        <el-card :bordered="false" class="right-first-card-title">
          <div slot="header" class="clearfix">
            <span>综合能耗占比分析</span>
          </div>
          <PieChart
            class="first-chat"
            :chartData="firstPieData"
            pieTitle="综合能耗占比分析"
          />
        </el-card>
        <el-card :bordered="false" class="second-card-title">
          <div slot="header" class="clearfix">
            <span>能耗设备占比</span>
          </div>
          <PieChart
            class="second-chat"
            :chartData="secondPieData"
            pieTitle="能耗设备占比"
            height="280px"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import {
  getEnergyConsumptionRatio,
  getEnergyConsumptionSummation,
  getEnergyStatistic,
  getHomeEnergyMonitoring,
  listEnergyType,
  getHomeEnergyUnitConsumptionRatio,
  getHomeOutdoorTemperature
} from "@/api/home/home";
import mixins from "@/layout/mixin/getHeight";
import PieChart from "./dashboard/PieChart";
import LineChart from "./dashboard/LineChart";
import BarChart from "./dashboard/BarChart";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
    BarChart,
    PieChart
  },
  mixins: [mixins],

  data() {
    return {
      lineChartData: lineChartData.newVisitis
      firstPieData: [],
      secondPieData: [],
      monitoringUnit: "kWh",
      chartDataObj: {},
      monitoringWaterUnit: "m³",
      chartDataWaterObj: {},
      energyType: "electric",
      energyTypeName: "电",
      dateType: "DAY",
      powerTypeOptions: [
        {
          label: "电",
          value: "electric",
          energyUnit: "kWh"
        },
        { label: "æ°´", value: "Water", energyUnit: "m³" },
        { label: "蒸汽", value: "Steam", energyUnit: "吨" },
        { label: "天然气", value: "Gas", energyUnit: "Nm³" }
      ],
      isClick: true,
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px"
      },
      chart1: null,
      chart2: null,
      data: [],
      pieDta: [],
      pieDtatwo: [],
      energyCostSum: 0,
      energyStatistic: [],
      summation: 10776,
      totalCo2Emissions: 0,
      humidity: "",
      temperature: "",
      timer: null,
      timer30: null
    };
  },
  mounted() {
    this.getEnergyType();
    this.getSummationData();
    this.getEnergyConsumptionRatioData();
    this.getEnergyStatisticData();
    this.getHomeEnergyUnitConsumptionRatioData();

    const ele = document.createEvent("Event");
    ele.initEvent("resize", true, true);
    window.dispatchEvent(ele);

    clearInterval(this.timer);
    clearInterval(this.timer30);
    this.getHomeOutdoorTemperatureData();
    // this.timer = setInterval(() => {
    //   this.getHomeOutdoorTemperatureData();
    // }, 12000);
    this.timer30 = setInterval(() => {
      // this.getEnergyType();
      this.getSummationData();
      this.getEnergyConsumptionRatioData();
      this.getEnergyStatisticData();
      this.getHomeEnergyUnitConsumptionRatioData();
    }, 180000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer30);
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    getHomeOutdoorTemperatureData() {
      getHomeOutdoorTemperature().then(res => {
        this.temperature = res.data.temperature;
        this.humidity = res.data.humidity;
      });
    },
    getEnergyType() {
      listEnergyType()
        .then(res => {
          if (res.code === 200) {
            this.powerTypeOptions =
              res.data.map(item => ({
                ...item,
                value: item.energy,
                label: item.energyName
              })) || [];
            this.energyType =
              this.powerTypeOptions.length > 0
                ? this.powerTypeOptions[0].value
                : "";
            this.energyTypeName =
              this.powerTypeOptions.length > 0
                ? this.powerTypeOptions[0].label
                : "";
            for (let i = 0; i < this.powerTypeOptions.length; i++) {
              this.getEnergyMonitoring(this.powerTypeOptions[i].value);
            }
          }
        })
        .catch(e => {
          console.log("获取能源类型列表", e);
        });
    },
    // ç¢³æŽ’量核算查询
    getCarbonEmission() {
      getHomeCarbonEmission(this.dateType).then(res => {
        this.totalCo2Emissions = res.result.totalCo2Emissions;
      });
    },
    // èŽ·å–全厂综合能耗
    getSummationData() {
      getEnergyConsumptionSummation(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.summation = res.data;
          }
        })
        .catch(e => {
          console.log("获取全厂综合能耗", e);
        });
    },
    // èŽ·å–综合能耗占比环形图分析数据
    getEnergyConsumptionRatioData() {
      getEnergyConsumptionRatio(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.firstPieData = res.data.map(item => {
              return {
                ...item,
                name: item.item,
                value: item.count || 0
                // unit: filterUint
              };
            });
          }
        })
        .catch(e => {
          console.log("获取综合能耗占比环形图分析数据", e);
        });
    },

    // èƒ½æºè®¾å¤‡çŽ¯å½¢å›¾æ•°æ®æ•°æ®
    getHomeEnergyUnitConsumptionRatioData() {
      getHomeEnergyUnitConsumptionRatio(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.secondPieData = res.data.map(item => {
              return {
                ...item,
                name: item.name,
                value: item.value || 0
                // unit: filterUint
              };
            });
          }
        })
        .catch(e => {
          console.log("能源设备分析环形图数据数据", e);
        });
    },

    // åˆ†ç±»èƒ½æºç»Ÿè®¡æ•°æ®
    getEnergyStatisticData() {
      getEnergyStatistic(this.dateType)
        .then(res => {
          if (res.code === 200) {
            this.energyStatistic = res.data;
          }
        })
        .catch(e => {
          console.log("分类能源统计数据", e);
        });
    },

    // èƒ½æºç›‘测柱状图数据
    getEnergyMonitoring(energyType) {
      getHomeEnergyMonitoring(this.dateType, energyType)
        .then(res => {
          if (res.code === 200) {
            let chartData = res.data.chartData.sort((a, b) => {
              return a.date - b.date;
            });
            let nameList = Array.from(
              new Set(
                chartData.map(item => {
                  return item.name;
                })
              )
            ).sort((a, b) => {
              return new Date(b.date).getTime() - new Date(a.date).getTime();
            });
            // è¡¥å…¨æ•°æ®
            let oneArr = chartData.filter(item => {
              return item.name === nameList[0];
            });
            let twoArr = chartData.filter(item => {
              return item.name === nameList[1];
            });

            let maxDate =
              this.dateType === "DAY"
                ? 23
                : Math.max(
                    ...chartData.map(item => {
                      return item.date;
                    })
                  );
            oneArr.forEach(element => {
              if (this.dateType === "DAY") {
                let hour = new Date("2022 " + element.date).getHours() + "时";
                element.date = hour;
              } else {
                element.date =
                  this.dateType === "MONTH"
                    ? element.date + "日"
                    : element.date + "月";
              }
            });
            twoArr.forEach(element => {
              if (this.dateType === "DAY") {
                let hour = new Date("2022 " + element.date).getHours() + "时";
                element.date = hour;
              } else {
                element.date =
                  this.dateType === "MONTH"
                    ? element.date + "日"
                    : element.date + "月";
              }
            });
            if (oneArr.length < maxDate) {
              if (this.dateType === "DAY") {
                for (let d = oneArr.length; d < maxDate + 1; d++) {
                  oneArr.push({
                    date: d + "时",
                    name: nameList[0],
                    count: 0,
                    value: null
                  });
                }
              } else {
                console.log("one111111111");
                for (let d = oneArr.length + 1; d < maxDate + 1; d++) {
                  oneArr.push({
                    date: this.dateType === "MONTH" ? d + "日" : d + "月",
                    name: nameList[0],
                    count: 0,
                    value: null
                  });
                }
              }
            }
            if (twoArr.length < maxDate) {
              if (this.dateType === "DAY") {
                for (let d = twoArr.length; d < maxDate + 1; d++) {
                  twoArr.push({
                    date: d + "时",
                    name: nameList[1],
                    count: 0,
                    value: 0
                  });
                }
              } else {
                for (let d = twoArr.length + 1; d < maxDate + 1; d++) {
                  twoArr.push({
                    date: this.dateType === "MONTH" ? d + "日" : d + "月",
                    name: nameList[1],
                    count: 0,
                    value: 0
                  });
                }
              }
            }

            let chartData2 = oneArr
              .concat(twoArr)
              .map(item => {
                return {
                  ...item,
                  len: item.date,
                  count: item.value === "--" ? null : +item.value
                };
              })
              .sort((a, b) => {
                return new Date(a.name).getTime() - new Date(b.name).getTime();
              });
            this.data = chartData2;
            if (energyType == "water") {
              this.monitoringWaterUnit = res.data.unit;
              this.chartDataWaterObj = {
                expectedData: twoArr.map(one => {
                  return one.value;
                }),
                actualData: oneArr.map(e => {
                  return e.value;
                }),
                xData: oneArr.map(one => {
                  return one.date;
                })
              };
            } else if (energyType == "electric") {
              this.monitoringUnit = res.data.unit;
              this.chartDataObj = {
                expectedData: twoArr.map(one => {
                  return one.value;
                }),
                actualData: oneArr.map(e => {
                  return e.value;
                }),
                xData: oneArr.map(one => {
                  return one.date;
                })
              };
            }
          }
        })
        .catch(e => {
          console.log("能源监测柱状图数据", e);
        });
    },

    dateClickHandle(type) {
      this.dateType = type;
      this.isClick = !this.isClick;
      this.getSummationData();
      this.getEnergyConsumptionRatioData();
      this.getEnergyCostRatioData();
      this.getEnergyStatisticData();
      this.getEnergyMonitoring();
      this.getCarbonEmission();
    },

    onPowerTypeChange(e) {
      this.energyType = e;
      for (let i = 0; i < this.powerTypeOptions.length; i++) {
        if (this.energyType === this.powerTypeOptions[i].value) {
          this.energyTypeName = this.powerTypeOptions[i].label;
          this.monitoringUnit = this.powerTypeOptions[i].energyUnit || "";
        }
      }
      this.getEnergyMonitoring();
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
.home-show {
  overflow: hidden;
  overflow-y: scroll;
  // height: calc(100vh - 88px);
  .home-head {
    display: flex;
    align-items: center;

    .home-select-label {
      margin-right: 10px;
      color: #fff;
      font-weight: 600;
    }

    .select-month {
      margin: 0 8px;
    }
  }
  .double-data-show-content {
    display: flex;
    align-items: center;
    // border-bottom: 1px solid #e9e9e9;
    // padding: 23px 0 24px 40px;
    .el-col {
      padding: 23px 0 24px 10px;
    }

    & > div {
      display: flex;
      align-items: center;
    }

    img {
      width: 20px;
      height: 20px;
    }

    .left-title-style {
      display: flex;
      align-items: center;
      margin-left: 10px;
      // border-right: 1px solid #e9e9e9;

      .unit {
        font-size: 22px;
        color: #fff;
        margin-top: 4px;
      }
    }
  }

  .chart-wrapper {
    padding: 10px 24px;
    position: relative;
    .chart-left-unit {
      position: absolute;
      top: 16px;
      left: 24px;
      color: #fff;
      font-size: 18px;
    }

    .line-content {
      margin: 4px 0 0 0;
      height: 300px;
    }
  }

  .data-indicator-overview {
    ::v-deep .el-card__body {
      padding: 0 !important;
    }

    .home-body-left {
      width: 66.3%;
      height: 100%;

      .body-left-title {
        margin: 0 16px 0px 0;
      }

      .left-line-style {
        padding: 24px;
        color: #fff;

        .radio-list {
          width: 122px;

          .radio-list-content {
            margin: 16px 12px 0 0;
            background: #f3f7f7;
            padding: 21px 9px;
            border-radius: 2px;
            overflow: auto;
            height: 360px;
          }
        }

        .right-line {
          width: calc(100% - 122px);
  position: relative;

  .chart-wrapper {
    padding: 16px 16px 0;
    margin-bottom: 32px;
          .chart-left-unit {
            position: absolute;
            top: 16px;
            left: 0;
            color: #fff;
          }

          .line-content {
            margin: 12px 0 0 0;
            height: 300px;
          }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.live {
  position: fixed;
  right: 0px;
  top: 70px;
      .left-bottom-type {
        margin: 16px 16px 16px 0;

        .card-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
          flex-wrap: wrap;
          height: 100%;

          .classify-energy {
            border-left: 1px solid #e9e9e9;
            flex: 1;
            display: flex;
  align-items: center;
  width: 100px;
  height: 60px;
  background-color: red;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
            padding: 0 0 0 24px;

            &:first-child {
              border-left: none;
}
.live_content {
  font-size: 18px;
  color: white;
  font-weight: bold;

            .img-list {
              display: flex;
              align-items: center;
              img {
                width: 20px;
                height: 20px;
}
.live_number {
  font-size: 32px;
  color: white;
  font-weight: bolder;

              .text-describe {
                display: flex;
                align-items: center;
                margin-left: 18px;

                .number {
                  font-size: 24px;
                  color: #fff;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
          }
        }
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
    .home-body-right {
      width: 33.7%;
      height: 100%;

      .right-first-card-title {
        margin: 0 0 16px 0;

        .first-chat {
          margin: 10px 0 0 0;
          height: 300px;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;

      .second-card-title {
        // padding-top: 16px;

        .second-chat {
          margin: 10px 0 0 0;
          height: 290px;
        }

        .bottom-description-list {
          display: flex;
          padding: 0 23px 16px 10px;
          height: 106px;
          align-items: center;

          .total {
            border-right: 1px solid #e9e9e9;
            padding-left: 10px;
            min-width: 180px;
            max-width: 180px;

            .energy-cost-sum {
              font-size: 24px;
              color: #fff;
            }
          }

          .legend {
            padding: 6px 0 0 20px;

            .legend-list {
              display: flex;
              // width: 280px;
              flex-wrap: wrap;
            }
          }
        }
      }
    }
  }

  .power-cost {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
  }
}
</style>

 energy_management_ui/src/views/index_dev.vue

ÎļþÒÑɾ³ý

 energy_management_ui/src/views/keyEquipment/dailykeyEquipment/BarChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '300px'
      default: "300px"
      },
      autoResize: {
        type: Boolean,
@@ -34,46 +34,47 @@
    data() {
      return {
        chart: null
      }
    };
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#fff"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
@@ -83,30 +84,36 @@
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            }
          }],
          series: [{
          }
        ],
        series: [
          {
            name: title,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            type: "bar",
            stack: "vistors",
            barWidth: "60%",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
            animationEasing: "cubicInOut"
          }
        ]
        });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/keyEquipment/dailykeyEquipment/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    },
    autoResize: {
      type: Boolean,
@@ -34,45 +34,45 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: 'left',
          left: "left",
          textStyle: {
            color: '#606266',
            color: "#fff"
          }
        },
        xAxis: {
          data: actualData,
          type: 'category',
          type: "category"
        },
        grid: {
          left: 10,
@@ -82,9 +82,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -96,25 +96,27 @@
        legend: {
          data: []
        },
        series: [{
        series: [
          {
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            animationEasing: "cubicInOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/keyEquipment/dailykeyEquipment/index.vue

@@ -1,11 +1,21 @@
<template>
  <div>
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" label-width="68px" class="special-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        label-width="68px"
        class="special-form"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="重点设备">
              <el-select v-model="queryParams.indexStorageId" placeholder="请选择重点设备" size="small" style="width: 100%">
              <el-select
                v-model="queryParams.indexStorageId"
                placeholder="请选择重点设备"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in indexCategoryOptions"
                  :key="dict.id"
@@ -17,104 +27,179 @@
          </el-col>
          <el-col :span="6">
            <el-form-item label="统计区间" prop="dataTime">
              <el-date-picker clearable size="small" style="width: 100%"
              <el-date-picker
                clearable
                size="small"
                style="width: 100%"
                              v-model="queryParams.dataTime"
                              :type="dateTypes"
                              :clearable="false"
                              :value-format="valueFormat"
                              placeholder="选择日期">
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="operation">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </basic-container>
    <basic-container :bodyStyle="bodyStyle" style="margin-top: 16px">
      <el-table :data="energyList" border style="width: 100%;" class="tableList">
      <el-table
        :data="energyList"
        border
        style="width: 100%;"
        class="tableList"
      >
        <el-table-column fixed label="曲线选择">
          <template slot-scope="scope">
            <el-button icon="el-icon-search" circle @click="selectChange(scope.row)"
                       style="font-size: 10px"></el-button>
            <el-button
              icon="el-icon-search"
              circle
              @click="selectChange(scope.row)"
              style="font-size: 10px"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column fixed prop="indexName" align="center" label="能源名称" min-width="240px"></el-table-column>
        <el-table-column
          fixed
          prop="indexName"
          align="center"
          label="能源指标名称"
          min-width="240px"
        ></el-table-column>
        <el-table-column label="0时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value0) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value0)
          }}</template>
        </el-table-column>
        <el-table-column label="1时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value1) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value1)
          }}</template>
        </el-table-column>
        <el-table-column label="2时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value2) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value2)
          }}</template>
        </el-table-column>
        <el-table-column label="3时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value3) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value3)
          }}</template>
        </el-table-column>
        <el-table-column label="4时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value4) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value4)
          }}</template>
        </el-table-column>
        <el-table-column label="5时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value5) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value5)
          }}</template>
        </el-table-column>
        <el-table-column label="6时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value6) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value6)
          }}</template>
        </el-table-column>
        <el-table-column label="7时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value7) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value7)
          }}</template>
        </el-table-column>
        <el-table-column label="8时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value8) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value8)
          }}</template>
        </el-table-column>
        <el-table-column label="9时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value9) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value9)
          }}</template>
        </el-table-column>
        <el-table-column label="20时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value20) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value20)
          }}</template>
        </el-table-column>
        <el-table-column label="11时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value11) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value11)
          }}</template>
        </el-table-column>
        <el-table-column label="12时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value12) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value12)
          }}</template>
        </el-table-column>
        <el-table-column label="13时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value13) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value13)
          }}</template>
        </el-table-column>
        <el-table-column label="14时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value14) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value14)
          }}</template>
        </el-table-column>
        <el-table-column label="15时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value15) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value15)
          }}</template>
        </el-table-column>
        <el-table-column label="16时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value16) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value16)
          }}</template>
        </el-table-column>
        <el-table-column label="17时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value17) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value17)
          }}</template>
        </el-table-column>
        <el-table-column label="18时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value18) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value18)
          }}</template>
        </el-table-column>
        <el-table-column label="19时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value19) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value19)
          }}</template>
        </el-table-column>
        <el-table-column label="20时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value20) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value20)
          }}</template>
        </el-table-column>
        <el-table-column label="21时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value21) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value21)
          }}</template>
        </el-table-column>
        <el-table-column label="22时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value22) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value22)
          }}</template>
        </el-table-column>
        <el-table-column label="23时" align="center" min-width="140px">
          <template slot-scope="scope">{{ numFilter(scope.row.value23) }}</template>
          <template slot-scope="scope">{{
            numFilter(scope.row.value23)
          }}</template>
        </el-table-column>
      </el-table>
      <pagination
@@ -141,8 +226,12 @@
</template>

<script>
import {getDataList, getlistChart, getPointFacility} from "@/api/keyEquipment/dailykeyEquipment/dailykeyEquipment";
import LineChart from './LineChart'
import {
  getDataList,
  getlistChart,
  getPointFacility
} from "@/api/keyEquipment/dailykeyEquipment/dailykeyEquipment";
import LineChart from "./LineChart";
import BarChart from "./BarChart";
import mixins from "@/layout/mixin/getHeight";

@@ -178,12 +267,12 @@
        dataTime: undefined,
        timeType: "HOUR",
        indexType: undefined,
        indexStorageId: undefined,
        indexStorageId: undefined
      },
      skinName: "",
      dateTypes: 'date',
      dateTypes: "date",
      valueFormat: "yyyy-MM-dd",
      lineChartData: {expectedData: [], actualData: []},
      lineChartData: { expectedData: [], actualData: [] }
    };
  },
  created() {
@@ -191,7 +280,9 @@
    this.getTime();
    this.getDicts("report_form").then(response => {
      this.dateTypeOptions = response.data;
      this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      this.queryParams.timeType = this.dateTypeOptions.find(
        f => f.isDefault === "Y"
      ).dictValue;
    });
    this.getConfigKey("processEnergy").then(response => {
      this.skinName = response.msg;
@@ -199,14 +290,14 @@
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 210+ 'px'
      this.bodyStyle.height = window.innerHeight - 210 + "px";
    },
    getList() {
      this.queryParams.indexCode = this.$route.query.modelCode;
      getDataList(this.queryParams).then(response => {
        this.energyList = response.rows;
        this.total = response.total;
      })
      });
      getPointFacility().then(response => {
        this.indexCategoryOptions = response.data;
      });
@@ -219,15 +310,20 @@
        let title = "";
        response.data.forEach(item => {
          expectedData.push(this.numFilter(item.value));
          actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时");
          actualData.push(
            item.timeCode.slice(
              item.timeCode.length - 2,
              item.timeCode.length
            ) + "时"
          );
          title = item.indexName + "(" + item.unitId + ")";
        })
        });
        this.lineChartData.actualData = actualData;
        this.lineChartData.expectedData = expectedData;
        this.lineChartData.title = title
        this.lineChartData.title = title;
        this.$refs.LineChart.initChart(this.lineChartData);
        this.$refs.BarChart.initChart(this.lineChartData);
      })
      });
    },
    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
@@ -238,27 +334,28 @@
    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.indexStorageId = '';
      this.queryParams.indexStorageId = "";
      this.handleQuery();
    },
    numFilter(value) {// æˆªå–当前数据到小数点后的几位
      let realVal = '';
      if (!isNaN(value) && value !== '' && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = '0'
        realVal = "0";
      }
      return realVal
      return realVal;
    },
    getTime() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dataTime = year + '-' + month + '-' + date
    },
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month + "-" + date;
    }
  }
};
</script>
@@ -314,25 +411,25 @@

@keyframes fade {
  from {
    opacity: 1.0;
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1.0;
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1.0;
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1.0;
    opacity: 1;
  }
}


 energy_management_ui/src/views/keyEquipment/monthlykeyEquipment/BarChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '300px'
      default: "300px"
      },
      autoResize: {
        type: Boolean,
@@ -34,46 +34,47 @@
    data() {
      return {
        chart: null
      }
    };
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#fff"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
@@ -83,30 +84,36 @@
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            }
          }],
          series: [{
          }
        ],
        series: [
          {
            name: title,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            type: "bar",
            stack: "vistors",
            barWidth: "60%",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
            animationEasing: "cubicInOut"
          }
        ]
        });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/keyEquipment/monthlykeyEquipment/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    },
    autoResize: {
      type: Boolean,
@@ -34,45 +34,45 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: 'left',
          left: "left",
          textStyle: {
            color: '#606266',
            color: "#fff"
          }
        },
        xAxis: {
          data: actualData,
          type: 'category',
          type: "category"
        },
        grid: {
          left: 10,
@@ -82,9 +82,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -96,25 +96,27 @@
        legend: {
          data: []
        },
        series: [{
        series: [
          {
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            animationEasing: "cubicInOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/keyEquipment/monthlykeyEquipment/index.vue

@@ -1,11 +1,21 @@
<template>
  <div>
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" label-width="68px" class="special-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        label-width="68px"
        class="special-form"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="重点设备">
              <el-select v-model="queryParams.indexStorageId" placeholder="请选择重点设备" size="small" style="width: 100%">
              <el-select
                v-model="queryParams.indexStorageId"
                placeholder="请选择重点设备"
                size="small"
                style="width: 100%"
              >
                <el-option
                    v-for="dict in indexCategoryOptions"
                    :key="dict.id"
@@ -17,19 +27,31 @@
          </el-col>
          <el-col :span="6">
            <el-form-item label="统计时间">
              <el-date-picker clearable size="small" style="width: 100%"
              <el-date-picker
                clearable
                size="small"
                style="width: 100%"
                              v-model="queryParams.dataTime"
                              type="month"
                              :clearable="false"
                              value-format="yyyy-MM"
                              placeholder="选择日期">
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="operation">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
              <!--<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>-->
            </el-form-item>
          </el-col>
@@ -42,85 +64,44 @@
       </el-form-item>-->
    </basic-container>
    <basic-container :bodyStyle="bodyStyle" style="margin-top: 16px">
      <div class="el-table el-table--fit el-table--scrollable-x el-table--enable-row-hover el-table--medium">
        <div class="el-table__body-wrapper is-scrolling-left">
          <table class="el-table__body tableList" cellspacing="0" cellpadding="0" style="width: 2600px">
            <tr v-for="item in tableHead">
              <td style="background: #D5D5D5;width: 80px">曲线选择</td>
              <td style="background: #D5D5D5;width: 240px">能源指标名称</td>
              <td style="background: #D5D5D5;">{{ item.value1 }}</td>
              <td style="background: #D5D5D5;">{{ item.value2 }}</td>
              <td style="background: #D5D5D5;">{{ item.value3 }}</td>
              <td style="background: #D5D5D5;">{{ item.value4 }}</td>
              <td style="background: #D5D5D5">{{ item.value5 }}</td>
              <td style="background: #D5D5D5">{{ item.value6 }}</td>
              <td style="background: #D5D5D5;">{{ item.value7 }}</td>
              <td style="background: #D5D5D5;">{{ item.value8 }}</td>
              <td style="background: #D5D5D5;">{{ item.value9 }}</td>
              <td style="background: #D5D5D5;">{{ item.value10 }}</td>
              <td style="background: #D5D5D5;">{{ item.value11 }}</td>
              <td style="background: #D5D5D5;">{{ item.value12 }}</td>
              <td style="background: #D5D5D5;">{{ item.value13 }}</td>
              <td style="background: #D5D5D5;">{{ item.value14 }}</td>
              <td style="background: #D5D5D5;">{{ item.value15 }}</td>
              <td style="background: #D5D5D5;">{{ item.value16 }}</td>
              <td style="background: #D5D5D5;">{{ item.value17 }}</td>
              <td style="background: #D5D5D5;">{{ item.value18 }}</td>
              <td style="background: #D5D5D5;">{{ item.value19 }}</td>
              <td style="background: #D5D5D5;">{{ item.value20 }}</td>
              <td style="background: #D5D5D5;">{{ item.value21 }}</td>
              <td style="background: #D5D5D5;">{{ item.value22 }}</td>
              <td style="background: #D5D5D5;">{{ item.value23 }}</td>
              <td style="background: #D5D5D5">{{ item.value24 }}</td>
              <td style="background: #D5D5D5;">{{ item.value25 }}</td>
              <td style="background: #D5D5D5;">{{ item.value26 }}</td>
              <td style="background: #D5D5D5;">{{ item.value27 }}</td>
              <td style="background: #D5D5D5;" v-if="item.value29 !=null">{{ item.value28 }}</td>
              <td style="background: #D5D5D5;" v-if="item.value29 !=null">{{ item.value29 }}</td>
              <td style="background: #D5D5D5;" v-if="item.value30 !=null">{{ item.value30 }}</td>
              <td style="background: #D5D5D5;" v-if="item.value31 !=null">{{ item.value31 }}</td>
            </tr>
            <tr v-for="data in tableData">
              <td style="width: 80px">
                <el-button icon="el-icon-search" circle @click="selectChange(data.indexId)"
                           style="font-size: 10px"></el-button>
              </td>
              <td style="width: 240px">{{ data.indexName }}</td>
              <td>{{ numFilter(data.value1) }}</td>
              <td>{{ numFilter(data.value2) }}</td>
              <td>{{ numFilter(data.value3) }}</td>
              <td>{{ numFilter(data.value4) }}</td>
              <td>{{ numFilter(data.value5) }}</td>
              <td>{{ numFilter(data.value6) }}</td>
              <td>{{ numFilter(data.value7) }}</td>
              <td>{{ numFilter(data.value8) }}</td>
              <td>{{ numFilter(data.value9) }}</td>
              <td>{{ numFilter(data.value10) }}</td>
              <td>{{ numFilter(data.value11) }}</td>
              <td>{{ numFilter(data.value12) }}</td>
              <td>{{ numFilter(data.value13) }}</td>
              <td>{{ numFilter(data.value14) }}</td>
              <td>{{ numFilter(data.value15) }}</td>
              <td>{{ numFilter(data.value16) }}</td>
              <td>{{ numFilter(data.value17) }}</td>
              <td>{{ numFilter(data.value18) }}</td>
              <td>{{ numFilter(data.value19) }}</td>
              <td>{{ numFilter(data.value20) }}</td>
              <td>{{ numFilter(data.value21) }}</td>
              <td>{{ numFilter(data.value22) }}</td>
              <td>{{ numFilter(data.value23) }}</td>
              <td>{{ numFilter(data.value24) }}</td>
              <td>{{ numFilter(data.value25) }}</td>
              <td>{{ numFilter(data.value26) }}</td>
              <td>{{ numFilter(data.value27) }}</td>
              <td v-if="data.count>=28">{{ numFilter(data.value28) }}</td>
              <td v-if="data.count>=29">{{ numFilter(data.value29) }}</td>
              <td v-if="data.count>=30">{{ numFilter(data.value30) }}</td>
              <td v-if="data.count==31">{{ numFilter(data.value31) }}</td>
            </tr>
          </table>
        </div>
      </div>
      <el-table
        :data="energyList"
        border
        style="width: 100%;"
        class="tableList"
      >
        <el-table-column fixed label="曲线选择">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-search"
              circle
              @click="selectChange(scope.row.indexId)"
              style="font-size: 10px"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="indexName"
          align="center"
          label="能源指标名称"
          min-width="240px"
        ></el-table-column>
        <el-table-column
          v-for="index in 31"
          :key="index"
          :label="`${index}日`"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <span style="font-size: 12px">
              {{ numFilter(scope.row[`value${index}`]) || "--" }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
@@ -145,9 +126,13 @@
</template>

<script>
import {getDataList, exportList, getlistChart} from "@/api/keyEquipment/monthlykeyEquipment/monthlykeyEquipment";
import {
  getDataList,
  exportList,
  getlistChart
} from "@/api/keyEquipment/monthlykeyEquipment/monthlykeyEquipment";
import {getPointFacility} from "@/api/keyEquipment/dailykeyEquipment/dailykeyEquipment";
import LineChart from './LineChart'
import LineChart from "./LineChart";
import BarChart from "./BarChart";
import mixins from "@/layout/mixin/getHeight";

@@ -189,10 +174,10 @@
        dataTime: undefined,
        timeType: "DAY",
        indexType: undefined,
        indexStorageId: undefined,
        indexStorageId: undefined
      },
      skinName: "",
      lineChartData: {expectedData: [], actualData: []},
      lineChartData: { expectedData: [], actualData: [] }
    };
  },
  created() {
@@ -208,15 +193,15 @@
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 210+ 'px'
      this.bodyStyle.height = window.innerHeight - 210 + "px";
    },
    getList() {
      this.queryParams.indexCode = this.$route.query.modelCode;
      getDataList(this.queryParams).then(response => {
        this.tableData = response.data.tabledata;
        this.tableHead = response.data.tablehead;
        this.total = response.data.total
      })
        this.total = response.data.total;
      });
      getPointFacility().then(response => {
        this.indexCategoryOptions = response.data;
      });
@@ -229,15 +214,20 @@
        let title = "";
        response.data.forEach(item => {
          expectedData.push(this.numFilter(item.value));
          actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "日");
          actualData.push(
            item.timeCode.slice(
              item.timeCode.length - 2,
              item.timeCode.length
            ) + "日"
          );
          title = item.indexName + "(" + item.unitId + ")";
        })
        });
        this.lineChartData.actualData = actualData;
        this.lineChartData.expectedData = expectedData;
        this.lineChartData.title = title
        this.lineChartData.title = title;
        this.$refs.LineChart.initChart(this.lineChartData);
        this.$refs.BarChart.initChart(this.lineChartData);
      })
      });
    },
    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
@@ -248,63 +238,63 @@
    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.indexStorageId = '';
      this.queryParams.indexStorageId = "";
      this.handleQuery();
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出综合能耗?', "警告", {
      this.$confirm("是否确认导出综合能耗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
      })
        .then(function() {
        return exportList(queryParams);
      }).then(response => {
        })
        .then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    numFilter(value) {// æˆªå–当前数据到小数点后的几位
      let realVal = '';
      if (!isNaN(value) && value !== '' && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = '0'
        realVal = "0";
      }
      return realVal
      return realVal;
    },
    getTime() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var date = date.getDate()
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.queryParams.dataTime = year + '-' + month
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month;
      /*let startTime = year + '-' + month + '-' + date
      let endTime = year + '-' + month + '-' + (date + 1)
      this.dateRange = [startTime, endTime]*/
    },

    handleTime(date) {
      if (date == 'MONTH') {
        this.dateTypes = 'year',
            this.valueFormat = 'yyyy'
      } else if (date == 'DAY') {
        this.dateTypes = 'month',
            this.valueFormat = 'yyyy-MM'
      if (date == "MONTH") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "DAY") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      } else {
        this.dateTypes = 'date',
            this.valueFormat = 'yyyy-MM-dd'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
    },
    }
  }
};
</script>
@@ -374,29 +364,29 @@

@keyframes fade {
  from {
    opacity: 1.0;
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1.0;
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1.0;
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1.0;
    opacity: 1;
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #CFDCF5;
  background: #cfdcf5;
}
.special-form {
  @import "~@/assets/styles/common-table-form.scss";

 energy_management_ui/src/views/keyEquipment/yearkeyEquipment/BarChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      default: "chart"
      },
      width: {
        type: String,
        default: '100%'
      default: "100%"
      },
      height: {
        type: String,
        default: '300px'
      default: "300px"
      },
      autoResize: {
        type: Boolean,
@@ -34,46 +34,47 @@
    data() {
      return {
        chart: null
      }
    };
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        this.setOptions(val);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      this.initChart();
    });
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      return;
      }
      this.chart.dispose()
      this.chart = null
    this.chart.dispose();
    this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
          left: "left",
            textStyle: {
              color: '#606266',
            color: "#fff"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
              type: 'shadow' // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          trigger: "axis",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow" // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
            }
          },
          grid: {
@@ -83,30 +84,36 @@
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
        xAxis: [
          {
            type: "category",
            data: actualData,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            }
          }],
          series: [{
          }
        ],
        series: [
          {
            name: title,
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            type: "bar",
            stack: "vistors",
            barWidth: "60%",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }]
            animationEasing: "cubicInOut"
          }
        ]
        });
      }
    }
  }
};
</script>

 energy_management_ui/src/views/keyEquipment/yearkeyEquipment/LineChart.vue

@@ -3,24 +3,24 @@
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
      default: "chart"
    },
    width: {
      type: String,
      default: '100%'
      default: "100%"
    },
    height: {
      type: String,
      default: '300px'
      default: "300px"
    },
    autoResize: {
      type: Boolean,
@@ -34,45 +34,45 @@
  data() {
    return {
      chart: null
    }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
      return;
    }
    this.chart.dispose()
    this.chart = null
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData,title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: 'left',
          left: "left",
          textStyle: {
            color: '#606266',
            color: "#fff"
          }
        },
        xAxis: {
          data: actualData,
          type: 'category',
          type: "category"
        },
        grid: {
          left: 10,
@@ -82,9 +82,9 @@
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'cross'
            type: "cross"
          },
          padding: [5, 10]
        },
@@ -96,25 +96,27 @@
        legend: {
          data: []
        },
        series: [{
        series: [
          {
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
                color: "#FF005A",
              lineStyle: {
                color: '#FF005A',
                  color: "#FF005A",
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
            type: "line",
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            animationEasing: "cubicInOut"
          }
        ]
      });
    }
  }
}
};
</script>

 energy_management_ui/src/views/login.vue

@@ -2,27 +2,27 @@
  <div class="logo-page">
    <div class="logo-png">
      <img
        style="width: 208px;margin-right: 30px "
        :src="'https://www.toray.cn/shared/images/toray_logo_ch.svg'"
        style="width: 80px;margin-right: 30px "
        src="@/assets/logo/logo.png"
        alt=""
      />
      <div>综合能源管理系统</div>
      <div>云路综合能源管理系统</div>
    </div>
    <div class="login">
      <!-- <div class="demo-image">
        <el-image style="width: 75%;" :src="logo"></el-image>
      </div> -->
      <div class="demo-image">
        <el-image style="width: 80%;" :src="logo"></el-image>
      </div>
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <!-- <div class="title">用户登录</div> -->
          <div class="logo-view title">
          <div class="title">用户登录</div>
          <!-- <div class="logo-view title">
            <img
              style="width: 100px;margin-right: 30px "
              :src="'https://www.toray.cn/shared/images/toray_logo_ch.svg'"
              alt=""
            />
            <div>综合能源管理系统</div>
          </div>
          </div> -->
          <el-form-item prop="username" style="margin-bottom: 21px">
            <el-input
              v-model="loginForm.username"
@@ -178,8 +178,8 @@
<style rel="stylesheet/scss" lang="scss" scoped>
.logo-page {
  height: 100%;
  background-image: url("../assets/image/bg.jpg");
  // background-image: url("../assets/image/login-background.png");
  // background-image: url("../assets/image/bg.jpg");
  background-image: url("../assets/image/login-background.png");
  background-size: cover;
  overflow: hidden;
  // background: ;
@@ -187,11 +187,11 @@
  // background: linear-gradient(90deg, #101d32 0%, rgba(0, 0, 0, 0.5) 100%);

  .logo-png {
    font-size: 24px;
    font-size: 28px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
    color: #333;
    padding: 3.4% 0 0 74px;
    position: absolute;
  }
@@ -221,8 +221,8 @@
    border-radius: 4px;
    // box-shadow: 0 7px 14px 6px #2f4b9a;
    margin-top: 6px;
    border: 1px solid #061844;
    background: rgba($color: #ffffff, $alpha: 0.06);
    // border: 1px solid #061844;
    background: rgba($color: #437ed0, $alpha: 0.06);

    .logo-view {
      display: flex;
@@ -232,6 +232,13 @@
      font-weight: 600;
    }

    ::v-deep .el-input__inner {
      background: rgb(255, 255, 255, 0.6) !important;
      background-color: rgb(255, 255, 255, 0.6) !important;
      border: 1px solid #dcdfe6 !important;
      color: #606266 !important;
    }

    .el-input {
      height: 38px;


 energy_management_ui/src/views/meter/implement/importIndexTable.vue

@@ -1,20 +1,47 @@
<template>
  <!-- å¯¼å…¥è¡¨ -->
  <el-dialog :title="title" :visible.sync="open"  :destroy-on-close="true" :append-to-body="true" width="800px" top="5vh">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
  <el-dialog
    :title="title"
    :visible.sync="open"
    :destroy-on-close="true"
    :append-to-body="true"
    width="800px"
    top="5vh"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-button icon="el-icon-refresh" size="mini" @click="createIndex">生成指标</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="createIndex"
          >生成指标</el-button
        >
      </el-form-item>
    </el-form>


    <el-row>
      <el-table v-loading="loading" :data="impIndexList" stripe max-height="350">
      <el-table v-loading="loading" :data="impIndexList" max-height="350">
        <el-table-column label="指标编码" align="center" prop="code"  />
        <el-table-column label="指标名称" align="center" prop="name"  />
        <el-table-column label="指标类型" align="center" prop="indexType" :formatter="indexTypeFormat" />
        <el-table-column label="单位" align="center" prop="unitId" :formatter="unitIdFormat" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <el-table-column
          label="指标类型"
          align="center"
          prop="indexType"
          :formatter="indexTypeFormat"
        />
        <el-table-column
          label="单位"
          align="center"
          prop="unitId"
          :formatter="unitIdFormat"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
@@ -22,7 +49,8 @@
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['meter:annex:remove']"
            >删除</el-button>
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
@@ -79,9 +107,9 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      },
      }
    };
  },
  created() {
@@ -100,7 +128,7 @@
      this.queryParams.implementId = impid;
      this.meterid = impid;
      this.getList();
      this.title='编号 '+code+' æŒ‡æ ‡';
      this.title = "编号 " + code + " æŒ‡æ ‡";
      this.open = true;
    },
    // æŒ‡æ ‡ç±»åž‹å­—典翻译
@@ -116,7 +144,7 @@
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      };
      //清空上传组件的文件列表
@@ -133,36 +161,50 @@
    createIndex() {
      let aa = this.meterid;
      console.log("aa==="+aa);
      this.$confirm('是否确认重新生成器具编码为"' + this.qjcode + '"的指标吗?重新生成后所有指标会还原到模板状态', "警告", {
      this.$confirm(
        '是否确认重新生成器具编码为"' +
          this.qjcode +
          '"的指标吗?重新生成后所有指标会还原到模板状态',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        }
      )
        .then(function() {
          return addIndex(aa);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("指标生成成功");
      }).catch(function() {});
        })
        .catch(function() {});
    },
    /** å…³é—­æŒ‰é’®æ“ä½œ */
    handclose()
    {
    handclose() {
      this.open=false;
    },
    /** åˆ é™¤æŒ‰é’®æ“ä½œ */
    handleDelete(row) {
      this.$confirm('是否确认删除指标编码为"' + row.code + '"的指标吗?', "警告", {
      this.$confirm(
        '是否确认删除指标编码为"' + row.code + '"的指标吗?',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        }
      )
        .then(function() {
        return delIndex(row.indexId);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("指标删除成功");
      }).catch(function() {});
    },
        })
        .catch(function() {});
    }
  }
};

</script>

 energy_management_ui/src/views/meter/implement/index.vue

@@ -1,7 +1,12 @@
<template>
  <div>
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" label-width="72px" class="special-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        label-width="72px"
        class="special-form"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="编码" prop="code">
@@ -27,7 +32,13 @@
          </el-col>
          <el-col :span="6">
            <el-form-item label="种类" prop="meterType">
              <el-select v-model="queryParams.meterType" placeholder="请选择种类" clearable size="small" style="width: 100%">
              <el-select
                v-model="queryParams.meterType"
                placeholder="请选择种类"
                clearable
                size="small"
                style="width: 100%"
              >
                <el-option
                    v-for="dict in meterTypeOptions"
                    :key="dict.dictValue"
@@ -72,8 +83,16 @@
<!--          </el-col>-->
          <el-col :span="6">
            <el-form-item class="operation">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
@@ -134,17 +153,69 @@
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="implementList" :height="height" @selection-change="handleSelectionChange">
      <el-table
        v-loading="loading"
        :data="implementList"
        :height="height"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="编码" align="center" prop="code" show-overflow-tooltip/>
        <el-table-column label="器具名称" align="center" prop="meterName" show-overflow-tooltip/>
        <el-table-column label="种类" align="center" prop="meterType" :formatter="meterTypeFormat" show-overflow-tooltip/>
        <el-table-column label="规格型号" align="center" prop="modelNumber" show-overflow-tooltip/>
        <el-table-column label="测量范围" align="center" prop="measureRange" show-overflow-tooltip/>
        <el-table-column label="生产厂商" align="center" prop="manufacturer" show-overflow-tooltip/>
        <el-table-column label="安装位置" align="center" prop="installactionLocation" show-overflow-tooltip/>
        <el-table-column label="状态" align="center" prop="meterStatus" :formatter="meterStatusFormat" show-overflow-tooltip/>
        <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
        <el-table-column
          label="编码"
          align="center"
          prop="code"
          show-overflow-tooltip
        />
        <el-table-column
          label="器具名称"
          align="center"
          prop="meterName"
          show-overflow-tooltip
        />
        <el-table-column
          label="种类"
          align="center"
          prop="meterType"
          :formatter="meterTypeFormat"
          show-overflow-tooltip
        />
        <el-table-column
          label="规格型号"
          align="center"
          prop="modelNumber"
          show-overflow-tooltip
        />
        <el-table-column
          label="测量范围"
          align="center"
          prop="measureRange"
          show-overflow-tooltip
        />
        <el-table-column
          label="生产厂商"
          align="center"
          prop="manufacturer"
          show-overflow-tooltip
        />
        <el-table-column
          label="安装位置"
          align="center"
          prop="installactionLocation"
          show-overflow-tooltip
        />
        <el-table-column
          label="状态"
          align="center"
          prop="meterStatus"
          :formatter="meterStatusFormat"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          width="240"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
@@ -189,7 +260,12 @@
      />
    </basic-container>
    <!-- æ·»åŠ æˆ–修改计量器具档案维护对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="820px" class="dialog-form-row">
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="820px"
      class="dialog-form-row"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="8">
@@ -215,48 +291,82 @@
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号" prop="modelNumber" label-width="110px">
              <el-input v-model="form.modelNumber" placeholder="请输入规格型号"/>
            <el-form-item
              label="规格型号"
              prop="modelNumber"
              label-width="110px"
            >
              <el-input
                v-model="form.modelNumber"
                placeholder="请输入规格型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="测量范围" prop="measureRange">
              <el-input v-model="form.measureRange" placeholder="请输入测量范围"/>
              <el-input
                v-model="form.measureRange"
                placeholder="请输入测量范围"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产厂商" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入生产厂商"/>
              <el-input
                v-model="form.manufacturer"
                placeholder="请输入生产厂商"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="负责人" prop="personCharge" label-width="110px">
              <el-input v-model="form.personCharge" placeholder="请输入负责人"/>
            <el-form-item
              label="负责人"
              prop="personCharge"
              label-width="110px"
            >
              <el-input
                v-model="form.personCharge"
                placeholder="请输入负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装位置" prop="installactionLocation">
              <el-input v-model="form.installactionLocation" placeholder="请输入安装位置"/>
              <el-input
                v-model="form.installactionLocation"
                placeholder="请输入安装位置"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始时间" prop="startTime">
              <el-date-picker clearable size="small" style="width: 100%"
              <el-date-picker
                clearable
                size="small"
                style="width: 100%"
                              v-model="form.startTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择起始时间">
                placeholder="选择起始时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="检定周期(天)" prop="checkCycle" label-width="110px">
              <el-input v-model="form.checkCycle" placeholder="请输入检定周期"
                        oninput="if(value.length>4)value=value.slice(0,4)"/>
            <el-form-item
              label="检定周期(天)"
              prop="checkCycle"
              label-width="110px"
            >
              <el-input
                v-model="form.checkCycle"
                placeholder="请输入检定周期"
                oninput="if(value.length>4)value=value.slice(0,4)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
@@ -273,27 +383,42 @@
          </el-col>
          <el-col :span="8">
            <el-form-item label="投运时间" prop="putrunTime">
              <el-date-picker clearable size="small" style="width: 100%"
              <el-date-picker
                clearable
                size="small"
                style="width: 100%"
                              v-model="form.putrunTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择投运时间">
                placeholder="选择投运时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="提醒周期(天)" prop="reminderCycle" label-width="110px">
              <el-input v-model="form.reminderCycle" placeholder="请输入提醒周期"
                        oninput="if(value.length>4)value=value.slice(0,4)"/>
            <el-form-item
              label="提醒周期(天)"
              prop="reminderCycle"
              label-width="110px"
            >
              <el-input
                v-model="form.reminderCycle"
                placeholder="请输入提醒周期"
                oninput="if(value.length>4)value=value.slice(0,4)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark" label-width="110px">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
@@ -305,7 +430,12 @@
    </el-dialog>

    <!-- è®¡é‡å™¨å…·æ¡£æ¡ˆ å¯¼å…¥å¯¹è¯æ¡† -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" :destroy-on-close="true" width="400px">
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      :destroy-on-close="true"
      width="400px"
    >
      <el-upload
          ref="upload"
          :limit="1"
@@ -324,16 +454,20 @@
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-link type="info" style="font-size:12px;color:blue;" @click="importTemplate">下载模板</el-link>
          <el-link
            type="info"
            style="font-size:12px;color:blue;"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">
          å¯¼å…¥æç¤ºï¼š<br>1、新增导入,仅允许导入“xls”或“xlsx”格式文件！
          <br>2、编码必须唯一,重复数据无法导入
          <br>3、种类和状态填写错误的数据无法导入
          <br>4、检定周期、提醒周期大于0正整数,填写错误则默认为1
          <br>5、起始时间填写错误或不填则默认为空
          å¯¼å…¥æç¤ºï¼š<br />1、新增导入,仅允许导入“xls”或“xlsx”格式文件！
          <br />2、编码必须唯一,重复数据无法导入
          <br />3、种类和状态填写错误的数据无法导入
          <br />4、检定周期、提醒周期大于0正整数,填写错误则默认为1
          <br />5、起始时间填写错误或不填则默认为空
        </div>

      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
@@ -344,7 +478,6 @@
    <importFileTable ref="importFile" @ok="handleFjQuery"/>

    <importIndexTable ref="importIndex" @ok="handleFjQuery"/>

  </div>
</template>

@@ -454,15 +587,13 @@
        meterType: undefined,
        measureRange: undefined,
        manufacturer: undefined,
        installactionLocation: undefined,
        installactionLocation: undefined
      },
      // è¡¨å•å‚æ•°
      form: {},
      // è¡¨å•æ ¡éªŒ
      rules: {
        code: [
          {required: true, message: "编码不能为空", trigger: "blur"}
        ],
        code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
        meterName: [
          {required: true, message: "器具名称不能为空", trigger: "blur"}
        ],
@@ -482,18 +613,27 @@
          {required: true, message: "投运时间不能为空", trigger: "blur"}
        ],
        checkCycle: [
          {required: true, pattern: /^\+?[1-9]\d*$/, message: "检定周期必须是大于0的正整数", trigger: "blur"}
          {
            required: true,
            pattern: /^\+?[1-9]\d*$/,
            message: "检定周期必须是大于0的正整数",
            trigger: "blur"
          }
        ],
        reminderCycle: [
          {required: true, pattern: /^\+?[1-9]\d*$/, message: "提醒周期必须是大于0的正整数", trigger: "blur"}
        ],
          {
            required: true,
            pattern: /^\+?[1-9]\d*$/,
            message: "提醒周期必须是大于0的正整数",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_device_type").then(response => {

      for (let i = 0; i < response.data.length; i++) {
        if (response.data[i].isDefault == "Y") {
          this.myType = response.data[i].dictValue;
@@ -505,7 +645,6 @@
      for (let i = 0; i < response.data.length; i++) {
        if (response.data[i].isDefault == "Y") {
          this.mystatus = response.data[i].dictValue;

        }
      }
      this.meterStatusOptions = response.data;
@@ -515,10 +654,10 @@
  methods: {
    setCharts() {
      this.bodyStyle = {
        height: window.innerHeight - 210 + 'px',
        overflow: 'hidden'
      }
      this.height = window.innerHeight - 370;
        height: window.innerHeight - 224 + "px",
        overflow: "hidden"
      };
      this.height = window.innerHeight - 360;
    },
    /** æŸ¥è¯¢è®¡é‡å™¨å…·æ¡£æ¡ˆç»´æŠ¤åˆ—表 */
    getList() {
@@ -579,10 +718,10 @@
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.codes = selection.map(item => item.code)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.ids = selection.map(item => item.id);
      this.codes = selection.map(item => item.code);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** æ–°å¢žæŒ‰é’®æ“ä½œ */
    handleAdd() {
@@ -595,7 +734,7 @@
    /** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      const id = row.id || this.ids;
      getImplement(id).then(response => {
        this.form = response.data;
        this.open = true;
@@ -634,38 +773,48 @@
    handleDelete(row) {
      const ids = row.id || this.ids;
      const codes = row.code || this.codes;
      this.$confirm('是否确认删除计量器具档案维护编号为"' + codes + '"的计量器具档案?', "警告", {
      this.$confirm(
        '是否确认删除计量器具档案维护编号为"' + codes + '"的计量器具档案?',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        }
      )
        .then(function() {
        return delImplement(ids);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有计量器具档案维护数据项?', "警告", {
      this.$confirm("是否确认导出所有计量器具档案维护数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
      })
        .then(function() {
        return exportImplement(queryParams);
      }).then(response => {
        })
        .then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
        })
        .catch(function() {});
    },
    /** å¯¼å…¥æŒ‰é’®æ“ä½œ */
    handleImport() {
      //this.$refs.upload.clearFiles();
      this.upload.title = "计量器具档案导入";
      this.upload.accept = ".xlsx, .xls";
      this.upload.url = process.env.VUE_APP_BASE_API + "/meter/implement/importData?updateSupport=0";
      this.upload.url =
        process.env.VUE_APP_BASE_API +
        "/meter/implement/importData?updateSupport=0";
      this.upload.open = true;
    },
    /** ä¸‹è½½æ¨¡æ¿æ“ä½œ */

 energy_management_ui/src/views/meter/implementCount/importIndexTable.vue

@@ -1,19 +1,40 @@
<template>
  <!-- å¯¼å…¥è¡¨ -->
  <el-dialog :title="title" :visible.sync="open"  :destroy-on-close="true" :append-to-body="true" width="800px" top="5vh">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
  <el-dialog
    :title="title"
    :visible.sync="open"
    :destroy-on-close="true"
    :append-to-body="true"
    width="800px"
    top="5vh"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
       <!-- <el-button icon="el-icon-refresh" size="mini" @click="createIndex">生成指标</el-button>-->
      </el-form-item>
    </el-form>


    <el-row>
      <el-table v-loading="loading" :data="impIndexList" stripe max-height="350">
      <el-table v-loading="loading" :data="impIndexList" max-height="350">
        <el-table-column label="指标编码" align="center" prop="code"  />
        <el-table-column label="指标名称" align="center" prop="name"  />
        <el-table-column label="指标类型" align="center" prop="indexType" :formatter="indexTypeFormat" />
        <el-table-column label="单位" align="center" prop="unitId" :formatter="unitIdFormat" />
        <el-table-column
          label="指标类型"
          align="center"
          prop="indexType"
          :formatter="indexTypeFormat"
        />
        <el-table-column
          label="单位"
          align="center"
          prop="unitId"
          :formatter="unitIdFormat"
        />
       <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            &lt;!&ndash;<el-button
@@ -79,9 +100,9 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      },
      }
    };
  },
  created() {
@@ -100,7 +121,7 @@
      this.queryParams.implementId = impid;
      this.meterid = impid;
      this.getList();
      this.title='编号 '+code+' æŒ‡æ ‡';
      this.title = "编号 " + code + " æŒ‡æ ‡";
      this.open = true;
    },
    // æŒ‡æ ‡ç±»åž‹å­—典翻译
@@ -116,7 +137,7 @@
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      };
      //清空上传组件的文件列表
@@ -133,36 +154,50 @@
    createIndex() {
      let aa = this.meterid;
      console.log("aa==="+aa);
      this.$confirm('是否确认重新生成器具编码为"' + this.qjcode + '"的指标吗?重新生成后所有指标会还原到模板状态', "警告", {
      this.$confirm(
        '是否确认重新生成器具编码为"' +
          this.qjcode +
          '"的指标吗?重新生成后所有指标会还原到模板状态',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        }
      )
        .then(function() {
          return addIndex(aa);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("指标生成成功");
      }).catch(function() {});
        })
        .catch(function() {});
    },
    /** å…³é—­æŒ‰é’®æ“ä½œ */
    handclose()
    {
    handclose() {
      this.open=false;
    },
    /** åˆ é™¤æŒ‰é’®æ“ä½œ */
    handleDelete(row) {
      this.$confirm('是否确认删除指标编码为"' + row.code + '"的指标吗?', "警告", {
      this.$confirm(
        '是否确认删除指标编码为"' + row.code + '"的指标吗?',
        "警告",
        {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        }
      )
        .then(function() {
        return delIndex(row.indexId);
      }).then(() => {
        })
        .then(() => {
        this.getList();
        this.msgSuccess("指标删除成功");
      }).catch(function() {});
    },
        })
        .catch(function() {});
    }
  }
};

</script>

 energy_management_ui/src/views/power-statistics-analyse/pari-passu/BarChart.vue

@@ -99,13 +99,16 @@
          }
        },
        legend: {
          right: 0
          right: 0,
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: "10%",
          top: 30,
          top: 50,
          containLabel: true
        },
        xAxis: [
@@ -123,6 +126,9 @@
            type: "value",
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          {

 energy_management_ui/src/views/power-statistics-analyse/pari-passu/LineChart.vue

@@ -107,7 +107,10 @@
          }
        },
        legend: {
          data: []
          data: [],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {

 energy_management_ui/src/views/power-statistics-analyse/pari-passu/index.vue

@@ -246,10 +246,10 @@
      });
    },
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 105 + "px"
        height: window.innerHeight - 155 + "px"
      };
    },

@@ -341,7 +341,7 @@
  margin-bottom: 0;
}
.chart-list {
  margin-top: 16px;
  // margin-top: 16px;
  ::v-deep .el-card__body {
    padding: 10px 12px;
  }

 energy_management_ui/src/views/power-statistics-analyse/per-passu/index.vue

@@ -246,10 +246,10 @@
      });
    },
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 155 + "px";
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 105 + "px"
        height: window.innerHeight - 155 + "px"
      };
    },

@@ -341,7 +341,7 @@
  margin-bottom: 0;
}
.chart-list {
  margin-top: 16px;
  // margin-top: 16px;
  ::v-deep .el-card__body {
    padding: 10px 12px;
  }

 energy_management_ui/src/views/reportForm/annualReport/index.vue

@@ -1,8 +1,16 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="能源类型">
        <el-select v-model="queryParams.indexStorageId" placeholder="请选择能源品种">
        <el-select
          v-model="queryParams.indexStorageId"
          placeholder="请选择能源品种"
        >
          <el-option
            v-for="dict in indexCategoryOptions"
            :key="dict.dictValue"
@@ -17,41 +25,115 @@
        </el-radio-group>
      </el-form-item>-->
      <el-form-item label="统计时间">
        <el-date-picker clearable size="small" style="width: 200px"
        <el-date-picker
          clearable
          size="small"
          style="width: 200px"
                        v-model="queryParams.dataTime"
                        type="year"
                        value-format="yyyy"
                        placeholder="选择日期">
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="list" border style="width: 100%; margin-top: 20px" class="tableList" >
      <el-table-column fixed prop="indexName" align="center" label="能源名称" min-width="240px"></el-table-column>
      <el-table-column label="1月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value1)}}</template></el-table-column>
      <el-table-column label="2月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value2)}}</template></el-table-column>
      <el-table-column label="3月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value3)}}</template></el-table-column>
      <el-table-column label="4月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value4)}}</template></el-table-column>
      <el-table-column label="5月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value5)}}</template></el-table-column>
      <el-table-column label="6月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value6)}}</template></el-table-column>
      <el-table-column label="7月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value7)}}</template></el-table-column>
      <el-table-column label="8月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value8)}}</template></el-table-column>
      <el-table-column label="9月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value9)}}</template></el-table-column>
      <el-table-column label="10月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value10)}}</template></el-table-column>
      <el-table-column label="11月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value11)}}</template></el-table-column>
      <el-table-column label="12月" align="center" min-width="140px"> <template slot-scope="scope">{{numFilter(scope.row.value12)}}</template></el-table-column>
    <el-table :data="list" border style="width: 100%; margin-top: 20px">
      <el-table-column
        fixed
        prop="indexName"
        align="center"
        label="能源指标名称"
        min-width="240px"
      ></el-table-column>
      <el-table-column label="1月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value1)
        }}</template></el-table-column
      >
      <el-table-column label="2月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value2)
        }}</template></el-table-column
      >
      <el-table-column label="3月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value3)
        }}</template></el-table-column
      >
      <el-table-column label="4月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value4)
        }}</template></el-table-column
      >
      <el-table-column label="5月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value5)
        }}</template></el-table-column
      >
      <el-table-column label="6月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value6)
        }}</template></el-table-column
      >
      <el-table-column label="7月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value7)
        }}</template></el-table-column
      >
      <el-table-column label="8月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value8)
        }}</template></el-table-column
      >
      <el-table-column label="9月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value9)
        }}</template></el-table-column
      >
      <el-table-column label="10月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value10)
        }}</template></el-table-column
      >
      <el-table-column label="11月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value11)
        }}</template></el-table-column
      >
      <el-table-column label="12月" align="center" min-width="140px">
        <template slot-scope="scope">{{
          numFilter(scope.row.value12)
        }}</template></el-table-column
      >
    </el-table>

  </div>
</template>

<script>
  import { reportStatisticsList,exportList} from "@/api/reportForm/annualReport/annualReport";
import {
  reportStatisticsList,
  exportList
} from "@/api/reportForm/annualReport/annualReport";

  export default {
    data() {
@@ -65,9 +147,9 @@
          beginTime:undefined,
          endTime:undefined,
          indexCode:undefined,
          indexStorageId:undefined,
        indexStorageId: undefined
        },
        indexCategoryOptions:[],
      indexCategoryOptions: []
      };
    },
    created() {
@@ -92,8 +174,8 @@
        //this.loading = true;
        this.queryParams.indexCode=this.modelCode;
        let times=this.queryParams.dataTime.slice(0,4);
        this.queryParams.beginTime=times+"-01-01 00:00:00"
        this.queryParams.endTime=times+"-12-31 00:00:00"
      this.queryParams.beginTime = times + "-01-01 00:00:00";
      this.queryParams.endTime = times + "-12-31 00:00:00";
        reportStatisticsList(this.queryParams).then(response => {
          this.list=response.data;
          this.loading = false;
@@ -101,7 +183,6 @@
      },
      /** æœç´¢æŒ‰é’®æ“ä½œ */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** é‡ç½®æŒ‰é’®æ“ä½œ */
@@ -113,56 +194,48 @@
      handleExport() {
        const queryParams = this.queryParams;
        queryParams.dataTime=queryParams.dataTime+"-01-01";
        this.$confirm('是否确认导出所有报表数据?', "警告", {
      this.$confirm("是否确认导出所有报表数据?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
      })
        .then(function() {
          return exportList(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
        })
        .catch(function() {});
      },
      handleTime(date){
        if(date=='MONTH'){
          this.dateTypes= 'year',
          this.valueFormat='yyyy'
        }else if(date=='DAY'){
          this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
      if (date == "MONTH") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "DAY") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
        }else{
          this.dateTypes= 'date',
          this.valueFormat='yyyy-MM-dd'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
        }
      },
      getTime(){
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var date = date.getDate()
        month = month < 10 ? '0' + month : month
        date = date < 10 ? '0' + date : date
        this.queryParams.dataTime=year + '-' + month
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var date = date.getDate();
      month = month < 10 ? "0" + month : month;
      date = date < 10 ? "0" + date : date;
      this.queryParams.dataTime = year + "-" + month;
      },
      numFilter(value) {// æˆªå–当前数据到小数点后的几位
        let realVal = '' ;
        if (!isNaN(value) && value !== '' && value !== null) {
          realVal = parseFloat(value).toFixed(this.skinName)
    numFilter(value) {
      // æˆªå–当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
        } else {
          realVal = '--'
        realVal = "--";
        }
        return realVal
      },
      return realVal;
    }
    }
  };
</script>
<style scoped>
  .tableList th.is-leaf, .tableList td{
    border-bottom: 1px solid #000000 !important;
    border-right: 1px solid #000000 !important;
  }
  .tableList{
    border: 1px solid #000000 !important;
  }
</style>
<style scoped></style>

在上述文件截断后对比
energy_management_ui/src/views/reportForm/dailyReport/index.vue
energy_management_ui/src/views/reportForm/monthlyReport/index.vue
energy_management_ui/src/views/reportForm/statements/BarChart.vue
energy_management_ui/src/views/reportForm/statements/index.vue
energy_management_ui/src/views/stage/alarm/LinChart.vue
energy_management_ui/src/views/stage/alarm/alarmIndex.vue
energy_management_ui/src/views/system/menu/index.vue
energy_management_ui/src/views/workingProcedure/dailyWorkingProcedure/LineChart.vue
energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/BarChart.vue
energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/LineChart.vue
energy_management_ui/src/views/workingProcedure/monthlyWorkingProcedure/index.vue
energy_management_ui/src/views/workingProcedure/yearWorkingProcedure/BarChart.vue
energy_management_ui/src/views/workingProcedure/yearWorkingProcedure/LineChart.vue