tj

src/pages/analysis/energy/page.vue

 <template>
   <div class="energy-page">
     <cardList cardListTitle="能耗数据分析">
-        <div slot="right" >
+      <div slot="right">
         <!-- <span
           :class="activeIndex === index ? 'active-hight-linght' : ''"
           class="date-text"
@@ -20,13 +20,15 @@
         <!-- </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>
+        <el-button size="mini" type="primary" @click="toPowerPage"
+          >图形/列表</el-button
+        >
       </div>
-      <div slot="content" >
-        <div >
+      <div slot="content">
+        <div>
           <!-- <enTabs :tabList="energyTabList"></enTabs> -->
-             <el-tabs class="en-tabs" v-model="activetap" >
-               <el-row style="padding-top:15px">
+          <el-tabs class="en-tabs" v-model="activetap">
+            <el-row style="padding-top: 15px">
               <el-col :span="10">
                 <span>时间范围：</span>
                 <el-date-picker
@@ -39,7 +41,9 @@
                 </el-date-picker>
               </el-col>
               <el-col :span="4">
-                  <el-button type="primary" size="mini" icon="el-icon-search">查询</el-button>
+                <el-button type="primary" size="mini" icon="el-icon-search"
+                  >查询</el-button
+                >
               </el-col>
             </el-row>
             <el-tab-pane
@@ -61,74 +65,90 @@
 </template>
 
 <script>
-import cardList from "../../components/cardList";
-import enTabs from "../../components/enTabs";
+import cardList from '../../components/cardList'
+import enTabs from '../../components/enTabs'
 // import enTable from '../../eq/hall/components/enTable'
-import energyChart from "../../components/energyTotalCharts";
+import energyChart from '../../components/energyTotalCharts'
 export default {
-  name: "energypage",
+  name: 'energypage',
   components: {
     cardList,
     enTabs,
-    energyChart,
+    energyChart
   },
   data() {
     return {
       activeIndex: 1,
-      activetap: "01",
+      activetap: '01',
       dateList: [
         // {
         //   value: "01",
         //   label: "时段",
         // },
         {
-          value: "02",
-          label: "今日",
+          value: '02',
+          label: '今日'
         },
         {
-          value: "03",
-          label: "本周",
+          value: '03',
+          label: '本周'
         },
         {
-          value: "04",
-          label: "本月",
+          value: '04',
+          label: '本月'
         },
         {
-          value: "05",
-          label: "全年",
-        },
+          value: '05',
+          label: '全年'
+        }
       ],
       energyTabList: [
         {
-          value: "01",
-          label: "全部",
+          value: '01',
+          label: '全部'
         },
         {
-          value: "02",
-          label: "排风机",
+          value: '02',
+          label: '排风机'
         },
         {
-          value: "03",
-          label: "多联空调",
+          value: '03',
+          label: '机房空调(220V)'
         },
         {
-          value: "04",
-          label: " 多联新风",
+          value: '04',
+          label: '机房空调(380V)'
         },
-      ],
-    };
+        {
+          value: '05',
+          label: '风幕机'
+        },
+        {
+          value: '06',
+          label: '风冷热泵机组'
+        },
+        {
+          value: '07',
+          label: '室内机风柜'
+        },
+        {
+          value: '08',
+          label: '多联室外机'
+        }
+      ]
+    }
   },
   methods: {
     activehandle(item, index) {
-      this.activeIndex = index;
+      this.activeIndex = index
     },
-    toPowerPage(){
+    toPowerPage() {
       this.$router.push({
-       path:'/kb/power'
+        path: '/kb/power'
       })
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss">

src/pages/kb/power/page.vue

@@ -3,12 +3,14 @@
     <cardList cardListTitle="用电数据">
       <div slot="right">
         <!-- <i class="el-icon-menu"></i> -->
-        <el-button size="mini" @click="toEnergyPage" type="primary">综合图形</el-button>
+        <el-button size="mini" @click="toEnergyPage" type="primary"
+          >综合图形</el-button
+        >
       </div>
       <div slot="content">
         <!-- <enTabs ></enTabs> -->
         <div>
-          <el-tabs class="en-tabs" v-model="activeTab" >
+          <el-tabs class="en-tabs" v-model="activeTab">
             <el-tab-pane
               :label="item.label"
               :name="item.value"
@@ -55,8 +57,10 @@
           :isShowOp="true"
           isShowPage="true"
         >
-         <template v-slot:operation='scope'>
-           <el-button type="text" @click="openHistoryHandle">历史数据</el-button>
+          <template v-slot:operation="scope">
+            <el-button type="text" @click="openHistoryHandle"
+              >历史数据</el-button
+            >
             <el-button type="text" @click="openPicTHandle">统计图表</el-button>
           </template>
         </enTable>
@@ -72,215 +76,148 @@
     ></statistic-pic-table-modal>
   </div>
 </template>
-<script >
-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";
+<script>
+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",
-    prop: "A",
-    label: "设备名称",
-    width: 132,
+    align: 'center',
+    prop: 'A',
+    label: '设备名称',
+    width: 162
   },
   {
-    align: "center",
-    prop: "G",
-    label: "设备编号",
-    width: 132,
+    align: 'center',
+    prop: 'B',
+    label: '设备位置'
+    // width: 182
   },
   {
-    align: "center",
-    prop: "B",
-    label: "设备位置",
-    width: 112,
+    align: 'center',
+    prop: 'C',
+    label: '当日功耗',
+    width: 162
   },
   {
-    align: "center",
-    prop: "C",
-    label: "当日功耗",
-    width: 132,
+    align: 'center',
+    prop: 'D',
+    label: '当月功耗',
+    width: 162
   },
   {
-    align: "center",
-    prop: "D",
-    label: "当月功耗",
-    width: 132,
+    align: 'center',
+    prop: 'E',
+    label: '设备状态',
+    width: 152
   },
   {
-    align: "center",
-    prop: "E",
-    label: "设备状态",
-  },
-];
+    align: 'center',
+    prop: 'F',
+    label: '设备编号',
+    width: 152
+  }
+]
 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: '设备1',
+    B: '左侧办公房屋',
+    C: '11',
+    D: '1100',
+    E: '开启',
+    F: 'QY0001'
   },
   {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-];
+    A: '设备2',
+    B: '左侧办公房屋',
+    C: '11',
+    D: '1100',
+    E: '开启',
+    F: 'QY0002'
+  }
+]
 export default {
-  name: "useElectroData",
+  name: 'useElectroData',
   components: {
     cardList,
     enTabs,
     enTable,
     historyDataModal,
-    statisticPicTableModal,
+    statisticPicTableModal
   },
   data() {
     return {
-      activeTab: "01",
+      activeTab: '01',
       historyDataModalVisible: false,
       statisticModalVisible: false,
       tableColums,
       tableData,
       electroTabList: [
         {
-          value: "01",
-          label: "全部",
+          value: '01',
+          label: '全部'
+        },
+        {
+          value: '02',
+          label: '排风机'
+        },
+        {
+          value: '03',
+          label: '机房空调(220V)'
         },
         {
-          value: "02",
-          label: "排风机",
+          value: '04',
+          label: '机房空调(380V)'
         },
         {
-          value: "03",
-          label: "多联空调",
+          value: '05',
+          label: '风幕机'
         },
         {
-          value: "04",
-          label: "多联新风",
+          value: '06',
+          label: '风冷热泵机组'
         },
-      ],
-    };
+        {
+          value: '07',
+          label: '室内机风柜'
+        },
+        {
+          value: '08',
+          label: '多联室外机'
+        }
+      ]
+    }
   },
 
   methods: {
     cancelhandle() {
       this.$nextTick(() => {
-        this.historyDataModalVisible = false;
-      });
+        this.historyDataModalVisible = false
+      })
     },
     cancelhandlePic() {
       this.$nextTick(() => {
-        this.statisticModalVisible = false;
-      });
+        this.statisticModalVisible = false
+      })
     },
 
-    openHistoryHandle(){
-          this.historyDataModalVisible = true;
+    openHistoryHandle() {
+      this.historyDataModalVisible = true
     },
-   openPicTHandle(){
-     this.$nextTick(()=>{
-        this.statisticModalVisible = true;
+    openPicTHandle() {
+      this.$nextTick(() => {
+        this.statisticModalVisible = true
       })
-      
     },
-   toEnergyPage(){
+    toEnergyPage() {
       this.$router.push({
-       path:'/analysis/energy'
+        path: '/analysis/energy'
       })
-   },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss">
 .use-electro-data {
@@ -290,5 +227,4 @@ export default {
     margin-top: 15px;
   }
 }
-
 </style>