整体样式修改

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

@@ -5,7 +5,7 @@
</template>

<script>
export default  {
  name:  'App'
}
export default {
  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,5 +1,28 @@
// // 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;
$primary-color:#38BCBF;
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
@@ -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,56 +25,60 @@
</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;
    .icon-list {
      height: 200px;
      overflow-y: scroll;
      div {
        height: 30px;
        line-height: 30px;
        margin-bottom: -5px;
        cursor: pointer;
        width: 33%;
        float: left;
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
.icon-body {
  width: 100%;
  padding: 10px;
  z-index: 999;
  .icon-list {
    height: 200px;
    overflow-y: scroll;
    div {
      height: 30px;
      line-height: 30px;
      margin-bottom: -5px;
      cursor: pointer;
      width: 33%;
      float: left;
    }
    span {
      display: inline-block;
      vertical-align: -0.15em;
      fill: currentColor;
      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=""
           style="transform:rotate(180deg)"
           @click="toggleCollapse">
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
        style="transform:rotate(180deg)"
        @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,40 +10,41 @@

<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 {
.fixed-header + .app-main {
  padding-top: 50px;
}

.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;
  .fixed-header + .app-main {
    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: '首页',
      meta: {
        title: '首页',
        icon: 'dashboard',
        noCache: true,
        affix: true
    redirect: "index",
    children: [
      {
        path: "index",
        component: () => import("@/views/index"),
        name: "首页",
        meta: {
          title: "首页",
          icon: "dashboard",
          noCache: true,
          affix: true
        }
      }
    }]
    ]
  },
  {
    path: '/indexdev',
    component: () => import('@/views/index_dev'),
    hidden: 'true'
    path: "/indexdev",
    component: () => import("@/views/index"),
    hidden: "true"
  },
  {
    path: '/user',
    path: "/user",
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [{
      path: 'profile',
      component: () => import('@/views/system/user/profile/index'),
      name: 'Profile',
      meta: {
        title: '个人中心',
        icon: 'user'
    redirect: "noredirect",
    children: [
      {
        path: "profile",
        component: () => import("@/views/system/user/profile/index"),
        name: "Profile",
        meta: {
          title: "个人中心",
          icon: "user"
        }
      }
    }]
    ]
  },
  {
    path: '/dict',
    path: "/dict",
    component: Layout,
    hidden: true,
    children: [{
      path: 'type/data/:dictId(\\d+)',
      component: () => import('@/views/system/dict/data'),
      name: 'Data',
      meta: {
        title: '字典数据',
        icon: ''
    children: [
      {
        path: "type/data/:dictId(\\d+)",
        component: () => import("@/views/system/dict/data"),
        name: "Data",
        meta: {
          title: "字典数据",
          icon: ""
        }
      }
    }]
    ]
  },
  {
    path: '/gen',
    path: "/gen",
    component: Layout,
    hidden: true,
    children: [{
      path: 'edit',
      component: () => import('@/views/tool/gen/editTable'),
      name: 'GenEdit',
      meta: {
        title: '修改生成配置'
    children: [
      {
        path: "edit",
        component: () => import("@/views/tool/gen/editTable"),
        name: "GenEdit",
        meta: {
          title: "修改生成配置"
        }
      }
    }]
    ]
  },
  {
    path: '/model',
    path: "/model",
    component: Layout,
    hidden: true,
    children: [{
      path: '',
      component: () => import('@/views/basicsetting/model/index'),
      name: 'modelManage',
      meta: {
        title: '模型管理'
    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',
    path: "/electricityPrice",
    component: Layout,
    hidden: true,
    children: [{
      path: 'list/:id',
      component: () => import('@/views/workforce/management/schemeItem'),
      name: 'list',
      meta: {
        title: '轮值方案细则'
    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">
@@ -46,270 +58,288 @@
          size="mini"
          @click=""
          v-hasPermi="['']"
        >导出
          >导出
        </el-button>
      </el-col>
    </el-row>
    <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"/>
      <el-table-column label="下限值" align="center" prop="values"/>
      <el-table-column label="上限值" align="center" prop="code"/>
    <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" />
      <el-table-column label="下限值" align="center" prop="values" />
      <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" >
        <el-table-column label="报警时间"prop="one"  />
        <el-table-column label="报警值"  prop="two"  />
        <el-table-column label="实际值"  prop="three"  />
        <el-table-column label="实际值"  prop="four"  />
        <el-table-column label="实际值"  prop="five"  />
        <el-table-column label="实际值"  prop="six"  />
        <el-table-column label="实际值"  prop="seven"  />
        <el-table-column label="实际值"  prop="eieght"  />
      <el-table :data="tableData" :show-header="hiddenTableHeader" border="1px">
        <el-table-column label="报警时间" prop="one" />
        <el-table-column label="报警值" prop="two" />
        <el-table-column label="实际值" prop="three" />
        <el-table-column label="实际值" prop="four" />
        <el-table-column label="实际值" prop="five" />
        <el-table-column label="实际值" prop="six" />
        <el-table-column label="实际值" prop="seven" />
        <el-table-column label="实际值" prop="eieght" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
  const lineChartData = {
    newVisitis: {
    }
  }
  import {
    addEnergyindex,
    delEnergyindex,
    exportEnergyindex,
    getEnergyindex,
    listEnergyindex,
    updateEnergyindex
  } from "@/api/basicsetting/energyindex";
  import LineChart from './LiChart'
const lineChartData = {
  newVisitis: {}
};
import {
  addEnergyindex,
  delEnergyindex,
  exportEnergyindex,
  getEnergyindex,
  listEnergyindex,
  updateEnergyindex
} from "@/api/basicsetting/energyindex";
import LineChart from "./LiChart";

export default {
  name: "energyIndex",
  components: {
    LineChart
  },
  data() {
    return {
      hiddenTableHeader: false,
      lineChartData: lineChartData.newVisitis,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      dateRange: [],
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 指标信息表格数据
      List: [],
      energyindexList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 主键字典
      indexIdOptions: [],
      // 指标名称字典
      nameOptions: [],
      // 指标编码字典
      codeOptions: [],
      // 系统指标分类，1-能源类，2-产品类，3-能效类，4-经营类，5-其他字典
      indexCategoryOptions: [],
      // 备注字典
      remarkOptions: [],
      // 单位字典
      unitIdOptions: [],
      // 查询参数
      lineChartData: {
        newVisitis: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        code: undefined,
        indexCategory: undefined,
        nodeId: undefined
      },


  export default {
    name: 'energyIndex',
    components: {
      LineChart
    },
    data() {
      return {
        hiddenTableHeader:false,
        lineChartData: lineChartData.newVisitis,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        dateRange: [],
        names: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 指标信息表格数据
        List: [],
        energyindexList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 主键字典
        indexIdOptions: [],
        // 指标名称字典
        nameOptions: [],
        // 指标编码字典
        codeOptions: [],
        // 系统指标分类，1-能源类，2-产品类，3-能效类，4-经营类，5-其他字典
        indexCategoryOptions: [],
        // 备注字典
        remarkOptions: [],
        // 单位字典
        unitIdOptions: [],
        // 查询参数
        lineChartData:{
          newVisitis:null,
      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点"
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          code: undefined,
          indexCategory: undefined,
          nodeId: undefined
        {
          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"
        },

        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点',
        },
          {
            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',
       }
        ],

        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: "指标名称不能为空", trigger: "blur"},
            {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: [
            {required: true, message: "请选择指标分类", trigger: "blur"}
          ]
        },
        currentNode: undefined,
        indexCategoryDefaultVal: undefined,
        unitDefaultVal: undefined
      };
    },

    created() {
      /*  this.getList();*/
      this.getDicts("sys_index_category").then(response => {
        this.indexCategoryOptions = response.data;
        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');
      });
      setInterval(this.getList(), 30000);

      this.bpy()

    },
    methods: {
      /** 查询指标信息列表 */
      getList(modelNode) {
        this.currentNode = modelNode;
        if (modelNode) {
          this.loading = true;
          this.queryParams.nodeId = modelNode.id;
          listEnergyindex(this.queryParams).then(response => {
            this.energyindexList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        } else {
          this.energyindexList = [];
        {
          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"
        }
      ],

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "指标名称不能为空", trigger: "blur" },
          { 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: [
          { required: true, message: "请选择指标分类", trigger: "blur" }
        ]
      },
      bpy() {
        this.tableData = this.datas;
      },
      /** 查看按钮操作 */
      handleUpdate(row) {
        this.reset();
        const indexId = row.indexId || this.ids;
        /*  getEnergyindex(indexId).then(response => {
      currentNode: undefined,
      indexCategoryDefaultVal: undefined,
      unitDefaultVal: undefined
    };
  },

  created() {
    /*  this.getList();*/
    this.getDicts("sys_index_category").then(response => {
      this.indexCategoryOptions = response.data;
      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");
    });
    setInterval(this.getList(), 30000);

    this.bpy();
  },
  methods: {
    /** 查询指标信息列表 */
    getList(modelNode) {
      this.currentNode = modelNode;
      if (modelNode) {
        this.loading = true;
        this.queryParams.nodeId = modelNode.id;
        listEnergyindex(this.queryParams).then(response => {
          this.energyindexList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } else {
        this.energyindexList = [];
      }
    },
    bpy() {
      this.tableData = this.datas;
    },
    /** 查看按钮操作 */
    handleUpdate(row) {
      this.reset();
      const indexId = row.indexId || this.ids;
      /*  getEnergyindex(indexId).then(response => {
            this.form = response.data;
    this.title = "异常信息"+  response.data.name ;
          });*/

        this.open = true;
      this.open = true;
      /*  this.title = "报警明细";*/
      },
      // 系统指标分类，1-能源类，2-产品类，3-能效类，4-经营类，5-其他字典翻译
      indexCategoryFormat(row, column) {
        return this.selectDictLabel(this.indexCategoryOptions, row.indexCategory);
      },
    },
    // 系统指标分类，1-能源类，2-产品类，3-能效类，4-经营类，5-其他字典翻译
    indexCategoryFormat(row, column) {
      return this.selectDictLabel(this.indexCategoryOptions, row.indexCategory);
    },

      // 单位字典翻译
      unitIdFormat(row, column) {
        return this.selectDictLabel(this.unitIdOptions, row.unitId);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          indexId: undefined,
          name: undefined,
          code: undefined,
          indexCategory: undefined,
          remark: undefined,
          unitId: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList(this.currentNode);
      },
      openDlg (){
        this.open=true;
      }
    // 单位字典翻译
    unitIdFormat(row, column) {
      return this.selectDictLabel(this.unitIdOptions, row.unitId);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        indexId: undefined,
        name: undefined,
        code: undefined,
        indexCategory: undefined,
        remark: undefined,
        unitId: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.currentNode);
    },
    openDlg() {
      this.open = true;
    }

  };
  }
};
</script>

 energy_management_ui/src/views/alarmItem/modelWarnSetting.vue

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

export default {
  name: "modelWarnSetting",
  components: {zbIndex, cjdIndex},
  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,71 +1,122 @@
<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">
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :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"
                :height="height"
                @selection-change="handleSelectionChange">
    <div class="tableStyle" v-if="value == 'tableOpen'">
      <el-table
        :data="tableData"
        ref="dataTable"
        border
        style="margin-top: 20px"
        :height="height"
        @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">
            <el-select
                v-model="scope.row.yValue"
                @change="selectNumber(scope.row,scope.$index)"
              v-model="scope.row.yValue"
              @change="selectNumber(scope.row, scope.$index)"
            >

              <el-option
                  v-for="(item,index) in addTableSelect"
                  :key="item.yValue"
                  :label="item.yLable"
                  :value="item.yValue"
                v-for="(item, index) in addTableSelect"
                :key="item.yValue"
                :label="item.yLable"
                :value="item.yValue"
              ></el-option>
            </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="indexName" align="center" label="点位名称" />
        <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'"/>
        <TableDialog :code="code" v-else :open="open"/>
    <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">
        <el-button @click="cancelDialog">取 消</el-button>
@@ -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 => {
      if (response.code === 200) {
        this.intervalTime = response.msg
        this.timer = setInterval(this.getLineDataList, this.intervalTime)
    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);
        }
      }
    })
    );
  },
  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
              }
              this.addTableSelect.push(optionItem)
                yValue: "y" + j,
                yLable: "Y" + j
              };
              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"
                     :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">
  <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>
        </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;
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelData: '',
      bodyStyleRight: {},
      modelData: "",
      modelInfoOptions: [],
      modelCode:undefined,
      isCollapse: false,
    }
      modelCode: undefined,
      isCollapse: false
    };
  },
  methods: {
    changeNode: function (node) {
    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');
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function (item) {
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};

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

@@ -1,18 +1,27 @@
<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
                       size="small"
                       @change="handleQuery">
            <el-select
              v-model="queryParams.indexCategory"
              placeholder="请选择指标分类"
              clearable
              size="small"
              @change="handleQuery"
            >
              <el-option
                  v-for="dict in indexCategoryOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                v-for="dict in indexCategoryOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
@@ -20,54 +29,56 @@
        <el-col :span="5">
          <el-form-item>
            <el-input
                v-model="queryParams.name"
                placeholder="请输入指标名称/编码"
                clearable
                size="small"
                @input="handleQuery"
                @clear="handleQuery"
              v-model="queryParams.name"
              placeholder="请输入指标名称/编码"
              clearable
              size="small"
              @input="handleQuery"
              @clear="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item class="fr">
            <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['energyindex:energyindex:add']"
            >新增
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['energyindex:energyindex:add']"
              >新增
            </el-button>
            <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['energyindex:energyindex:edit']"
            >修改
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['energyindex:energyindex:edit']"
              >修改
            </el-button>
            <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['energyindex:energyindex:remove']"
            >删除
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['energyindex:energyindex:remove']"
              >删除
            </el-button>
            <el-button
                type="info"
                icon="el-icon-upload2"
                size="mini"
                @click="handleImport"
            >导入
              type="info"
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              >导入
            </el-button>
            <el-button type="text"
                       icon="el-icon-setting"
                       @click="collectIndexSetting"
                       v-if="!statisticIndex">
            <el-button
              type="text"
              icon="el-icon-setting"
              @click="collectIndexSetting"
              v-if="!statisticIndex"
            >
              配置采集点
            </el-button>
          </el-form-item>
@@ -75,102 +86,133 @@
      </el-row>
    </el-form>

    <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
      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"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['energyindex:energyindex:edit']"
          >修改
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['energyindex:energyindex:edit']"
            >修改
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="dataStorage(scope.row)"
              v-hasPermi="['energyindex:energyindex:edit']"
              v-if="statisticIndex"
          >存储
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="dataStorage(scope.row)"
            v-hasPermi="['energyindex:energyindex:edit']"
            v-if="statisticIndex"
            >存储
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['energyindex:energyindex:remove']"
          >删除
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['energyindex:energyindex:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="paginationQuery"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="paginationQuery"
    />

    <!-- 添加或修改指标信息对话框 -->
    <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="请输入指标名称"/>
          <el-input v-model="form.name" placeholder="请输入指标名称" />
        </el-form-item>
        <el-form-item label="指标编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入指标编码"/>
          <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"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              v-for="dict in indexCategoryOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位">
          <el-select v-model="form.unitId" placeholder="请选择单位">
            <el-option
                v-for="dict in unitIdOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              v-for="dict in unitIdOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </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="请选择设备">
            <el-option
                v-for="dict in fcilityArchives"
                :key="dict.id"
                :label="dict.facilityName"
                :value="dict.id"
              v-for="dict in fcilityArchives"
              :key="dict.id"
              :label="dict.facilityName"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="能源品种">
          <el-select v-model="form.energyId" placeholder="请选择能源品种">
            <el-option
                v-for="dict in energyIdList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              v-for="dict in energyIdList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
@@ -181,35 +223,51 @@
      </div>
    </el-dialog>

    <el-drawer title="配置指标存储" :visible.sync="indexStorageShow" direction="rtl"
               @open="showIndexStorageDialog"
               size="45%"
               :wrapperClosable="false">
      <IndexStorage ref="indexStorage"
                    :nodeId="currentNode===undefined?'':currentNode.id"></IndexStorage>
    <el-drawer
      title="配置指标存储"
      :visible.sync="indexStorageShow"
      direction="rtl"
      @open="showIndexStorageDialog"
      size="45%"
      :wrapperClosable="false"
    >
      <IndexStorage
        ref="indexStorage"
        :nodeId="currentNode === undefined ? '' : currentNode.id"
      ></IndexStorage>
    </el-drawer>
    <!--选择采集指标-->
    <el-drawer title="选择采集指标" :visible.sync="collectIndexDialog" direction="rtl"
               @open="showCollectIndexDialog"
               size="45%">
      <CollectIndexSetting ref="collectIndexSetting"
                           @collectIndexConfirmSelect="collectIndexConfirmSelect"></CollectIndexSetting>
    <el-drawer
      title="选择采集指标"
      :visible.sync="collectIndexDialog"
      direction="rtl"
      @open="showCollectIndexDialog"
      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"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
@@ -217,11 +275,15 @@
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport"/>
          <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>
@@ -241,15 +303,15 @@
  listEnergyindex,
  updateEnergyindex
} from "../../../api/basicsetting/energyindex";
import {getToken} from "@/utils/auth";
import {setNodeToIndex} from '@/api/basicsetting/modelNode'
import { getToken } from "@/utils/auth";
import { setNodeToIndex } from "@/api/basicsetting/modelNode";
import IndexStorage from "./indexStorage";
import CollectIndexSetting from "../nodeSetting/collectIndexSetting";
import {getPointFacility} from "@/api/comprehensiveStatistics/comprehensive";
import { getPointFacility } from "@/api/comprehensiveStatistics/comprehensive";

export default {
  name: 'EnergyIndex',
  components: {CollectIndexSetting, IndexStorage},
  name: "EnergyIndex",
  components: { CollectIndexSetting, IndexStorage },
  props: ["indexType"],
  data() {
    return {
@@ -282,7 +344,7 @@
      remarkOptions: [],
      // 单位字典
      unitIdOptions: [],
      energyIdList: [],//能源品种
      energyIdList: [], //能源品种
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -297,14 +359,24 @@
      // 表单校验
      rules: {
        name: [
          {required: true, message: "指标名称不能为空", trigger: "blur"},
          {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: [
          {required: true, message: "请选择指标分类", trigger: "blur"}
          { required: true, message: "指标名称不能为空", trigger: "blur" },
          { 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: [
          { required: true, message: "请选择指标分类", trigger: "blur" }
        ]
      },
      currentNode: undefined,
@@ -322,22 +394,25 @@
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        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 => {
@@ -433,7 +508,7 @@
      });
    },
    /** 提交按钮 */
    submitForm: function () {
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.indexId !== undefined) {
@@ -465,62 +540,71 @@
    handleDelete(row) {
      const indexIds = row.indexId || this.ids;
      const indexNames = row.name || this.names;
      this.$confirm('是否确认删除指标名为"' + indexNames + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delEnergyindex(this.currentNode.id, indexIds);
      }).then(() => {
        this.getList(this.currentNode);
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
      this.$confirm(
        '是否确认删除指标名为"' + indexNames + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          return delEnergyindex(this.currentNode.id, indexIds);
        })
        .then(() => {
          this.getList(this.currentNode);
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有指标信息数据项?', "警告", {
      this.$confirm("是否确认导出所有指标信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportEnergyindex(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
      })
        .then(function() {
          return exportEnergyindex(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .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) => {
        if (response.code !== 200) {
          this.$message.error(response.msg);
        }
      }).then(() => {
        this.getList(this.currentNode);
      });
      setNodeToIndex(this.currentNode.id, indexIds, "COLLECT")
        .then(response => {
          if (response.code !== 200) {
            this.$message.error(response.msg);
          }
        })
        .then(() => {
          this.getList(this.currentNode);
        });
    },
    handleImport() {
      this.upload.title = "指标导入";
      this.upload.open = true;
    },// 文件上传中处理
    }, // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
@@ -529,7 +613,7 @@
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      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"
                   modelCode="statistic_index_model"
                   :showOpt="true"
                   :auth="false"/>
        <ModelNode
          ref="modelNode"
          @changeNode="changeNode"
          modelCode="statistic_index_model"
          :showOpt="true"
          :auth="false"
        />
      </basic-container>
      <img src="~@/assets/image/rectangle.png" alt=""
           class="shrink-col-block"
           @click="toggleCollapse">
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
        class="shrink-col-block"
        @click="toggleCollapse"
      />
    </el-col>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse"/>
    <el-col :style="{width:isCollapse? 'calc(100% - 48px)':'calc(100% - 280px)',paddingLeft:isCollapse? 0:'14px'}">
      <basic-container :title="currentNode ? currentNode.label+'--节点配置' : '节点配置'" :bodyStyle="bodyStyleRight">
        <IndexNodeSetting ref="modelNodeSetting"/>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
    <el-col
      :style="{
        width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
        paddingLeft: isCollapse ? 0 : '14px'
      }"
    >
      <basic-container
        :title="currentNode ? currentNode.label + '--节点配置' : '节点配置'"
        :bodyStyle="bodyStyleRight"
      >
        <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},
  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) {
    changeNode: function(node) {
      if (node) {
        this.currentNode = node
        this.currentNode = node;
      }
      this.$refs.modelNodeSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function (item) {
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};

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

@@ -1,23 +1,36 @@
<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">
              <el-input
                  v-model="queryParams.limitName"
                  placeholder="请输入限值类型名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                v-model="queryParams.limitName"
                placeholder="请输入限值类型名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </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>
@@ -27,34 +40,34 @@
      <el-row :gutter="10" class="mb8" style="margin-bottom: 19px">
        <el-col :span="1.5">
          <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['basicsetting:limitType:add']"
          >新增
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['basicsetting:limitType:add']"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['basicsetting:limitType:edit']"
          >修改
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['basicsetting:limitType:edit']"
            >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['basicsetting:limitType:remove']"
          >删除
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['basicsetting:limitType:remove']"
            >删除
          </el-button>
        </el-col>
        <!--      <el-col :span="1.5">-->
@@ -67,78 +80,107 @@
        <!--        >导出</el-button>-->
        <!--      </el-col>-->
      </el-row>
      <el-table :height="height" 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
        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="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"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['basicsetting:limitType:edit']"
            >修改
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['basicsetting:limitType:edit']"
              >修改
            </el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['basicsetting:limitType:remove']"
            >删除
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['basicsetting:limitType:remove']"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </basic-container>
    <!-- 添加或修改报警限值类型维护对话框 -->
    <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="limitName">
          <el-input v-model="form.limitName" placeholder="请输入限值类型名称"/>
          <el-input v-model="form.limitName" placeholder="请输入限值类型名称" />
        </el-form-item>
        <el-form-item label="限值类型编号" prop="limitCode">
          <el-input v-model="form.limitCode" placeholder="请输入限值类型编码"/>
          <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">
              v-for="item in alarmTypeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="色号" prop="colorNumber">
          <el-color-picker
              v-model="form.colorNumber"
              color-format="hex"
              :predefine="predefineColors">
            v-model="form.colorNumber"
            color-format="hex"
            :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-option label="大于" value=">"/>
            <el-option label="大于等于" value=">="/>
            <el-option label="小于" value="<"/>
            <el-option label="小于等于" value="<="/>
            <el-option label="等于" value="="/>
          <el-select
            v-model="form.comparatorOperator"
            placeholder="比较运算符"
            clearable
            size="small"
          >
            <el-option label="大于" value=">" />
            <el-option label="大于等于" value=">=" />
            <el-option label="小于" value="<" />
            <el-option label="小于等于" value="<=" />
            <el-option label="等于" value="=" />
          </el-select>
        </el-form-item>
      </el-form>
@@ -165,7 +207,7 @@
  mixins: [mixins],
  data() {
    return {
      height:null,
      height: null,
      // 遮罩层
      loading: true,
      // 选中数组
@@ -189,45 +231,47 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        limitName: undefined,
        limitName: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        limitName: [
          {required: true, message: "限值类型名称不能为空", trigger: "blur"}
          { required: true, message: "限值类型名称不能为空", trigger: "blur" }
        ],
        limitCode: [
          {required: true, message: "限值类型编码不能为空", trigger: "blur"}
        ],
          { 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;
@@ -304,7 +348,7 @@
      });
    },
    /** 提交按钮 */
    submitForm: function () {
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // console.log(JSON.stringify(this.form))
@@ -335,37 +379,45 @@
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除报警限值类型维护名称为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delLimitType(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
      this.$confirm(
        '是否确认删除报警限值类型维护名称为"' + ids + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delLimitType(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有报警限值类型维护数据项?', "警告", {
      this.$confirm("是否确认导出所有报警限值类型维护数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportLimitType(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
      })
        .then(function() {
          return exportLimitType(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .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,51 +1,77 @@
<template>
  <el-row type="flex">
    <el-col :style="{width:isCollapse?'0': '280px',position:'relative'}" v-show="!isCollapse">
    <el-col
      :style="{ width: isCollapse ? '0' : '280px', position: 'relative' }"
      v-show="!isCollapse"
    >
      <basic-container title="数据模型管理" :bodyStyle="bodyStyle">
        <el-row :gutter="24">
          <el-col :span="20">
            <el-select v-model="modelData" placeholder="请选择模型"
                       size="small"
                       filterable
                       @change="changeModel">
            <el-select
              v-model="modelData"
              placeholder="请选择模型"
              size="small"
              filterable
              @change="changeModel"
            >
              <el-option
                  v-for="model in modelInfoOptions"
                  :key="model.modelCode"
                  :label="model.modelName"
                  :value="model.modelCode"
                v-for="model in modelInfoOptions"
                :key="model.modelCode"
                :label="model.modelName"
                :value="model.modelCode"
              />
            </el-select>
          </el-col>
          <el-col :span="4" style="margin-bottom: 16px">
            <el-button icon="el-icon-setting" circle title="管理模型" style="float:right;padding:8px"
                       @click="manageModel"></el-button>
            <el-button
              icon="el-icon-setting"
              circle
              title="管理模型"
              style="float:right;padding:8px"
              @click="manageModel"
            ></el-button>
          </el-col>
        </el-row>
        <ModelNode ref="modelNode" @changeNode="changeNode" :auth="false"></ModelNode>
        <ModelNode
          ref="modelNode"
          @changeNode="changeNode"
          :auth="false"
        ></ModelNode>
      </basic-container>
      <img src="~@/assets/image/rectangle.png" alt=""
           class="shrink-col-block"
           @click="toggleCollapse">
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
        class="shrink-col-block"
        @click="toggleCollapse"
      />
    </el-col>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse"/>
    <el-col :style="{width:isCollapse? 'calc(100% - 48px)':'calc(100% - 280px)',paddingLeft:isCollapse? 0:'14px'}">
      <basic-container :title="currentNode ? currentNode.label+'--节点配置' : '节点配置'" :bodyStyle="bodyStyleRight">
        <ModelNodeSetting ref="modelNodeSetting"/>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse" />
    <el-col
      :style="{
        width: isCollapse ? 'calc(100% - 48px)' : 'calc(100% - 280px)',
        paddingLeft: isCollapse ? 0 : '14px'
      }"
    >
      <basic-container
        :title="currentNode ? currentNode.label + '--节点配置' : '节点配置'"
        :bodyStyle="bodyStyleRight"
      >
        <ModelNodeSetting ref="modelNodeSetting" />
      </basic-container>
    </el-col>
  </el-row>
</template>
<script>
import ModelNode from "../modelNode/modelNode";
import {listModel} from "@/api/basicsetting/model";
import { listModel } from "@/api/basicsetting/model";
import ModelNodeSetting from "./modelNodeSetting";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from '@/components/shrink/index.vue'
import ShrinkCol from "@/components/shrink/index.vue";

export default {
  components: {ModelNodeSetting, ModelNode,ShrinkCol},
  components: { ModelNodeSetting, ModelNode, ShrinkCol },
  created() {
    listModel({isShow: 1}).then(response => {
    listModel({ isShow: 1 }).then(response => {
      this.modelInfoOptions = response.data;
      if (this.modelInfoOptions.length > 0) {
        this.modelData = this.modelInfoOptions[0].modelCode;
@@ -56,45 +82,58 @@
  mixins: [mixins],
  data() {
    return {
      modelData: '',
      modelData: "",
      modelInfoOptions: [],
      isCollapse: false,
      bodyStyleRight: {},
      currentNode: ''
    }
      currentNode: ""
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight -155 + 'px'
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 155 + 'px'
        height: window.innerHeight - 185 + "px"
      };
    },
    changeNode: function (node) {
    changeNode: function(node) {
      if (node) {
        this.currentNode = node;
      }
      this.$refs.modelNodeSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function (item) {
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.shrink-col-block {
  position: absolute;
  top: 20px;
  right: 16px;
  cursor: pointer;
}
::v-deep {
  .el-tabs__item {
    color: #fff;
  }
  .el-tabs__item.is-active {
    color: $primary-color;
  }
  .el-collapse-item__header {
    background-color: #061844;
    color: #fff;
  }
}
</style>

 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

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

<script>
  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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
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"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        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'
            }
          },
          title: {
            x: 'center',
            y: 'top',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data:['标杆值','实际值'],
            left: '60%',
          },
          xAxis: [{
            type: 'category',
    setOptions({ expectedData, actualData, expecteData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          x: "center",
          y: "top",
          textStyle: {
            color: "#333"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: ["标杆值", "实际值"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        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: [{
            name:"标杆值",
            type: 'bar',
            }
          }
        ],
        series: [
          {
            name: "标杆值",
            type: "bar",
            data: expectedData,
            //stack: 'vistors',
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
            name:"实际值",
            type: 'bar',
            animationEasing: "quadraticOut"
          },
          {
            name: "实际值",
            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,26 +24,36 @@
          :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"
                     v-for="dict in arraylist"
                     :key="dict.indexId"
                     :label="dict.name"
                     :value="dict.indexId"
          <el-option
            style="width: 150px"
            v-for="dict in arraylist"
            :key="dict.indexId"
            :label="dict.name"
            :value="dict.indexId"
          ></el-option>
        </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;">
      <line-chart  ref="LineChart" :chart-data="lineChartData"/>
    <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="dateTime">
@@ -40,22 +61,27 @@
          <span>{{ parseTime(scope.row.dateTime) }}</span>
        </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="value"/>
      <el-table-column label="实际值" align="center" prop="actualValue"/>
      <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="value" />
      <el-table-column label="实际值" align="center" prop="actualValue" />
    </el-table>
  </div>
</template>

<script>
  import { listPhaseBenchmarking} from "@/api/benchmarking/phaseBenchmarking";
  import LineChart from './LineChart'
  import {getSettingIndex} from '@/api/basicsetting/modelNode'
  export default {
  components: {LineChart},
  name: 'enchmarking',
  name: 'Index',
import { listPhaseBenchmarking } from "@/api/benchmarking/phaseBenchmarking";
import LineChart from "./LineChart";
import { getSettingIndex } from "@/api/basicsetting/modelNode";
export default {
  components: { LineChart },
  name: "enchmarking",
  name: "Index",
  data() {
    return {
      // 遮罩层
@@ -68,27 +94,27 @@
      multiple: true,
      // 总条数
      total: 0,
      dateRange:[],
      dateRange: [],
      // energy_benchmarking表格数据
      energyEenchmarkingList: [],
      arraylist:[],
      arraylist: [],
      // 有效期字典
      unitIdOptions:[],
      dateTypeOptions:[],
      unitIdOptions: [],
      dateTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateTime: undefined,
        indexId: undefined,
        timeType:"DAY"
        timeType: "DAY"
      },
      // 表单参数
      form: {},
      label:"",
      lineChartData:{},
      dateTypes: 'daterange',
      valueFormat:"yyyy-MM-dd",
      label: "",
      lineChartData: {},
      dateTypes: "daterange",
      valueFormat: "yyyy-MM-dd"
    };
  },
  created() {
@@ -97,40 +123,44 @@
    this.getDicts("sys_unit").then(response => {
      this.unitIdOptions = response.data;
    });
      this.getDicts("energyPlan").then(response => {
    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: {
    /** 查询energy_benchmarking列表 */
    modelNodeChange(modelNode) {
      this.queryParams.indexId=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.queryParams.indexId = modelNode.id;
      this.label = modelNode.label;
      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;
        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
        let actualData=[];
        let expectedData=[];
        let expecteData=[];
        let title=[];
      listPhaseBenchmarking(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then(response => {
        this.energyEenchmarkingList = response.data;
        let actualData = [];
        let expectedData = [];
        let expecteData = [];
        let title = [];
        this.energyEenchmarkingList.forEach(item => {
          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;
        });
        this.lineChartData.actualData = actualData;
        this.lineChartData.expectedData = expectedData;
        this.lineChartData.expecteData = expecteData;
        this.$refs.LineChart.initChart(this.lineChartData);
      });
    },
@@ -154,29 +184,26 @@
      this.resetForm("queryForm");
      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]
    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];
    },
    handleTime(date){
      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'
    handleTime(date) {
      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");
      }
    },
    }
  }
};
</script>

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

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

<script>
  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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
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"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        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'
            }
          },
          title: {
            x: 'center',
            y: 'top',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data:['标杆值','实际值'],
            left: '60%',
          },
          xAxis: [{
            type: 'category',
    setOptions({ expectedData, actualData, expecteData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          x: "center",
          y: "top",
          textStyle: {
            color: "#333"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: ["标杆值", "实际值"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        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: [{
            name:"标杆值",
            type: 'bar',
            }
          }
        ],
        series: [
          {
            name: "标杆值",
            type: "bar",
            data: expectedData,
            //stack: 'vistors',
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },{
            name:"实际值",
            type: 'bar',
            animationEasing: "quadraticOut"
          },
          {
            name: "实际值",
            type: "bar",
            data: expecteData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
      }
            animationEasing: "quadraticOut"
          }
        ]
      });
    }
  }
};
</script>

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

@@ -1,25 +1,32 @@
<template>
  <div class="app-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart  ref="LineChart" :chart-data="lineChartData"/>
    <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="indexName"  />
      <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-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="value" />
      <el-table-column label="实际值" align="center" prop="actualValue" />
    </el-table>
  </div>
</template>

<script>
  import { listRealTimeListrealTime} from "@/api/benchmarking/phaseBenchmarking";
  import LineChart from './LineChart'
  export default {
  components: {LineChart},
  name: 'enchmarking',
  name: 'Index',
import { listRealTimeListrealTime } from "@/api/benchmarking/phaseBenchmarking";
import LineChart from "./LineChart";
export default {
  components: { LineChart },
  name: "enchmarking",
  name: "Index",
  data() {
    return {
      // 遮罩层
@@ -35,20 +42,20 @@
      // energy_benchmarking表格数据
      energyEenchmarkingList: [],
      // 有效期字典
      unitIdOptions:[],
      dateTypeOptions:[],
      unitIdOptions: [],
      dateTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateTime: undefined,
        indexId: undefined,
        timeType:"DAY"
        timeType: "DAY"
      },
      // 表单参数
      form: {},
      label:"",
      lineChartData:{},
      label: "",
      lineChartData: {}
    };
  },
  created() {
@@ -59,30 +66,32 @@
    });
    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: {
    /** 查询energy_benchmarking列表 */
    modelNodeChange(modelNode) {
      this.queryParams.indexId=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.queryParams.indexId = modelNode.id;
      this.label = modelNode.label;
      this.getList(this.queryParams);
    },
    getList() {
      listRealTimeListrealTime(this.queryParams).then(response => {
        this.energyEenchmarkingList=response.data
        let actualData=[];
        let expectedData=[];
        let expecteData=[];
        this.energyEenchmarkingList = response.data;
        let actualData = [];
        let expectedData = [];
        let expecteData = [];
        this.energyEenchmarkingList.forEach(item => {
          actualData.push(item.indexName);
          expectedData.push(item.value);
          expecteData.push(item.actualValue);
        })
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.expecteData=expecteData;
        });
        this.lineChartData.actualData = actualData;
        this.lineChartData.expectedData = expectedData;
        this.lineChartData.expecteData = expecteData;
        this.$refs.LineChart.initChart(this.lineChartData);
      });
    },
@@ -90,15 +99,15 @@
    unitIdFormat(row, column) {
      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
    },
    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;
    }
  }
};
</script>

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

@@ -1,26 +1,26 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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 } = {}) {
    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: [{
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
        series: [
          {
            name: title,
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            },
            smooth: true,
            type: "line",
            data: expectedData,
            animationDuration: 2800,
            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"
                        v-model="queryParams.dataTime"
                        :type="dateTypes"
                        :value-format="valueFormat"
                        placeholder="选择日期">
        <el-date-picker
          clearable
          size="small"
          style="width: 200px"
          v-model="queryParams.dataTime"
          :type="dateTypes"
          :value-format="valueFormat"
          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,14 +285,18 @@
</template>

<script>
  import {getDataList,exportList,getlistChart} from "@/api/comprehensiveStatistics/comprehensive";
  import LineChart from './LineChart'
  import BarChart from "./BarChart";
  export default {
    components: {
      LineChart,
      BarChart
    },
import {
  getDataList,
  exportList,
  getlistChart
} from "@/api/comprehensiveStatistics/comprehensive";
import LineChart from "./LineChart";
import BarChart from "./BarChart";
export default {
  components: {
    LineChart,
    BarChart
  },
  data() {
    return {
      // 遮罩层
@@ -175,12 +310,12 @@
      // 总条数
      total: 0,
      checked: false,
      dateRange:[],
      dateTypeOptions:[],
      dateRange: [],
      dateTypeOptions: [],
      energyList: [],
      tableData: [],
      tableHead:[],
      indexCategoryOptions:[],
      tableHead: [],
      indexCategoryOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
@@ -191,24 +326,26 @@
        pageSize: 10,
        indexCode: undefined,
        indexId: undefined,
        dataTime:undefined,
        timeType:"HOUR",
        indexType:undefined,
        indexStorageId:undefined,
        dataTime: undefined,
        timeType: "HOUR",
        indexType: undefined,
        indexStorageId: undefined
      },
      skinName:"",
      dateTypes: 'date',
      valueFormat:"yyyy-MM-dd",
      lineChartData:{expectedData: [],actualData: []},
      skinName: "",
      dateTypes: "date",
      valueFormat: "yyyy-MM-dd",
      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;
      this.skinName = response.msg;
    });
    this.getDicts("energy_type").then(response => {
      this.indexCategoryOptions = response.data;
@@ -224,25 +361,27 @@
        /*this.tableData=response.data.tabledata;
        this.tableHead=response.data.tablehead;*/
        this.energyList = response.data;
      })
      });
    },
    selectChange(data){
      this.queryParams.indexId=data;
    selectChange(data) {
      this.queryParams.indexId = data;
      getlistChart(this.queryParams).then(response => {
        let actualData=[];
        let expectedData=[];
        let title="";
        let actualData = [];
        let expectedData = [];
        let title = "";
        response.data.forEach(item => {
          expectedData.push(this.numFilter(item.value));
          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
          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.$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 () {
        return exportList(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
      })
        .then(function() {
          return exportList(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .catch(function() {});
    },
    getSummaries(param) {
      const {columns, data} = 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,122 +439,120 @@
            }
          }, 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'
      }else{
        this.dateTypes= 'date',
          this.valueFormat='yyyy-MM-dd'
    handleTime(date) {
      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");
      }
    },
    }
  }
};
</script>
<style lang="scss" scoped>
 .el-table__body{
    border: 1px solid #000000 !important;
  }
 .el-table th.is-leaf, .el-table td {
   border-bottom: 1px solid #000000 !important;
   border-right: 1px solid #000000 !important;
 }
.tableList tr td{
    text-align: center;
  }
.el-table__body {
  border: 1px solid #000000 !important;
}
.el-table th.is-leaf,
.el-table td {
  border-bottom: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
}
.tableList tr td {
  text-align: center;
}
.dashboard-editor-container {
 padding: 32px;
 background-color: rgb(240, 242, 245);
 position: relative;
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  }
}

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .live{
    position: fixed;
    right: 0px;
    top:70px;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 100px;
    height: 60px;
    background-color: red;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}
.live {
  position: fixed;
  right: 0px;
  top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  background-color: red;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}
.live_content {
  font-size: 18px;
  color: white;
  font-weight: bold;
}
.live_number {
  font-size: 32px;
  color: white;
  font-weight: bolder;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  .live_content{
    font-size: 18px;
    color: white;
    font-weight: bold;
  50% {
    opacity: 0.4;
  }
  .live_number{
    font-size: 32px;
    color: white;
    font-weight: bolder;
  to {
    opacity: 1;
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }
}

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    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

@@ -1,112 +1,119 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
            textStyle: {
              color: '#606266',
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
    setOptions({ expectedData, actualData, title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: "left",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 40,
          containLabel: true
        },
        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

@@ -1,26 +1,26 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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 } = {}) {
    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: [{
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
        series: [
          {
            name: title,
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            },
            smooth: true,
            type: "line",
            data: expectedData,
            animationDuration: 2800,
            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

@@ -1,112 +1,132 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({ expectedData, actualData,title } = {}) {
        this.chart.setOption({
          title: {
            text: title,
            left: 'left',
            textStyle: {
              color: '#606266',
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 40,
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    setOptions({ expectedData, actualData, title } = {}) {
      this.chart.setOption({
        title: {
          text: title,
          left: "left",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 40,
          containLabel: true
        },
        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

@@ -1,26 +1,26 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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 } = {}) {
    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: [{
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
        series: [
          {
            name: title,
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            }
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
            },
            smooth: true,
            type: "line",
            data: expectedData,
            animationDuration: 2800,
            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

@@ -1,26 +1,26 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
        series: [
          {
            name: "expected",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            }
            },
            smooth: true,
            type: "line",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: "cubicInOut"
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: 'actual',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
          {
            name: "actual",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2
                },
                areaStyle: {
                  color: "#f3f8ff"
                }
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
            },
            data: actualData,
            animationDuration: 2800,
            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 {
@@ -160,7 +179,7 @@
  }
}

@media (max-width:550px) {
@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

 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

@@ -1,116 +1,122 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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',
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
            }
          },
          data: [
            {
              value: [5000, 7000, 12000, 11000, 15000, 14000],
              name: 'Allocated Budget'
        series: [
          {
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1
              }
            },
            {
              value: [4000, 9000, 15000, 15000, 13000, 11000],
              name: 'Expected Spending'
            },
            {
              value: [5500, 11000, 12000, 15000, 12000, 12000],
              name: 'Actual Spending'
            }
          ],
          animationDuration: animationDuration
        }]
      })
            data: [
              {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: "Allocated Budget"
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: "Expected Spending"
              },
              {
                value: [5500, 11000, 12000, 15000, 12000, 12000],
                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,30 +1,26 @@
<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"
                            v-model="forms.effectiveDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="设置生效时间">
            <el-date-picker
              clearable
              size="small"
              style="width: 200px"
              v-model="forms.effectiveDate"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              placeholder="设置生效时间"
            >
            </el-date-picker>
           <!-- <el-input :disabled="isDisabled" v-model="item.effectiveDate"></el-input>-->
            <!-- <el-input :disabled="isDisabled" v-model="item.effectiveDate"></el-input>-->
            <!--<el-button size="mini" @click="addDate">设置生效时间</el-button>-->
          </el-form-item>
        </el-col>
@@ -34,28 +30,54 @@
            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">
          <router-link :to="'/electricityPrice/listHistory'" class="link-type">
            <el-button plain size="mini">查看历史</el-button>
          </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="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="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"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
@@ -63,13 +85,14 @@
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['electricityPrice:electricity:remove']"
            >删除</el-button>
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <pagination
      v-show="total>0"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
@@ -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"
                          v-model="form.effectiveDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          placeholder="选择生效日期">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.effectiveDate"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            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,17 +145,17 @@
          <el-time-picker
            v-model="form.beginDate"
            class="date-box"
            format='HH:mm'
            format="HH:mm"
            value-format="HH:mm"
            placeholder="选择时段开始时间"
            >
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="时段结束时间" prop="endDate">
          <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>
            <template scope="scope">
              <el-input
                step="0.1"
                v-model="scope.row.price"
                placeholder="请输入单价(元)"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
@@ -154,208 +200,237 @@
</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() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // electricityPrice表格数据
        electricityList: [],
        list: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        time: false,
        openPrice: false,
        // 时段名称字典
        effectiveNameOptions: [],
        effective_name: [],
        ifeffective: [],
        effective:{
          dictLabel:'',
          dictValue:'',
          price:''
        },
        dictType:"",
        effective_date:"",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          effectiveDate: undefined,
          priceId: undefined,
          beginDate: undefined,
          endDate: undefined,
          effectiveName: undefined,
          dictType: undefined,
        },
        // 表单参数
        form: {},
        forms:{},
        formPrice:{},
        // 表单校验
        rules: {
          effectiveDate: [
            { required: true, message: "生效日期不能为空", trigger: "blur" }
          ],
          beginDate: [
            { required: true, message: "时段开始时间不能为空", trigger: "blur" }
          ],
          endDate: [
            { required: true, message: "时段结束时间不能为空", trigger: "blur" }
          ],
          effectiveName: [
            { required: true, message: "时段名称不能为空", trigger: "blur" }
          ]
        },
        rulesTime: {
          effectiveDate: [
            { required: true, message: "生效日期不能为空", trigger: "blur" }
          ]
        },
        rulesPrice: {
          timePeriod: [
            { required: true, message: "时段不能为空", trigger: "blur" }
          ],
          price:[{ required: true, message: "单价不能为空", trigger: "blur" }]
        },
        pickerOptions: { // 不让选择今天以前的
          disabledDate(time) {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
          }
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // electricityPrice表格数据
      electricityList: [],
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      time: false,
      openPrice: false,
      // 时段名称字典
      effectiveNameOptions: [],
      effective_name: [],
      ifeffective: [],
      effective: {
        dictLabel: "",
        dictValue: "",
        price: ""
      },
      dictType: "",
      effective_date: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        effectiveDate: undefined,
        priceId: undefined,
        beginDate: undefined,
        endDate: undefined,
        effectiveName: undefined,
        dictType: undefined
      },
      // 表单参数
      form: {},
      forms: {},
      formPrice: {},
      // 表单校验
      rules: {
        effectiveDate: [
          { required: true, message: "生效日期不能为空", trigger: "blur" }
        ],
        beginDate: [
          { required: true, message: "时段开始时间不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "时段结束时间不能为空", trigger: "blur" }
        ],
        effectiveName: [
          { required: true, message: "时段名称不能为空", trigger: "blur" }
        ]
      },
      rulesTime: {
        effectiveDate: [
          { required: true, message: "生效日期不能为空", trigger: "blur" }
        ]
      },
      rulesPrice: {
        timePeriod: [
          { required: true, message: "时段不能为空", trigger: "blur" }
        ],
        price: [{ required: true, message: "单价不能为空", trigger: "blur" }]
      },
      pickerOptions: {
        // 不让选择今天以前的
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      };
    },
      }
    };
  },

    created() {
      this.getList();
      this.getLists();
      this.getDicts("electricity_price").then(response => {
        this.effectiveNameOptions = response.data;
  created() {
    this.getList();
    this.getLists();
    this.getDicts("electricity_price").then(response => {
      this.effectiveNameOptions = response.data;
    });
  },
  methods: {
    /** 查询electricityPrice列表 */
    getList() {
      this.loading = true;
      listDate(this.queryParams).then(response => {
        this.list = response.rows;
        if (this.list.length > 0) {
          this.forms.effectiveDate = this.list[0].effectiveDate;
          this.effective_date = this.list[0].effectiveDate;
        }
        this.loading = false;
      });
    },
    methods: {
      /** 查询electricityPrice列表 */
      getList() {
        this.loading = true;
        listDate(this.queryParams).then(response => {
          this.list= response.rows;
          if(this.list.length>0){
            this.forms.effectiveDate=this.list[0].effectiveDate;
            this.effective_date=this.list[0].effectiveDate;
          }
          this.loading = false;
        });
      },
      getLists(){
        listElectricity(this.queryParams).then(response => {
          this.electricityList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 时段名称字典翻译
      effectiveNameFormat(row, column) {
        return this.selectDictLabel(this.effectiveNameOptions, row.effectiveName);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.time = false;
        this.openPrice = false;
    getLists() {
      listElectricity(this.queryParams).then(response => {
        this.electricityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 时段名称字典翻译
    effectiveNameFormat(row, column) {
      return this.selectDictLabel(this.effectiveNameOptions, row.effectiveName);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.time = false;
      this.openPrice = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        effectiveDate: undefined,
        priceId: undefined,
        beginDate: undefined,
        endDate: undefined,
        effectiveName: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.queryParams.effectiveDate = this.forms.effectiveDate;
      listPrice(this.queryParams).then(response => {
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          effectiveDate: undefined,
          priceId: undefined,
          beginDate: undefined,
          endDate: undefined,
          effectiveName: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        console.log(selection);
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.queryParams.effectiveDate = this.forms.effectiveDate;
        listPrice(this.queryParams).then(response => {
          this.reset();
          this.ifeffective = response.rows;
          if (this.ifeffective.length > 0) {
            this.form.effectiveDate = this.forms.effectiveDate;
            this.open = true;
            this.title = "添加新增时段";
          } else {
            this.msgSuccess("请先设置价格");
          }
        });
      },
      handlePrice(){
        this.queryParams.effectiveDate = this.forms.effectiveDate.substring(0, 10);
        this.queryParams.dictType="electricity_price",
        this.ifeffective = response.rows;
        if (this.ifeffective.length > 0) {
          this.form.effectiveDate = this.forms.effectiveDate;
          this.open = true;
          this.title = "添加新增时段";
        } else {
          this.msgSuccess("请先设置价格");
        }
      });
    },
    handlePrice() {
      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;
          this.effective_name=response.data;
          this.formPrice.effectiveDate = this.forms.effectiveDate;
          this.effective_name = response.data;
          this.openPrice = true;
          this.title = "设置单价";
        });
      },
      /** 提交按钮 */
      submitPrice: function() {
        this.formPrice.effectiveDate;
        this.$nextTick(() => {
          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(','));
          //console.log(this.formPrice.TimeJson[0].id);
         if (this.formPrice.TimeJson[0].id != undefined) {
           updatePrice(this.formPrice).then(response => {
    },
    /** 提交按钮 */
    submitPrice: function() {
      this.formPrice.effectiveDate;
      this.$nextTick(() => {
        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(","));
        //console.log(this.formPrice.TimeJson[0].id);
        if (this.formPrice.TimeJson[0].id != undefined) {
          updatePrice(this.formPrice).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.openPrice = false;
@@ -363,7 +438,7 @@
              this.msgError(response.msg);
            }
          });
        }else{
        } else {
          addPrice(this.formPrice).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
@@ -373,89 +448,99 @@
            }
          });
        }
        })
        this.loading = false;
      },
      addDate() {
        this.reset();
        this.time = true;
        this.title = "添加生效日期";
      },
      /** 修改按钮操作 */
      handleUpdate() {
        this.reset();
        const id =this.ids
        getElectricity(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改新增时段";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateElectricity(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                  this.getLists();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addElectricity(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                  this.getLists();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
      });
      this.loading = false;
    },
    addDate() {
      this.reset();
      this.time = true;
      this.title = "添加生效日期";
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.reset();
      const id = this.ids;
      getElectricity(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改新增时段";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateElectricity(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
                this.getLists();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addElectricity(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
                this.getLists();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除新增时段编号为"' + ids + '"的数据项?', "警告", {
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.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() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有electricityPrice数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        })
        .catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有electricityPrice数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportElectricity(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function() {});
      },
      changeTime(time) {
        if (time !== null && time !== undefined && time !== "") {
          return time.substring(0, 10);
        } else {
          return "";
        }
        })
        .catch(function() {});
    },
    changeTime(time) {
      if (time !== null && time !== undefined && time !== "") {
        return time.substring(0, 10);
      } else {
        return "";
      }
    }
  };
  }
};
</script>

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

@@ -1,55 +1,83 @@

<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";
  export default {
    components: { ModelNode,electricityIndex},
    created() {
      this.modelCode=this.$route.query.modelCode;
import ModelNode from "../../basicsetting/modelNode/modelNode";
import electricityIndexNew from "./electricityIndexNew";
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";

export default {
  components: { ModelNode, electricityIndexNew, ShrinkCol },
  mixins: [mixins],
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      bodyStyleRight: {},
      modelCode: undefined,
      isCollapse: false
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.electricityIndex.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.electricityIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

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

  <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: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                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],
          animationDuration: 1000,
          animationEasing: 'cubicInOut'
        },
        series: [
          {
            name: '限值',
            smooth: true,
            type: 'line',
            name: "预警值",
            itemStyle: {
              normal: {
                color: '#3888fa',
                color: "#FF005A",
                lineStyle: {
                  color: '#3888fa',
                  color: "#FF005A",
                  width: 2
                },
                areaStyle: {
                  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],
            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
            ],
            animationDuration: 1000,
            animationEasing: "cubicInOut"
          },
          {
            name: "限值",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2
                },
                areaStyle: {
                  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
            ],
            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,61 +56,105 @@
            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">-->
<!--          <el-button-->
<!--            type="warning"-->
<!--            icon="el-icon-download"-->
<!--            size="mini"-->
<!--            @click="handleExport"-->
<!--            v-hasPermi="['energyAlarm:historicalAlarm:export']"-->
<!--          >导出-->
<!--          </el-button>-->
<!--        </el-col>-->
        <!--        <el-col :span="1.5">-->
        <!--          <el-button-->
        <!--            type="warning"-->
        <!--            icon="el-icon-download"-->
        <!--            size="mini"-->
        <!--            @click="handleExport"-->
        <!--            v-hasPermi="['energyAlarm:historicalAlarm:export']"-->
        <!--          >导出-->
        <!--          </el-button>-->
        <!--        </el-col>-->
      </el-row>
      <el-form>
      <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>
          </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="alarmValue" />
        <el-table-column label="持续时长(分钟)" align="center" prop="duration" width="96px" />
      </el-table>
        <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>
            </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="alarmValue" />
          <el-table-column
            label="持续时长(分钟)"
            align="center"
            prop="duration"
            width="96px"
          />
        </el-table>
      </el-form>
      <pagination
        v-show="total>0"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @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-tabs v-model="activeName" @tab-click="handleClick" >
      <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,217 +167,220 @@
</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'],
    data() {
      return {
        num: 20,
        num1:5,
        code:undefined,
        value:'',
        options:undefined,
        radio: 'B',
        activeName: 'second',
        indexId:undefined,
        indexName:undefined,
        indexUnit:undefined,
        limitVal:undefined,
        hiddenTableHeader:false,
        limitTypeOptions:[],
        alarmLevelOptions:[],
        resposeList:[],
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        dateRange: [],
        names: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 10,
        // 指标信息表格数据
        List: [],
        energyindexList: [],
        // 弹出层标题
        JkHistoryAlarmList:[],
        title: "历史数据查询",
        // 是否显示弹出层
        open: false,
        // 主键字典
        indexIdOptions: [],
        // 指标名称字典
        nameOptions: [],
        // 指标编码字典
        codeOptions: [],
        // 单位字典
        unitIdOptions: [],
        // 查询参数
        lineChartData:{
          newVisitis:null,
        },
        queryParams: {
           pageNum: 1,
           pageSize: 10,
          indexType:'COLLECT',
          code: undefined,
          indexName:undefined,
          limitType: undefined,
          alarmLevel: undefined,
          nodeId:undefined,
          beginTime: undefined,
          endTime:undefined,
          svgId:undefined,
          nodeId:undefined,
        },
        // 表单参数
        form: {},
        // 表单校验
        indexCategoryDefaultVal: undefined,
        unitDefaultVal: undefined
      };
    },
    created() {
      if (this.$props.tagId) {
        this.queryParams.nodeId = this.$props.tagId;
      }
      //this.queryParams.svgId=this.svgId;
      this.getDicts("alarm_level").then(response => {
        this.alarmLevelOptions = response.data;
      });
      this.getDicts("sys_unit").then(response => {
        this.unitIdOptions = response.data;
      });
      listLimitType(this.queryParams).then(response => {
        this.limitTypeOptions = response.rows;
      });
    },
    methods: {
      show(nodeId)
      {
        this.queryParams.nodeId = nodeId;
        this.getList();
export default {
  components: { historyAlarmView, historyAlarmTable },
  name: "historyAlarmNote",
  props: ["svgId", "tagId"],
  data() {
    return {
      num: 20,
      num1: 5,
      code: undefined,
      value: "",
      options: undefined,
      radio: "B",
      activeName: "second",
      indexId: undefined,
      indexName: undefined,
      indexUnit: undefined,
      limitVal: undefined,
      hiddenTableHeader: false,
      limitTypeOptions: [],
      alarmLevelOptions: [],
      resposeList: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      dateRange: [],
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 10,
      // 指标信息表格数据
      List: [],
      energyindexList: [],
      // 弹出层标题
      JkHistoryAlarmList: [],
      title: "历史数据查询",
      // 是否显示弹出层
      open: false,
      // 主键字典
      indexIdOptions: [],
      // 指标名称字典
      nameOptions: [],
      // 指标编码字典
      codeOptions: [],
      // 单位字典
      unitIdOptions: [],
      // 查询参数
      lineChartData: {
        newVisitis: null
      },
      getList() {
        this.loading = true;
        listHistoryAlarmNote(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.JkHistoryAlarmList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indexType: "COLLECT",
        code: undefined,
        indexName: undefined,
        limitType: undefined,
        alarmLevel: undefined,
        nodeId: undefined,
        beginTime: undefined,
        endTime: undefined,
        svgId: undefined,
        nodeId: undefined
      },
      /** 查看按钮操作 */
      handleUpdate(row) {
        this.reset();
        const indexId = row.indexId || this.ids;
        this.open = true;
      },
      // 单位字典翻译
      unitIdFormat(row, column) {
        return this.selectDictLabel(this.unitIdOptions, row.unitId);
      },
      // 报警级别字典翻译
      alarmLevelFormat(row, column) {
        return this.selectDictLabel(this.alarmLevelOptions, row.alarmLevel);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          indexId: undefined,
          name: undefined,
          code: undefined,
          indexCategory: undefined,
          remark: undefined,
          unitId: undefined
        };
        this.resetForm("form");
      },
      // modelNodeChange(modelNode) {
      //   this.queryParams.nodeId = modelNode.id;
      //   this.getList();
      // },
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      },


      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
      },

      handleSelectionChange() {
      },
      openDialog(row,column,event,cell){
        if("indexName"==column.property){
          this.open = true;
        }
        this.code = row.code;
        this.indexName = row.indexName;
        this.indexId = row.indexId;
        this.activeName = "second";
        this.indexUnit = row.unitId;
        this.limitVal = row.limitingValue;
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有报警数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportHistoricalAlarm(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});

      },
      //限制类型翻译
      limitTypeFormat(row,column){
        var actions = [];
        Object.keys(this.limitTypeOptions).map((key) => {
          if (this.limitTypeOptions[key].limitCode == ('' + row.limitType)) {
            actions.push(this.limitTypeOptions[key].limitName);
          }
        });
        return actions.join('');
      },
      handleClick(tab, event){
        this.activeName = tab.name;
      },
      // 表单参数
      form: {},
      // 表单校验
      indexCategoryDefaultVal: undefined,
      unitDefaultVal: undefined
    };
  },
  created() {
    if (this.$props.tagId) {
      this.queryParams.nodeId = this.$props.tagId;
    }
  };
    //this.queryParams.svgId=this.svgId;
    this.getDicts("alarm_level").then(response => {
      this.alarmLevelOptions = response.data;
    });
    this.getDicts("sys_unit").then(response => {
      this.unitIdOptions = response.data;
    });
    listLimitType(this.queryParams).then(response => {
      this.limitTypeOptions = response.rows;
    });
  },
  methods: {
    show(nodeId) {
      this.queryParams.nodeId = nodeId;
      this.getList();
    },
    getList() {
      this.loading = true;
      listHistoryAlarmNote(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then(response => {
        this.JkHistoryAlarmList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查看按钮操作 */
    handleUpdate(row) {
      this.reset();
      const indexId = row.indexId || this.ids;
      this.open = true;
    },
    // 单位字典翻译
    unitIdFormat(row, column) {
      return this.selectDictLabel(this.unitIdOptions, row.unitId);
    },
    // 报警级别字典翻译
    alarmLevelFormat(row, column) {
      return this.selectDictLabel(this.alarmLevelOptions, row.alarmLevel);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        indexId: undefined,
        name: undefined,
        code: undefined,
        indexCategory: undefined,
        remark: undefined,
        unitId: undefined
      };
      this.resetForm("form");
    },
    // modelNodeChange(modelNode) {
    //   this.queryParams.nodeId = modelNode.id;
    //   this.getList();
    // },
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
    },

    handleSelectionChange() {},
    openDialog(row, column, event, cell) {
      if ("indexName" == column.property) {
        this.open = true;
      }
      this.code = row.code;
      this.indexName = row.indexName;
      this.indexId = row.indexId;
      this.activeName = "second";
      this.indexUnit = row.unitId;
      this.limitVal = row.limitingValue;
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有报警数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportHistoricalAlarm(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .catch(function() {});
    },
    //限制类型翻译
    limitTypeFormat(row, column) {
      var actions = [];
      Object.keys(this.limitTypeOptions).map(key => {
        if (this.limitTypeOptions[key].limitCode == "" + row.limitType) {
          actions.push(this.limitTypeOptions[key].limitName);
        }
      });
      return actions.join("");
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    }
  }
};
</script>

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

@@ -1,104 +1,181 @@
<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">
            v-for="dict in limitTypeOptions"
            :key="dict.limitCode"
            :label="dict.limitName"
            :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">
            v-for="dict in alarmLevelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指标名称" prop="indexName">
        <el-input
            v-model="queryParams.indexName"
            placeholder="请输入指标名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width:160px"
          v-model="queryParams.indexName"
          placeholder="请输入指标名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
          style="width:160px"
        />
      </el-form-item>
      <el-form-item label="起止时间">
        <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          v-model="dateRange"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-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="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['energyAlarm:historicalAlarm:export']"
        >导出
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['energyAlarm:historicalAlarm:export']"
          >导出
        </el-button>
      </el-form-item>

    </el-form>
    <el-form>
      <el-table :data="JkHistoryAlarmList" v-loading="loading" border @selection-change="" @cell-click="openDialog"
                :height="height"
      <el-table
        :data="JkHistoryAlarmList"
        v-loading="loading"
        border
        @selection-change=""
        @cell-click="openDialog"
        :height="height"
      >
        <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="序号" 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="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="alarmValue"/>
        <el-table-column label="持续时长(分钟)" align="center" prop="duration" width="96px"/>
        <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="alarmValue" />
        <el-table-column
          label="持续时长(分钟)"
          align="center"
          prop="duration"
          width="96px"
        />
      </el-table>
    </el-form>
    <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @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',
  components: { historyAlarmView, historyAlarmTable },
  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 () {
        return exportHistoricalAlarm(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });

      })
        .then(function() {
          return exportHistoricalAlarm(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .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) {
    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

@@ -1,10 +1,10 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <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 {
@@ -12,61 +12,60 @@
  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
    }
      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){
    setOptions({ expectedData, actualData, timeList } = {}) {
      if (expectedData.length > 0) {
        this.alarmLimitName = "报警限值";
      }else {
      } else {
        this.alarmLimitName = " ";
      }
      this.chart.setOption({
@@ -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: [{
          symbol: "none",
          name: '报警限值',
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
        series: [
          {
            symbol: "none",
            name: "报警限值",
            itemStyle: {
              normal: {
                color: "#FF005A",
                lineStyle: {
                  color: "#FF005A",
                  width: 2
                }
              }
            }
            },
            smooth: true,
            type: "line",
            data: expectedData,
            animationDuration: 2800,
            animationEasing: "cubicInOut"
          },
          smooth: true,
          type: 'line',
          data: expectedData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: '实时值',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
          {
            name: "实时值",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2
                },
                areaStyle: {
                  color: "#f3f8ff"
                }
              }
            }
          },
          data: actualData,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
            },
            data: actualData,
            animationDuration: 2800,
            animationEasing: "quadraticOut"
          }
        ]
      });
    }
  }
}
};
</script>

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

@@ -1,17 +1,36 @@
<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=""
           class="shrink-col-block"
           @click="toggleCollapse">
      <img
        src="~@/assets/image/rectangle.png"
        alt=""
        class="shrink-col-block"
        @click="toggleCollapse"
      />
    </el-col>
    <ShrinkCol @toggleCollapse="toggleCollapse" v-show="isCollapse"/>
    <el-col :style="{width:isCollapse? 'calc(100% - 48px)':'calc(100% - 280px)',paddingLeft:isCollapse? 0:'14px'}">
      <basic-container :title="currentNode ? currentNode.label+'--节点配置' : '节点配置'" :bodyStyle="bodyStyleRight">
        <realTimeSetting ref="realTimeSetting"/>
    <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"
      >
        <realTimeSetting ref="realTimeSetting" />
      </basic-container>
    </el-col>
  </el-row>
@@ -21,47 +40,47 @@
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},
  components: { realTimeSetting, ModelNode, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  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) {
    changeNode: function(node) {
      if (node) {
        this.currentNode = node
        this.currentNode = node;
      }
      this.$refs.realTimeSetting.modelNodeChange(node);
    },
    manageModel: function () {
      this.$router.push('/model');
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function (item) {
    changeModel: function(item) {
      // this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse = !this.isCollapse;
    }
  }
};

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

@@ -3,98 +3,213 @@
    <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
                       style="width:100px"
                       size="mini">
            <el-select
              v-model="queryParams.limitType"
              placeholder="限值名称"
              clearable
              style="width:100px"
              size="mini"
            >
              <el-option
                  v-for="dict in limitTypeOptions"
                  :key="dict.limitCode"
                  :label="dict.limitName"
                  :value="dict.limitCode"
                v-for="dict in limitTypeOptions"
                :key="dict.limitCode"
                :label="dict.limitName"
                :value="dict.limitCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="报警级别" prop="alarmLevel">
            <el-select v-model="queryParams.alarmLevel" placeholder="报警级别" clearable
                       style="width:100px"
                       size="mini">
            <el-select
              v-model="queryParams.alarmLevel"
              placeholder="报警级别"
              clearable
              style="width:100px"
              size="mini"
            >
              <el-option
                  v-for="dict in alarmLevelOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                v-for="dict in alarmLevelOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指标名称">
            <el-input style="width: 120px"
                      v-model="queryParams.indexName"
                      placeholder="指标名称"
                      clearable
                      size="mini"
                      @keyup.enter.native="handleQuery"
            <el-input
              style="width: 120px"
              v-model="queryParams.indexName"
              placeholder="指标名称"
              clearable
              size="mini"
              @keyup.enter.native="handleQuery"
            />
          </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"
                    :height="height"
          <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"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </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,15 +221,15 @@
</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 {
  components: {liveAlarmView, historyAlarmView, historyAlarmTable},
  components: { liveAlarmView, historyAlarmView, historyAlarmTable },
  name: "modelMonitorSetting",
  mixins: [mixins],
  data() {
@@ -131,10 +246,10 @@
      indexName: undefined,
      indexUnit: undefined,
      //计时器对象
      timer: '',
      timer: "",
      //计时器间隔
      intervalTime: 30000,
      currentNode: '',
      currentNode: "",
      deviceDialog: false,
      energyDialog: false,
      productDialog: false,
@@ -148,11 +263,11 @@
        eierarchyFlag: "ALL",
        alarmLevel: undefined,
        indexName: undefined,
        nodeId: undefined,//
        nodeId: undefined, //
        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.intervalTime = response.msg;
      this.timer = setInterval(this.getList, this.intervalTime);
    });
    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

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

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

@@ -1,29 +1,29 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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,109 +31,110 @@
    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} = {}) {
    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,  // 设置图例图形的高
          itemWidth: 24, // 设置图例图形的宽
          itemHeight: 18, // 设置图例图形的高
          textStyle: {
            color: '#666'  // 图例文字颜色
            color: "#fff" // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          // itemGap: 30,
          backgroundColor: '#eee',  // 设置整个图例区域背景颜色
          data: actualData,
          backgroundColor: "#eee", // 设置整个图例区域背景颜色
          data: actualData
        },
        series: [{
          //name: '能源',
          type: 'pie',
          radius: ['50%', '80%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
          center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
          data: expectedData,
          // itemStyle 设置饼状图扇形区域样式
          itemStyle: {
            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(30, 144, 255，0.5)'
            }
          },
          // 设置值域的那指向线
          labelLine: {
            normal: {
              show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
            }
          },
          avoidLabelOverlap: false,
        series: [
          {
            //name: '能源',
            type: "pie",
            radius: ["50%", "80%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ["50%", "50%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data: expectedData,
            // itemStyle 设置饼状图扇形区域样式
            itemStyle: {
              // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
              // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(30, 144, 255，0.5)"
              }
            },
            // 设置值域的那指向线
            labelLine: {
              normal: {
                show: false // show设置线是否显示，默认为true，可选值：true ¦ false
              }
            },
            avoidLabelOverlap: false,

          // 设置值域的标签
          label: {
            normal: {
              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}%)'
            // 设置值域的标签
            label: {
              normal: {
                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}%)"
              }
            }
          }
        }
        ],
      })
        ]
      });
    }
  }
}
};
</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"
                      v-model="queryParams.dataTime"
                      :type="dateTypes"
                      :value-format="valueFormat"
                      placeholder="选择日期">
      <el-date-picker
        clearable
        size="small"
        style="width: 200px"
        v-model="queryParams.dataTime"
        :type="dateTypes"
        :value-format="valueFormat"
        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,73 +48,94 @@
      </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},
  components: { LineChart },
  data() {
    return {
      dateTypeOptions:[],
      list:[],
      dateTypeOptions: [],
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indexCode: undefined,
        timeType:"DAY",
        dataTime: undefined,
        timeType: "DAY",
        dataTime: undefined
      },
      dateTypes: 'date',
      valueFormat:"yyyy-MM-dd",
      skinName:"",
      label:"",
      lineChartData:{expectedData: [],
        actualData: [],label:""},
      dateTypes: "date",
      valueFormat: "yyyy-MM-dd",
      skinName: "",
      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;
      this.skinName = response.msg;
    });
  },
  methods: {
    modelNodeChange(modelNode) {
      this.queryParams.indexCode=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.queryParams.indexCode = modelNode.id;
      this.label = modelNode.label;
      this.getList(this.queryParams);
    },
    getList() {
      energyBalanceList(this.queryParams).then(response => {
        //this.plannedOutputList = response.rows;
        let expectedData=[];
        let actualData=[];
        let total="";
        let expectedData = [];
        let actualData = [];
        let total = "";
        response.data.forEach(item => {
          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;
          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;
        this.$refs.LineChart.initChart(this.lineChartData);
      });
      energyBalanceTable(this.queryParams).then(response => {
        this.list=response.data;
        this.list = response.data;
      });
    },
    /** 搜索按钮操作 */
@@ -104,102 +148,100 @@
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleTime(date){
      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'
      }
    },
    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)
    },
    numFilter(value) {// 截取当前数据到小数点后的几位
      let realVal = '' ;
      if (!isNaN(value) && value !== '' && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName)
    handleTime(date) {
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      } else {
        realVal = '--'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
      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 - 1);
    },
    numFilter(value) {
      // 截取当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  }
};
</script>
<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
.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-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .live{
    position: fixed;
    right: 0px;
    top:70px;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 100px;
    height: 60px;
    background-color: red;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}
.live {
  position: fixed;
  right: 0px;
  top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  background-color: red;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}
.live_content {
  font-size: 18px;
  color: white;
  font-weight: bold;
}
.live_number {
  font-size: 32px;
  color: white;
  font-weight: bolder;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  .live_content{
    font-size: 18px;
    color: white;
    font-weight: bold;
  50% {
    opacity: 0.4;
  }
  .live_number{
    font-size: 32px;
    color: white;
    font-weight: bolder;
  to {
    opacity: 1;
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }
}

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

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

@@ -1,57 +1,83 @@
<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"
                     :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-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>
        </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 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},
    created() {
      this.modelCode=this.$route.query.modelCode;
export default {
  mixins: [mixins],
  components: { ModelNode, energyBalance, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.energyBalance.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.energyBalance.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

@@ -1,103 +1,106 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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

@@ -1,29 +1,29 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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,120 +31,121 @@
    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} = {}) {
    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,  // 设置图例图形的高
          itemWidth: 24, // 设置图例图形的宽
          itemHeight: 18, // 设置图例图形的高
          textStyle: {
            color: '#666'  // 图例文字颜色
            color: "#fff" // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          // itemGap: 30,
          backgroundColor: '#eee',  // 设置整个图例区域背景颜色
          data: actualData,
          // backgroundColor: "#eee", // 设置整个图例区域背景颜色
          data: actualData
        },
        series: [{
          //name: '能源',
          type: 'pie',
          radius: ['50%', '80%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
          center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
          data: expectedData,
          // itemStyle 设置饼状图扇形区域样式
          itemStyle: {
            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(30, 144, 255，0.5)'
        series: [
          {
            //name: '能源',
            type: "pie",
            radius: ["50%", "80%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ["50%", "50%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data: expectedData,
            // itemStyle 设置饼状图扇形区域样式
            itemStyle: {
              // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
              // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(30, 144, 255，0.5)"
              },
              normal: {
                label: {
                  fontSize: 25
                }
              }
            },
            normal: {
              label:{
                fontSize:25,
            // 设置值域的那指向线
            labelLine: {
              normal: {
                show: false // show设置线是否显示，默认为true，可选值：true ¦ false
              }
            },
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            // 设置值域的标签
            label: {
              normal: {
                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}%)"
              }
            }
          },
          // 设置值域的那指向线
          labelLine: {
            normal: {
              show: false ,  // show设置线是否显示，默认为true，可选值：true ¦ false
            }
          },
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          // 设置值域的标签
          label: {
            normal: {
              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}%)'
            },
          }
        }
        ],
      })
        ]
      });
    }
  }
}
};
</script>

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

@@ -1,103 +1,147 @@
<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"
                      v-model="queryParams.dataTime"
                      :type="dateTypes"
                      :value-format="valueFormat"
                      placeholder="选择日期">
      <el-date-picker
        clearable
        size="small"
        style="width: 200px"
        v-model="queryParams.dataTime"
        :type="dateTypes"
        :value-format="valueFormat"
        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">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <pie-chart ref="PieChart" :chart-data="lineChartData"/>
          <pie-chart ref="PieChart" :chart-data="lineChartData" />
        </div>
      </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},
  components: { PieChart },
  data() {
    return {
      dateTypeOptions:[],
      list:[],
      dateTypeOptions: [],
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indexCode: undefined,
        timeType:"DAY",
        dataTime: undefined,
        timeType: "DAY",
        dataTime: undefined
      },
      dateTypes: 'date',
      valueFormat:"yyyy-MM-dd",
      skinName:"",
      label:"",
      lineChartData:{expectedData: [],
        actualData: [],label:""},
      dateTypes: "date",
      valueFormat: "yyyy-MM-dd",
      skinName: "",
      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;
      this.skinName = response.msg;
    });
  },
  methods: {
    modelNodeChange(modelNode) {
      this.queryParams.indexCode=modelNode.id;
      this.label=modelNode.label;
      this.getList(this.queryParams)
      this.queryParams.indexCode = modelNode.id;
      this.label = modelNode.label;
      this.getList(this.queryParams);
    },
    getList() {
      lossAnalysisList(this.queryParams).then(response => {
        //this.plannedOutputList = response.rows;
        let expectedData=[];
        let actualData=[];
        let total="";
        let expectedData = [];
        let actualData = [];
        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)});
          }else{
            total=this.numFilter(item.value)
          if (item.indexCode.indexOf("_total") == -1) {
            actualData.push(item.indexName);
            expectedData.push({
              name: item.indexName,
              value: this.numFilter(item.value)
            });
          } else {
            total = this.numFilter(item.value);
          }
        })
        this.lineChartData.total=total;
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.title=this.label;
        });
        this.lineChartData.total = total;
        this.lineChartData.actualData = actualData;
        this.lineChartData.expectedData = expectedData;
        this.lineChartData.title = this.label;
        this.$refs.PieChart.initChart(this.lineChartData);
      });
      energyLossTable(this.queryParams).then(response => {
        this.list=response.data;
        this.list = response.data;
      });
    },
    /** 搜索按钮操作 */
@@ -110,102 +154,100 @@
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleTime(date){
      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'
      }
    },
    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)
    },
    numFilter(value) {// 截取当前数据到小数点后的几位
      let realVal = '' ;
      if (!isNaN(value) && value !== '' && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName)
    handleTime(date) {
      if (date == "YEAR") {
        (this.dateTypes = "year"), (this.valueFormat = "yyyy");
      } else if (date == "MONTH") {
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      } else {
        realVal = '--'
        (this.dateTypes = "date"), (this.valueFormat = "yyyy-MM-dd");
      }
      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 - 1);
    },
    numFilter(value) {
      // 截取当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "" && value !== null) {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  }
};
</script>
<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
.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-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .live{
    position: fixed;
    right: 0px;
    top:70px;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 100px;
    height: 60px;
    background-color: red;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}
.live {
  position: fixed;
  right: 0px;
  top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  background-color: red;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}
.live_content {
  font-size: 18px;
  color: white;
  font-weight: bold;
}
.live_number {
  font-size: 32px;
  color: white;
  font-weight: bolder;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  .live_content{
    font-size: 18px;
    color: white;
    font-weight: bold;
  50% {
    opacity: 0.4;
  }
  .live_number{
    font-size: 32px;
    color: white;
    font-weight: bolder;
  to {
    opacity: 1;
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }
}

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

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

@@ -1,57 +1,79 @@
<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"
                     :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">
  <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>
        </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";

  export default {
    components: { ModelNode,energyLoss},
    created() {
      this.modelCode=this.$route.query.modelCode;
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, ShrinkCol },
  mixins: [mixins],
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.energyLoss.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.energyLoss.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

@@ -2,40 +2,71 @@
  <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"
                      v-model="queryParams.dataTime"
                      :type="dateTypes"
                      :value-format="valueFormat"
                      placeholder="选择日期">
      </el-date-picker>
      <el-form-item label="小时" prop="selectHour">
        <el-select v-model="queryParams.selectHour" placeholder="请选择小时" clearable size="small">
          <el-option
            v-for="dict in selectHourOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
      <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="选择日期"
        >
        </el-date-picker>
        <el-form-item label="小时" prop="selectHour">
          <el-select
            v-model="queryParams.selectHour"
            placeholder="请选择小时"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in selectHourOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <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-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="a4"/>
      </el-table>
  </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-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="a4" />
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
@@ -46,145 +77,145 @@
</template>

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

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

    data() {
      return {
        timeArr:[],
        currentNode: '',
        deviceCategory:undefined,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        dateRange: [],
        names: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 10,
        // 指标信息表格数据
        List: [],
        //能流分析数据集合
        energyPicList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        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"}
        ],
        queryParams: {
          eierarchyFlag:"B",
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          value:undefined,
          code: undefined,
          dataTime: undefined,
          selectHour:"01",
          nodeid:""
        },
        dateTypes: 'date',
        valueFormat:"yyyy-MM-dd",
        tableData: [],
        datas: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        moNode: undefined,
  data() {
    return {
      timeArr: [],
      currentNode: "",
      deviceCategory: undefined,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      dateRange: [],
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 10,
      // 指标信息表格数据
      List: [],
      //能流分析数据集合
      energyPicList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      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" }
      ],
      queryParams: {
        eierarchyFlag: "B",
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        value: undefined,
        code: undefined,
        dataTime: undefined,
        selectHour: "01",
        nodeid: ""
      },
      dateTypes: "date",
      valueFormat: "yyyy-MM-dd",
      tableData: [],
      datas: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      moNode: undefined
    };
  },
  created() {
    this.setNowDate();
  },
  methods: {
    modelNodeChange(modelNode, deviceCategory) {
      this.moNode = modelNode;
      this.queryParams.nodeid = modelNode.id;
      this.deviceCategory = deviceCategory;
      this.getList();
    },
    setNowDate() {
      let nowDate = new Date();
      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);
    },
    created() {
      this.setNowDate();
    gshRq(rq) {
      return rq * 1 < 10 ? "0" + rq : rq;
    },
    methods: {
      modelNodeChange(modelNode,deviceCategory) {
        this.moNode = modelNode;
        this.queryParams.nodeid = modelNode.id;
        this.deviceCategory = deviceCategory;
        this.getList();
      },
      setNowDate() {
        let nowDate = new Date();
        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);
      },
      gshRq(rq)
      {
          return ((rq*1)<10)?'0'+rq:rq;
      },
      /** 查询指标信息列表 */
      getList() {
        this.loading = true;
        //var search = this.queryParams;
        selectEnergyPicList(this.queryParams).then(response => {
          this.energyPicList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.form = {
          indexId: undefined,
          name: undefined,
          code: undefined,
          indexCategory: undefined,
          remark: undefined,
          unitId: undefined
        };
        this.resetForm("form");
      },
    /** 查询指标信息列表 */
    getList() {
      this.loading = true;
      //var search = this.queryParams;
      selectEnergyPicList(this.queryParams).then(response => {
        this.energyPicList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        indexId: undefined,
        name: undefined,
        code: undefined,
        indexCategory: undefined,
        remark: undefined,
        unitId: undefined
      };
      this.resetForm("form");
    },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        if("5"===this.deviceCategory){
          this.getList();
        }else {
          this.tableData = [];
        }
      },
      getTime(){
        this.startTime = new Date().setHours(0, 0, 0, 0);
        this.endTime = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1;
        //显示时间
        this.timeArr = [this.startTime,this.endTime];
      },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if ("5" === this.deviceCategory) {
        this.getList();
      } else {
        this.tableData = [];
      }
    },
    getTime() {
      this.startTime = new Date().setHours(0, 0, 0, 0);
      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,58 +1,111 @@
<template>
  <div class="app-container" style="padding: 0">
    <el-container class="split-container">
      <el-aside class="left-content" :width="isCollapse?'0px':'20%'">
  <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 ModelNode from "../../basicsetting/modelNode/modelNode";
  export default {
    components: {energyPic, ModelNode},
    created() {
      this.modelCode=this.$route.query.modelCode;
      this.deviceCategory = this.$route.query.device_category;
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, ShrinkCol },
  mixins: [mixins],
  created() {
    this.modelCode = this.$route.query.modelCode;
    this.deviceCategory = this.$route.query.device_category;
  },
  data() {
    return {
      modelData: "",
      modelInfoOptions: [],
      modelCode: undefined,
      deviceCategory: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    changeNode: function(node) {
      this.$refs.energyPic.modelNodeChange(node, this.deviceCategory);
    },
    data() {
      return {
        modelData: '',
        modelInfoOptions: [],
        modelCode:undefined,
        deviceCategory:undefined,
        isCollapse: false,
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    methods: {
      changeNode: function (node) {
        this.$refs.energyPic.modelNodeChange(node,this.deviceCategory);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    }
  };
  }
};
</script>

 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,17 +16,54 @@
      </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 { listModel } from "@/api/basicsetting/model";
import mixins from "@/layout/mixin/getHeight";

export default {
  components: {MonitorAlarmSetting, ModelNode},
  mixins: [mixins],
  components: { MonitorAlarmSetting, ModelNode },
  created() {
    listModel({isShow: 1}).then(response => {
    listModel({ isShow: 1 }).then(response => {
      this.modelInfoOptions = response.data;
      if (this.modelInfoOptions.length > 0) {
        this.modelData = this.modelInfoOptions[0].modelCode;
@@ -36,18 +73,26 @@
  },
  data() {
    return {
      modelData: '',
      bodyStyleRight: {},
      modelData: "",
      modelInfoOptions: []
    }
    };
  },
  methods: {
    changeNode: function (node) {
    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');
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function (item) {
    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,12 +15,16 @@
      </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"  />
        <el-table-column label="指标编码" align="center" prop="code" />
        <el-table-column label="指标名称" align="center" prop="name" />
      </el-table>
    </el-row>
    <div slot="footer" class="dialog-footer">
@@ -24,13 +35,13 @@
</template>

<script>
import { listIndex,addIndex } from "@/api/energyExamine/addIndex";
import { listIndex, addIndex } from "@/api/energyExamine/addIndex";

export default {
  data() {
    return {
      //模型节点
      modeNode:'',
      modeNode: "",
      // 遮罩层
      loading: true,
      // 选中数组
@@ -41,7 +52,7 @@
      multiple: true,
      // 总条数
      total: 0,
      qjcode:"",
      qjcode: "",
      //  指标  表格数据
      impIndexList: [],
      // 弹出层标题
@@ -54,20 +65,19 @@
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      },
      }
    };
  },
  created() {
  },
  created() {},
  methods: {
    // 显示弹框
    show(modeNode) {
      this.modeNode=modeNode;
      this.modeNode = modeNode;
      this.reset();
      this.getList();
      this.title="添加"+this.modeNode.label+"考核指标";
      this.title = "添加" + this.modeNode.label + "考核指标";
      this.open = true;
    },
    // 表单重置
@@ -75,7 +85,7 @@
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        implementId:'',
        implementId: "",
        tableName: undefined
      };
      //清空上传组件的文件列表
@@ -83,39 +93,34 @@
    },
    // 查询  指标
    getList() {
      listIndex("STATISTIC",this.modeNode.id).then(response => {
      listIndex("STATISTIC", this.modeNode.id).then(response => {
        this.impIndexList = response.data;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.indexId)
      this.ids = selection.map(item => item.indexId);
    },
    /** 保存按钮操作 */
    handsave()
    {
      if(this.ids==null || this.ids.length<=0){
    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")
        {
      addIndex(this.ids, this.modeNode.id).then(response => {
        if (response != null && response.code == "200") {
          this.msgSuccess(response.msg);
          this.open=false;
        }else{
          this.open = false;
        } else {
          this.msgSuccess(response.msg);
        }
      });
    },
    /** 关闭按钮操作 */
    handclose()
    {
      this.open=false;
    },

    handclose() {
      this.open = false;
    }
  }
};

</script>

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

@@ -1,61 +1,86 @@
<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"
                     :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>
  <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>
        </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>

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

  export default {
    components: { ModelNode,assessmentIndex},
    created() {
      this.modelCode=this.$route.query.modelCode;
// 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 {
  mixins: [mixins],
  components: { ModelNode, assessmentIndex, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      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"
      };
    },
    data() {
      return {
        modelData: '',
        modelInfoOptions: [],
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.assessmentIndex.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.assessmentIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

 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,40 +28,45 @@
        </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>
      <span style="float: right;">统计区间：{{ times }}</span>
    </div>
    <el-table :data="energyEenchmarkingList" @selection-change="handleSelectionChange">
      <el-table-column label="日期" align="center" prop="time"/>
    <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"/>
        <el-table-column label="能耗计划" align="center" prop="dnhjh"/>
        <el-table-column label="实际量" align="center" prop="dsjl" />
        <el-table-column label="能耗计划" align="center" prop="dnhjh" />
      </el-table-column>
      <el-table-column label="天然气耗量" align="center">
        <el-table-column label="实际量" align="center" prop="tsjl"/>
        <el-table-column label="能耗计划" align="center" prop="tnhjh"/>
        <el-table-column label="实际量" align="center" prop="tsjl" />
        <el-table-column label="能耗计划" align="center" prop="tnhjh" />
      </el-table-column>
      <el-table-column label="水耗量" align="center">
        <el-table-column label="实际量" align="center" prop="ssjl"/>
        <el-table-column label="能耗计划" align="center" prop="snhjh"/>
        <el-table-column label="实际量" align="center" prop="ssjl" />
        <el-table-column label="能耗计划" align="center" prop="snhjh" />
      </el-table-column>
      <el-table-column label="焦炭耗量" align="center">
        <el-table-column label="实际量" align="center" prop="jsjl"/>
        <el-table-column label="能耗计划" align="center" prop="jnhjh"/>
        <el-table-column label="实际量" align="center" prop="jsjl" />
        <el-table-column label="能耗计划" align="center" prop="jnhjh" />
      </el-table-column>
      <el-table-column label="油耗量" align="center">
        <el-table-column label="实际量" align="center" prop="ysjl"/>
        <el-table-column label="能耗计划" align="center" prop="ynhjh"/>
        <el-table-column label="实际量" align="center" prop="ysjl" />
        <el-table-column label="能耗计划" align="center" prop="ynhjh" />
      </el-table-column>
      <el-table-column label="综合耗量" align="center">
        <el-table-column label="实际量" align="center" prop="zsjl"/>
        <el-table-column label="能耗计划" align="center" prop="znhjh"/>
        <el-table-column label="实际量" align="center" prop="zsjl" />
        <el-table-column label="能耗计划" align="center" prop="znhjh" />
      </el-table-column>
    </el-table>
  </div>
@@ -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": "",
      },
      {
        "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-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": "",
      }],
      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-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: ""
        }
      ],
      // 查询参数
      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
    },
    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;
    }
  }
};
</script>

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

@@ -1,58 +1,84 @@
<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"
                     :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>
  <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>
        </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>

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

  export default {
    components: { ModelNode,assessmentResults},
    created() {
      this.modelCode=this.$route.query.modelCode;
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;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      //this.$refs.EnergyActual.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        //this.$refs.EnergyActual.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

 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,186 +18,190 @@
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree">
            ref="tree"
          >
          </el-tree>
        </el-card>
      </el-aside>
      <el-container>
        <el-main style="padding:0">
<!--          <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--            <el-tab-pane label="检测图" name="first">用户管理</el-tab-pane>-->
<!--            <el-tab-pane label="报表" name="second">配置管理</el-tab-pane>-->
<!--            <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>
          <!--          <el-tabs v-model="activeName" @tab-click="handleClick">-->
          <!--            <el-tab-pane label="检测图" name="first">用户管理</el-tab-pane>-->
          <!--            <el-tab-pane label="报表" name="second">配置管理</el-tab-pane>-->
          <!--            <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>
        </el-main>
<!--        <el-main style="padding:0">-->
<!--          <realTimeSetting ref="realTimeSetting"></realTimeSetting>-->
<!--        </el-main>-->
<!--        <svg-icon v-bind:iconClass="imgShow.realName" className='icon'></svg-icon>-->
        <!--        <el-main style="padding:0">-->
        <!--          <realTimeSetting ref="realTimeSetting"></realTimeSetting>-->
        <!--        </el-main>-->
        <!--        <svg-icon v-bind:iconClass="imgShow.realName" className='icon'></svg-icon>-->
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
  .icon {
    width: 970px;
    height: 550px;
  }
.icon {
  width: 970px;
  height: 550px;
}
</style>
<script>
    import {
        listEquipmentfile,
    } from "@/api/basicSetup/equipmentfile";
    export default {
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
import { listEquipmentfile } from "@/api/basicSetup/equipmentfile";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    var choiceIndex;
    var Indexid;
    var realName = "2020-03-12-275a44966506b783f033058f9e0e3472";
    return {
      //右边菜单栏
      activeName: "实时监测",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      //
      imgShow: [(realName = "")],
      // 组态图表格数据
      equipmentfileList: [],
      //测点表格数据
      equipmentfilecdList: [(choiceIndex = "")],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      footopen: false,
      addImgOpen: false,
      uploadOpen: false,
      indexLoading: false,
      //组态图选择指标
      statisticIndexDialog: false,
      //组态图测点弹出层
      imgcdopen: false,
      // ID字典
      fileidOptions: [],
      // 文件名称字典
      filenameOptions: [],
      // 文件编号字典
      filenoOptions: [],
      // 操作人字典
      opomanOptions: [],
      // 操作时间字典
      opotimeOptions: [],
      // 文件路径字典
      filepathOptions: [],
      // 备注字典
      noteOptions: [],
      settingStatisticIndexList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        filename: [
          { required: true, message: "文件名称不能为空", trigger: "blur" }
        ],
        fileno: [
          { required: true, message: "文件编号不能为空", trigger: "blur" }
        ]
      },
      filterText: "",
      svgData: [
        {
          id: 1,
          label: "生产企业",
          children: [
            {
              id: 2,
              label: "水系统"
            },
            {
              id: 3,
              label: "电系统"
            }
        },
        data() {
            var choiceIndex;
            var Indexid;
            var realName = "2020-03-12-275a44966506b783f033058f9e0e3472";
            return {
                //右边菜单栏
                activeName: '实时监测',
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                //
                imgShow:[
                    realName=""
                ],
                // 组态图表格数据
                equipmentfileList: [],
                //测点表格数据
                equipmentfilecdList: [
                    choiceIndex = ""
                ],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                footopen: false,
                addImgOpen: false,
                uploadOpen: false,
                indexLoading: false,
                //组态图选择指标
                statisticIndexDialog: false,
                //组态图测点弹出层
                imgcdopen: false,
                // ID字典
                fileidOptions: [],
                // 文件名称字典
                filenameOptions: [],
                // 文件编号字典
                filenoOptions: [],
                // 操作人字典
                opomanOptions: [],
                // 操作时间字典
                opotimeOptions: [],
                // 文件路径字典
                filepathOptions: [],
                // 备注字典
                noteOptions: [],
                settingStatisticIndexList: [],
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    filename: [
                        {required: true, message: "文件名称不能为空", trigger: "blur"}
                    ], fileno: [
                        {required: true, message: "文件编号不能为空", trigger: "blur"}
                    ],
                },
                filterText: '',
                svgData:[{
                    id:1,
                    label:"生产企业",
                    children:[{
                        id:2,
                        label:"水系统",
                    },{
                        id:3,
                        label: "电系统",
                    }],
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            };
        },
        created() {
            this.getList();
            this.imgShow.realName = "dian";
        },
        methods: {
            //通过
            handleClick(tab, event) {
                console.log(tab, event);
            },
            //切换组态图查看
            updateImg(row){
                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)
            },
            //通过关键字进行过滤组态图
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            /** 查询组态图列表 */
            getList() {
                this.loading = true;
                listEquipmentfile(this.queryParams).then(response => {
                    this.equipmentfileList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    fileid: undefined,
                    filename: undefined,
                    fileno: undefined,
                    opoman: undefined,
                    opotime: undefined,
                    filepath: undefined,
                    note: undefined,
                    img: undefined
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  created() {
    this.getList();
    this.imgShow.realName = "dian";
  },
  methods: {
    //通过
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //切换组态图查看
    updateImg(row) {
      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);
    },
    //通过关键字进行过滤组态图
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询组态图列表 */
    getList() {
      this.loading = true;
      listEquipmentfile(this.queryParams).then(response => {
        this.equipmentfileList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        fileid: undefined,
        filename: undefined,
        fileno: undefined,
        opoman: undefined,
        opotime: undefined,
        filepath: undefined,
        note: undefined,
        img: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>

 energy_management_ui/src/views/energyPlan/actualOutput/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':'20%'">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height:32px">
            计划产量
          </div>
          <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">
  <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>
        </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 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},
    created() {
      this.modelCode=this.$route.query.modelCode;
export default {
  mixins: [mixins],
  components: { ModelNode, EnergyActual, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      console.log(node);
      //this.$refs.EnergyActual.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        console.log(node);
        //this.$refs.EnergyActual.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

@@ -1,57 +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"
                     :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>
  <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>
        </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";

  export default {
    components: { ModelNode,energyEstablishment},
    created() {
      this.modelCode=this.$route.query.modelCode;
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, ShrinkCol },
  mixins: [mixins],
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.energyEstablishment.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.energyEstablishment.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

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

<script>
  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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
      }
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"
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    width: {
      type: String,
      default: "100%"
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    height: {
      type: String,
      default: "350px"
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')

        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          title: {
            x:'center',
            y: 'top',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            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'
            }
          }],
          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',
            yAxisIndex: 1,
            data: [289,430,350,375,374,204,300,194,184],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          x: "center",
          y: "top",
          textStyle: {
            color: "#333"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: ["焦台", "粉碎机"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [
          {
            type: "category",
            data: [
              "12日",
              "13日",
              "14日",
              "15日",
              "16日",
              "17日",
              "18日",
              "19日",
              "20日"
            ],
            axisPointer: {
              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: [
          {
            type: "bar",
            data: [289, 430, 350, 375, 374, 204, 300, 194, 184],
            smooth: true, //线条平滑
            animationDuration: 2800,
            animationEasing: "quadraticOut"
          },
          {
            type: "line",
            yAxisIndex: 1,
            data: [289, 430, 350, 375, 374, 204, 300, 194, 184],
            animationDuration: 2800,
            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,26 +25,32 @@
            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;">
      <line-chart/>
    <el-row style="padding:16px 16px 0;margin-bottom:32px;">
      <line-chart />
    </el-row>
    <div>
      <span>统计范围：全厂</span>
      <span style="float: right;">统计区间：{{times}}</span>
      <span style="float: right;">统计区间：{{ times }}</span>
    </div>
    <el-table :data="energyEenchmarkingList" @selection-change="handleSelectionChange">
      <el-table-column prop="date" align="center"  label="日期"  width="150"/>
    <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"/>
        <el-table-column label="产品种类" align="center" prop="cpname" />
        <el-table-column label="计量单位" align="center" prop="jldw" />
        <el-table-column label="计划产量" align="center" prop="jhcl" />
      </el-table-column>
@@ -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: '水耗'
      }],
      // 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": "",
      },
      radio: "1",
      value: "",
      values: "",
      options: [
        {
          "date":"2020-11-20",
          "cpname": "粗苯",
          "jldw":"吨",
          "jhcl":"22212",
          "dian":"79",
          "shui":"26",
          "zq":"50",
          "createBy": null,
          "createTime": "",
          "updateBy": null,
          "updateTime": null,
          "remark": "",
          value: "选项1",
          label: "未来三天"
        },
        {
          "date":"2020-11-20",
          "cpname": "焦油",
          "jldw":"吨",
          "jhcl":"1211212",
          "dian":"109",
          "shui":"30",
          "zq":"85",
          "createBy": null,
          "createTime": "",
          "updateBy": null,
          "updateTime": null,
          "remark": "",
        }],
          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: ""
        },
        {
          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: ""
        }
      ],
      // 弹出层标题
      // 是否显示弹出层
      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
    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;
    },
    // 取消按钮
    cancel() {
@@ -193,76 +216,76 @@
    },
    // 多选框选中数据
    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>
<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
.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-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .live{
    position: fixed;
    right: 0px;
    top:70px;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 100px;
    height: 60px;
    background-color: red;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}
.live {
  position: fixed;
  right: 0px;
  top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  background-color: red;
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}
.live_content {
  font-size: 18px;
  color: white;
  font-weight: bold;
}
.live_number {
  font-size: 32px;
  color: white;
  font-weight: bolder;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  .live_content{
    font-size: 18px;
    color: white;
    font-weight: bold;
  50% {
    opacity: 0.4;
  }
  .live_number{
    font-size: 32px;
    color: white;
    font-weight: bolder;
  to {
    opacity: 1;
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }
}

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

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

@@ -1,58 +1,84 @@
<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"
                     :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>
  <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>
        </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 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},
    created() {
      this.modelCode=this.$route.query.modelCode;
export default {
  components: { ModelNode, energyForecast, ShrinkCol },
  mixins: [mixins],
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      //this.$refs.EnergyActual.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        //this.$refs.EnergyActual.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

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

<script>
  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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
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"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        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'
            }
          },
          title: {
            x: 'center',
            y: 'top',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          /*legend: {
    setOptions({ expectedData, actualData, expecteData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          x: "center",
          y: "top",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          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,66 +1,97 @@
<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"
                        v-model="queryParams.dataTime"
                        :type="dateTypes"
                        :value-format="valueFormat"
                        placeholder="选择日期">
        <el-date-picker
          clearable
          size="small"
          style="width: 200px"
          v-model="queryParams.dataTime"
          :type="dateTypes"
          :value-format="valueFormat"
          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;">
      <line-chart  ref="LineChart" :chart-data="lineChartData"/>
    <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="productname" />
        <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>
      <el-table-column label="电（千瓦时）" align="center">
        <el-table-column label="计划值" align="center" prop="poValue"/>
        <el-table-column label="实际值" align="center" prop="peValue"/>
        <el-table-column label="计划值" align="center" prop="poValue" />
        <el-table-column label="实际值" align="center" prop="peValue" />
      </el-table-column>
      <el-table-column label="水（立方米）" align="center">
        <el-table-column label="计划值" align="center" prop="poWaterValue"/>
        <el-table-column label="实际值" align="center" prop="peWaterValue"/>
        <el-table-column label="计划值" align="center" prop="poWaterValue" />
        <el-table-column label="实际值" align="center" prop="peWaterValue" />
      </el-table-column>
      <el-table-column label="煤气（立方米）" align="center">
        <el-table-column label="计划值" align="center" prop="poCoalValue"/>
        <el-table-column label="实际值" align="center" prop="peCoalValue"/>
        <el-table-column label="计划值" align="center" prop="poCoalValue" />
        <el-table-column label="实际值" align="center" prop="peCoalValue" />
      </el-table-column>
      <el-table-column label="蒸汽（立方米）" align="center">
        <el-table-column label="计划值" align="center" prop="poSteamValue"/>
        <el-table-column label="实际值" align="center" prop="peSteamValue"/>
        <el-table-column label="计划值" align="center" prop="poSteamValue" />
        <el-table-column label="实际值" align="center" prop="peSteamValue" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { listEnergyMonitoring } from "@/api/plannedOutput/energyMonitoring";
  import LineChart from './LineChart'
  export default {
  components: {LineChart},
import { listEnergyMonitoring } from "@/api/plannedOutput/energyMonitoring";
import LineChart from "./LineChart";
export default {
  components: { LineChart },
  data() {
    return {
      // 遮罩层
      //loading: true,
      // 选中数组
      ids: [],
      radio: '1',
      radio: "1",
      // 非单个禁用
      single: true,
      // 非多个禁用
@@ -69,19 +100,19 @@
      total: 0,

      // energy_benchmarking表格数据
      energyEenchmarkingList:[],
      dateTypeOptions:[],
      energyEenchmarkingList: [],
      dateTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataTime: undefined,
        timeType:"DAY",
        timeType: "DAY"
      },
      dateTypes: 'date',
      valueFormat:"yyyy-MM-dd",
      label:"",
      lineChartData:{expectedData: [],actualData: [],expecteData:[]},
      dateTypes: "date",
      valueFormat: "yyyy-MM-dd",
      label: "",
      lineChartData: { expectedData: [], actualData: [], expecteData: [] }
    };
  },
  created() {
@@ -91,30 +122,32 @@
    });
    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.queryParams.indexCode = modelNode.id;
      this.label = modelNode.label;
      this.getList(this.queryParams);
    },
    getList() {
      this.loading = true;
      listEnergyMonitoring(this.queryParams).then(response => {
        this.energyEenchmarkingList=response.data;
        let actualData=[];
        let expectedData=[];
        let expecteData=[];
        this.energyEenchmarkingList = response.data;
        let actualData = [];
        let expectedData = [];
        let expecteData = [];
        this.energyEenchmarkingList.forEach(item => {
          actualData.push(item.productname);
          expectedData.push(item.planValue);
          expecteData.push(item.actualValue);
        })
        this.lineChartData.actualData=actualData;
        this.lineChartData.expectedData=expectedData;
        this.lineChartData.expecteData=expecteData;
        });
        this.lineChartData.actualData = actualData;
        this.lineChartData.expectedData = expectedData;
        this.lineChartData.expecteData = expecteData;
        this.$refs.LineChart.initChart(this.lineChartData);
      });
    },
@@ -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'
      }else{
        this.dateTypes= 'date',
        this.valueFormat='yyyy-MM-dd'
    handleTime(date) {
      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");
      }
    },
    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
    },
    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;
    }
  }
};
</script>

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

@@ -1,57 +1,83 @@
<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"
                     :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>
  <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>
        </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>

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

  export default {
    components: { ModelNode,energyMonitoring},
    created() {
      this.modelCode=this.$route.query.modelCode;
import mixins from "@/layout/mixin/getHeight";
import ShrinkCol from "@/components/shrink/index.vue";
export default {
  mixins: [mixins],
  components: { ModelNode, energyMonitoring, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.energyMonitoring.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.energyMonitoring.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

@@ -1,57 +1,79 @@
<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"
                     :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">
  <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>
        </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";

  export default {
    components: { ModelNode,EnergyPlan},
    created() {
      this.modelCode=this.$route.query.modelCode;
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 {
  mixins: [mixins],
  components: { ModelNode, EnergyPlan, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.EnergyPlan.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.EnergyPlan.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

 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

@@ -1,29 +1,29 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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,49 +31,48 @@
    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)
     },
     setOptions({newVisitis,xAxis,actualData} = {}) {
       var series=[];
       if(newVisitis !=null ||newVisitis != undefined){
         newVisitis.forEach(rowData => {
           series.push({
               name: actualData,
               type: 'bar',
               data: newVisitis,
               smooth: true,//线条平滑
               stack: 'vistors',
               animationDuration: 2800,
               animationEasing: 'quadraticOut'
             },
           );
         });
         /*for(var i=0;i<newVisitis.length;i++){
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ newVisitis, xAxis, actualData } = {}) {
      var series = [];
      if (newVisitis != null || newVisitis != undefined) {
        newVisitis.forEach(rowData => {
          series.push({
            name: actualData,
            type: "bar",
            data: newVisitis,
            smooth: true, //线条平滑
            stack: "vistors",
            animationDuration: 2800,
            animationEasing: "quadraticOut"
          });
        });
        /*for(var i=0;i<newVisitis.length;i++){
           series.push({
               name: actualData[i],
               type: 'bar',
@@ -85,40 +84,48 @@
             },
           );
         }*/
       }
      }
      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%',
          data: actualData,
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: 'category',
          data: xAxis,
          axisTick: {
            alignWithLabel: true
          },
        }],
        yAxis: [{
          name: '吨标煤',
          type: 'value',
          axisTick: {
            show: false
          },
        }],
        series:series,/*[{
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: "吨标煤",
            type: "value",
            axisTick: {
              show: false
            }
          }
        ],
        series: series /*[{
          name: '本期',
           type: 'bar',
          data: [
@@ -138,8 +145,8 @@
             animationDuration: 2800,
             animationEasing: 'quadraticOut'
         }]*/
      })
      });
    }
  }
}
};
</script>

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

@@ -1,29 +1,29 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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,87 +31,94 @@
    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)
     },
     setOptions({newVisitis,xAxis,actualData} = {}) {
       var series=[];
       if(newVisitis !=null ||newVisitis != undefined){
         for(var i=0;i<newVisitis.length;i++){
           let aa=newVisitis[i];
           for(var j=0;j<aa.length;j++) {
             series.push({
                 name: actualData[i],
                 type: 'bar',
                 data: aa[j],
                 smooth: true,//线条平滑
                 //stack: 'vistors',
                 animationDuration: 2800,
                 animationEasing: 'quadraticOut'
               }
             );
           }
         }
       }
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ newVisitis, xAxis, actualData } = {}) {
      var series = [];
      if (newVisitis != null || newVisitis != undefined) {
        for (var i = 0; i < newVisitis.length; i++) {
          let aa = newVisitis[i];
          for (var j = 0; j < aa.length; j++) {
            series.push({
              name: actualData[i],
              type: "bar",
              data: aa[j],
              smooth: true, //线条平滑
              //stack: 'vistors',
              animationDuration: 2800,
              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%',
          data: actualData,
          left: "40%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: 'category',
          data: xAxis,
          axisTick: {
            alignWithLabel: true
          },
        }],
        yAxis: [{
          name: '万元',
          type: 'value',
          axisTick: {
            show: false
          },
        }],
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: "万元",
            type: "value",
            axisTick: {
              show: false
            }
          }
        ],
        series: series
      })
      });
    }
  }
}
};
</script>

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

@@ -1,29 +1,29 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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,90 +31,93 @@
    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 } = {}) {
    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,  // 设置图例图形的高
          itemWidth: 24, // 设置图例图形的宽
          itemHeight: 18, // 设置图例图形的高
          textStyle: {
            color: '#666'  // 图例文字颜色
            color: "#fff" // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
         // itemGap: 30,
          backgroundColor: '#eee',  // 设置整个图例区域背景颜色
          // itemGap: 30,
          backgroundColor: "#eee", // 设置整个图例区域背景颜色
          data: title,
          formatter:function(item){
          formatter: function(item) {
            let target;
            let unitId;
            for(let i=0;i<newVisitis.length;i++){
              if(datas[i].name===item){
                target=datas[i].value;
                unitId=datas[i].unitId
            for (let i = 0; i < newVisitis.length; i++) {
              if (datas[i].name === item) {
                target = datas[i].value;
                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%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data: newVisitis,//[{value:335, name:'洗精煤' },{value:310, name:'工业用电'}],/*selected: true*/
            center: ["65%", "50%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data: newVisitis, //[{value:335, name:'洗精煤' },{value:310, name:'工业用电'}],/*selected: true*/
            // itemStyle 设置饼状图扇形区域样式
            itemStyle: {
              // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
@@ -122,29 +125,29 @@
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(30, 144, 255，0.5)'
                shadowColor: "rgba(30, 144, 255，0.5)"
              }
            },
            // 设置值域的那指向线
            labelLine: {
              normal: {
                show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                show: false // show设置线是否显示，默认为true，可选值：true ¦ false
              }
            },
            // 设置值域的标签
            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,69 +1,139 @@
<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" >
          <pie-chart ref="PieChart" :chart-data="lineChartData"/>
        <div class="chart-wrapper">
          <pie-chart ref="PieChart" :chart-data="lineChartData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" style="padding-right: 0">
        <div class="chart-wrapper" >
          <pieChartCost ref="pieChartCost" :chart-data="lineChartData1"/>
        <div class="chart-wrapper">
          <pieChartCost ref="pieChartCost" :chart-data="lineChartData1" />
        </div>
      </el-col>
    </el-row>
    <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>
        <div class="chart-wrapper">
          <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"/>
          <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-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>
          </el-checkbox-group>-->
          <BarCharts ref="BarCharts" :chart-data="lineChartData3"/>
          <BarCharts ref="BarCharts" :chart-data="lineChartData3" />
        </div>
      </el-col>
    </el-row>
@@ -71,257 +141,204 @@
</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";
  export default {
    name: 'consumption',
    name: 'Index',
    components: {BarChart,BarCharts,PieChart,pieChartCost},
    props: ["modelCode"],
    data() {
      return {
        // 遮罩层
        loading: true,
        total: 0,
        dateTypeOptions:[],
        checkList1:[],
        checkList2:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          beginTime: undefined,
          endTime: undefined,
          dataTime: undefined,
          timeType:'MONTH',
          indexId: undefined,
          procedure: undefined,
          indexCode: "",
          id: undefined,
        },
        list:[],
        arraylist1:[],
        arraylist2:[],
        arraylist3:[],
        arraylist4:[],
        arraylist5:[],
        xAxisListXFCB:[],
        xAxisListZBL:[],
        lineChartData:{
          newVisitis:null,
        },
        lineChartData1:{
          newVisitis:null,
        },
        lineChartData2:{
          newVisitis:null,
        },
        lineChartData3:{
          newVisitis:null,
        },
        lineChartData4:{
          newVisitis:null,
        },
        //dateTypes: 'monthrange',//时间范围
        dateTypes: 'month',
        valueFormat:'yyyy-MM',
        title:"",
        titleName: "",
        checkAll1: false,
        checkAll2: false,
        isIndeterminate1: true,
        isIndeterminate2: true,
      }
    },
    watch: {
      modelCode: {
        deep: true,
        handler(val) {
          this.getList(val)
        }
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",
  components: { BarChart, BarCharts, PieChart, pieChartCost },
  props: ["modelCode"],
  data() {
    return {
      // 遮罩层
      loading: true,
      total: 0,
      dateTypeOptions: [],
      checkList1: [],
      checkList2: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: undefined,
        endTime: undefined,
        dataTime: undefined,
        timeType: "MONTH",
        indexId: undefined,
        procedure: undefined,
        indexCode: "",
        id: undefined
      },
    },
    created() {
      //this.getList();
      this.getDicts("timeType").then(response => {
        this.dateTypeOptions = response.data;
        this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      });
      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));
      this.queryParams.beginTime=starTtime;
      this.queryParams.endTime=endTtime;
    },
    methods: {
      modelNodeChange(modelNode) {
        let legendTitle=[];
        this.queryParams.id=modelNode.id;
        this.titleName=modelNode.label;
        this.queryParams.indexCode=modelNode.id;
        getEnergyConstitute(this.queryParams).then(response => {
        this.arraylist1=response.data.listXFL;//消费量
        this.arraylist2=response.data.listZBL;//折标量
        this.arraylist4=response.data.listXFCB;//消费成本
      list: [],
      arraylist1: [],
      arraylist2: [],
      arraylist3: [],
      arraylist4: [],
      arraylist5: [],
      xAxisListXFCB: [],
      xAxisListZBL: [],
      lineChartData: {
        newVisitis: null
      },
      lineChartData1: {
        newVisitis: null
      },
      lineChartData2: {
        newVisitis: null
      },
      lineChartData3: {
        newVisitis: null
      },
      lineChartData4: {
        newVisitis: null
      },
      //dateTypes: 'monthrange',//时间范围
      dateTypes: "month",
      valueFormat: "yyyy-MM",
      title: "",
      titleName: "",
      checkAll1: false,
      checkAll2: false,
      isIndeterminate1: true,
      isIndeterminate2: true
    };
  },
  watch: {
    modelCode: {
      deep: true,
      handler(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.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));
    this.queryParams.beginTime = starTtime;
    this.queryParams.endTime = endTtime;
  },
  methods: {
    modelNodeChange(modelNode) {
      let legendTitle = [];
      this.queryParams.id = modelNode.id;
      this.titleName = modelNode.label;
      this.queryParams.indexCode = modelNode.id;
      getEnergyConstitute(this.queryParams).then(response => {
        this.arraylist1 = response.data.listXFL; //消费量
        this.arraylist2 = response.data.listZBL; //折标量
        this.arraylist4 = response.data.listXFCB; //消费成本
        //能耗消费结构 消费量
        let unitId=[];
        let source=[];
        let title=[];
        for (let i=0; i<this.arraylist1.length;i++){
        let unitId = [];
        let source = [];
        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});
        };
        for (let i=0; i<this.arraylist2.length;i++){
         source.push({"name":this.arraylist2[i].indexName,"value":this.numFilter(this.arraylist2[i].value)});
          unitId.push({
            name: this.arraylist1[i].indexName,
            value: this.numFilter(this.arraylist1[i].value),
            unitId: this.arraylist1[i].unitId
          });
        }
        this.lineChartData.datas=unitId;
        this.lineChartData.title=title;
        this.lineChartData.newVisitis=source;
        for (let i = 0; i < this.arraylist2.length; i++) {
          source.push({
            name: this.arraylist2[i].indexName,
            value: this.numFilter(this.arraylist2[i].value)
          });
        }
        this.lineChartData.datas = unitId;
        this.lineChartData.title = title;
        this.lineChartData.newVisitis = source;
        this.$refs.PieChart.initChart(this.lineChartData);
        //能耗消费成本
        let unitIdXFCB=[];
        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":"万元"});
          titleXFCB +=this.numFilter(this.arraylist4[i].value);
        let unitIdXFCB = [];
        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: "万元"
          });
          titleXFCB += this.numFilter(this.arraylist4[i].value);
        }
        this.lineChartData1.title=titleXFCB;
        this.lineChartData1.newVisitis=sourceXFCB;
        this.lineChartData1.datas=unitIdXFCB;
        this.lineChartData1.title = titleXFCB;
        this.lineChartData1.newVisitis = sourceXFCB;
        this.lineChartData1.datas = unitIdXFCB;
        this.$refs.pieChartCost.initChart(this.lineChartData1);
      });
      //获取模型获取指标
       getSettingIndex(this.queryParams.id).then(response => {
          this.list=response.data;
         this.queryParams.indexName="";
          this.list.forEach(item => {
            this.queryParams.indexName+=item.code+",";
          });
          getEnergyConsumption(this.queryParams).then(response => {
            this.arraylist3=response.data.resultListZBL;//折标量
            this.arraylist5=response.data.resultListXFCB;//折标量
            //this.arraylist5=response.data.tabledataMap;
            //能耗消费结构 对比
            let resultZBL =[];
            let currentValue=[];
            let lastYearValue=[];
            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));
            }
            resultZBL.push(currentValue);
            resultZBL.push(lastYearValue);
            this.xAxisListZBL=response.data.resultZBL;
            for (let i=0;i<this.xAxisListZBL.length;i++){
              xAxis.push(this.xAxisListZBL[i].indexName);
            }
            this.lineChartData2.xAxis=xAxis;
            this.lineChartData2.newVisitis=resultZBL;
            this.lineChartData2.actualData=['本期','同期'];
            this.$refs.BarChart.initChart(this.lineChartData2);
            //能耗消费成本 对比
            let resultXFCB=[];
            let currentValueXFCB=[];
            let lastYearValueXFCB=[];
            let minValue=[];
            let xAxisXFCB=[];
            for(let i=0; i<this.arraylist5.length; i++){
              currentValueXFCB.push(this.arraylist5[i].currentValue);
              lastYearValueXFCB.push(this.arraylist5[i].lastYearValue);
              minValue.push(this.numFilter(this.arraylist5[i].minValue));
            }
            resultXFCB.push(currentValueXFCB);
            resultXFCB.push(lastYearValueXFCB);
            //source.push(minValue);
            //x轴坐标名称
            this.xAxisListXFCB=response.data.resultXFCB;
            for (let i=0;i<this.xAxisListXFCB.length;i++){
              xAxisXFCB.push(this.xAxisListXFCB[i].indexName);
            }
            this.lineChartData3.xAxis=xAxisXFCB;
            this.lineChartData3.newVisitis=resultXFCB;
            this.lineChartData3.actualData=['本期','同期','预算'];
            this.$refs.BarCharts.initChart(this.lineChartData3);
          })
        });
      },

      handleCheckAllChange1(val) {
        let checke=[];
      getSettingIndex(this.queryParams.id).then(response => {
        this.list = response.data;
        this.queryParams.indexName = "";
        this.list.forEach(item => {
          checke.push(item.code);
          this.queryParams.indexName += item.code + ",";
        });
        this.checkList1 =val ? checke : [];
        this.isIndeterminate1 = false;
        this.resultListZBL(checke);
      },
      handleCheckedCitiesChange1(value) {
        let checkedCount = value.length;
        this.checkAll1 = checkedCount === this.list.length;
        this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.list.length;
        this.resultListZBL(value);
      },
      handleCheckAllChange2(val) {
        let checke=[];
        this.list.forEach(item => {
          checke.push(item.code);
        });
        this.checkList2 =val ? checke : [];
        this.isIndeterminate2 = false;
        this.resultListXFCB(checke);
      },
      handleCheckedCitiesChange2(value) {
        this.resultListXFCB(value);
        let checkedCount = value.length;
        this.checkAll2 = checkedCount === this.list.length;
        this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.list.length;
      },
      resultListZBL(value){
        this.queryParams.indexName=value.join(',');
        getEnergyConsumption(this.queryParams).then(response => {
          this.arraylist3=response.data.resultListZBL;//折标量
          this.arraylist3 = response.data.resultListZBL; //折标量
          this.arraylist5 = response.data.resultListXFCB; //折标量
          //this.arraylist5=response.data.tabledataMap;
          //能耗消费结构 对比
          let resultZBL =[];
          let currentValue=[];
          let lastYearValue=[];
          let xAxis=[];
          for(let i=0; i<this.arraylist3.length; i++){
          let resultZBL = [];
          let currentValue = [];
          let lastYearValue = [];
          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);
          let xAxisListZBL=[];
          xAxisListZBL=response.data.resultZBL;
          for (let i=0;i<xAxisListZBL.length;i++){
            xAxis.push(xAxisListZBL[i].indexName);
          this.xAxisListZBL = response.data.resultZBL;
          for (let i = 0; i < this.xAxisListZBL.length; i++) {
            xAxis.push(this.xAxisListZBL[i].indexName);
          }
          this.lineChartData2.xAxis=xAxis;
          this.lineChartData2.newVisitis=resultZBL;
          this.lineChartData2.actualData=['本期','同期'];
          this.lineChartData2.xAxis = xAxis;
          this.lineChartData2.newVisitis = resultZBL;
          this.lineChartData2.actualData = ["本期", "同期"];
          this.$refs.BarChart.initChart(this.lineChartData2);
        });
      },
      resultListXFCB(value){
        this.queryParams.indexName=value.join(',');
        //能源消费成本情况
        getEnergyConsumption(this.queryParams).then(response => {
          this.arraylist5=response.data.resultListXFCB;//折标量
          //能耗消费成本 对比
          let resultXFCB=[];
          let currentValueXFCB=[];
          let lastYearValueXFCB=[];
          let minValue=[];
          let xAxisXFCB=[];
          for(let i=0; i<this.arraylist5.length; i++){
          let resultXFCB = [];
          let currentValueXFCB = [];
          let lastYearValueXFCB = [];
          let minValue = [];
          let xAxisXFCB = [];
          for (let i = 0; i < this.arraylist5.length; i++) {
            currentValueXFCB.push(this.arraylist5[i].currentValue);
            lastYearValueXFCB.push(this.arraylist5[i].lastYearValue);
            minValue.push(this.numFilter(this.arraylist5[i].minValue));
@@ -330,90 +347,181 @@
          resultXFCB.push(lastYearValueXFCB);
          //source.push(minValue);
          //x轴坐标名称
          this.xAxisListXFCB=response.data.resultXFCB;
          for (let i=0;i<this.xAxisListXFCB.length;i++){
          this.xAxisListXFCB = response.data.resultXFCB;
          for (let i = 0; i < this.xAxisListXFCB.length; i++) {
            xAxisXFCB.push(this.xAxisListXFCB[i].indexName);
          }
          this.lineChartData3.xAxis=xAxisXFCB;
          this.lineChartData3.newVisitis=resultXFCB;
          this.lineChartData3.actualData=['本期','同期','预算'];
          this.lineChartData3.xAxis = xAxisXFCB;
          this.lineChartData3.newVisitis = resultXFCB;
          this.lineChartData3.actualData = ["本期", "同期", "预算"];
          this.$refs.BarCharts.initChart(this.lineChartData3);
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.modelNodeChange(this.queryParams);
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleTime(data){
        let nowDate = new Date();
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          frontMonth: nowDate.getMonth(),
      });
    },

    handleCheckAllChange1(val) {
      let checke = [];
      this.list.forEach(item => {
        checke.push(item.code);
      });
      this.checkList1 = val ? checke : [];
      this.isIndeterminate1 = false;
      this.resultListZBL(checke);
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.list.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.list.length;
      this.resultListZBL(value);
    },
    handleCheckAllChange2(val) {
      let checke = [];
      this.list.forEach(item => {
        checke.push(item.code);
      });
      this.checkList2 = val ? checke : [];
      this.isIndeterminate2 = false;
      this.resultListXFCB(checke);
    },
    handleCheckedCitiesChange2(value) {
      this.resultListXFCB(value);
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.list.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.list.length;
    },
    resultListZBL(value) {
      this.queryParams.indexName = value.join(",");
      getEnergyConsumption(this.queryParams).then(response => {
        this.arraylist3 = response.data.resultListZBL; //折标量
        //能耗消费结构 对比
        let resultZBL = [];
        let currentValue = [];
        let lastYearValue = [];
        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));
        }
        if(data=='YEAR'){
          this.dateTypes= 'year',
          this.valueFormat='yyyy'
        }else if(data=='MONTH'){
          //this.dateTypes='monthrange'
          this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
        resultZBL.push(currentValue);
        resultZBL.push(lastYearValue);
        let xAxisListZBL = [];
        xAxisListZBL = response.data.resultZBL;
        for (let i = 0; i < xAxisListZBL.length; i++) {
          xAxis.push(xAxisListZBL[i].indexName);
        }
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有能耗指标趋势分析数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
        this.lineChartData2.xAxis = xAxis;
        this.lineChartData2.newVisitis = resultZBL;
        this.lineChartData2.actualData = ["本期", "同期"];
        this.$refs.BarChart.initChart(this.lineChartData2);
      });
    },
    resultListXFCB(value) {
      this.queryParams.indexName = value.join(",");
      //能源消费成本情况
      getEnergyConsumption(this.queryParams).then(response => {
        this.arraylist5 = response.data.resultListXFCB; //折标量
        //能耗消费成本 对比
        let resultXFCB = [];
        let currentValueXFCB = [];
        let lastYearValueXFCB = [];
        let minValue = [];
        let xAxisXFCB = [];
        for (let i = 0; i < this.arraylist5.length; i++) {
          currentValueXFCB.push(this.arraylist5[i].currentValue);
          lastYearValueXFCB.push(this.arraylist5[i].lastYearValue);
          minValue.push(this.numFilter(this.arraylist5[i].minValue));
        }
        resultXFCB.push(currentValueXFCB);
        resultXFCB.push(lastYearValueXFCB);
        //source.push(minValue);
        //x轴坐标名称
        this.xAxisListXFCB = response.data.resultXFCB;
        for (let i = 0; i < this.xAxisListXFCB.length; i++) {
          xAxisXFCB.push(this.xAxisListXFCB[i].indexName);
        }
        this.lineChartData3.xAxis = xAxisXFCB;
        this.lineChartData3.newVisitis = resultXFCB;
        this.lineChartData3.actualData = ["本期", "同期", "预算"];
        this.$refs.BarCharts.initChart(this.lineChartData3);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.modelNodeChange(this.queryParams);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleTime(data) {
      let nowDate = new Date();
      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") {
        //this.dateTypes='monthrange'
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有能耗指标趋势分析数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          //return exportEnergyindex(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      },
      numFilter(value) {// 截取当前数据到小数点后的几位
        let realVal = '' ;
        if (!isNaN(value) && value !== '') {
          realVal = parseFloat(value).toFixed(this.skinName)
        } else {
          realVal = '--'
        }
        return realVal
      },
        })
        .catch(function() {});
    },
    numFilter(value) {
      // 截取当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  }
};
</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;
    }
.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;
}
.chart-title {
  display: block;
  background: #f2f6fc;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
}
</style>

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

@@ -1,55 +1,79 @@
<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";

  export default {
    components: { ModelNode,consumption},
    created() {
      this.modelCode=this.$route.query.modelCode;
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 {
  mixins: [mixins],
  components: { ModelNode, consumption, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.consumption.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.consumption.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

@@ -1,29 +1,29 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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,91 +31,94 @@
    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 } = {}) {
    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,  // 设置图例图形的高
          itemWidth: 24, // 设置图例图形的宽
          itemHeight: 18, // 设置图例图形的高
          textStyle: {
            color: '#666'  // 图例文字颜色
            color: "#fff" // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
         // itemGap: 30,
          backgroundColor: '#eee',  // 设置整个图例区域背景颜色
          // itemGap: 30,
          backgroundColor: "#eee", // 设置整个图例区域背景颜色
          data: datas,
          formatter:function(item){
          formatter: function(item) {
            let target;
            let unitId;
            for(let i=0;i<newVisitis.length;i++){
              if(datas[i].name===item){
                target=datas[i].value;
                unitId=datas[i].unitId
            for (let i = 0; i < newVisitis.length; i++) {
              if (datas[i].name === item) {
                target = datas[i].value;
                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%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data: newVisitis,//[{value:335, name:'用水' },{value:310, name:'用电'},{value:234, name:'用煤'}],/*selected: true*/
            radius: ["40%", "60%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ["65%", "50%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data: newVisitis, //[{value:335, name:'用水' },{value:310, name:'用电'},{value:234, name:'用煤'}],/*selected: true*/
            // itemStyle 设置饼状图扇形区域样式
            itemStyle: {
              // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
@@ -123,26 +126,26 @@
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(30, 144, 255，0.5)'
                shadowColor: "rgba(30, 144, 255，0.5)"
              }
            },
            // 设置值域的那指向线
            labelLine: {
              normal: {
                show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                show: false // show设置线是否显示，默认为true，可选值：true ¦ false
              }
            },
            // 设置值域的标签
          label: {
            normal: {
              show: true,
              position: 'center',
              formatter: ['累计成本',title].join('\n'),
            },
            emphasis: {
              show: true,
            },
          },
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: ["累计成本", title].join("\n")
              },
              emphasis: {
                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,22 +23,31 @@
      </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="开始日期">
          </el-date-picker>
          到
        <el-date-picker
          v-model="queryParams.beginTime"
          :type="dateTypes"
          style="width: 150px"
          :value-format="valueFormat"
          placeholder="开始日期"
        >
        </el-date-picker>
        到
        <el-date-picker
          v-model="queryParams.endTime"
          :type="dateTypes"
          style="width: 150px"
          :value-format="valueFormat"
          placeholder="结束日期">
          placeholder="结束日期"
        >
        </el-date-picker>
        <!--<el-date-picker
          v-model="dateRange"
@@ -43,51 +62,81 @@
        ></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">
      <el-col :xs="24" :sm="24" :lg="24" >
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <line-chart ref="lineChart" :chart-data="lineChartData" />
        </div>
      </el-col>
    </el-row>
    <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']"-->
      <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']"-->
          <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>
            </el-table-column>
            <el-table-column prop="currentValue" label="本期值"  align="center">
            <el-table-column prop="currentValue" label="本期值" align="center">
              <template slot-scope="scope">
                <span>{{numFilter(scope.row.currentValue)}}</span>
                <span>{{ numFilter(scope.row.currentValue) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lastYearValue" label="同期值"  align="center">
            <el-table-column prop="lastYearValue" label="同期值" align="center">
              <template slot-scope="scope">
                <span>{{numFilter(scope.row.lastYearValue)}}</span>
                <span>{{ numFilter(scope.row.lastYearValue) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="yoy" label="同比"  align="center">
            <el-table-column prop="yoy" label="同比" align="center">
              <template slot-scope="scope">
                <span>{{numFilter(scope.row.yoy)}}</span>
                <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>
                <span>{{ numFilter(scope.row.qoq) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="minValue" label="历史最优"  align="center">
            <el-table-column prop="minValue" label="历史最优" align="center">
              <template slot-scope="scope">
                <span>{{numFilter(scope.row.minValue)}}</span>
                <span>{{ numFilter(scope.row.minValue) }}</span>
              </template>
            </el-table-column>
          </el-table>
@@ -98,210 +147,234 @@
</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',
    components: {LineChart},
    props: ["modelCode"],
    data() {
      return {
        // 遮罩层
        loading: true,
        total: 0,
        dateTypeOptions:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          beginTime: undefined,
          endTime: undefined,
          dataTime: undefined,
          timeType:undefined,
          indexId: undefined,
          procedure: undefined,
        },
        list:[],
        arraylist:[],
        lineChartData:{
          newVisitis:null,
        },
        //dateTypes: 'monthrange',//时间范围
        dateTypes: 'month',
        valueFormat:'yyyy-MM',
        title:"",
        skinName:"",
export default {
  name: "EnergyIndex",
  name: "Index",
  components: { LineChart },
  props: ["modelCode"],
  data() {
    return {
      // 遮罩层
      loading: true,
      total: 0,
      dateTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: undefined,
        endTime: undefined,
        dataTime: undefined,
        timeType: undefined,
        indexId: undefined,
        procedure: undefined
      },
      list: [],
      arraylist: [],
      lineChartData: {
        newVisitis: null
      },
      //dateTypes: 'monthrange',//时间范围
      dateTypes: "month",
      valueFormat: "yyyy-MM",
      title: "",
      skinName: ""
    };
  },
  watch: {
    modelCode: {
      deep: true,
      handler(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.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));
    this.queryParams.beginTime = starTtime;
    this.queryParams.endTime = endTtime;
  },
  methods: {
    modelNodeChange(modelNode) {
      this.queryParams.id = modelNode.id;
      this.loading = true;
      getSettingIndex(this.queryParams.id).then(response => {
        let result = response.data;
        this.list = result.filter(f => f.indexType === "STATISTIC");
        this.loading = false;
        if (this.list.length > 0) {
          this.queryParams.procedure = this.list[0].indexId;
        } else {
          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";
        }
        this.getList();
      });
    },
    getList() {
      let source = [];
      let xAxis = [];
      this.queryParams.indexId = this.queryParams.procedure;
      getEnergyStatisticsTrend(this.queryParams).then(response => {
        this.arraylist = response.rows;
        this.total = response.total;
        let currentValue = [];
        let lastYearValue = [];
        let minValue = [];
        for (let i = 0; i < this.arraylist.length; i++) {
          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));
          }
        }
        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.lineChartData.newVisitis = source;
        this.lineChartData.actualData = ["本期值", "同期值"];
        this.lineChartData.actual = minValue;
        this.lineChartData.xAxis = xAxis;
        this.lineChartData.title = this.title;
        this.lineChartData.yAxis = yAxis;
        this.$refs.lineChart.initChart(this.lineChartData);
      });
    },
    numFilter(value) {
      // 截取当前数据到小数点后的几位
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(this.skinName);
      } else {
        realVal = "--";
      }
      return realVal;
    },
    currentSel(selVal) {
      //获取下拉框的text
      let obj = {};
      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") {
        //this.dateTypes='monthrange'
        (this.dateTypes = "month"), (this.valueFormat = "yyyy-MM");
      }
    },
    watch: {
      modelCode: {
        deep: true,
        handler(val) {
          this.getList(val)
        }
      },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.title = this.title;
      this.getList();
      //this.modelNodeChange(this.queryParams);
    },
    created() {
      //this.getList();
      this.getDicts("timeType").then(response => {
        this.dateTypeOptions = response.data;
        this.queryParams.timeType = this.dateTypeOptions.find(f => f.isDefault === 'Y').dictValue;
      });
      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));
      this.queryParams.beginTime=starTtime;
      this.queryParams.endTime=endTtime;
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    methods: {
      modelNodeChange(modelNode) {
        this.queryParams.id=modelNode.id;
        this.loading = true;
        getSettingIndex(this.queryParams.id).then(response => {
          let result=response.data;
          this.list = result.filter(f => f.indexType === 'STATISTIC');
          this.loading = false;
          if (this.list.length > 0) {
            this.queryParams.procedure = this.list[0].indexId;
          }else{
            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';
          }
          this.getList();
        });
      },
      getList(){
        let source=[];
        let xAxis=[];
        this.queryParams.indexId=this.queryParams.procedure;
        getEnergyStatisticsTrend(this.queryParams).then(response => {
          this.arraylist=response.rows;
          this.total = response.total;
          let currentValue=[];
          let lastYearValue=[];
          let minValue=[];
          for(let i=0; i<this.arraylist.length; i++){
            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))
            }
          }
          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.lineChartData.newVisitis=source;
          this.lineChartData.actualData=['本期值','同期值'];
          this.lineChartData.actual=minValue;
          this.lineChartData.xAxis=xAxis;
          this.lineChartData.title=this.title;
          this.lineChartData.yAxis=yAxis;
          this.$refs.lineChart.initChart(this.lineChartData);
        });
      },
      numFilter(value) {// 截取当前数据到小数点后的几位
        let realVal = '' ;
        if (!isNaN(value) && value !== '') {
          realVal = parseFloat(value).toFixed(this.skinName)
        } else {
          realVal = '--'
        }
        return realVal
      },
      currentSel(selVal) {//获取下拉框的text
        let obj = {};
        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'){
          //this.dateTypes='monthrange'
          this.dateTypes= 'month',
          this.valueFormat='yyyy-MM'
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.title=this.title;
        this.getList();
        //this.modelNodeChange(this.queryParams);
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有能耗指标趋势分析数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有能耗指标趋势分析数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportEnergyindex(queryParams);
        }).then(response => {
        })
        .then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      },
      changeTime(time) {
        if (time !== null && time !== undefined && time !== "") {
          return time.substring(0, 10);
        } else {
          return "";
        }
        })
        .catch(function() {});
    },
    changeTime(time) {
      if (time !== null && time !== undefined && time !== "") {
        return time.substring(0, 10);
      } else {
        return "";
      }
    }
  }
};
</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;
    }
.dashboard-editor-container {
  padding: 32px;
  position: relative;
  .chart-wrapper {
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .chart-title{
    display: block;
    background: #f2f6fc;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}
.chart-title {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
}
</style>

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

@@ -1,55 +1,80 @@
<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 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},
    created() {
      this.modelCode=this.$route.query.modelCode;
export default {
  mixins: [mixins],
  components: { ModelNode, EnergyIndex, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.EnergyIndex.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.EnergyIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

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

<script>
  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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
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"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({newVisitis,xAxis,actualData,actual,title,yAxis} = {}) {
        var series=[];
        if(newVisitis !=null ||newVisitis != undefined){
          for(var i=0;i<newVisitis.length;i++){
            series.push({
                name: actualData[i],
                type: 'bar',
                data: newVisitis[i],
                smooth: true,//线条平滑
                //stack: 'vistors',
                animationDuration: 2800,
                animationEasing: 'quadraticOut'
              }
            );
          }
    setOptions({ newVisitis, xAxis, actualData, actual, title, yAxis } = {}) {
      var series = [];
      if (newVisitis != null || newVisitis != undefined) {
        for (var i = 0; i < newVisitis.length; i++) {
          series.push({
            name:'历史最优' ,
            type: 'line',
            data: actual,
            smooth: true,//线条平滑
            name: actualData[i],
            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',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data:['本期值', '同期值','历史最优'],
            left: '60%',
          },
          xAxis: [{
            type: 'category',
        series.push({
          name: "历史最优",
          type: "line",
          data: actual,
          smooth: true, //线条平滑
          animationDuration: 2800,
          animationEasing: "quadraticOut"
        });
      }
      this.chart.setOption({
        title: {
          text: title,
          x: "center",
          y: "top",
          textStyle: {
            color: "#333"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: ["本期值", "同期值", "历史最优"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            },
          }],
          yAxis: [{
              name: yAxis,
              type: 'value',
              nameTextStyle:{
                color:"#333",
              },
              axisLabel: {
                formatter: '{value}'
              },
              axisTick: {
                show: false
              },
            }
          ],
          series:series
        })
      }
          }
        ],
        yAxis: [
          {
            name: yAxis,
            type: "value",
            nameTextStyle: {
              color: "#333"
            },
            axisLabel: {
              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,56 +1,80 @@

<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 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},
    created() {
      this.modelCode=this.$route.query.modelCode;
export default {
  mixins: [mixins],
  components: { ModelNode, EnergyIndex, ShrinkCol },
  created() {
    this.modelCode = this.$route.query.modelCode;
  },
  data() {
    return {
      modelCode: undefined,
      isCollapse: false,
      bodyStyleRight: {}
    };
  },
  methods: {
    setCharts() {
      this.bodyStyle.height = window.innerHeight - 185 + "px";
      this.bodyStyleRight = {
        ...this.bodyStyle,
        height: window.innerHeight - 130 + "px"
      };
    },
    data() {
      return {
        modelCode:undefined,
        isCollapse: false,
      }
    changeNode: function(node) {
      this.$refs.EnergyIndex.modelNodeChange(node);
    },
    methods: {
      changeNode: function (node) {
        this.$refs.EnergyIndex.modelNodeChange(node);
      },
      manageModel: function () {
        this.$router.push('/model');
      },
      changeModel: function (item) {
        this.$refs.modelNode.getList(item);
      },
      // 点击按钮，切换折叠与展开
      toggleCollapse () {
        this.isCollapse = !this.isCollapse
      }
    manageModel: function() {
      this.$router.push("/model");
    },
    changeModel: function(item) {
      this.$refs.modelNode.getList(item);
    },
    // 点击按钮，切换折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  };
  }
};
</script>

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

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

<script>
  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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
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"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({currentValue,xAxis,lastYearValue,title} = {}) {
        var series=[];
/*        if(newVisitis !=null ||newVisitis != undefined){
    setOptions({ currentValue, xAxis, lastYearValue, title } = {}) {
      var series = [];
      /*        if(newVisitis !=null ||newVisitis != undefined){
          series.push()
        }
        console.log("newVisitis:"+newVisitis+"actual"+actual);*/
        this.chart.setOption({
          title: {
            text: title,
            x:'center',
            y: 'top',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data:['消费量', '产量'],
            left: '60%',
          },
          xAxis: [{
            type: 'category',
      this.chart.setOption({
        title: {
          text: title,
          x: "center",
          y: "top",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: ["消费量", "产量"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        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",
          }
        ],
        yAxis: [
          {
            name: "消费量",
            type: "value",
            nameTextStyle: {
              color: "#fff"
            },
            axisLabel: {
              formatter: '{value}'
              formatter: "{value}"
            },
            axisTick: {
              show: false
            }
          },
          {
            name: "产量",
            type: "value",
            nameTextStyle: {
              color: "#fff"
            },
            axisLabel: {
              formatter: "{value}"
            },
            axisTick: {
              show: false
            }
          }
          ],
          series:[{
        ],
        series: [
          {
            name: "消费量",
            type: 'bar',
            type: "bar",
            data: currentValue,
            smooth: true,//线条平滑
            smooth: true, //线条平滑
            //stack: 'vistors',
            barMaxWidth:30,//最大宽度
            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

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

<script>
  import echarts from 'echarts'
  import resize from "../../energyStatistics/mixins/resize";
  require('echarts/theme/macarons') // echarts theme
  const animationDuration = 6000
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      chartData: {
        type:Object,
      }
import echarts from "echarts";
import resize from "../../energyStatistics/mixins/resize";
require("echarts/theme/macarons"); // echarts theme
const animationDuration = 6000;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Object
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ newVisitis, xAxis, actualData, title, yAxis } = {}) {
      var series = [];
      if (newVisitis != null || newVisitis != undefined) {
        for (var i = 0; i < newVisitis.length; i++) {
          series.push({
            name: actualData[i],
            type: "bar",
            data: newVisitis[i],
            smooth: true, //线条平滑
            //stack: 'vistors',
            animationDuration: 2800,
            animationEasing: "quadraticOut"
          });
        }
      }
    },
    data() {
      return {
        chart: null,
        seriesData: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({newVisitis,xAxis,actualData,title,yAxis} = {}) {
        var series=[];
        if(newVisitis !=null ||newVisitis != undefined){
          for(var i=0;i<newVisitis.length;i++){
            series.push({
                name: actualData[i],
                type: 'bar',
                data: newVisitis[i],
                smooth: true,//线条平滑
                //stack: 'vistors',
                animationDuration: 2800,
                animationEasing: 'quadraticOut'
              }
            );
      this.chart.setOption({
        title: {
          text: title,
          x: "center",
          y: "top",
          textStyle: {
            color: "#333"
          }
        }
        this.chart.setOption({
          title: {
            text: title,
            x:'center',
            y: 'top',
            textStyle: {
              color: "#333"
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'     line为直线  shadow为柱状阴影
            }
          },
          grid: {
            top: 40,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data:['设备1','设备2'],
            left: '60%',
          },
          xAxis: [{
            type: 'category',
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'     line为直线  shadow为柱状阴影
          }
        },
        grid: {
          top: 40,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: ["设备1", "设备2"],
          left: "60%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            },
          }],
          yAxis: [{
            }
          }
        ],
        yAxis: [
          {
            name: yAxis,
            type: 'value',
            nameTextStyle:{
              color:"#333",
            type: "value",
            nameTextStyle: {
              color: "#333"
            },
            axisLabel: {
              formatter: '{value}'
              formatter: "{value}"
            },
            axisTick: {
              show: false
            },
            }
          }
          ],
          series:series
        })
      }
        ],
        series: series
      });
    }
  }
};
</script>

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

@@ -1,10 +1,10 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <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 {
@@ -12,103 +12,102 @@
  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
    }
      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 } = {}) {
    setOptions({ datas, legendArr, timeList, legendNameArr } = {}) {
      // this.chart.clear();
      if(datas.length>0){
      if (datas.length > 0) {
        var yAxisDataArr = [];
        var seriesArr = [];
        var yAxisNumArr = [];
        var yAxisIndexArr = [];
        for(let i = 0;i<datas.length;i++){
        for (let i = 0; i < datas.length; i++) {
          //y轴
          let yAxisItem = {
            type: 'value',
            type: "value",
            // name:legendNameArr[i],
            minInterval : 1,
            boundaryGap : [ 0, 0.2 ],
            minInterval: 1,
            boundaryGap: [0, 0.2]
          };
          if(i>1){
          if (i > 1) {
            let positionKey = "position";
            let positionValue = "right";
            let offsetKey = "offset";
            let offsetValue = 50*(i-1);
            let offsetValue = 50 * (i - 1);
            yAxisItem[positionKey] = positionValue;
            yAxisItem[offsetKey] = offsetValue;
          }
          yAxisDataArr.push(yAxisItem);
        }
        for(let i = 0;i<legendArr.length;i++){
          if(""!=legendArr[i]){
        for (let i = 0; i < legendArr.length; i++) {
          if ("" != legendArr[i]) {
            let item = parseInt(legendArr[i].substr(1, legendArr[i].length));
            yAxisNumArr.push(item);
            if(!yAxisIndexArr.indexOf(yAxisNumArr[i])>-1){
            if (!yAxisIndexArr.indexOf(yAxisNumArr[i]) > -1) {
              yAxisIndexArr.push(yAxisNumArr[i]);
            }
            let seriesItem = {
              name:legendNameArr[i],
              type: 'line',
              name: legendNameArr[i],
              type: "line",
              data: datas[i],
              yAxisIndex:yAxisIndexArr.indexOf(yAxisNumArr[i]),
              yAxisIndex: yAxisIndexArr.indexOf(yAxisNumArr[i])
            };
            seriesArr.push(seriesItem);
          }else {
          } else {
            let seriesItem = {
              name:legendNameArr[i],
              type: 'line',
              data: datas[i],
              name: legendNameArr[i],
              type: "line",
              data: datas[i]
            };
            if(i>0){
            if (i > 0) {
              let key = "yAxisIndex";
              let value = i;
              seriesItem[key] = value;
@@ -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(){
    closeLineChar() {
      this.chart.clear();
    }
  }
}
};
</script>

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

@@ -1,86 +1,89 @@
<template>
  <div :class="className" :style="{height:height,width:width}" />
  <div :class="className" :style="{ height: height, width: width }" />
</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'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '130px'
      }
export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    data() {
      return {
        chart: null
      }
    width: {
      type: String,
      default: "100%"
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose();
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
    height: {
      type: String,
      default: "130px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          // legend: {
          //   left: 'center',
          //   bottom: '10',
          //   data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
          // },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
          },
          series: [
            {
              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' }
              ],
              // animationEasing: 'cubicInOut',
              animationDuration: 2600
            }
          ]
        })
      }
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //   left: 'center',
        //   bottom: '10',
        //   data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
        // },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            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" }
            ],
            // animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      });
    }
  }
};
</script>

在上述文件截断后对比
energy_management_ui/src/views/equipmentMonitor/parameters/modelMonitorSetting.vue
energy_management_ui/src/views/equipmentMonitor/realTimeMonitoring/parametersTable.vue
energy_management_ui/src/views/history/query/historyIndex.vue
energy_management_ui/src/views/index copy.vue （已删除）
energy_management_ui/src/views/index.vue
energy_management_ui/src/views/index_bak.vue
energy_management_ui/src/views/index_dev.vue （已删除）
energy_management_ui/src/views/keyEquipment/dailykeyEquipment/BarChart.vue
energy_management_ui/src/views/keyEquipment/dailykeyEquipment/LineChart.vue
energy_management_ui/src/views/keyEquipment/dailykeyEquipment/index.vue
energy_management_ui/src/views/keyEquipment/monthlykeyEquipment/BarChart.vue
energy_management_ui/src/views/keyEquipment/monthlykeyEquipment/LineChart.vue
energy_management_ui/src/views/keyEquipment/monthlykeyEquipment/index.vue
energy_management_ui/src/views/keyEquipment/yearkeyEquipment/BarChart.vue
energy_management_ui/src/views/keyEquipment/yearkeyEquipment/LineChart.vue
energy_management_ui/src/views/login.vue
energy_management_ui/src/views/meter/implement/importIndexTable.vue
energy_management_ui/src/views/meter/implement/index.vue
energy_management_ui/src/views/meter/implementCount/importIndexTable.vue
energy_management_ui/src/views/power-statistics-analyse/pari-passu/BarChart.vue
energy_management_ui/src/views/power-statistics-analyse/pari-passu/LineChart.vue
energy_management_ui/src/views/power-statistics-analyse/pari-passu/index.vue
energy_management_ui/src/views/power-statistics-analyse/per-passu/index.vue
energy_management_ui/src/views/reportForm/annualReport/index.vue
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