linechart传值 故障抢修

src/store/index.js

@@ -2,11 +2,10 @@ import { createStore } from 'vuex'
 
 export default createStore({
     state: {
-        siteId: 1,//公共api请求参数->siteId
-        Time_Data: [],//公共api请求参数->Time_Data
-        timearr: [],//公共处理开始时间和结束时间中的时间段天数 值存储
-        itemStyle: [
-            {
+        siteId: 1, //公共api请求参数->siteId
+        Time_Data: [], //公共api请求参数->Time_Data
+        timearr: [], //公共处理开始时间和结束时间中的时间段天数 值存储
+        itemStyle: [{
                 normal: {
                     borderColor: "rgba(0,244,253,1)",
                     borderWidth: 2,
@@ -138,18 +137,17 @@ export default createStore({
                     },
                 },
             },
-        ],//公共echarts图表样式
-        Time_All: [],//公共时间 返回数组 -> 年月日时分秒 时间戳
+        ], //公共echarts图表样式
+        Time_All: [], //公共时间 返回数组 -> 年月日时分秒 时间戳
 
 
-        queryType: '',//设备监控--->数据报表api请求参数->queryType
-        run_off_Status: null,//设备监控--->运行状态统计->echarts->OFF次数分布和运行状态曲线图表 api信息存储
-        HistoricalCurve: null,//设备监控--->历史趋势->echarts->曲线图表 api信息存储
+        queryType: '', //设备监控--->数据报表api请求参数->queryType
+        run_off_Status: null, //设备监控--->运行状态统计->echarts->OFF次数分布和运行状态曲线图表 api信息存储
+        HistoricalCurve: null, //设备监控--->历史趋势->echarts->曲线图表 api信息存储
         se_defaultTime: [], //设备监控--->历史趋势时间选择器v-model
         th_defaultTime: [], //设备监控--->数据报表时间选择器v-model
         fh_defaultTime: [], //设备监控--->运行状态统计时间选择器v-model
-        table_list: [
-            {
+        table_list: [{
                 name: "电流",
                 list: [
                     { name: "A相电流", value: "Ia" },
@@ -235,7 +233,7 @@ export default createStore({
                     { name: "电压中断次数", value: "Ust" },
                 ],
             },
-        ],//设备监控--->数据报表->默认tabs数据
+        ], //设备监控--->数据报表->默认tabs数据
         se_tabs: [
             { label: '电流', name: "I" },
             { label: '功率', name: "P" },
@@ -247,19 +245,22 @@ export default createStore({
             { label: '谐波电流有效值', name: "RMS" },
             { label: '通讯参数', name: "DDB" },
             { label: '电压突变', name: "VT" },
-        ],//设备监控--->历史趋势->默认tabs数据
+        ], //设备监控--->历史趋势->默认tabs数据
+
+        trendIco: null, //事件告警--->事件告警统计->echarts->柱状图 api信息存储
+        trendIco_state: null, //事件告警--->事件告警统计->select状态api信息存储
+        trendIco_table: [
+            { label: '发生时间', porp: 'soeTime' },
+            { label: '告警描述', porp: 'measName' },
+            { label: '设备', porp: 'deviceCode' },
+            { label: '告警类型', porp: 'alarmName' },
+            { label: '状态', porp: 'handlingStatus' },
+            { label: '处理人', porp: 'handler' },
+            { label: '处理时间', porp: 'handlingTime' },
+        ], //事件告警--->事件告警统计->表格默认值存储
+
 
-        trendIco: null,//事件告警--->事件告警统计->echarts->柱状图 api信息存储
-        trendIco_state:null,//事件告警--->事件告警统计->select状态api信息存储
-        trendIco_table:[
-            {label:'发生时间',porp:'soeTime'},
-            {label:'告警描述',porp:'measName'},
-            {label:'设备',porp:'deviceCode'},
-            {label:'告警类型',porp:'alarmName'},
-            {label:'状态',porp:'handlingStatus'},
-            {label:'处理人',porp:'handler'},
-            {label:'处理时间',porp:'handlingTime'},
-        ]//事件告警--->事件告警统计->表格默认值存储
+        trendIcoCount: null,
     },
     mutations: {
         /**
@@ -279,27 +280,27 @@ export default createStore({
             state.queryType = ''
             var checked = ''
             for (let i in checked_list) {
-                checked_list[i] === "电流"
-                    ? checked = "I"
-                    : checked_list[i] === "功率"
-                        ? checked = "P"
-                        : checked_list[i] === "电度"
-                            ? checked = "KWh"
-                            : checked_list[i] === "电压"
-                                ? checked = "V"
-                                : checked_list[i] === "温度"
-                                    ? checked = "C"
-                                    : checked_list[i] === "频率"
-                                        ? checked = "HZ"
-                                        : checked_list[i] === "功率因数"
-                                            ? checked = "PS"
-                                            : checked_list[i] === "谐波电流有效值"
-                                                ? checked = "RMS"
-                                                : checked_list[i] === "通讯参数"
-                                                    ? checked = "DDB"
-                                                    : checked_list[i] === "电压突变"
-                                                        ? checked = "VT"
-                                                        : ""
+                checked_list[i] === "电流" ?
+                    checked = "I" :
+                    checked_list[i] === "功率" ?
+                    checked = "P" :
+                    checked_list[i] === "电度" ?
+                    checked = "KWh" :
+                    checked_list[i] === "电压" ?
+                    checked = "V" :
+                    checked_list[i] === "温度" ?
+                    checked = "C" :
+                    checked_list[i] === "频率" ?
+                    checked = "HZ" :
+                    checked_list[i] === "功率因数" ?
+                    checked = "PS" :
+                    checked_list[i] === "谐波电流有效值" ?
+                    checked = "RMS" :
+                    checked_list[i] === "通讯参数" ?
+                    checked = "DDB" :
+                    checked_list[i] === "电压突变" ?
+                    checked = "VT" :
+                    ""
                 state.queryType += checked_list.length > 1 ? checked + "," : checked;
             }
             state.queryType = checked_list.length > 1 ? state.queryType.slice(0, state.queryType.length - 1) : state.queryType
@@ -322,7 +323,7 @@ export default createStore({
                 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)
+                    // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
                 state.Time_Data.push(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
             }
         },
@@ -346,8 +347,8 @@ export default createStore({
                 k = k + 24 * 60 * 60 * 1000;
             }
             state.timearr = arrTime
-            // return arrTime;
-            // 时间格式处理
+                // return arrTime;
+                // 时间格式处理
             function datetimeparse(timestamp, format, prefix) {
                 if (typeof timestamp == "string") {
                     timestamp = Number(timestamp);
@@ -373,37 +374,37 @@ export default createStore({
                 } else {
                     newtimestamp = null;
                 }
-                let dateobj = newtimestamp
-                    ? new Date(parseInt(newtimestamp))
-                    : new Date();
+                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);
+                    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();
+                    dateobj.getMinutes() > 9 ?
+                    dateobj.getMinutes() :
+                    "0" + dateobj.getMinutes();
                 let ss =
-                    dateobj.getSeconds() > 9
-                        ? dateobj.getSeconds()
-                        : "0" + dateobj.getSeconds();
+                    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(/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 : "";
@@ -451,11 +452,11 @@ export default createStore({
             const HH = time.getHours(); //时，
             const MM = time.getMinutes(); //分
             const SS = time.getSeconds(); //秒
-            const timestamp = new Date().getTime();//时间戳
+            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
-            state.th_defaultTime = [new Date(Y, M, D, 0, 0, 0), new Date()]//设备监控--->数据报表时间选择器v-model
-            state.fh_defaultTime = [new Date(Y, M, 1, 0, 0, 0), new Date()]//设备监控--->运行状态统计时间选择器v-model  //概览 -> 告警统计折线图
+            state.se_defaultTime = [new Date(Y, M, D, 0, 0, 0), new Date()] //设备监控--->历史趋势时间选择器v-model
+            state.th_defaultTime = [new Date(Y, M, D, 0, 0, 0), new Date()] //设备监控--->数据报表时间选择器v-model
+            state.fh_defaultTime = [new Date(Y, M, 1, 0, 0, 0), new Date()] //设备监控--->运行状态统计时间选择器v-model  //概览 -> 告警统计折线图
         },
     }
-})
+})

src/views/home/components/lineChart.vue

@@ -5,11 +5,9 @@
 import * as echarts from "echarts";
 
 export default {
-  props: ['ftrendIcoCount'],
+  props: ["ftrendIcoCount"],
   data() {
-    return {
-
-    };
+    return {};
   },
 
   mounted() {
@@ -21,7 +19,16 @@ export default {
   beforeUnmount() {
     window.removeEventListener("resize", this.chart);
   },
-
+  watch: {
+    'ftrendIcoCount': {
+      immediate: true, // 首次加载的时候执行函数
+      deep: true, // 深入观察,监听数组值，对象属性值的变化
+      handler: function () {
+        console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
+        this.initChart();
+      },
+    },
+  },
   methods: {
     //次数分布折线图
     initChart() {
@@ -32,7 +39,7 @@ export default {
       // for (var i = 0; i < 32; i++) {
       //   arr.push(i);
       // }
-      var arr=this.ftrendIcoCount[0].listDate;
+      var arr = this.ftrendIcoCount[0].listDate;
 
       option = {
         color: ["#00F4FD", "#FD8F00"],
@@ -94,7 +101,7 @@ export default {
         series: [
           {
             // name: "故障数量",
-            name:this.ftrendIcoCount[0].name,
+            name: this.ftrendIcoCount[0].name,
             type: "line",
             smooth: false, // 曲线是否平滑显示
             data: this.ftrendIcoCount[0].list,
@@ -107,10 +114,10 @@ export default {
             // symbol: 'circle',
           },
           {
-            name:this.ftrendIcoCount[1].name,
+            name: this.ftrendIcoCount[1].name,
             type: "line",
             smooth: false, // 曲线是否平滑显示
-           data: this.ftrendIcoCount[1].list,
+            data: this.ftrendIcoCount[1].list,
             // data: [
             //   30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
             //   240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
@@ -122,7 +129,7 @@ export default {
         ],
       };
 
-      chart.setOption(option);
+      chart.setOption(option, true);
       window.addEventListener("resize", () => {
         chart.resize();
       });

src/views/home/index.vue

@@ -28,7 +28,7 @@
         </div>
         <div class="column">
           <div class="panel deviceSum">
-            <div class="filterSec" style="top:.7rem">
+            <div class="filterSec" style="top: 0.7rem">
               <!-- <select name="" id="">
                 <option value="3">日</option>
                 <option value="4">月</option>
@@ -87,7 +87,7 @@
                 range-separator="~"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
-                 @change="trendIcoCount_api()"
+                @change="trendIcoCount_api()"
               >
               </el-date-picker>
             </div>
@@ -132,8 +132,8 @@ export default {
   data() {
     return {
       fDefaultTime: [
-       '2021-6-12 00:00:00',
-        '2021-7-12 00:00:00',
+        new Date("2021-6-12 00:00:00"),
+        new Date("2021-7-12 00:00:00"),
       ],
       dDefaultTime: [
         new Date(2000, 10, 10, 10, 10),
@@ -192,15 +192,19 @@ export default {
     },
     //故障抢修echarts折线图
     trendIcoCount_api() {
-      
+      var _this = this;
+      _this.$store.commit("TimeAll_function", this.fDefaultTime);
+      var time = _this.$store.state.Time_Data;
+
       api
         .trendIco_api({
           // startTime: "2021-6-12 00:00:00",
           // endTime: "2021-7-16 00:00:00",
-          startTime: this.fDefaultTime[0],
-          endTime: this.fDefaultTime[1],
+          startTime: time[0],
+          endTime: time[1],
         })
         .then((requset) => {
+          this.$store.state.trendIcoCount = requset.data
           this.trendIcoCount = requset.data;
           // console.log(this.trendIcoCount)
         });