背景色

Signed-off-by: xiexingan <748626312@qq.com>

src/assets/style/public.scss

@@ -129,6 +129,9 @@ $el-bg-color-4: #F2F6FC;
 
 
 }
+
+
+// ~~~
 .margin-lr-20 {
   margin: 0 20px;
 }
@@ -146,3 +149,45 @@ $el-bg-color-4: #F2F6FC;
   color: #4ECB74;
 
 }
+// 首页菜单选中
+.theme-d2 .d2-theme-container .d2-theme-container-aside .d2-layout-header-aside-menu-side>.el-menu> .el-menu-item:first-child{
+  background: transparent ;
+  }
+
+
+
+
+.en-tabs {
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-tabs__active-bar{
+    bottom:-1px ;
+  }
+  .el-tabs__nav-wrap::after {
+    height: 0;
+  }
+  .el-tabs__nav-wrap {
+    background: #f2f4f5;
+
+    .el-tabs__nav {
+      border-bottom: 1px solid #e5e9ec;
+    }
+  }
+  .el-tabs__header {
+    border: 1px solid #e5e9ec;
+  }
+  .el-tabs__item:nth-child(2) {
+    padding: 0 30px !important;
+  }
+
+  .el-tabs__item:last-child {
+    padding: 0 30px !important;
+  }
+  .el-tabs__item.is-active {
+    background: #fff;
+  }
+}
+
+
+

src/assets/style/theme/d2/setting.scss

@@ -50,16 +50,19 @@ $theme-header-item-background-color-active: transparent;
 
 // 侧边栏上的文字颜色
 $theme-aside-item-color: $color-text-normal;
-$theme-aside-item-background-color: transparent;
+// $theme-aside-item-background-color: transparent;
+$theme-aside-item-background-color: #F2FAFF;
 // 侧边栏上的项目在 hover 时
-$theme-aside-item-color-hover: #2f74ff;
-$theme-aside-item-background-color-hover: rgba(#FFF, .5);
+$theme-aside-item-color-hover: rgba(#fff,1);
+$theme-aside-item-background-color-hover: rgba(#21ACFC, .9);
 // 侧边栏上的项目在 focus 时
-$theme-aside-item-color-focus: #2f74ff;
+$theme-aside-item-color-focus: #21ACFC;
 $theme-aside-item-background-color-focus: rgba(#FFF, .5);
 // 侧边栏上的项目在 active 时
-$theme-aside-item-color-active: #2f74ff;
-$theme-aside-item-background-color-active: rgba(#FFF, .5);
+$theme-aside-item-color-active: #fff;
+// $theme-aside-item-background-color-active: rgba(#FFF, .5);
+$theme-aside-item-background-color-active: #21ACFC; 
+
 
 // 侧边栏菜单为空的时候显示的元素
 $theme-aside-menu-empty-icon-color: $color-text-normal;

src/assets/style/theme/theme-base.scss

@@ -93,7 +93,7 @@
           bottom: 0px;
           left: 0px;
           right: 0px;
-          background: #E6EAEE;
+          // background: #E6EAEE;
           overflow: auto;
 
         }

src/assets/style/theme/theme.scss

@@ -206,7 +206,7 @@
           }
           &:hover {
             color: $theme-aside-item-color-hover;
-            background: $theme-aside-item-background-color-hover;
+            background: $theme-aside-item-background-color-hover !important;
             i {
               color: $theme-aside-item-color-hover;
             }
@@ -220,7 +220,7 @@
           }
           &.is-active {
             color: $theme-aside-item-color-active;
-            background: $theme-aside-item-background-color-active;
+            background: $theme-aside-item-background-color-active !important;
             i {
               color: $theme-aside-item-color-active;
             }
@@ -230,7 +230,7 @@
       .el-submenu {
         .el-submenu__title {
           color: $theme-aside-item-color;
-          background: $theme-aside-item-background-color;
+          background:$theme-aside-item-color-active;
           i {
             color: $theme-aside-item-color;
           }

src/layout/header-aside/components/header-user/index.vue

 <template>
-  <div >
+  <div>
     <div title="修改密码" class="msg-img user-warp" @click="editPasword" style="display:flex;">
+      <img src="../../imgs/user.png" alt="">
       <div class="user-info">
         <span class="item" style='margin-top:2px;'>{{info.userName}}</span>
         <span class="item">{{info.name}}</span>
       </div>
 
-     <img src="../../imgs/user.png" alt="">
     </div>
     <!-- <span class="btn-text">你好， {{info.name}}</span>
     <el-dropdown-menu slot="dropdown">
@@ -19,9 +19,7 @@
         注销
       </el-dropdown-item>
     </el-dropdown-menu> -->
-    <el-dialog title="修改密码"
-               :visible.sync="editPaswDialog" @close="closeEditPasw"
-               width="50%">
+    <el-dialog title="修改密码" :visible.sync="editPaswDialog" @close="closeEditPasw" width="50%">
       <div slot='title' class="title-bold">
         <span>修改密码</span>
       </div>
@@ -29,13 +27,13 @@
         <el-form-item label="用户名" :label-width="formLabelWidth">
           <el-input v-model="editPasForm.username" disabled></el-input>
         </el-form-item>
-            <el-form-item label="原密码" prop="oldpsw" :label-width="formLabelWidth" >
+        <el-form-item label="原密码" prop="oldpsw" :label-width="formLabelWidth">
           <el-input v-model="editPasForm.oldpsw" autocomplete="off" type='password' placeholder='请输入原密码' @input='e => editPasForm.oldpsw = inputMe(e)'></el-input>
         </el-form-item>
-            <el-form-item label="新密码" prop="newpas" :label-width="formLabelWidth" >
+        <el-form-item label="新密码" prop="newpas" :label-width="formLabelWidth">
           <el-input v-model="editPasForm.newpas" autocomplete="off" type='password' placeholder='请输入新密码' @input='e => editPasForm.newpas = inputMe(e)'></el-input>
         </el-form-item>
-            <el-form-item label="密码确认" prop="pwd" :label-width="formLabelWidth" >
+        <el-form-item label="密码确认" prop="pwd" :label-width="formLabelWidth">
           <el-input v-model="editPasForm.pwd" autocomplete="off" type='password' placeholder='请再次输入新密码' @input='e => editPasForm.pwd = inputMe(e)'></el-input>
         </el-form-item>
       </el-form>
@@ -79,11 +77,14 @@ export default {
       fromrule: {
         newpas: [
           { validator: validatePassword, trigger: 'blur' },
-            { min: 1, max: 30, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+          {
+            min: 1,
+            max: 30,
+            message: '长度在 1 到 50 个字符',
+            trigger: 'blur'
+          }
         ],
-        pwd: [
-            { validator: validateComfirmPassword, trigger: 'blur' }
-        ]
+        pwd: [{ validator: validateComfirmPassword, trigger: 'blur' }]
       }
     }
   },
@@ -91,18 +92,14 @@ export default {
     this.editPasForm.username = this.info.name
   },
   computed: {
-    ...mapState('d2admin/user', [
-      'info'
-    ])
+    ...mapState('d2admin/user', ['info'])
   },
   methods: {
-    ...mapActions('d2admin/account', [
-      'logout'
-    ]),
+    ...mapActions('d2admin/account', ['logout']),
     /**
      * @description 登出
      */
-    logOff () {
+    logOff() {
       this.logout({
         vm: this,
         confirm: true
@@ -118,7 +115,7 @@ export default {
       })
     },
     saveEditPas() {
-      this.$refs.editPasRef.validate(valid => {
+      this.$refs.editPasRef.validate((valid) => {
         if (valid) {
           this.$http({
             url: this.$http.adornUrl('/sys/user/password'),
@@ -168,29 +165,31 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.user-warp{
-
-  .user-info{
-    width: 84px;
+.user-warp {
+  .user-info {
+    width: 93px;
     height: 36px;
-    background: url(../../imgs/subwayBg.png);
-    background-size: 100% 100%;
-    text-align:center;
+    border: 1px solid;
+    border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    transform: translateX(-19px);
+    text-align: center;
+    text-indent: 10px;
     opacity: 0;
     float: right;
     z-index: -3;
     margin-right:-84px;
-    transition:all .3s ease;
-    -webkit-transition: all .3s ease;
-    .item{
+    transition: all 0.3s ease;
+    -webkit-transition: all 0.3s ease;
+    .item {
       display: block;
-      padding-right:10px;
       font-size: 12px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.75);
     }
-}
+  }
 }
 .user-warp:hover .user-info{
     opacity: 1;
@@ -198,5 +197,4 @@ export default {
     z-index: 1;
 
 }
-
 </style>

src/layout/header-aside/layout.vue

 <template>
-    <div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{ grayMode: grayActive }">
+  <div
+    class="d2-layout-header-aside-group"
+    :style="styleLayoutMainGroup"
+    :class="{ grayMode: grayActive }"
+  >
     <!-- 半透明遮罩 -->
     <div class="d2-layout-header-aside-mask"></div>
     <!-- 主体内容 -->
     <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
       <div class="d2-theme-header" flex-box="0" flex>
-                <div class="logo-group" :style="{width: asideWidth}" flex-box="0">
-                    <img src="./imgs/logo2x.png">
+        <div class="logo-group"  flex-box="0" style="margin-left:30px">
+          <img src="./imgs/train.png" style="width:50px;height:50px" />
+           <img src="./imgs/energy_text.png" />
         </div>
-                <div style='width:100%;'>
+        <div style="width: 100%">
           <div flex-box="1"></div>
           <!-- 顶栏右侧 -->
           <div class="d2-header-right">
-                        <div class="time-container">
+            <div
+              class="time-container"
+              style="padding-right: 26px; text-align: unset"
+            >
               <div class="current-time">{{ time | formatDate }}</div>
               <div class="current-date">{{ time | formatDate2 }}</div>
             </div>
-                        <div class="subway-container">
-                            <div class="subway-info">
-                                <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span>
+            <div class="subway-container" style="margin-right:43px">
+              <div class="subway-info" style="transform: rotate(180deg)">
+                <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{
+                  station
+                }}</span> -->
               </div>
-                            <div class="user-img"><img src="./imgs/subway.png" /></div>
+              <div style="display: flex; position: absolute">
+                <div
+                  style="
+                    background: #fff;
+                    position: relative;
+                    top: -1px;
+                    left: -17px;
+                    text-align: center;
+                    font-size: 12px;
+                    width: 35px;
+                    height: 35px;
+                    border-radius: 50%;
+                    line-height: 35px;
+                  "
+                >
+                  室内
+                </div>
+                <div
+                  style="
+                    font-size: 12px;
+                    color: #fff;
+                    position: relative;
+                    left: -8px;
+                  "
+                >
+                  <div>温度:20℃</div>
+                  <div>湿度:60%</div>
+                </div>
+              </div>
+            </div>
+             <div class="subway-container" >
+              <div class="subway-info" style="transform: rotate(180deg)">
+                <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{
+                  station
+                }}</span> -->
+              </div>
+              <div style="display: flex; position: absolute">
+                <div
+                  style="
+                    background: #fff;
+                    position: relative;
+                    top: -1px;
+                    left: -17px;
+                    text-align: center;
+                    font-size: 12px;
+                    width: 35px;
+                    height: 35px;
+                    border-radius: 50%;
+                    line-height: 35px;
+                  "
+                >
+                  室外
+                </div>
+                <div
+                  style="
+                    font-size: 12px;
+                    color: #fff;
+                    position: relative;
+                    left: -8px;
+                  "
+                >
+                  <div>晴:20℃</div>
+                  <div>湿度:60%</div>
                 </div>
-                        <d2-header-theme />
-                        <el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger">
-                            <div title="报警中心" style="cursor: pointer" @click="toAlarms">
-                                <img src="./imgs/msg.png" />
               </div>
-                        </el-badge>
-                        <d2-header-user />
-                        <div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff">
-                            <img src="./imgs/out.png" />
             </div>
           </div>
         </div>
@@ -39,10 +103,15 @@
       <!-- 下面 主体 -->
       <div class="d2-theme-container" flex-box="1" flex>
         <!-- 主体 侧边栏 -->
-                <div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{
-                    width:asideWidth,
-                    opacity: this.searchActive ? 0.5 : 1
-                  }">
+        <div
+          flex-box="0"
+          ref="aside"
+          class="d2-theme-container-aside"
+          :style="{
+            width: asideWidth,
+            opacity: this.searchActive ? 0.5 : 1,
+          }"
+        >
           <d2-menu-side />
         </div>
         <!-- 主体 -->
@@ -51,7 +120,7 @@
           <transition name="fade-scale">
             <div class="d2-theme-container-main-layer" flex="dir:top">
               <!-- 页面 -->
-                            <div class="d2-theme-container-main-body" flex-box="1" >
+              <div class="d2-theme-container-main-body" flex-box="1">
                 <!-- <bim></bim> -->
                 <keep-alive :include="keepAlive">
                   <router-view />
@@ -61,7 +130,7 @@
           </transition>
         </div>
       </div>
-            <div style="z-index:9999!important;user-select:none;" class="mfooter">
+      <div style="z-index: 9999 !important; user-select: none" class="mfooter">
         Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
         电话：86-028-689XXXX 传真：86-028-6893XXXX
       </div>

src/pages/analysis/energy/page.vue

@@ -2,27 +2,53 @@
   <div class="energy-page">
     <cardList cardListTitle="能耗数据分析">
         <div slot="right" >
-             <span
+             <!-- <span
           :class="activeIndex === index ? 'active-hight-linght' : ''"
           class="date-text"
           @click="activehandle(item, index)"
           v-for="(item, index) in dateList"
           :key="item.value"
           >{{ item.label }}</span
-        >
+        > -->
+        <!-- <el-date-picker
+        size="mini"
+          type="daterange"
+          range-separator="～"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        > -->
+        <!-- </el-date-picker> -->
+        <!-- <i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i> -->
+        <!-- <i class="el-icon-printer" style="color:#21acfc"></i> -->
+        <el-button size="mini" type="primary" @click="toPowerPage">图形/列表</el-button>
+        </div>
+      <div slot="content" >
+        <div >
+            <!-- <enTabs :tabList="energyTabList"></enTabs> -->
+             <el-tabs class="en-tabs" v-model="activetap" >
+               <el-row style="padding-top:15px">
+                 <el-col :span="10">
+                   <span>时间范围：</span>
                      <el-date-picker
+           size="mini"
           type="daterange"
           range-separator="～"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
         >
         </el-date-picker>
-        <i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i>
-        <i class="el-icon-printer" style="color:#21acfc"></i>
-        </div>
-      <div slot="content" style="padding: 24px 28px 20px 23px">
-        <div style="margin-bottom: 20px">
-            <enTabs :tabList="energyTabList"></enTabs>
+                 </el-col>
+                <el-col :span="4">
+                  <el-button type="primary" size="mini" icon="el-icon-search">查询</el-button>
+                </el-col>
+               </el-row>
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in energyTabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
         </div>
         <el-row>
             <el-col :span="24">
@@ -35,20 +61,21 @@
 </template>
 
 <script>
-import cardList from "../../home/compontents/cardList";
-import enTabs from '../../eq/hall/components/enTabs'
+import cardList from "../../components/cardList";
+import enTabs from "../../components/enTabs";
 // import enTable from '../../eq/hall/components/enTable'
-import energyChart from '../../home/compontents/energyTotalCharts'
+import energyChart from "../../components/energyTotalCharts";
 export default {
   name: "energypage",
   components: {
     cardList,
     enTabs,
-    energyChart
+    energyChart,
   },
   data() {
     return {
       activeIndex: 1,
+      activetap: "01",
       dateList: [
         // {
         //   value: "01",
@@ -71,7 +98,7 @@ export default {
           label: "全年",
         },
       ],
-      energyTabList:[
+      energyTabList: [
         {
           value: "01",
           label: "全部",
@@ -88,23 +115,27 @@ export default {
           value: "04",
           label: " 多联新风",
         },
-      ]
+      ],
     };
   },
   methods: {
     activehandle(item, index) {
       this.activeIndex = index;
     },
+    toPowerPage(){
+      this.$router.push({
+       path:'/kb/power'
+     })
+    },
   },
 };
 </script>
 
 <style lang="scss">
-  .energy-page{
-     padding:10px 10px 40px 10px;
-      .el-input__inner {
-    // height: 30px;
-  }
+.energy-page {
+  height: 100%;
+  padding: 0px 0px 40px 0px;
+
   .date-text {
     padding-right: 20px;
     font-size: 14px;
@@ -116,5 +147,5 @@ export default {
   .active-hight-linght {
     color: #21acfc;
   }
-  }
+}
 </style>

src/pages/analysis/fault/index.vue

 <template lang='pug'>
-card-warp(title="故障报警分析")
-    div(slot="right")
-        span 时间范围：
-        el-date-picker.margin-lr-20(
+card-warp(title="故障报警分析"  height='45px' showBackground)
+    div(slot="content")
+        el-form(:inline='true' size="mini" )
+            el-form-item(label='时间范围：')
+                el-date-picker(
                     size='mini'
                     v-model="dateValue",
                     type="daterange",
@@ -14,7 +15,6 @@ card-warp(title="故障报警分析")
                     :picker-options="pickerOptions"
                 )
             el-button(size='mini' type='primary') 查询
-    div(slot="content")
         .echartsWarp(width="100%", flex)
             //- div
             //-     .title 设备故障统计
@@ -98,7 +98,7 @@ export default {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-    height: calc(100vh - 260px);
+    height: calc(100vh - 280px);
     > div {
         width: 47%;
         // height: calc(90% / 2);

src/pages/analysis/indoor/index.vue

 <template lang="pug">
-card-warp(title="室内气象分析" height='45px' )
+card-warp(title="室内气象分析" height='45px' showBackground)
     div(slot="right")
         //- span 时间范围：
         //- el-date-picker.margin-lr-20(

src/pages/analysis/outdoor/index.vue

 <template lang="pug">
-card-warp(title="室外气象分析" height='45px' )
+card-warp(title="室外气象分析" height='45px' showBackground)
     div(slot="right")
-        router-link.margin-lr-20(:to="{name:'kb-indoor'}")
-             el-button(size='mini' type='primary') 图形 / 列表
+        //- router-link.margin-lr-20(:to="{name:'kb-indoor'}")
+        //-      el-button(size='mini' type='primary') 图形 / 列表
     div(slot="content", style="height: 90%")
         el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
             el-tab-pane(label="候车室区域", name="1")

src/pages/home/compontents/cardList.vue → src/pages/components/cardList.vue

@@ -6,9 +6,11 @@
         <slot name="right" />
       </div>
     </div>
-
+   <div class="card-list-content">
     <slot name="content" />
    </div>
+   
+  </div>
 </template>
 
 <script>
@@ -30,6 +32,7 @@ export default {
   width: 100%;
   height: 100%;
   background: #fff;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
   &-line {
     display: flex;
     justify-content: space-between;
@@ -60,5 +63,9 @@ export default {
   //      height: 16px;
   //      background: #1890ff;
   //  }
+  .card-list-content{
+    padding:20px;
+    height: calc( 155 - 40px );
+  }
 }
 </style>

src/pages/eq/hall/components/enTable.vue → src/pages/components/enTable.vue

@@ -26,13 +26,14 @@
 
         </el-table-column>
       </template>
-      <el-table-column align="center" label="操作" width="100" v-if="isShowOp">
-        <template slot-scope="scope">
-          <el-button type="text" size="small">编辑</el-button>
+      <el-table-column align="center" label="操作" width="150" >
+        <template slot-scope="scope" >
+            <slot name='operation' :scope='scope'></slot>
         </template>
       </el-table-column>
     </el-table>
     <div
+     v-if="isShowPage"
       style="
         display: flex;
         justify-content: flex-end;
@@ -40,10 +41,11 @@
         line-height: 3;
       "
     >
-      <div style=" ;" class="record-color marg_r_18">共34860条记录</div>
+      <div  class="record-color marg_r_18">共34860条记录</div>
       <div class="record-color marg_r_8">共20页</div>
       <div class="record-color">每页显示</div>
-      <el-pagination layout="sizes, prev, pager, next" background :total="1000">
+      <!-- background -->
+      <el-pagination layout="sizes, prev, pager, next"  :total="1000">
       </el-pagination>
     </div>
   </div>
@@ -52,10 +54,35 @@
 <script >
 export default {
   name: "enTable",
-  props: ["tableData", "tableColums",'isShowOp'],
+  props: {
+    // ["", "tableColums",'isShowOp'.toString
+    tableData:{
+      type:Array,
+    },
+    tableColums:{
+      type:Array,
+    },
+    isShowOp:{
+      type:Boolean,
+      defaul:false,
+    },
+    isShowPage:{
+     
+      defaul:true,
+    },
+    isEdit:{
+       defaul:true,
+    }
+
+  },
   data() {
     return {};
   },
+  methods:{
+    handleClick(){
+      this.$emit('handleBtnClick')
+    }
+  }
 };
 </script>
 <style  lang="scss">
@@ -72,5 +99,9 @@ export default {
   .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
     margin: 0 !important;
   }
+ /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+  color: #32a5ea !important;
+  background-color: red !important;
+}
 }
 </style>

src/pages/eq/hall/components/enTabs.vue → src/pages/components/enTabs.vue

-<template>
+<template >
   <div class="en-tabs">
     <ul class="ul-wrap">
       <li
@@ -11,24 +11,35 @@
           {{ item.label }}
         </p>
       </li>
+
     </ul>
+
+  
+
+
+
+
+  
+
   </div>
 </template>
 
-<script lang="ts">
+<script >
+import { Tabs } from 'element-ui';
 export default {
   name: "elTabs",
-  props:['tabList'],
+  props: ["tabList"],
   data() {
     return {
-        isActiveIndex:0,
+      isActiveIndex: 0,
+       activeName: 'second',
      
     };
   },
   methods: {
     tabHandle(item, index) {
       this.isActiveIndex = index;
-      this.$emit('tabHandle')
+      // this.$emit("tabHandle");
     },
   },
 };
@@ -36,40 +47,37 @@ export default {
 
 
 <style scoped lang="scss">
-
-.en-tabs{
-
+.en-tabs {
   .show-bar-border {
     border-bottom: 2px solid #0097ff;
-}
-
-.ul-wrap {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  color: #666;
-  background: rgba(229, 233, 236, 0.5);
-  border: 1px solid #e5e9ec;
-  font-size: 14px;
-  li {
-    position: relative;
-    padding: 0 71px;
-    cursor: pointer;
-    p {
-      margin: 0;
-      padding: 0;
-      padding-bottom: 14px;
-      padding-top: 15px;
-      box-sizing: border-box;
-    }
   }
-  .isActive {
-    background: #fff;
-    color: #0097ff;
-  }
-}
 
+  // .ul-wrap {
+  //   list-style: none;
+  //   margin: 0;
+  //   padding: 0;
+  //   display: flex;
+  //   color: #666;
+  //   background: rgba(229, 233, 236, 0.5);
+  //   border: 1px solid #e5e9ec;
+  //   font-size: 14px;
+  //   li {
+  //     position: relative;
+  //     padding: 0 71px;
+  //     cursor: pointer;
+  //     p {
+  //       margin: 0;
+  //       padding: 0;
+  //       padding-bottom: 14px;
+  //       padding-top: 15px;
+  //       box-sizing: border-box;
+  //     }
+  //   }
+  //   .isActive {
+  //     background: #fff;
+  //     color: #0097ff;
+  //   }
+  // }
 }
 
 

src/pages/home/compontents/myPies.vue → src/pages/components/myPies.vue

@@ -13,6 +13,7 @@ export default {
     };
   },
 
+
   mounted() {
     this.initPie();
   },

src/pages/eq/hall/components/hallModal.vue

+<template>
+  <el-dialog title="编辑" :visible.sync="hallModalVisible" :append-to-body="true">
+    <el-form >
+      <el-form-item label="设定频率：" :label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="启动控制：" :label-width="formLabelWidth">
+             <el-switch ></el-switch>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" >
+      <el-button @click="cancelhandle">取 消</el-button>
+      <el-button type="primary" @click="cancelhandle">确 定</el-button>
+    </div>
+  </el-dialog>
+  
+</template>
+<script lang="ts">
+export default {
+  name: "hallModal",
+  props: ["hallModalVisible"],
+  data() {
+    return {
+        formLabelWidth:'120px',
+    };
+  },
+  methods:{
+    cancelhandle(){
+        this.$emit('cancelhandle')
+    }
+  }
+};
+</script>

src/pages/eq/hall/page.vue

 <template>
   <div class="hall full-height">
     <cardList cardListTitle="候车大厅控制">
-      <div slot="content" style="padding: 24px 28px 20px 23px">
+      <div slot="content" >
         <div>
-          <el-row>
+        
             <el-form :inline="true" :model="formData" label-width="100">
-              <el-col :md="14" :lg="13">
+                <el-row>
+              <el-col :span="12">
                 <el-form-item label="定时功能启止时间：">
                   <el-date-picker
+                  size="mini"
                     style="width: 200px"
                     type="date"
                     placeholder=""
@@ -15,6 +17,7 @@
                   </el-date-picker>
                   <span style="padding: 0 10px">至</span>
                   <el-date-picker
+                    size="mini"
                     style="width: 200px"
                     type="date"
                     placeholder=""
@@ -22,14 +25,13 @@
                   </el-date-picker>
                 </el-form-item>
               </el-col>
-              <el-col :md="12" :lg="4">
+              <el-col :span="4">
                 <el-form-item label="定时设定按钮：">
                   <el-switch active-color="#0097FF" inactive-color="#ff4949">
                   </el-switch>
                 </el-form-item>
               </el-col>
-
-              <el-col :md="12" :lg="5">
+              <el-col :span="5">
                 <el-form-item label="温度设定：">
                   <el-input
                     style="width: 124px"
@@ -40,6 +42,9 @@
                   <!-- <el-button type="primary" >查询</el-button> -->
                 </el-form-item>
               </el-col>
+             
+               </el-row>
+               <el-row>
                   <el-col :md="12" :lg="4">
                 <el-form-item label="节能模式：">
                   <el-switch
@@ -51,41 +56,60 @@
 
               <el-col :md="12" :lg="10">
                 <el-form-item label="">
-                  <el-button type="" size="small">编辑</el-button>
-                  <el-button type="" size="small">自然通风</el-button>
-                  <el-button type="" size="small">机械通风</el-button>
-                  <el-button type="" size="small">供暖</el-button>
+                  <el-button type="primary" size="mini">编辑</el-button>
+                  <el-button type="primary" size="mini">自然通风</el-button>
+                  <el-button type="primary" size="mini">机械通风</el-button>
+                  <el-button type="primary" size="mini">供暖</el-button>
                 </el-form-item>
               </el-col>
-            </el-form>
                </el-row>
+            </el-form>
+         
         </div>
         <!-- tabs -->
         <div style="margin-bottom: 20px">
-           <en-tabs :tabList="tabList"></en-tabs>
+           <!-- <en-tabs :tabList="tabList"></en-tabs> -->
+            <div>
+          <el-tabs class="en-tabs" v-model="activeTab" >
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in tabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
+        </div>
         </div>
         <!-- table  -->
-        <enTable :tableData="tableData" :tableColums="tableColums" isShowOp="true"></enTable>
+        <enTable v-on:handleBtnClick="handleBtnClick" :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true">
+          <template v-slot:operation='scope'>
+           <el-button type="text" @click="hallModalVisible=true">编辑</el-button>
+         
+         </template>
+        </enTable>
       </div>
     </cardList>
+  <hall-modal v-on:cancelhandle="cancelhandle" :hallModalVisible="hallModalVisible"></hall-modal>
+    hallModalVisible
   </div>
 </template>
 <script>
-import cardList from "../../home/compontents/cardList";
-import enTable from "./components/enTable";
-import enTabs from './components/enTabs'
+import cardList from "../../components/cardList";
+import enTable from "../../components/enTable";
+import enTabs from '../../components/enTabs'
+import hallModal from './components/hallModal'
 const tableColums = [
   {
     align: "center",
     prop: "A",
     label: "设备名称",
-    width: 132,
+    width: 112,
   },
   {
     align: "center",
     prop: "B",
     label: "设备描述",
-    width: 112,
+    // width: 112,
   },
   {
     align: "center",
@@ -224,12 +248,13 @@ export default {
     cardList,
     enTable,
     enTabs,
+    hallModal,
   },
   data() {
     return {
       tableColums,
       tableData,
-     
+     activeTab:'01',
       formData: {},
       tabList: [
         {
@@ -249,21 +274,32 @@ export default {
           label: " 水泵",
         },
       ],
-      
+      hallModalVisible:false,
     };
   },
   methods: {
+     cancelhandle(){
+        this.$nextTick(()=>{
+           this.hallModalVisible = false
+        })
       
      },
+     handleBtnClick(){
+       this.hallModalVisible = true
+     }
+  },
 };
 </script>
 <style lang="scss" >
 .hall {
   height: 100%;
-   padding:10px 10px 40px 10px;
+   padding:0px 0 40px 0px;
   .el-input__inner {
     height: 30px;
   }
+  .el-form-item{
+    margin-bottom: 10px;
+  }
   .el-form-item__label {
     padding: 0;
   }

src/pages/eq/office/config.js

+ export const  tableColumsOne = [
+    {
+      align: "center",
+      prop: "A",
+      label: "设备名称",
+      width: 132,
+    },
+    {
+      align: "center",
+      prop: "B",
+      label: "设备位置",
+      // width: 112,
+    },
+    {
+      align: "center",
+      prop: "C",
+      label: "控制方式",
+      width: 132,
+    },
+    {
+      align: "center",
+      prop: "D",
+      label: "能耗统计",
+      width: 182,
+    },
+    
+    {
+      align: "center",
+      prop: "E",
+      label: "设备编号",
+      width: 132,
+    },
+  ];
+
+  export const tableDataOne = [
+    {
+      A: "多联空调A1",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A2",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A3",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A4",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A5",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "右侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "右侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A10",
+      B: "右侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+  ];
+
+  export const tableDataTwo = [
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+  ];
+
+ 
+  export const tableDataThree = [
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "右侧办公房屋",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "信息机房",
+      B: "右侧办公房屋",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "信息机房",
+      B: "左侧办公房屋",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+  ];
+  
+  export const tableDataFour = [
+    {
+      A: "排风机",
+      B: "售票厅",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'PF-B5'
+    },
+    {
+      A: "排风机",
+      B: "消防泵房",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'PF-B4'
+    },
+    {
+      A: "排风机",
+      B: "车站备品间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'厕所排风机1#'
+    },
+    {
+      A: "排风机",
+      B: "候车厅公共卫生间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'厕所排风机2#'
+    },
+    {
+      A: "排风机",
+      B: "出站通道公共卫生间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'厕所排风机3#'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "换气扇",
+      B: "站长室",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "换气扇",
+      B: "VIP候车室",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+  ];
+  
\ No newline at end of file

src/pages/eq/office/page.vue

 <template>
-  <div class="office-area-control" style=" padding:10px 10px 40px 10px;">
+  <div class="office-area-control" style="padding:0 0 40px 0">
     <cardList cardListTitle="办公区域控制">
-      <div slot="content" style="padding: 24px 28px 20px 23px">
-        <enTabs :tabList="officeTabList"></enTabs>
+      <div slot="content" >
+        <!-- <enTabs :tabList="officeTabList"></enTabs> -->
+         <el-tabs class="en-tabs" v-model="activeTab" >
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in officeTabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
         <div style="margin-top: 20px"></div>
-        <en-table :tableData="tableData" :tableColums="tableColums" isShowOp="true"> </en-table>
+        <en-table :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true"> 
+          <template v-slot:operation='scope'>
+           <el-button type="text">编辑</el-button>
+         </template>
+        </en-table>
       </div>
     </cardList>
   </div>
 </template>
 <script >
-const tableColums = [
-  {
-    align: "center",
-    prop: "A",
-    label: "设备名称",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "B",
-    label: "设备描述",
-    width: 112,
-  },
-  {
-    align: "center",
-    prop: "C",
-    label: "运行状态",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "D",
-    label: "当前频率",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "E",
-    label: "故障报警",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "F",
-    label: "说明",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "G",
-    label: "设备编号",
-    width: 132,
-  },
-];
-const tableData = [
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-];
-import cardList from "../../home/compontents/cardList";
-import enTabs from "../hall/components/enTabs";
-import enTable from "../hall/components/enTable";
+// const tableColums = [
+//   {
+//     align: "center",
+//     prop: "A",
+//     label: "设备名称",
+//     width: 132,
+//   },
+//   {
+//     align: "center",
+//     prop: "B",
+//     label: "设备位置",
+//     // width: 112,
+//   },
+//   {
+//     align: "center",
+//     prop: "C",
+//     label: "控制方式",
+//     width: 132,
+//   },
+//   {
+//     align: "center",
+//     prop: "D",
+//     label: "能耗统计",
+//     width: 132,
+//   },
+//   // {
+//   //   align: "center",
+//   //   prop: "E",
+//   //   label: "故障报警",
+//   //   width: 132,
+//   // },
+//   // {
+//   //   align: "center",
+//   //   prop: "F",
+//   //   label: "说明",
+//   //   width: 132,
+//   // },
+//   {
+//     align: "center",
+//     prop: "G",
+//     label: "设备编号",
+//     width: 132,
+//   },
+// ];
+// const tableData = [
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+// ];
+import cardList from "../../components/cardList";
+import enTabs from "../../components/enTabs";
+import enTable from "../../components/enTable";
+import { tableDataOne,tableColumsOne ,tableDataTwo,tableDataThree,tableDataFour} from './config'
+
 export default {
   name: "officeAreaControl",
   components: {
@@ -165,10 +179,12 @@ export default {
     enTabs,
     enTable,
   },
+  
   data() {
     return {
-      tableData,
-      tableColums,
+      activeTab:'01',
+      tableData:tableDataOne,
+      tableColums:tableColumsOne,
       officeTabList: [
         {
           value: "01",
@@ -189,5 +205,27 @@ export default {
       ],
     };
   },
+  watch:{
+    activeTab(val){
+       switch (val){
+         case '01':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataOne
+         break;
+          case '02':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataTwo
+         break;
+          case '03':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataThree
+         break;
+          case '04':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataFour
+         break;
+       }
+    }
+  }
 };
 </script>

src/pages/home/page.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
      <div class="home-page-content" >
-<el-row :gutter="14" >
+<el-row :gutter="12" >
   <el-col :span="16" >
     <card-list :cardListTitle="cardListLeftTitle">
       <div slot="right">
@@ -107,7 +107,7 @@
       </div>
     </card-list>
   </el-col>
-  <el-col :span="8">
+  <el-col :span="8" style="padding-left:0">
     <card-list :cardListTitle="cardListRightTitle" >
       <div slot="content">
           <my-pies></my-pies>  
@@ -120,9 +120,9 @@
 </template>
 
 <script>
-import cardList from "./compontents/cardList";
-import energyTotalCharts from "./compontents/energyTotalCharts";
-import myPies from "./compontents/myPies";
+import cardList from "../components/cardList";
+import energyTotalCharts from "../components/energyTotalCharts";
+import myPies from "../components/myPies";
 // import CardList from './compontents/cardList.vue';
 export default {
   name: "home",
@@ -194,29 +194,30 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 @import "~@/assets/style/public.scss";
 .home-page {
   height: 100%;
   width: 100%;
-  padding:10px 10px 40px 10px;
+  padding:0px 0px 40px 0px;
   // overflow: auto;
   &-top {
+      margin: 20px;
     margin-bottom: 24px;
     .f-group {
       width: 100%;
       display: flex;
           .f-item {
             box-sizing: border-box;
-      width: calc(20% - 19px);
+      width: calc(20% - 18px);
         height: 216px;
       margin-right: 24px;
       padding-top: 40px;
       background-color: #fff;
       text-align: center;
     
-      box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05);
+      // box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05);
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
       img {
         width: 50px;
         height: 50px;
@@ -246,6 +247,7 @@ export default {
 
   }
   .home-page-content {
+    margin: 20px;
     .date-text {
       padding-right: 20px;
       font-size: 14px;
@@ -259,6 +261,7 @@ export default {
     }
 
     .content-wrap {
+      // margin: 20px;
       .energy-save-mode-wrap {
         // width: ;
         box-sizing: border-box;

src/pages/kb/indoor/index.vue

 <template lang="pug">
 card-warp(title="室内气象数据" height='45px' showBackground )
     div(slot='right')
-        router-link.margin-lr-20(:to="{name:'analysis-indoor'}")
+        router-link(:to="{name:'analysis-indoor'}")
             el-button(size='mini' type='primary') 综合图形
     div(slot="content", style="height: 90%")
         el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
@@ -14,18 +14,18 @@ card-warp(title="室内气象数据" height='45px' showBackground )
                 el-button(type='primary' size='mini') 查询
         .data-warp
             div.data-item
-                p.type 温度
-                p.color-blue
+                div.type 温度
+                div.color-blue
                     span.num 37
                     span.unit ℃
             div.data-item
-                p.type 湿度
-                p.color-cyan
+                div.type 湿度
+                div.color-cyan
                     span.num 25
                     span.unit %RH
             div.data-item()
-                p.type   CO2
-                p.color-green
+                div.type   CO2
+                div.color-green
                     span.num 17
                     span.unit PPM
         el-table(size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
@@ -113,21 +113,19 @@ components: {
         border: 1px solid #ECECEC;
         box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
         .type{
-            height: 19px;
             font-size: 18px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #333333;
-            line-height: 60px;
-
+            padding-top: 38px;
         }
         .num{
-            height: 28px;
             font-size: 36px;
             font-family: PingFang SC;
             font-weight: 600;
             color: #21ACFC;
-            line-height: 60px;
+            padding-top: 12px;
+
         }
         .unit{
             height: 15px;

src/pages/kb/outdoor/index.vue

 <template lang="pug">
 card-warp(title="室外气象数据" height='45px' showBackground )
-    div(slot='right')
-        el-button(size='mini' type='primary') 综合图形
+
     div(slot="content", style="height: 90%")
         el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
             el-tab-pane(label="候车室区域", name="1")
@@ -13,12 +12,13 @@ card-warp(title="室外气象数据" height='45px' showBackground )
                 el-button(type='primary' size='mini') 查询
         .data-warp
             div.data-item(v-for='item in typeList')
-                p.type {{item.type}}
-                p.color-blue
-                    span.num mock
+                div.type {{item.type}}
+                div.color-blue
+                    span.num sss
                     span.unit 11
-
-        el-table(size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
+        div.clearfix
+            el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表
+        el-table( v-if='showList' size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
             el-table-column(:resizable="false" type="index" header-align='center'  align='center' width="50" label='序号')
             el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='设备编号')
             el-table-column(:resizable="false" prop='visitorId' header-align='center'  align='center' width='240' label='设备名称')
@@ -35,7 +35,23 @@ card-warp(title="室外气象数据" height='45px' showBackground )
                     el-button(type='text' size='small'  @click='showParams(scope.row)') 历史数据
                     el-button(type='text' size='small'  @click='showParams(scope.row)') 统计图表
             tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
-
+        .echartsWarp(v-else width="100%", flex)
+            div
+                chart
+            div
+                chart2
+            div
+                chart3
+            div
+                chart4
+            div
+                chart5
+            div
+                chart6
+            div
+                chart7
+            div
+                pie8
 </template>
 
 <script>
@@ -62,6 +78,7 @@ export default {
     },
     data() {
         return {
+            showList: false,
             activeName: '1',
             dataList: [{ id: 1 }],
             dataListLoading: false,
@@ -81,6 +98,9 @@ export default {
         }
     },
     methods: {
+        toggle() {
+            this.showList = !this.showList
+        },
         tabClick(tab, event) {
             console.log(tab, event)
         },
@@ -129,28 +149,62 @@ export default {
         border: 1px solid #ECECEC;
         box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
         .type{
-            height: 19px;
             font-size: 18px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #333333;
-            line-height: 60px;
+            padding-top: 38px;
 
         }
             .num{
-            height: 28px;
                 font-size: 36px;
                 font-family: PingFang SC;
                 font-weight: 600;
                 color: #21ACFC;
-            line-height: 60px;
+                // padding-top: 26px;
             }
             .unit{
-            height: 15px;
                 font-size: 18px;
                 font-family: Microsoft YaHei;
                 font-weight: 400;
             }
     }
 }
+.echartsWarp {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    height: calc(100vh - 380px);
+    margin-bottom: 90px;
+    > div {
+        width: 22%;
+        height: calc(90% / 2);
+        margin: 3px;
+        padding: 13px;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+        .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 600;
+            color: #000000;
+            line-height: 40px;
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background: #0097ff;
+                margin: 0 10px;
+            }
+        }
+    }
+}
+.clearfix:after{
+    content: '';
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
 </style>

src/pages/kb/power/components/historyDataModal.vue

+<template>
+  <el-dialog
+    title="历史数据"
+    :visible.sync="historyDataModalVisible"
+    :append-to-body="true"
+  >
+    <el-form :inline="true">
+      <el-form-item label="设备名称：" :label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="设备编号：" :label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="数据起止阶段：" :label-width="formLabelWidth">
+        <el-date-picker style="width:157px" size="mini" type="date" placeholder="">
+        </el-date-picker>
+        <span style="padding:0 10px">至</span>
+        <el-date-picker style="width:157px"  size="mini" type="date" placeholder="">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item >
+        <el-button size='mini' type="primary" icon="el-icon-search" >查询</el-button>
+         <el-button size='mini' type="primary" icon="el-icon-download">导出</el-button>
+      </el-form-item>
+      
+    </el-form>
+    <enTable :tableData="historyData" :tableColums="tableColums"></enTable>
+    <div slot="footer">
+      <el-button @click="cancelhandle">取 消</el-button>
+      <el-button type="primary" @click="cancelhandle">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script >
+import enTable from '../../../components/enTable'
+const historyData = [
+
+]
+const tableColums = [
+    {
+        label:'功率',
+        prop:'qq',
+        width:200,
+        align:'center'
+    },
+      {
+        label:'设备状态',
+        prop:'ww',
+        width:200,
+        align:'center'
+    },
+      {
+        label:'采集时间',
+        prop:'ee',
+        // width:200,
+        align:'center'
+    }
+]
+export default {
+  name: "historyDataModal",
+  props: ["historyDataModalVisible"],
+  components:{
+      enTable
+  },
+  data() {
+    return {
+      formLabelWidth: "110px",
+      historyData,
+      tableColums,
+    };
+  },
+  methods: {
+    cancelhandle() {
+      this.$emit("cancelhandle");
+    },
+  },
+};
+</script>

src/pages/kb/power/components/statisticPicTableModal.vue

+<template>
+  <el-dialog
+    title="统计图表"
+    :visible.sync="statisticModalVisible"
+    :append-to-body="true"
+  >
+    <el-form :inline="true">
+      <el-form-item label="设备名称：" label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="设备编号：" label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="数据起止阶段：" label-width="formLabelWidth">
+        <el-date-picker
+          style="width: 157px"
+          size="mini"
+          type="date"
+          placeholder=""
+        >
+        </el-date-picker>
+        <span style="padding: 0 10px">至</span>
+        <el-date-picker
+          style="width: 157px"
+          size="mini"
+          type="date"
+          placeholder=""
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" type="primary" icon="el-icon-search"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div id="categoryId" style="height: 200px"></div>
+    <div slot="footer">
+      <el-button @click="cancelhandlePic">取 消</el-button>
+      <el-button type="primary" @click.stop="cancelhandlePic">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts">
+export default {
+  name: "statisticPicTableModal",
+  props: ["statisticModalVisible"],
+  data() {
+    return {
+      formLabelWidth: "120px",
+      category: null,
+    };
+  },
+  // watch: {
+  //   statisticModalVisible(value) {
+  //     if (value) {
+  //     }
+  //   },
+  // },
+
+  mounted() {
+    setTimeout(() => {
+      this.initCategory();
+    }, 3000);
+  },
+  methods: {
+    cancelhandlePic() {
+      this.$emit("cancelhandlePic");
+    },
+    initCategory() {
+      let gId = document.getElementById("categoryId");
+      this.category = this.$echarts.init(gId);
+      const option = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+          },
+        ],
+      };
+      this.category.setOption(option);
+    },
+  },
+};
+</script>

src/pages/kb/power/page.vue

@@ -2,12 +2,23 @@
   <div class="use-electro-data">
     <cardList cardListTitle="用电数据">
       <div slot="right">
-        <i class="el-icon-menu"></i>
+        <!-- <i class="el-icon-menu"></i> -->
+        <el-button size="mini" @click="toEnergyPage" type="primary">综合图形</el-button>
       </div>
-      <div slot="content" style="padding: 24px 28px 20px 23px">
-        <enTabs :tabList="electroTabList" ></enTabs>
-        <div style="margin-top:15px">
-          <el-form :inline="true" :model="formInline"  style="text-align:center"> 
+      <div slot="content">
+        <!-- <enTabs ></enTabs> -->
+        <div>
+          <el-tabs class="en-tabs" v-model="activeTab" >
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in electroTabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
+        </div>
+        <div>
+          <el-form :inline="true">
             <el-row>
               <el-col :span="7">
                 <el-form-item label="设备名称：">
@@ -29,23 +40,44 @@
               </el-col>
               <el-col :span="3">
                 <el-form-item>
-                  <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">查询</el-button>
+                  <el-button icon="el-icon-search" size="mini" type="primary"
+                    >查询</el-button
+                  >
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </div>
 
-        <enTable :tableColums="tableColums" :tableData="tableData" isShowOp="true"></enTable>
+        <enTable
+          :tableColums="tableColums"
+          :tableData="tableData"
+          :isShowOp="true"
+          isShowPage="true"
+        >
+         <template v-slot:operation='scope'>
+           <el-button type="text" @click="openHistoryHandle">历史数据</el-button>
+            <el-button type="text" @click="openPicTHandle">统计图表</el-button>
+         </template>
+        </enTable>
       </div>
     </cardList>
+    <history-data-modal
+      :historyDataModalVisible="historyDataModalVisible"
+      v-on:cancelhandle="cancelhandle"
+    ></history-data-modal>
+    <statistic-pic-table-modal
+      :statisticModalVisible="statisticModalVisible"
+      v-on:cancelhandlePic="cancelhandlePic"
+    ></statistic-pic-table-modal>
   </div>
 </template>
 <script >
-
-import cardList from "../../home/compontents/cardList";
-import enTabs from "../../eq/hall/components/enTabs";
-import enTable from "../../eq/hall/components/enTable";
+import cardList from "../../components/cardList";
+import enTabs from "../../components/enTabs";
+import enTable from "../../components/enTable";
+import historyDataModal from "./components/historyDataModal";
+import statisticPicTableModal from "./components/statisticPicTableModal";
 const tableColums = [
   {
     align: "center",
@@ -82,9 +114,6 @@ const tableColums = [
     prop: "E",
     label: "设备状态",
   },
-
-  
-  
 ];
 const tableData = [
   {
@@ -193,9 +222,14 @@ export default {
     cardList,
     enTabs,
     enTable,
+    historyDataModal,
+    statisticPicTableModal,
   },
   data() {
     return {
+      activeTab: "01",
+      historyDataModalVisible: false,
+      statisticModalVisible: false,
       tableColums,
       tableData,
       electroTabList: [
@@ -218,15 +252,43 @@ export default {
       ],
     };
   },
+  
+  methods: {
+    cancelhandle() {
+      this.$nextTick(() => {
+        this.historyDataModalVisible = false;
+      });
+    },
+    cancelhandlePic() {
+      this.$nextTick(() => {
+        this.statisticModalVisible = false;
+      });
+    },
+
+    openHistoryHandle(){
+          this.historyDataModalVisible = true;
+    },
+   openPicTHandle(){
+     this.$nextTick(()=>{
+        this.statisticModalVisible = true;
+     })
+      
+   },
+   toEnergyPage(){
+     this.$router.push({
+       path:'/analysis/energy'
+     })
+   },
+  },
 };
 </script>
 <style  lang="scss">
-.use-electro-data{
-   padding:10px 10px 40px 10px;
-   .el-form-item{
+.use-electro-data {
+  padding: 0px 0 40px 0px;
+  .el-form-item {
     margin-bottom: 15px;
     margin-top: 15px;
-}
+  }
 }
 
 </style>
\ No newline at end of file

src/router/routes.js

@@ -42,7 +42,8 @@ const frameIn = [
     component: layoutHeaderAside,
     children: (pre => [
       { path: 'hall', name: `${pre}hall`, component: () => import('@/pages/eq/hall'), meta: { ...meta, title: '候车大厅控制' } },
-      { path: 'office', name: `${pre}office`, component: () => import('@/pages/eq/office'), meta: { ...meta, title: '办公区域控制' } }
+      { path: 'office', name: `${pre}office`, component: () => import('@/pages/eq/office'), meta: { ...meta, title: '办公区域控制' } },
+      { path: 'view', name: `${pre}view`, component: () => import('@/pages/eq/view'), meta: { ...meta, title: '设备概览' } }
     ])('eq-')
   },