更新202110211459

src/layout/vab-avatar/index.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="vab-avatar">
+  <div class="vab-avatar" style="display: flex">
+    <span
+      style="
+        height: 54px;
+        line-height: 54px;
+        margin-right: 30px;
+        font-size: 17px;
+      "
+    >
+      {{ time }}
+    </span>
     <a-dropdown>
       <span class="ant-dropdown-link">
         <a-avatar :src="avatar" />
@@ -16,39 +26,64 @@
 </template>
 
 <script>
-  import { recordRoute } from '@/config'
-  import { DownOutlined } from '@ant-design/icons-vue'
+import { recordRoute } from '@/config'
+import { DownOutlined } from '@ant-design/icons-vue'
+import { useStore } from 'vuex'
 
-  import { mapGetters } from 'vuex'
-  export default {
-    name: 'VabAvatar',
-    components: { DownOutlined },
-    computed: {
-      ...mapGetters({
-        avatar: 'user/avatar',
-        username: 'user/username',
-      }),
-    },
-    methods: {
-      async logout() {
-        await this.$store.dispatch('user/logout')
-        if (recordRoute) {
-          const fullPath = this.$route.fullPath
-          this.$router.push(`/login?redirect=${fullPath}`)
-        } else {
-          this.$router.push('/login')
-        }
-      },
+import { mapGetters } from 'vuex'
+export default {
+  name: 'VabAvatar',
+  components: { DownOutlined },
+  computed: {
+    ...mapGetters({
+      avatar: 'user/avatar',
+      username: 'user/username',
+    }),
+  },
+  data() {
+    return {
+      time: '',
+    }
+  },
+  mounted() {
+    const store = useStore()
+    setInterval(() => {
+      store.commit('getTimeAll')
+      var time = store.state.Time_All
+      this.time =
+        time[0] +
+        '年' +
+        (time[1] < 9 ? '0' + (time[1] + 1) : time[1] + 1) +
+        '月' +
+        (time[2] < 10 ? '0' + time[2] : time[2]) +
+        '日 ' +
+        (time[3] < 10 ? '0' + time[3] : time[3]) +
+        ':' +
+        (time[4] < 10 ? '0' + time[4] : time[4]) +
+        ':' +
+        (time[5] < 10 ? '0' + time[5] : time[5])
+    }, 0)
+  },
+  methods: {
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      if (recordRoute) {
+        const fullPath = this.$route.fullPath
+        this.$router.push(`/login?redirect=${fullPath}`)
+      } else {
+        this.$router.push('/login')
+      }
     },
-  }
+  },
+}
 </script>
 <style lang="less">
-  .vab-avatar {
-    .ant-dropdown-link {
-      display: block;
-      min-height: @vab-header-height;
-      cursor: pointer;
-      line-height: @vab-header-height;
-    }
+.vab-avatar {
+  .ant-dropdown-link {
+    display: block;
+    min-height: @vab-header-height;
+    cursor: pointer;
+    line-height: @vab-header-height;
   }
+}
 </style>

src/store/index.js

@@ -14,4 +14,179 @@ Object.keys(modules).forEach((key) => {
 })
 export default createStore({
   modules,
+  state: {
+    query: null,
+    siteId: 1, //公共api请求参数->siteId
+    Time_Data: [], //公共api请求参数->Time_Data
+    timearr: [], //公共处理开始时间和结束时间中的时间段天数 值存储
+    Time_All: [], //公共时间 返回数组 -> 年月日时分秒 时间戳
+
+
+    queryType: '', //设备监控--->数据报表api请求参数->queryType
+    run_off_Status: null, //设备监控--->运行状态统计->echarts->OFF次数分布和运行状态曲线图表 api信息存储
+    se_defaultTime: [], //设备监控--->历史趋势时间选择器v-model
+    th_defaultTime: [], //设备监控--->数据报表时间选择器v-model
+    fh_defaultTime: [], //设备监控--->运行状态统计时间选择器v-model
+
+
+    // tableHeight:0,//公共table监听高度变化
+    // echartHeight:0,//公共ehcarts监听高度变化
+  },
+  mutations: {
+    /**
+     * @公共api请求参数siteId
+     * @param {*}} state 
+     * @param {*} val 
+     */
+    increment(state, val) {
+      state.siteId = val
+    },
+    /**
+     * @公共处理时区方法
+     */
+    TimeAll_function(state, time) {
+      state.Time_Data = []
+      for (let i in time) {
+        var Y = time[i].getFullYear() < 10 ? '0' + time[i].getFullYear() : time[i].getFullYear()
+        var M = (time[i].getMonth() + 1) < 10 ? '0' + (time[i].getMonth() + 1) : (time[i].getMonth() + 1)
+        var D = time[i].getDate() < 10 ? '0' + time[i].getDate() : time[i].getDate()
+        var HH = time[i].getHours() < 10 ? '0' + time[i].getHours() : time[i].getHours()
+        var MM = time[i].getMinutes() < 10 ? '0' + time[i].getMinutes() : time[i].getMinutes()
+        var SS = time[i].getSeconds() < 10 ? '0' + time[i].getSeconds() : time[i].getSeconds()
+        // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
+        state.Time_Data.push(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
+      }
+    },
+    /**
+     * @公共处理开始时间和结束时间中的时间段天数
+     * @param {*} state 
+     * @param {*} begin 开始时间和结束时间
+     */
+    getAll(state, begin) {
+      let arr1 = begin[0].split("-");
+      let arr2 = begin[1].split("-");
+      let arr1_ = new Date();
+      let arrTime = [];
+      arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
+      let arr2_ = new Date();
+      arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
+      let unixDb = arr1_.getTime();
+      let unixDe = arr2_.getTime();
+      for (let k = unixDb; k <= unixDe;) {
+        arrTime.push(datetimeparse(k, "YY-MM-DD"));
+        k = k + 24 * 60 * 60 * 1000;
+      }
+      state.timearr = arrTime
+      // return arrTime;
+      // 时间格式处理
+      function datetimeparse(timestamp, format, prefix) {
+        if (typeof timestamp == "string") {
+          timestamp = Number(timestamp);
+        }
+        //转换时区
+        let currentZoneTime = new Date(timestamp);
+        let currentTimestamp = currentZoneTime.getTime();
+        let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西区，西区晚
+        let offset = null;
+        //客户端时间与服务器时间保持一致，固定北京时间东八区。
+        offset = offsetZone + 8;
+        currentTimestamp = currentTimestamp + offset * 3600 * 1000;
+
+        let newtimestamp = null;
+        if (currentTimestamp) {
+          if (currentTimestamp.toString().length === 13) {
+            newtimestamp = currentTimestamp.toString();
+          } else if (currentTimestamp.toString().length === 10) {
+            newtimestamp = currentTimestamp + "000";
+          } else {
+            newtimestamp = null;
+          }
+        } else {
+          newtimestamp = null;
+        }
+        let dateobj = newtimestamp ?
+          new Date(parseInt(newtimestamp)) :
+          new Date();
+        let YYYY = dateobj.getFullYear();
+        let MM =
+          dateobj.getMonth() > 8 ?
+            dateobj.getMonth() + 1 :
+            "0" + (dateobj.getMonth() + 1);
+        let DD =
+          dateobj.getDate() > 9 ? dateobj.getDate() : "0" + dateobj.getDate();
+        let HH =
+          dateobj.getHours() > 9 ? dateobj.getHours() : "0" + dateobj.getHours();
+        let mm =
+          dateobj.getMinutes() > 9 ?
+            dateobj.getMinutes() :
+            "0" + dateobj.getMinutes();
+        let ss =
+          dateobj.getSeconds() > 9 ?
+            dateobj.getSeconds() :
+            "0" + dateobj.getSeconds();
+        let output = "";
+        let separator = "/";
+        if (format) {
+          separator = format.match(/-/) ? "-" : "/";
+          output += format.match(/yy/i) ? YYYY : "";
+          output += format.match(/MM/) ?
+            (output.length ? separator : "") + MM :
+            "";
+          output += format.match(/dd/i) ?
+            (output.length ? separator : "") + DD :
+            "";
+          output += format.match(/hh/i) ? (output.length ? " " : "") + HH : "";
+          output += format.match(/mm/) ? (output.length ? ":" : "") + mm : "";
+          output += format.match(/ss/i) ? (output.length ? ":" : "") + ss : "";
+        } else {
+          output += YYYY + separator + MM + separator + DD;
+        }
+        output = prefix ? prefix + output : output;
+        return newtimestamp ? output : "";
+      }
+    },
+    /**
+     * @公共echarts图表下载
+     */
+    getConnectedDataURL(state, refs) {
+      state || refs
+      var url = refs[0].getConnectedDataURL({
+        pixelRatio: 15,
+        backgroundColor: "black",
+        excludeComponents: ["toolbox"],
+        type: "png",
+      });
+      var $a = document.createElement("a");
+      var type = "png";
+      //图片名称
+      $a.download = refs[1] + "." + type;
+      $a.target = "_blank";
+      $a.href = url;
+      if (typeof MouseEvent === "function") {
+        var evt = new MouseEvent("click", {
+          view: window,
+          bubbles: true,
+          cancelable: false,
+        });
+        $a.dispatchEvent(evt);
+      }
+    },
+    /**
+     * @公共时间 返回数组 -> 年月日时分秒 时间戳
+     */
+    getTimeAll(state) {
+      const time = new Date();
+      const Y = time.getFullYear(); //年
+      const M = time.getMonth(); //月
+      const D = time.getDate(); //日
+      const HH = time.getHours(); //时，
+      const MM = time.getMinutes(); //分
+      const SS = time.getSeconds(); //秒
+      const timestamp = new Date().getTime(); //时间戳
+      state.Time_All = [Y, M, D, HH, MM, SS, timestamp]
+      state.se_defaultTime = [new Date(Y, M, D, 0, 0, 0), new Date()] //设备监控--->历史趋势时间选择器v-model  //home设备总数
+      state.th_defaultTime = [new Date(Y, M, D, 0, 0, 0), new Date()] //设备监控--->数据报表时间选择器v-model  //home运维管理
+      state.fh_defaultTime = [new Date(Y, M, 1, 0, 0, 0), new Date()] //设备监控--->运行状态统计时间选择器v-model  //概览 -> 告警统计折线图
+    },
+  }
 })

src/views/dataManage/consumConfig/index.vue

@@ -12,8 +12,7 @@
             :key="item.value"
             :label="item.label"
             :value="item.value"
-          >
-          </el-option>
+          ></el-option>
         </el-select>
       </div>
 
@@ -33,7 +32,7 @@
         type="card"
         @tab-click="handleClick"
         style="background-color: #fff; height: 100%"
-        class="tabsSizeColor"
+        class="tabsSizeColor consumConfig-tabs"
       >
         <el-tab-pane label="基本配置" name="consBasic">
           <baseic-Table></baseic-Table>
@@ -46,54 +45,54 @@
   </div>
 </template>
 <script>
-import { useStore } from "vuex";
-import { defineComponent, ref} from "vue";
-import baseicTable from "./tables/basicTable.vue";
-import deviationTable from "./tables/deviationTable.vue";
+import { useStore } from 'vuex'
+import { defineComponent, ref } from 'vue'
+import baseicTable from './tables/basicTable.vue'
+import deviationTable from './tables/deviationTable.vue'
 
 export default defineComponent({
-  name: "consumConfig",
+  name: 'consumConfig',
   components: { baseicTable, deviationTable },
   props: {},
   setup() {
-    const store = useStore();
+    const store = useStore()
 
     const siteOption = () => {
-      console.log(store.state);
-    };
+      console.log(store.state)
+    }
 
     const handleClick = (tab, event) => {
-      console.log(tab, event);
-    };
+      console.log(tab, event)
+    }
 
     // 表头样式设置
     const headClass = () => {
-      return "background:#FAFAFA !important;color: black;";
-    };
+      return 'background:#FAFAFA !important;color: black;'
+    }
 
     return {
       headClass,
       // ...toRefs(state), //时间选择默认参数
       siteValue: ref(1), //select站点选择
-      activeName: ref("consBasic"),
+      activeName: ref('consBasic'),
       siteOption, //站点下拉change事件
       handleClick, //tabs切换事件
       data: [
         {
           id: 1,
-          label: "设备1",
+          label: '设备1',
           children: [
             {
               id: 4,
-              label: "母线停电次数",
+              label: '母线停电次数',
             },
             {
               id: 4,
-              label: "功率因数",
+              label: '功率因数',
             },
             {
               id: 4,
-              label: "A相功率因数",
+              label: 'A相功率因数',
             },
           ],
         },
@@ -101,28 +100,28 @@ export default defineComponent({
       options: ref([
         {
           value: 1,
-          label: "Option1",
+          label: 'Option1',
         },
         {
           value: 2,
-          label: "Option2",
+          label: 'Option2',
         },
         {
           value: 3,
-          label: "Option3",
+          label: 'Option3',
         },
         {
           value: 4,
-          label: "Option4",
+          label: 'Option4',
         },
       ]),
       defaultProps: {
-        children: "children",
-        label: "label",
+        children: 'children',
+        label: 'label',
       },
-    };
+    }
   },
-});
+})
 </script>
 
 <style lang="scss">
@@ -190,4 +189,10 @@ export default defineComponent({
 .el-tabs--card > .el-tabs__header .el-tabs__nav {
   border: none;
 }
+</style>
+
+<style lang="less" scoped>
+.consumConfig-tabs {
+  height: calc(100% - 67px);
+}
 </style>

src/views/dataManage/consumConfig/tables/basicTable.vue

@@ -32,7 +32,7 @@
         border
         stripe
         :header-cell-style="headClass"
-        height="41rem"
+        :height="tableHeight"
       >
         <el-table-column type="index" label="序号" width="50"></el-table-column>
         <el-table-column
@@ -66,7 +66,7 @@
           label="分区"
           width=""
         ></el-table-column>
-        <el-table-column fixed="right" label="操作" width="100">
+        <el-table-column label="操作" width="150">
           <template #default="scope">
             <el-button
               type="text"
@@ -91,7 +91,7 @@
   </div>
 </template>
 <script>
-// import { useStore } from "vuex";
+// import { useStore } from 'vuex'
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
@@ -99,6 +99,8 @@ export default defineComponent({
   components: {},
   props: {},
   setup() {
+    // const store = useStore()
+    
     const install = () => {
       console.log('')
     }
@@ -114,7 +116,14 @@ export default defineComponent({
       return 'background:#FAFAFA !important;color: black;'
     }
 
+    const tableHeight = ref('200')
+    tableHeight.value = window.innerHeight - 260 + 'px'
+    window.onresize = function () {
+      tableHeight.value = window.innerHeight - 260 + 'px'
+    }
+
     return {
+      tableHeight,
       headClass,
       activeName: ref('consBasic'),
       install, //添加监测项事件
@@ -175,6 +184,87 @@ export default defineComponent({
           department: '',
           partition: '',
         },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
+        {
+          numCode: '05-01',
+          meterLevel: 'Tom',
+          category: '11:01:08',
+          accessRd: '',
+          subItem: '',
+          department: '',
+          partition: '',
+        },
       ],
     }
   },

src/views/dataManage/consumConfig/tables/deviationTable.vue

@@ -12,14 +12,19 @@
         border
         stripe
         :header-cell-style="headClass"
-        height="41rem"
+        :height="tableHeight"
       >
-        <el-table-column type="index" label="序号" width="50">
-        </el-table-column>
-        <el-table-column prop="numCode" label="变量编码" width="">
-        </el-table-column>
-        <el-table-column prop="refValue" label="基准值" width="">
-        </el-table-column>
+        <el-table-column type="index" label="序号" width="50"></el-table-column>
+        <el-table-column
+          prop="numCode"
+          label="变量编码"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="refValue"
+          label="基准值"
+          width=""
+        ></el-table-column>
         <el-table-column fixed="right" label="操作" width="100">
           <template #default="scope">
             <el-button
@@ -27,8 +32,9 @@
               size="small"
               style="color: #409eff"
               @click.prevent="Update(scope.row)"
-              >编辑</el-button
             >
+              编辑
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -37,60 +43,66 @@
 </template>
 <script>
 // import { useStore } from "vuex";
-import { defineComponent} from "vue";
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
-  name: "consumConfig",
+  name: 'consumConfig',
   components: {},
   props: {},
   setup() {
     const Update = (row) => {
-      console.log("",row);
-    };
+      console.log('', row)
+    }
 
     // 表头样式设置
     const headClass = () => {
-      return "background:#FAFAFA !important;color: black;";
-    };
+      return 'background:#FAFAFA !important;color: black;'
+    }
 
+    const tableHeight = ref('200')
+    tableHeight.value = window.innerHeight - 260 + 'px'
+    window.onresize = function () {
+      tableHeight.value = window.innerHeight - 260 + 'px'
+    }
     return {
+      tableHeight,
       headClass,
       Update, //修改偏差配置事件
       tableData: [
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
         {
-          numCode: "05-01",
-          refValue: "Tom",
+          numCode: '05-01',
+          refValue: 'Tom',
         },
       ],
-    };
+    }
   },
-});
+})
 </script>

src/views/dataManage/demandAnalysis/ehcarts/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height300" id="worksChartRef" ref="worksChartRef" />
+    <div :style="'height:' + Height" id="worksChartRef" ref="worksChartRef" />
   </div>
 </template>
 <script>
@@ -11,6 +11,9 @@ import * as echarts from 'echarts'
 
 export default defineComponent({
   name: 'CurveCom',
+  props: {
+    Height: String,
+  },
   setup() {
     const store = useStore()
 
@@ -153,10 +156,9 @@ export default defineComponent({
           },
         ],
       })
-      window.onresize = function () {
-        // 自适应大小
+      window.addEventListener('resize', () => {
         myChart.resize()
-      }
+      })
     })
 
     return {
@@ -186,8 +188,5 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height300 {
-    height: 41.8rem;
-  }
 }
 </style>

src/views/dataManage/demandAnalysis/index.vue

@@ -12,8 +12,7 @@
             :key="item.value"
             :label="item.label"
             :value="item.value"
-          >
-          </el-option>
+          ></el-option>
         </el-select>
       </div>
 
@@ -31,13 +30,12 @@
       <div class="demDivOne">
         <div class="demDivTwo">
           <div class="block">
-            <span class="demonstration" style="color: black">日期: </span>
+            <span class="demonstration" style="color: black">日期:</span>
             <el-date-picker
               v-model="value1"
               type="month"
               placeholder="请选择日期"
-            >
-            </el-date-picker>
+            ></el-date-picker>
           </div>
         </div>
         <el-radio-group
@@ -63,7 +61,7 @@
             <span style="font-size: 15px">{{}}每日最大需量趋势</span>
           </div>
           <div>
-            <echarts></echarts>
+            <echarts :Height="Height"></echarts>
           </div>
         </div>
         <div class="Tables">
@@ -76,7 +74,7 @@
                   : tableData.length / 2
               )
             "
-            height="44rem"
+            :height="Height"
             style="width: 100%"
           >
             <el-table-column prop="date" label="日期" width="" />
@@ -92,7 +90,7 @@
                 tableData.length
               )
             "
-            height="44rem"
+            :height="Height"
             style="width: 100%"
           >
             <el-table-column prop="date" label="日期" width="" />
@@ -105,51 +103,58 @@
   </div>
 </template>
 <script>
-import { useStore } from "vuex";
-import { defineComponent, ref, reactive, toRefs } from "vue";
-import echarts from "./ehcarts/index.vue";
+import { useStore } from 'vuex'
+import { defineComponent, ref, reactive, toRefs } from 'vue'
+import echarts from './ehcarts/index.vue'
 
 export default defineComponent({
-  name: "demandAnalysis",
+  name: 'demandAnalysis',
   components: { echarts },
   props: {},
   setup() {
-    const store = useStore();
+    const store = useStore()
 
     const siteOption = () => {
-      console.log(store.state);
-    };
+      console.log(store.state)
+    }
 
     const listTabsChange = (value) => {
-      console.log(value);
-    };
+      console.log(value)
+    }
 
     const state = reactive({
-      value1: "2021-5",
-    });
+      value1: '2021-5',
+    })
+
+    const Height = ref()
+    Height.value = window.innerHeight - 240 + 'px'
+    window.onresize = function () {
+      Height.value = window.innerHeight - 240 + 'px'
+    }
 
     return {
+      Height,
       ...toRefs(state), //时间选择默认参数
       siteValue: ref(1), //select站点选择
       listTabsChange, //单选change事件
       siteOption, //站点下拉change事件
-      listTabPosition: ref("1"), //单选按钮
+      listTabPosition: ref('1'), //单选按钮
       data: [
         {
           id: 1,
-          label: "设备1",
+          label: '设备1',
           children: [
             {
               id: 4,
-              label: "母线停电次数",
+              label: '母线停电次数',
             },
             {
               id: 4,
-              label: "功率因数",
+              label: '功率因数',
             },
             {
               id: 4,
-              label: "A相功率因数",
+              label: 'A相功率因数',
             },
           ],
         },
@@ -157,185 +162,185 @@ export default defineComponent({
       options: ref([
         {
           value: 1,
-          label: "Option1",
+          label: 'Option1',
         },
         {
           value: 2,
-          label: "Option2",
+          label: 'Option2',
         },
         {
           value: 3,
-          label: "Option3",
+          label: 'Option3',
         },
         {
           value: 4,
-          label: "Option4",
+          label: 'Option4',
         },
       ]),
       defaultProps: {
-        children: "children",
-        label: "label",
+        children: 'children',
+        label: 'label',
       },
       tableData: [
         {
-          date: "05-01",
-          maximum: "Tom",
-          time: "11:01:08",
+          date: '05-01',
+          maximum: 'Tom',
+          time: '11:01:08',
         },
         {
-          date: "05-02",
-          maximum: "Tom",
-          time: "09:26:13",
+          date: '05-02',
+          maximum: 'Tom',
+          time: '09:26:13',
         },
         {
-          date: "05-03",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-03',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-04",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-04',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-05",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-05',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-06",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-06',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-07",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-07',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-08",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-08',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-09",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-09',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-10",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-10',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-11",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-11',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-12",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-12',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-13",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-13',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-14",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-14',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-15",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-15',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-16",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-16',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-17",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-17',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-18",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-18',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-19",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-19',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-20",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-20',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-21",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-21',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-22",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-22',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-23",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-23',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-24",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-24',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-25",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-25',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-26",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-26',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-27",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-27',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-28",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-28',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-29",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-29',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-30",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-30',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
         {
-          date: "05-31",
-          maximum: "Tom",
-          time: "No. 189",
+          date: '05-31',
+          maximum: 'Tom',
+          time: 'No. 189',
         },
       ],
-    };
+    }
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>

src/views/dataManage/energyReport/ehcarts/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height300" id="sumeChartRef" ref="sumeChartRef" />
+    <div
+      :style="'height:' + Height"
+      id="sumeChartRef"
+      ref="sumeChartRef"
+    />
   </div>
 </template>
 <script>
@@ -48,6 +52,9 @@ const dataAll = [
 
 export default defineComponent({
   name: 'CurveCom',
+  props: {
+    Height: String,
+  },
   setup() {
     const store = useStore()
 
@@ -84,7 +91,7 @@ export default defineComponent({
           iconStyle: {
             borderColor: '#666',
           },
-          right:'10px'
+          right: '10px',
         },
         // 图列组件
         legend: {
@@ -181,8 +188,5 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height300 {
-    height: 43rem;
-  }
 }
 </style>

src/views/dataManage/energyReport/index.vue

@@ -82,8 +82,8 @@
         </div>
       </div>
       <div class="energEcharts">
-        <echarts v-if="rightTabsBool"></echarts>
-        <tables v-if="!rightTabsBool"></tables>
+        <echarts v-if="rightTabsBool" :Height="Height"></echarts>
+        <tables v-if="!rightTabsBool" :Height="Height"></tables>
       </div>
     </div>
   </div>
@@ -127,7 +127,13 @@ export default defineComponent({
       value1: '2021-10-16',
     })
 
+    const Height = ref(0)
+    Height.value = window.innerHeight - 210 + 'px'
+    window.addEventListener('resize', () => {
+      Height.value = window.innerHeight - 210 + 'px'
+    })
     return {
+      Height,
       ...toRefs(state),
       dateType, //tabs切换时间选择器类型
       listTabPosition: ref('dayValue'), //日月年报表tabs v-model

src/views/dataManage/energyReport/tables/index.vue

@@ -6,7 +6,7 @@
         border
         stripe
         :header-cell-style="headClass"
-        height="41rem"
+        :height="Height"
       >
         <el-table-column type="index" label="序号" width="50"></el-table-column>
         <el-table-column
@@ -42,7 +42,9 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'consumConfig',
   components: {},
-  props: {},
+  props: {
+    Height: String,
+  },
   setup() {
     const Update = (row) => {
       console.log('', row)

src/views/dataManage/handOpera/index.vue

@@ -31,7 +31,7 @@
               <el-date-picker
                 style="width: 150px"
                 v-model="dateValue"
-                :type="date"
+                type="date"
               ></el-date-picker>
             </div>
             <div class="pointOfTime">
@@ -107,7 +107,7 @@
         </div>
       </div>
       <div class="energEcharts">
-        <tables></tables>
+        <tables :Height="Height"></tables>
       </div>
     </div>
   </div>
@@ -126,7 +126,13 @@ export default defineComponent({
       dateValue: '2021-10-16',
     })
 
+    const Height = ref()
+    Height.value = window.innerHeight - 205 + 'px'
+    window.onresize = function () {
+      Height.value = window.innerHeight - 205 + 'px'
+    }
     return {
+      Height,
       ...toRefs(state),
       siteValue: ref(''), //站点下拉列表v-model
       checked: ref(false),

src/views/dataManage/handOpera/tables/index.vue

@@ -6,7 +6,7 @@
         border
         stripe
         :header-cell-style="headClass"
-        height="41rem"
+        :height="Height"
       >
         <el-table-column
           prop="numCode"
@@ -48,7 +48,9 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'consumConfig',
   components: {},
-  props: {},
+  props: {
+    Height: String,
+  },
   setup() {
     const Update = (row) => {
       console.log('', row)

src/views/patrolManage/patrolRecord/dialog/select.vue

@@ -138,14 +138,6 @@
           </div>
         </div>
       </div>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="close">取消</el-button>
-          <el-button type="primary" @click="dialogVisible = false">
-            确定
-          </el-button>
-        </span>
-      </template>
     </el-dialog>
   </div>
 </template>