数据管理

src/api/dataManage/sameAnalysis.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+
+
+//同比分析
+export function yearOnYearList(params) {
+    return request({
+        url: '/htAnalogData/yearOnYearList',
+        method: 'POST',
+        data: params,
+    })
+}

src/store/index.js

@@ -9,314 +9,313 @@ import ElMessage from 'element-plus'
 const files = require.context('./modules', false, /\.js$/)
 const modules = {}
 files.keys().forEach((key) => {
-  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+    modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
 })
 
 Object.keys(modules).forEach((key) => {
-  modules[key]['namespaced'] = true
+    modules[key]['namespaced'] = true
 })
 export default createStore({
-  modules,
-  state: {
-    query: null,
-    siteId: 1, //公共api请求参数->siteId
-    siteList: [],//公共api站点下拉列表存储->siteId
-    deviceList: [],//公共站点下拉列表
-    monthList: [],//公共每月最后一天信息存储
-    dateList: [],//公共每月当天信息存储
+    modules,
+    state: {
+        query: null,
+        siteId: 1, //公共api请求参数->siteId
+        siteList: [], //公共api站点下拉列表存储->siteId
+        deviceList: [], //公共站点下拉列表
+        monthList: [], //公共每月最后一天信息存储
+        dateList: [], //公共每月当天信息存储
 
-    timeProcessing: '',
+        timeProcessing: '',
 
-    Time_Data: [], //公共api请求参数->Time_Data
-    timearr: [], //公共处理开始时间和结束时间中的时间段天数 值存储
-    Time_All: [], //公共时间 返回数组 -> 年月日时分秒 时间戳
+        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
+        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: {
-    /**
-     * @公共站点下拉列表
-     * @param {*} state 
-     */
-    publicSiteList(state) {
-      api
-        .SiteList({})
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            state.siteList = requset.data
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
+        // tableHeight:0,//公共table监听高度变化
+        // echartHeight:0,//公共ehcarts监听高度变化
     },
+    mutations: {
+        /**
+         * @公共站点下拉列表
+         * @param {*} state 
+         */
+        publicSiteList(state) {
+            api
+                .SiteList({})
+                .then((requset) => {
+                    if (requset.status === 'SUCCESS') {
+                        state.siteList = requset.data
+                    } else {
+                        ElMessage.error(requset.msg)
+                    }
+                })
+        },
 
-    /**
-     * @公共左侧树状设备
-     * @param {*} state 
-     */
-    publicDeviceList(state) {
-      if (state.siteId != "" && state.siteId != null) {
-        api
-          .dataManagementDeviceList({ siteId: state.siteId })
-          .then((requset) => {
-            if (requset.status === 'SUCCESS') {
-              state.deviceList = []
-              requset.data.map((val) => {
-                if (val.children.length > 0) {
-                  state.deviceList.push({
-                    deviceCode: val.deviceCode,
-                    deviceName: val.deviceName,
-                    id: val.id,
-                    children:
-                      val.children.length > 0
-                        ? val.children.map((val) => {
-                          return {
-                            deviceCode: val.variableCoding,
-                            deviceName: val.variableName,
-                            id: val.id,
-                          }
-                        })
-                        : val.children,
-                  })
-                }
-              })
+        /**
+         * @公共左侧树状设备
+         * @param {*} state 
+         */
+        publicDeviceList(state) {
+            if (state.siteId != "" && state.siteId != null) {
+                api
+                    .dataManagementDeviceList({ siteId: state.siteId })
+                    .then((requset) => {
+                        if (requset.status === 'SUCCESS') {
+                            state.deviceList = []
+                            requset.data.map((val) => {
+                                // if (val.children.length > 0) {
+                                state.deviceList.push({
+                                        deviceCode: val.deviceCode,
+                                        deviceName: val.deviceName,
+                                        id: val.id,
+                                        children: val.children.length > 0 ?
+                                            val.children.map((val) => {
+                                                return {
+                                                    deviceCode: val.variableCoding,
+                                                    deviceName: val.variableName,
+                                                    id: val.id,
+                                                }
+                                            }) :
+                                            val.children,
+                                    })
+                                    // }
+                            })
+                        } else {
+                            ElMessage.error(requset.msg)
+                        }
+                    })
             } else {
-              ElMessage.error(requset.msg)
+                state.deviceList = []
             }
-          })
-      } else {
-        state.deviceList = []
-      }
 
-    },
+        },
 
-    /**
-     * @公共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;
+        /**
+         * @公共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  //概览 -> 告警统计折线图
-    },
-    /**
-     * @处理公共时间搓 返回数组 -> 年月日时分秒 时间戳
-     */
-    getTimestampAll(state, timestamp) {
-      function add0(m) { return m < 10 ? '0' + m : m }
-      const time = new Date(timestamp);
-      const Y = time.getFullYear(); //年
-      const M = time.getMonth(); //月
-      const D = time.getDate(); //日
-      const HH = time.getHours(); //时，
-      const MM = time.getMinutes(); //分
-      const SS = time.getSeconds(); //秒
-      state.timeProcessing = Y + '-' + add0(M + 1) + '-' + add0(D) + ' ' + add0(HH) + ':' + add0(MM) + ':' + add0(SS);
-    },
-    /**
-     * @公共获取某月的第一天和最后一天
-     */
-    getCurrentMonthLast(state, timeAll) {
-      var date1 = timeAll;
-      date1.setDate(1);
-      var month1 = parseInt(date1.getMonth() + 1);
-      var day1 = date1.getDate();
-      if (month1 < 10) {
-        month1 = '0' + month1
-      }
-      if (day1 < 10) {
-        day1 = '0' + day1
-      }
+                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  //概览 -> 告警统计折线图
+        },
+        /**
+         * @处理公共时间搓 返回数组 -> 年月日时分秒 时间戳
+         */
+        getTimestampAll(state, timestamp) {
+            function add0(m) { return m < 10 ? '0' + m : m }
+            const time = new Date(timestamp);
+            const Y = time.getFullYear(); //年
+            const M = time.getMonth(); //月
+            const D = time.getDate(); //日
+            const HH = time.getHours(); //时，
+            const MM = time.getMinutes(); //分
+            const SS = time.getSeconds(); //秒
+            state.timeProcessing = Y + '-' + add0(M + 1) + '-' + add0(D) + ' ' + add0(HH) + ':' + add0(MM) + ':' + add0(SS);
+        },
+        /**
+         * @公共获取某月的第一天和最后一天
+         */
+        getCurrentMonthLast(state, timeAll) {
+            var date1 = timeAll;
+            date1.setDate(1);
+            var month1 = parseInt(date1.getMonth() + 1);
+            var day1 = date1.getDate();
+            if (month1 < 10) {
+                month1 = '0' + month1
+            }
+            if (day1 < 10) {
+                day1 = '0' + day1
+            }
 
-      var date = timeAll;
-      var currentMonth = date.getMonth();
-      var nextMonth = ++currentMonth;
-      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
-      var oneDay = 1000 * 60 * 60 * 24;
-      var lastTime = new Date(nextMonthFirstDay - oneDay);
-      var month = parseInt(lastTime.getMonth() + 1);
-      var day = lastTime.getDate();
-      if (month < 10) {
-        month = '0' + month
-      }
-      if (day < 10) {
-        day = '0' + day
-      }
-      state.monthList = [date1.getFullYear() + '-' + month1 + '-' + day1, date.getFullYear() + '-' + month + '-' + day]
+            var date = timeAll;
+            var currentMonth = date.getMonth();
+            var nextMonth = ++currentMonth;
+            var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
+            var oneDay = 1000 * 60 * 60 * 24;
+            var lastTime = new Date(nextMonthFirstDay - oneDay);
+            var month = parseInt(lastTime.getMonth() + 1);
+            var day = lastTime.getDate();
+            if (month < 10) {
+                month = '0' + month
+            }
+            if (day < 10) {
+                day = '0' + day
+            }
+            state.monthList = [date1.getFullYear() + '-' + month1 + '-' + day1, date.getFullYear() + '-' + month + '-' + day]
 
-    },
-    /**
-     * @获取当天日期
-     */
-    getNowFormatDate(state, timeAll) {
-      var date = timeAll;
-      var seperator1 = "-";
-      var year = date.getFullYear();
-      var month = date.getMonth() + 1;
-      var strDate = date.getDate();
-      if (month >= 1 && month <= 9) {
-        month = "0" + month;
-      }
-      if (strDate >= 0 && strDate <= 9) {
-        strDate = "0" + strDate;
-      }
-      var currentdate = year + seperator1 + month + seperator1 + strDate;
-      state.dateList = currentdate
+        },
+        /**
+         * @获取当天日期
+         */
+        getNowFormatDate(state, timeAll) {
+            var date = timeAll;
+            var seperator1 = "-";
+            var year = date.getFullYear();
+            var month = date.getMonth() + 1;
+            var strDate = date.getDate();
+            if (month >= 1 && month <= 9) {
+                month = "0" + month;
+            }
+            if (strDate >= 0 && strDate <= 9) {
+                strDate = "0" + strDate;
+            }
+            var currentdate = year + seperator1 + month + seperator1 + strDate;
+            state.dateList = currentdate
+        }
     }
-  }
-})
+})

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

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref ,watch} from 'vue'
 import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 // import { ChartDataType } from "../../data";
@@ -28,96 +28,6 @@ const data = [
       '22:00:00',
     ],
   },
-  {
-    name: 'IB',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
-  {
-    name: 'IC',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
-  {
-    name: 'UA',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
-  {
-    name: 'UB',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
-  {
-    name: 'UC',
-    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    listDate: [
-      '00:00:00',
-      '02:00:00',
-      '04:00:00',
-      '06:00:00',
-      '08:00:00',
-      '10:00:00',
-      '12:00:00',
-      '14:00:00',
-      '16:00:00',
-      '18:00:00',
-      '20:00:00',
-      '22:00:00',
-    ],
-  },
 ]
 
 const dataAll = [
@@ -134,39 +44,20 @@ const dataAll = [
       ],
     },
   },
-  {
-    name: 'IB(A)',
-    type: 'line',
-    smooth: false,
-    data: [0, 0, 0.2, 0, 0, 0, 0, 0.8, 0, 0, 0, 0],
-    symbolSize: 6,
-    markPoint: {
-      data: [
-        { type: 'max', name: 'Max' },
-        { type: 'min', name: 'Min' },
-      ],
-    },
-  },
-  {
-    name: 'IC(A)',
-    type: 'line',
-    smooth: false,
-    data: [0, 0.1, 0, 0, 0, 0.9, 0, 0, 0, 0, 0, 0],
-    symbolSize: 6,
-    markPoint: {
-      data: [
-        { type: 'max', name: 'Max' },
-        { type: 'min', name: 'Min' },
-      ],
-    },
-  },
 ]
 
 const yName = 'kV'
 
 export default defineComponent({
   name: 'CurveCom',
-  setup() {
+   props: {
+    ecahrtsData: Object,
+    title:String
+  },
+
+
+  setup(props) {
+    props
     const store = useStore()
     const sumeChartRef = ref(null)
 
@@ -174,23 +65,55 @@ export default defineComponent({
     const total = computed(() => store.state.Home.worksChartData.total)
     // num
     const num = computed(() => store.state.Home.worksChartData.num)
+    const newDataName=ref('')
 
     // 读取数据 func
     const loading = ref(true)
     const getData = async () => {
+      console.log(props.ecahrtsData)
+      console.log(props.title)
+
       // loading.value = true
       // await store.dispatch('Home/queryWorksChartData')
       loading.value = false
     }
 
+    //监听变化
+    watch(
+      () => props.ecahrtsData,
+      (newVal) => {
+        alert(1)
+        console.log('newVal')     
+      console.log(newVal)     
+      newDataName.value=newVal.name
+      console.log( newDataName.value)
+      }
+    )
+
+    // 定义 watch 监听
+    // watch(
+    //   props.ecahrtsData,
+    //   (newCount) => {
+    //     alert(1)
+    //     console.log(newCount)
+     
+    //   },
+    //   // watch 刚被创建的时候不执行
+    //   { lazy: true }
+    // )
+
+
+
+
+
     onMounted(() => {
       getData()
       let myChart = echarts.init(sumeChartRef.value)
       // 绘制图表
       myChart.setOption({
-        color: ['#FEB70D', '#50F335', '#0DC8FE'],
+        color: ['#FEB70D'],
         title: {
-          text: '同比分析',
+          text: newDataName.value,
           left: 'center',
           textStyle: {
             color: '#9d9d9d',
@@ -281,6 +204,7 @@ export default defineComponent({
       loading,
       total,
       num,
+      newDataName
     }
   },
 })

src/views/dataManage/sameAnalysis/index.vue

@@ -35,7 +35,7 @@
           <div class="block">
             <span class="demonstration">选择时间范围：</span>
             <el-date-picker
-              v-model="value1"
+              v-model="dateTime"
               type="datetimerange"
               range-separator="➥"
               start-placeholder="开始时间"
@@ -52,12 +52,26 @@
           <el-radio-button label="dailyValue">每日值</el-radio-button>
           <el-radio-button label="monthValue">每月值</el-radio-button>
 
+          <el-select
+            v-model="valueCalculation"
+            placeholder="Select"
+            style="width: 100px; margin-left: 10px"
+            v-if="typeSrarch"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+
           <div style="margin-left: 10px">
             <el-button
-              icon="el-icon-search"
+              icon="el-icon-searchData"
               type="primary"
               style="padding: 7px 12px"
-              @click="select()"
+              @click="searchData()"
             >
               查询
             </el-button>
@@ -65,17 +79,20 @@
         </el-radio-group>
       </div>
       <div class="sameEcharts">
-        <echarts></echarts>
+        <echarts :ecahrtsData="ecahrtsData" :title="123"></echarts>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, toRefs } from 'vue'
+import { defineComponent, ref, onMounted } from 'vue'
 import echarts from './ehcarts/index.vue'
 import { ElNotification } from 'element-plus'
 
+import * as api from '@/api/dataManage/sameAnalysis.js'
+import { ElMessage } from 'element-plus'
+
 export default defineComponent({
   name: 'sameAnalysis',
   components: { echarts },
@@ -86,28 +103,70 @@ export default defineComponent({
     const treeCheckedList = ref([])
     const treeData = ref([])
     const tree = ref(null)
+    const typeSrarch = ref(0)
+
+    const valueCalculation = ref()
+    const dateTime = ref('')
+    const ecahrtsData=ref({})
 
     const listTabsChange = (value) => {
       console.log(value)
-      select()
+      if (value == 'allValue') {
+        typeSrarch.value = 0
+      } else if (value == 'dailyValue') {
+        typeSrarch.value = 1
+        valueCalculation.value = 1
+      } else {
+        typeSrarch.value = 2
+        valueCalculation.value = 1
+      }
     }
 
     const currentChecked = (nodeObj, SelectedObj) => {
-      console.log(nodeObj, SelectedObj)
-      if (treeCheckedList.value.length <= 0) {
-        treeCheckedList.value = SelectedObj.checkedNodes[0]
-      } else {
-        console.log('')
-      }
-      // 'userXM' in data
-      tree.value.getCurrentNode(SelectedObj.checkedNodes[0])
-      treeCheckedList.value = SelectedObj.checkedKeys
+      nodeObj, SelectedObj
+      treeCheckedList.value = SelectedObj.checkedNodes
+       treeCheckedList.value = []
+        SelectedObj.checkedNodes.forEach((item) => {
+          treeCheckedList.value.push(item.deviceCode)
+          remove(treeCheckedList.value, item.deviceCode)
+        })
     }
 
-    function select() {
-      console.log(treeCheckedList.value)
+    function remove(arr, item) {
+      let newArr = arr.filter((ele) => {
+        return ele !== item
+      })
+      return newArr
+    }
+
+    function searchData() {
+      ecahrtsData.value={};
       if (treeCheckedList.value.length > 0) {
         console.log('', store.state.deviceList)
+        console.log('treeCheckedList')
+        console.log(treeCheckedList.value)
+        store.commit('TimeAll_function', dateTime.value)
+        const time = store.state.Time_Data;
+
+        api
+          .yearOnYearList({
+            startTime: time[0],
+            endTime: time[1],
+            type: typeSrarch.value,
+            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
+            displayField: treeCheckedList.value,
+          })
+          .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+               
+              ecahrtsData.value=requset.data[0]
+              console.log(requset.data)
+              console.log('父组件中ecahrtsData.value')
+              console.log(ecahrtsData.value)
+            } else {
+              ElMessage.error(requset.msg)
+            }
+          })
       } else {
         console.log('', 1)
         ElNotification({
@@ -122,12 +181,11 @@ export default defineComponent({
     const siteChange = () => {
       store.commit('publicDeviceList')
     }
-    const state = reactive({
-      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-    })
+
+    onMounted(() => {})
+
     return {
       store,
-      ...toRefs(state),
       listTabPosition,
       tree,
       treeData,
@@ -137,11 +195,35 @@ export default defineComponent({
         deviceCode: 'deviceCode',
         id: 'id',
       },
-
-      select,
+      remove,
+      dateTime,
+      searchData,
       currentChecked,
       siteChange,
       listTabsChange,
+      typeSrarch,
+
+      options: ref([
+        {
+          value: 1,
+          label: '平均值',
+        },
+        {
+          value: 2,
+          label: '最大值',
+        },
+        {
+          value: 3,
+          label: '最小值',
+        },
+        {
+          value: 4,
+          label: '累计值',
+        },
+      ]),
+      valueCalculation,
+      ecahrtsData,
+   
     }
   },
 })

src/views/siteManage/basicInfo/index.vue

@@ -233,6 +233,9 @@ import { parseTime, validatorPhone } from '@/utils'
 
 export default defineComponent({
   name: 'BasicInfo',
+  props: {
+    siteId: Number,
+  },
   setup() {
     const store = useStore()
     const formInfo = ref(null)

src/views/siteManage/index.vue

@@ -3,13 +3,13 @@
     <!-- 树形组件start -->
     <div class="grid-content treeDom">
       <div style="text-align: center" class="mb-20">
-        <el-button v-if="treeLevel == 3||groupingId==0"  disabled>
+        <el-button v-if="treeLevel == 3 || groupingId == 0" disabled>
           添加分组
         </el-button>
-        <el-button  v-else  type="primary"  @click="addGroup()" >
+        <el-button v-else type="primary" @click="addGroup()">
           添加分组
         </el-button>
-        <el-button v-if="treeLevel == 3||groupingId==0"  disabled >
+        <el-button v-if="treeLevel == 3 || groupingId == 0" disabled>
           添加站点
         </el-button>
         <el-button v-else type="primary" @click="addSite()">添加站点</el-button>
@@ -24,6 +24,15 @@
         </template>
       </el-input>
       <!-- <el-scrollbar> -->
+
+      <!-- <el-tree
+        :data="data2"
+        show-checkbox
+        node-key="id"
+        :default-expanded-keys="[1]"
+        :default-checked-keys="[368]"
+        :props="defaultProps2"
+      /> -->
       <el-tree
         class="filter-tree siteTree"
         :props="defaultProps"
@@ -35,8 +44,10 @@
         default-expand-all
         :filter-node-method="filterNode"
         ref="tree"
+
+        :current-node-key="defaultExpand"
+
       >
-      
         <template #default="{ node, data }">
           <span
             class="custom-tree-node"
@@ -44,8 +55,7 @@
             @mouseenter="mouseenter(data)"
             @mouseleave="mouseleave(data)"
           >
-
-          <span>{{ node.label }}</span>
+            <span>{{ node.label }}</span>
             <!-- <el-tooltip
                 class="item"
                 effect="dark"
@@ -66,17 +76,22 @@
           </span>
         </template>
       </el-tree>
+
       <!-- </el-scrollbar> -->
     </div>
     <!-- 树形组件end -->
 
     <!-- 站点主题start -->
     <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
-      <el-tabs v-if="treeLevel == 3||groupingId==0" v-model="activeName" type="card">
+      <el-tabs
+        v-if="treeLevel == 3 || groupingId == 0"
+        v-model="activeName"
+        type="card"
+      >
         <el-tab-pane label="基本信息" name="first">
-          <basic-info class="basicInfo"></basic-info>
+          <basic-info class="basicInfo" :siteId="siteId"></basic-info>
         </el-tab-pane>
-        <el-tab-pane label="监控设备" name="second">
+        <el-tab-pane label="监控设备" name="second" :siteId="siteId">
           <watch-dog
             v-on:success="success(res)"
             :avtiveName="activeName"
@@ -95,8 +110,11 @@
       </el-tabs>
 
       <!-- 分组信息start -->
-      <group-info-com :groupingId="groupingId" :label="label"   @func="getMsgFormSon2"
-       v-else
+      <group-info-com
+        :groupingId="groupingId"
+        :label="label"
+        @func="getMsgFormSon2"
+        v-else
       ></group-info-com>
       <!-- 分组信息end -->
 
@@ -117,15 +135,13 @@
         :flag="showDialog2"
       ></add-site-com>
       <!-- 新建站点end -->
-
-
     </div>
     <!-- 站点主题end -->
   </div>
 </template>
 
 <script>
-import { defineComponent, ref, reactive, watch, onMounted } from 'vue'
+import { defineComponent, ref, reactive, watch, onMounted,nextTick } from 'vue'
 
 import basicInfo from './basicInfo'
 import WatchDog from './watchDog'
@@ -152,21 +168,63 @@ export default defineComponent({
     addSiteCom,
   },
   setup() {
-    const showTree=ref(true)
+    const showTree = ref(true)
+    const defaultExpand=ref(0)
     const showDialog = ref(false)
     const showDialog2 = ref(false)
     const dialogTitle = ref('')
     const treeLevel = ref(3)
-    const groupingId=ref(0);
-    const label=ref('')
-    const activeName = ref('five')
+    const groupingId = ref(0)
+    const siteId = ref(368)
+    const label = ref('')
+    const activeName = ref('second')
     const filterText = ref('')
     const data = ref([
       {
         label: '所有站点',
-        children: []
+        children: [],
       },
     ])
+
+    // const data2 = ref([
+    //   {
+    //     grouping_id: 1,
+    //     id: 1,
+    //     label: '所有站点',
+    //     children: [
+    //       {
+    //         id: 1,
+    //         label: '分组测试1',
+    //          grouping_id: 1,
+    //         children: [
+    //           {
+    //             id: 368,
+    //             label: '测试站点89',
+    //           },
+    //           {
+    //             id: 367,
+    //             label: '测试站点88',
+    //           },
+    //         ],
+    //       },
+    //       {
+    //         grouping_id: 0,
+    //         id: 5,
+    //         label: '中国铁路上海...',
+    //       },
+    //       {
+    //         grouping_id: 0,
+    //         id: 5,
+    //         label: '上海拓石...',
+    //       },
+    //     ],
+    //   },
+    // ])
+    // const defaultProps2 = ref({
+    //   children: 'children',
+    //   label: 'label',
+    // })
+
     const defaultProps = ref({
       children: 'children',
       label: 'label',
@@ -175,7 +233,7 @@ export default defineComponent({
     const getMsgFormSon = () => {
       activeName.value = 'third'
     }
-    const getMsgFormSon2=()=>{
+    const getMsgFormSon2 = () => {
       siteTreeList()
     }
     function mouseenter(data) {
@@ -191,11 +249,19 @@ export default defineComponent({
     const handleNodeClick = (data, obj, node) => {
       data, node
       console.log(obj.data)
-      treeLevel.value = obj.level;
-      groupingId.value=obj.data.grouping_id
-      label.value=obj.data.label
-      console.log(groupingId.value)
-      console.log(label.value)
+      treeLevel.value = obj.level
+      groupingId.value = obj.data.grouping_id
+      label.value = obj.data.label
+
+      if (treeLevel.value == 3) {
+        siteId.value = obj.data.id
+      }
+      if (treeLevel.value == 2 && groupingId.value == 0) {
+        // console.log(obj.data)
+        siteId.value = obj.data.id
+      }
+      console.log('父组件的siteId')
+      console.log(siteId.value)
     }
     const tree = ref(null)
 
@@ -210,13 +276,11 @@ export default defineComponent({
     const closeDialog = () => {
       showDialog.value = false
       showDialog2.value = false
-       siteTreeList()
-
+      siteTreeList()
 
       treeLevel.value = 3
     }
 
-    
     //新建分组
     const tableItem = reactive([])
     const addGroup = () => {
@@ -255,11 +319,15 @@ export default defineComponent({
       api.siteTreeList({}).then((requset) => {
         if (requset.status === 'SUCCESS') {
           var jsona = JSON.stringify(requset.data)
-          var jsonb = jsona.replace(/"grouping_name"/g, '"label"');
-          jsonb=jsonb.replace(/"site_list"/g, '"children"');
-          jsonb=jsonb.replace(/"site_name"/g, '"label"');
+          var jsonb = jsona.replace(/"grouping_name"/g, '"label"')
+          jsonb = jsonb.replace(/"site_list"/g, '"children"')
+          jsonb = jsonb.replace(/"site_name"/g, '"label"')
+          jsonb = jsonb.replace(/"site_id"/g, '"id"')
           var jsonc = JSON.parse(jsonb)
-          data.value[0].children=jsonc
+          data.value[0].children = jsonc
+          //  data2.value[0].children = jsonc
+          console.log(data)
+          // console.log(data2)
         } else {
           ElMessage.error(requset.msg)
         }
@@ -267,9 +335,16 @@ export default defineComponent({
     }
     onMounted(() => {
       // console.log(groupingId.value)
-      siteTreeList()
+      siteTreeList();
+
+    
     })
 
+    nextTick(() => {
+          // defaultExpand.value = data.value[0].children.id
+          // tree.value.setCurrentKey(tree[0].node.id)
+        })
+
     return {
       showDialog,
       showDialog2,
@@ -281,9 +356,15 @@ export default defineComponent({
       defaultProps,
       tableItem,
       groupingId,
+      siteId,
       label,
 
       showTree,
+
+      // data2,
+      // defaultProps2,
+
+      defaultExpand,
       getMsgFormSon,
       getMsgFormSon2,
       mouseenter,

src/views/siteManage/watchDog/index.vue

@@ -145,7 +145,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, reactive, onMounted } from 'vue'
+import { defineComponent, ref, reactive, onMounted,watch } from 'vue'
 import * as api from '@/api/siteManage/watchDog.js'
 import { ElMessage } from 'element-plus'
 
@@ -154,6 +154,7 @@ import Clone from './clone'
 
 export default defineComponent({
   components: { DialogComponent, Clone },
+  props:[ 'siteId'],
   setup(props, { emit }) {
     const total = ref(0)
     const pageSize = ref(15)
@@ -178,9 +179,11 @@ export default defineComponent({
 
     //监控设备列表
     function deviceNewsList() {
+      console.log('props.siteId')
+      console.log(props.siteId)
       api
         .deviceNewsList({
-          siteId: 1,
+          siteId: 1,    //字段写活？
           size: pageSize.value,
           current: currentPage.value,
         })
@@ -248,6 +251,15 @@ export default defineComponent({
     const cancelEvent = () => {
       console.log('cancel!')
     }
+    //监听变化
+    watch(
+      () => props.siteId,
+      (newVal) => {
+        console.log('newVal')
+        console.log(newVal)
+        //  form.value.groupingName = newVal
+      }
+    )
 
     onMounted(() => {
       deviceNewsList()