新增事件告警页/修改store

src/main.js

@@ -26,9 +26,10 @@ const app = createApp(App);
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
 
-
 app.use(router).use(store).use(ElementPlus, { locale }).use(Vuex).use(echarts).use(Antd).mount('#app');
 
+store.commit("getTimeAll");
+
 /*路由守卫*/
 router.beforeEach((to, from, next) => {
     /* 路由发生变化修改页面title */

src/store/index.js

@@ -4,7 +4,150 @@ export default createStore({
     state: {
         siteId: 1,//公共api请求参数->siteId
         Time_Data: [],//公共api请求参数->Time_Data
-        queryType: '',//监控设备->数据报表api请求参数->queryType
+        timearr: [],//公共处理开始时间和结束时间中的时间段天数 值存储
+        itemStyle: [
+            {
+                normal: {
+                    borderColor: "rgba(0,244,253,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(0,244,253,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(253,143,0,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(253,143,0,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(0,255,18,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(0,255,18,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(0,255,230,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(0,255,230,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(142,51,255,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(142,51,255,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(77,200,120,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(77,200,120,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(255,47,47,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(255,47,47,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(70,100,255,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(70,100,255,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(255,143,53,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(255,143,53,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(150,150,50,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(150,150,50,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(70,192,255,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(70,192,255,1)",
+                    },
+                },
+            },
+            {
+                normal: {
+                    borderColor: "rgba(20,99,100,1)",
+                    borderWidth: 2,
+                    color: "rgba(6, 68, 83, 1)",
+                    lineStyle: {
+                        width: 2, //折线宽度
+                        color: "rgba(20,99,100,1)",
+                    },
+                },
+            },
+        ],//公共echarts图表样式
+        Time_All: [],//公共时间 返回数组 -> 年月日时分秒 时间戳
+
+
+        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: [
             {
                 name: "电流",
@@ -92,7 +235,7 @@ export default createStore({
                     { name: "电压中断次数", value: "Ust" },
                 ],
             },
-        ],//数据报表->默认tabs数据
+        ],//设备监控--->数据报表->默认tabs数据
         se_tabs: [
             { label: '电流', name: "I" },
             { label: '功率', name: "P" },
@@ -104,13 +247,7 @@ export default createStore({
             { label: '谐波电流有效值', name: "RMS" },
             { label: '通讯参数', name: "DDB" },
             { label: '电压突变', name: "VT" },
-        ],
-
-        run_off_Status: null,//运行状态统计->echarts->OFF次数分布和运行状态曲线图表 api信息存储
-
-        timearr: [],//公共处理开始时间和结束时间中的时间段天数 值存储
-
-        HistoricalCurve:null,//历史趋势->echarts->曲线图表 api信息存储
+        ],//设备监控--->历史趋势->默认tabs数据
     },
     mutations: {
         /**
@@ -158,7 +295,7 @@ export default createStore({
         /**
          * @历史趋势 -> echarts ->曲线图表 api信息存储
          */
-        HistoricalCurve(state,data){
+        HistoricalCurve(state, data) {
             state.HistoricalCurve = data
         },
         /**
@@ -271,6 +408,49 @@ export default createStore({
                 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
+            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/site/Device_motore.vue

@@ -99,7 +99,13 @@
             @tab-click="handleClick2"
             class="se-content"
           >
-            <el-tab-pane v-for="tabs in $store.state.se_tabs" :key="tabs" :label="tabs.label" :name="tabs.name" :class="tabs.name"></el-tab-pane>
+            <el-tab-pane
+              v-for="tabs in $store.state.se_tabs"
+              :key="tabs"
+              :label="tabs.label"
+              :name="tabs.name"
+              :class="tabs.name"
+            ></el-tab-pane>
             <el-button type="primary" class="preservation" @click="preservation"
               >保存为图片</el-button
             >
@@ -232,11 +238,13 @@
                 <div>本月 OFF 次数</div>
               </div>
               <div class="ctn_one">
-                <div>0</div>
+                <div>{{ minute }} 分钟</div>
                 <div>本日 OFF 时长</div>
               </div>
               <div>
-                <el-button type="primary" class="primary">下载</el-button>
+                <el-button type="primary" class="primary" @click="preservation"
+                  >下载</el-button
+                >
               </div>
             </div>
             <div class="ctn_time">
@@ -288,15 +296,6 @@ const cityOptions = [
   "通讯参数",
   "电压突变",
 ];
-const time = new Date();
-const Y = time.getFullYear(); //年
-const M = time.getMonth(); //月
-const D = time.getDate(); //日
-// const H = time.getHours(); //时，
-// const MM = time.getMinutes(); //分
-// const S = time.getSeconds(); //秒
-// const timestamp = new Date().getTime();//时间戳
-
 export default {
   name: "site_details",
   components: {
@@ -320,9 +319,9 @@ export default {
       state_array: [], //实时数据->状态接口返回信息存储
       th_tableData: [], //数据报表->table表格数据存储
 
-      se_defaultTime: [new Date(Y, M, D, 0, 0, 0), new Date()], //历史趋势时间选择器v-model
-      th_defaultTime: [new Date(Y, M, D, 0, 0, 0), new Date()], //数据报表时间选择器v-model
-      fh_defaultTime: [new Date(Y, M, 1, 0, 0, 0), new Date()], //运行状态统计时间选择器v-model
+      se_defaultTime: this.$store.state.se_defaultTime, //历史趋势时间选择器v-model
+      th_defaultTime: this.$store.state.th_defaultTime, //数据报表时间选择器v-model
+      fh_defaultTime: this.$store.state.fh_defaultTime, //运行状态统计时间选择器v-model
 
       disabledDate(date) {
         return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
@@ -331,6 +330,7 @@ export default {
       loadLive: "ON", //运行状态统计->当前回路带电/停电
       month_count: 0, //运行状态统计->本月off次数
       day_count: 0, //运行状态统计->本日off次数
+      minute: 0, //运行状态统计->本日off时长
 
       value: "",
       checkAll: false, //数据报表->全选按钮是否选中
@@ -357,8 +357,8 @@ export default {
   methods: {
     //最外层tabs切换事件触发
     handleClick(tab, event) {
-      this.ac_content = "model";//将实时数据->恢复默认内部tabs选中
-      this.se_content = "I";//将历史趋势->恢复默认内部tabs选中
+      this.ac_content = "model"; //将实时数据->恢复默认内部tabs选中
+      this.se_content = "I"; //将历史趋势->恢复默认内部tabs选中
       for (let i in event.path) {
         if (event.path[i].className === "el-tabs__nav is-top") {
           var childNodes = event.path[i].childNodes;
@@ -480,10 +480,10 @@ export default {
 
       function LoopStatus() {
         api.LoopStatus({ siteId: siteid }).then((requset) => {
-          // console.log(requset);
           if (requset.status === "SUCCESS") {
             _this.loadLive = requset.data[0].LoadLive == 1 ? "ON" : "OFF";
             _this.month_count = requset.data[0].month_count;
+            _this.minute = requset.data[0].minute;
             _this.day_count = requset.data[0].day_count;
           } else {
             ElMessage.success({
@@ -499,7 +499,7 @@ export default {
           .then((requset) => {
             if (requset.status === "SUCCESS") {
               _this.$store.commit("run_off_Status", requset.data);
-              // console.log(requset);
+              console.log(requset);
             } else {
               ElMessage.success({
                 message: requset.msg,
@@ -515,20 +515,27 @@ export default {
      * @历史趋势api请求
      */
     HistoricalCurve_api(siteid) {
-      var _this = this
+      var _this = this;
       _this.$store.commit("TimeAll_function", _this.se_defaultTime);
       var time = _this.$store.state.Time_Data;
 
-      api.HistoricalCurve({ siteId: siteid ,startTime:time[0],endTime:time[1],queryType:_this.se_content}).then((requset) => {
-        if (requset.status === "SUCCESS") {
-          _this.$store.commit("HistoricalCurve", requset.data);
-        } else {
-          ElMessage.success({
-            message: requset.msg,
-            type: "success",
-          });
-        }
-      });
+      api
+        .HistoricalCurve({
+          siteId: siteid,
+          startTime: time[0],
+          endTime: time[1],
+          queryType: _this.se_content,
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            _this.$store.commit("HistoricalCurve", requset.data);
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
     },
     /**
      * @判断最外层tabs切换时请求api
@@ -543,28 +550,23 @@ export default {
         : "";
     },
     /**
-     * @历史趋势ehcarts保存图片
+     * @调用公共ehcarts保存图片
      */
     preservation() {
-      var url = this.$refs.main.chart.getConnectedDataURL({
-        pixelRatio: 15,
-        backgroundColor: "black",
-        excludeComponents: ["toolbox"],
-        type: "png",
-      });
-      var $a = document.createElement("a");
-      var type = "png";
-      //图片名称
-      $a.download = this.se_label + "." + 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);
+      if (this.activeName === "second") {
+        this.$store.commit("getConnectedDataURL", [
+          this.$refs.main.chart,
+          this.se_label,
+        ]);
+      } else if (this.activeName === "fourth") {
+        this.$store.commit("getConnectedDataURL", [
+          this.$refs.statecurve.chart,
+          "运行状态曲线",
+        ]);
+        this.$store.commit("getConnectedDataURL", [
+          this.$refs.distion.chart,
+          "OFF次数分布",
+        ]);
       }
     },
     /**

src/views/site/Event_alarm.vue

@@ -1,19 +1,170 @@
 <template>
   <div>
-    <section class="mainbox"></section>
+    <section class="mainbox">
+      <div id="Event_content">
+        <div class="back_all Cont_One">
+          <div class="Ctn_Time">
+            <span>选择时间范围 :</span>
+            <el-date-picker
+              v-model="defaultTime"
+              type="datetimerange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              range-separator="~"
+              :disabledDate="disabledDate"
+            >
+            </el-date-picker>
+          </div>
+          <div class="Ctn_Time">
+            <span>状态 :</span>
+            <el-select
+              id="state_select"
+              popper-class="state_select"
+              v-model="value"
+              @change="state_select"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="(item, index) in options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="Ctn_Time">
+            <el-button type="primary" class="Ctn_btn">查询</el-button>
+          </div>
+        </div>
+        <div class="back_all Cont_Two"></div>
+        <div class="back_all Cont_Three"></div>
+      </div>
+    </section>
   </div>
 </template>
 <script>
 export default {
   data() {
-    return {};
+    return {
+      options: [{label:'已确认',value:0}], //状态下拉列表值存储
+      value: 0, //状态下拉列表默认值
+      defaultTime: [
+        new Date(
+          this.$store.state.Time_All[0],
+          this.$store.state.Time_All[1],
+          1,
+          0,
+          0,
+          0
+        ),
+        new Date(),
+      ], //时间选择器v-model
+      disabledDate(date) {
+        return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
+      },
+    };
   },
   name: "event_alarm",
   components: {},
   mounted() {},
-  methods: {},
+  methods: {
+    state_select(val) {
+      console.log(val);
+    },
+  },
 };
 </script>
 
+
+<style>
+/**
+ * @下拉框样式
+ */
+#state_select {
+  width: 194px !important;
+  border-radius: 3px !important;
+  border: 1px solid rgba(3, 107, 119, 1) !important;
+  color: #fff !important;
+}
+#Event_content .el-input__suffix {
+  top: 0 !important;
+  line-height: 30px !important;
+}
+#Event_content .el-input--suffix .el-select__caret {
+  color: #01ccd7 !important;
+  font-size: 15px !important;
+  width: 16px !important;
+  line-height: 30px !important;
+}
+.state_select {
+  border: 1px solid rgba(0, 107, 119, 1) !important;
+}
+.state_select .el-scrollbar{
+  width: 100%;
+}
+.state_select .el-popper__arrow::before {
+  background: rgba(0, 107, 119, 1) !important;
+}
+</style>
+<style scoped lang="less">
+#Event_content {
+  width: 98%;
+  margin: 0 auto;
+  min-height: 840px;
+}
+#Event_content .back_all {
+  background-color: rgba(0, 244, 253, 0.1);
+  border: 1px solid rgba(0, 244, 253, 0.1);
+}
+#Event_content .Cont_One {
+  min-height: 60px;
+  margin-bottom: 10px;
+  display: flex;
+
+  .Ctn_Time {
+    margin-left: 10px;
+    margin-right: 40px;
+    line-height: 60px;
+
+    span {
+      margin-right: 10px;
+    }
+    .Ctn_btn {
+      height: 30px;
+      min-height: 30px;
+      line-height: 3px;
+    }
+  }
+}
+#Event_content .Cont_Two {
+  min-height: 300px;
+  margin-bottom: 10px;
+}
+#Event_content .Cont_Three {
+  min-height: 470px;
+}
+</style>
+
+
+
 <style>
+/* 
+  公共时间选择器css样式
+*/
+#Event_content .el-input__inner {
+  width: 414px;
+  height: 30px !important;
+  line-height: 30px !important;
+  background-color: transparent;
+  border: 1px solid rgba(3, 107, 119, 1);
+}
+#Event_content .el-range-input {
+  background-color: transparent;
+  color: #fff;
+}
+#Event_content .el-range-separator {
+  line-height: 20px;
+  color: #fff;
+}
 </style>

src/views/site_ehcarts/Device_StateCurve.vue

@@ -79,6 +79,7 @@ export default {
       msgFormSon: null,
       data_time: [],
       data: [],
+      cont_time: 0,
     };
   },
   mounted() {
@@ -117,8 +118,10 @@ export default {
             });
           }
         }
+        run_off_Status[i].name === "offTime"
+          ? (this.cont_time = run_off_Status[i].list)
+          : "";
       }
-      // console.log(_this.data_time,_this.data,run_off_Status)
 
       var option;
       option = {
@@ -132,7 +135,7 @@ export default {
             },
           },
           {
-            text: `OFF时长：${0}分钟`,
+            text: `OFF时长：${this.cont_time} 分钟`,
             left: "right",
             padding: [0, "7", 0, 0],
             textStyle: {

src/views/site_ehcarts/Device_second.vue

@@ -75,6 +75,105 @@ export default {
             },
           },
         },
+        {
+          normal: {
+            borderColor: "rgba(0,255,230,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(0,255,230,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(142,51,255,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(142,51,255,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(77,200,120,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(77,200,120,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(255,47,47,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(255,47,47,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(70,100,255,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(70,100,255,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(255,143,53,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(255,143,53,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(150,150,50,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(150,150,50,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(70,192,255,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(70,192,255,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(20,99,100,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(20,99,100,1)",
+            },
+          },
+        },
       ],
       msgFormSon: null,
       data: [],
@@ -250,7 +349,7 @@ export default {
         series: this.series_all,
       };
 
-      chart.setOption(option,true);
+      chart.setOption(option, true);
       window.addEventListener("resize", () => {
         chart.resize();
       });