压风系统系统图

src/components/monitor/detailedView.vue

@@ -1,188 +1,321 @@
 <template>
   <div class="border">
-    <div style="text-align: right;padding-top:15px">
-      <span class="bottom_01" :style="{backgroundColor:chooseColor==='30'? '#2b85e4':''}"
-            @click="chooseDate('30')">实时</span>
-      <span class="bottom_01" :style="{backgroundColor:chooseColor==='1'? '#2b85e4':''}"
-            @click="chooseDate('1')">近1天</span>
-      <span class="bottom_01" :style="{backgroundColor:chooseColor==='10'? '#2b85e4':''}"
-            @click="chooseDate('10')">近10天</span>
-      <span class="bottom_01" :style="{backgroundColor:chooseColor==='20'? '#2b85e4':''}"
-            @click="chooseDate('20')">近20天</span>
+    <div style="text-align: right; padding-top: 10px; margin-right: 40px">
+      <button
+        type="button"
+        class="bottom_01"
+        :style="{ backgroundColor: chooseDatetime === '0' ? 'aqua' : '' }"
+        @click="chooseDate('0')"
+      >
+        实时
+      </button>
+      <button
+        type="button"
+        class="bottom_01"
+        :style="{ backgroundColor: chooseDatetime === '1' ? 'aqua' : '' }"
+        @click="chooseDate('1')"
+      >
+        近1天
+      </button>
+      <button
+        type="button"
+        class="bottom_01"
+        :style="{ backgroundColor: chooseDatetime === '10' ? 'aqua' : '' }"
+        @click="chooseDate('10')"
+      >
+        近10天
+      </button>
+      <button
+        type="button"
+        class="bottom_01"
+        :style="{ backgroundColor: chooseDatetime === '20' ? 'aqua' : '' }"
+        @click="chooseDate('20')"
+      >
+        近20天
+      </button>
     </div>
-    <div id="transactionFlowView" style="height:180px;width: 100%;margin-bottom: 10px;"></div>
+    <!-- <div id="transactionFlowView" style="height:180px;width: 100%;margin-bottom: 10px;"></div> -->
+    <div
+      ref="testLine"
+      style="width: 780px; height: 250px; margin-top: -30px; margin: 0px auto"
+    ></div>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-  name: "detailedView",
   data() {
     return {
-      begin:        this.formatDate(new Date()),	//是	string	开始时间
-      end:          this.formatDate(new Date()),  //是	string	截止日期
-      timer:        '',
-      monitorId:    '',
-      chooseColor:  '30',
-      viewNum:      [],
-      viewData:     [],
-      type:         'second',
-      days:         ''
-    }
+      chooseDatetime: "0",
+      title: "测试",
+      type: "fuhe_after",
+      unit: "",
+      yData: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
+      count: 0,
+
+      myChart: null,
+      option: {
+        color: ["#41D6C3", "#FA8072"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            console.log("params", params);
+            var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        legend: {
+          orient: "vertical",
+          x: "left",
+          y: "top",
+          // data: ["抽气流量", "排气流量"],
+          textStyle: {
+            fontWeight: "normal",
+            color: "#fff",
+          },
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: [],
+          },
+        ],
+        title: {
+          text: this.title,
+          padding: [5, 230],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+
+        series: [
+          {
+            name: this.title,
+            type: "line",
+            symbol: "none",
+            markPoint: {
+              label: {
+                normal: {
+                  show: true,
+                  backgroundColor: "#fff",
+                  position: "top",
+                  color: "#5AAAFA",
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 1,
+                  padding: 8,
+                  formatter: "{b}: {c} ",
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            // lineStyle: { normal: { color: "#41D6C3", width: 1 } },
+            lineStyle: {
+              width: 2,
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: "#9effff",
+                },
+                {
+                  offset: 1,
+                  color: "#9E87FF",
+                },
+              ]),
+            },
+            areaStyle: { normal: { color: "#41D6C3", opacity: 0.5 } },
+            connectNulls: true,
+            data: [],
+          },
+        ],
+      },
+    };
   },
-  destroyed() {
-    clearInterval(this.timer);
-    this.timer = null;
+  computed: {
+    ...mapState(["websocketIP"]),
   },
   methods: {
-    formatDate(value) {
-      let date = new Date(value);
-      let y = date.getFullYear();
-      let MM = date.getMonth() + 1;
-      MM = MM < 10 ? ('0' + MM) : MM;
-      let d = date.getDate();
-      d = d < 10 ? ('0' + d) : d;
-      let h = date.getHours();
-      h = h < 10 ? ('0' + h) : h;
-      let m = date.getMinutes();
-      m = m < 10 ? ('0' + m) : m;
-      let s = date.getSeconds();
-      s = s < 10 ? ('0' + s) : s;
-      return d;
+    idChange(id) {
+      console.log("left", id);
+      // 数据清空
+      this.yData = new Array(30).fill("-");
+      this.xData = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/safetyMonitor/62/${this.choseDateTime}`
+      );
+      this.initWebSocket();
+    },
+    // 选择数据的时间
+    chooseDate(value) {
+      this.chooseDatetime = value;
+      console.log("chooseDatetime" + this.chooseDatetime);
+      this.count = 0;
+      this.xData = new Array(30).fill("-");
+      this.yData = new Array(30).fill("-");
+      this.websocket.close();
+
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/safetyMonitor/62/${this.chooseDatetime}`
+      );
+      console.log(this.websocket);
+      this.initWebSocket();
     },
-    chooseDate(data) {
-      // 选中先清除定时器
-      clearInterval(this.timer);
-      // startDate，endDate
-      switch (data) {
-        case '1':
-          this.type = 'hour';
-          this.end = this.formatDate(new Date());
-          this.begin = this.formatDate(new Date());
-          break
-        case '10':
-          this.end = this.formatDate(new Date());
-          this.begin = this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 11));
-          this.days='10'
-          this.type = 'day';
-          break
-        case '20':
-          this.end = this.formatDate(new Date());
-          this.begin = this.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 21));
-          this.days='20'
-          this.type = 'day';
-          break
-        case '30':
-          this.end = this.formatDate(new Date());
-          this.begin = this.formatDate(new Date());
-          this.type = 'second'
-          break
-      }
-      this.chooseColor = data;
 
-        if(this.type === 'second'){
-          clearInterval(this.timer);
-          // 如果选中的type是为实时的话，每1s执行一次
-          this.timer = setInterval(() => {
-            this.getTableData();
-          }, 1000)
-        }else {
-          this.getTableData();
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.yData[this.count] = data[i][this.type];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
         }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.yData.shift();
+          this.yData.push(data[i][this.type]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.unit,
+            data: this.yData,
+          },
+        ],
+      });
+      console.log("this.paiqidata", this.paiqidata);
+      console.log("this.chouqidata", this.chouqidata);
+      console.log("this.xData", this.xData);
     },
-    getTableData() {
-      let _data = {
-        monitorId:    this.monitorId,   //是	string	区域测点ID
-        begin:        this.begin,	      //是	string	开始时间
-        end:          this.end,         //是	string	截止日期
-        type:         this.type,
-        days:         this.days
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
       };
-      this.$get("index/monitors/measuring/record/monitors", _data).then(res => {
-        if (res.code === 200) {
-          this.viewData = res.data.keys || [];
-          this.viewNum = res.data.values || [];
-          this.showIview()
-        } else {
-          console.error(res.msg);
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        if (JSON.parse(event.data).length) {
+          this.addData(JSON.parse(event.data));
         }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
       });
     },
-    parentHandleclick(e) {
-      this.monitorId = e.monitorId
-      clearInterval(this.timer);
-      if(this.type === 'second'){
-        clearInterval(this.timer);
-        this.timer = setInterval(() => {
-          // 选中second实时，定时调用getTableData()方法,显示数据
-          this.getTableData();
-        }, 1000)
-      }else {
-        // 选中其他，静态显示
-        this.getTableData();
-      }
-    },
-    showIview() {
-      let myChart = this.$echarts.init(
-        // echarts绑定到指定id元素上
-          document.getElementById("transactionFlowView"), 'dark'
-      );
-      myChart.setOption(
-          {
-            darkMode: true,
-            backgroundColor: '#100C2A',
-            tooltip: {
-              trigger: 'axis'
-            },
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '5%',
-              top:'15%',
-              containLabel: true
-            },
-            toolbox: {
-              feature: {
-                saveAsImage: {
-                  show: false,
-                }
-              }
-            },
-            xAxis: {
-              type: 'category',
-              boundaryGap: false,
-              data: this.viewData,
-            },
-            yAxis: {
-              type: 'value'
-            },
-            series: [
-              {
-                name: '测点监测值',
-                type: 'line',
-                stack: 'Total',
-                data: this.viewNum
-              },
-            ]
-          },
-          true
-      );
-      myChart.resize();
-    }
-  }
-}
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/safetyMonitor/62/${this.chooseDatetime}`
+    );
+    console.log(this.websocket);
+    this.initWebSocket();
+  },
+};
 </script>
 
 <style scoped>
-.border{
+.border {
   background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
 .bottom_01 {
-  padding: 5px 10px;
+  padding: 5px 5px;
   border: #2d8cf0 1px solid;
-  margin: 10px 10px;
+  margin: 0px 5px;
   border-radius: 10px;
   color: #fff;
+  background-color: #2d8cf0;
+  width: 60px;
 }
 </style>

src/views/compressed/compressed.vue

@@ -4,32 +4,33 @@
     <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
     </el-tab-pane>
+    <el-tab-pane label="系统图" name="third">
+      <config-img></config-img>
+    </el-tab-pane>
   </el-tabs>
 </template>
 
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
-    export default {
-      name: "compressed",
-      data() {
-        return {
-          activeName: 'first'
-        };
-      },
-      methods: {
-        handleClick(tab, event) {
-         
-        }
-      },
-      components: {
-            dataStandard,
-     
-      }
+import configImg from "@/views/compressed/configImg/configImg"
+export default {
+  name: "compressed",
+  data() {
+    return {
+      activeName: "first",
     };
+  },
+  methods: {
+    handleClick(tab, event) {},
+  },
+  components: {
+    dataStandard,
+    configImg
+  },
+};
 </script>
 
 
 <style scoped>
-
 </style>

src/views/compressed/configImg/configImg.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="main">
+    <el-container>
+      <el-header
+        ><div>
+          <img src="@/assets/img/compressed/back.png" id="imgSwitch" />
+        </div>
+        <div id="fan">
+          <div class="fan1">
+            <ul
+              :class="{ blades: tableData1.isStart, bld: !tableData1.isStart }"
+            >
+              <li
+                :class="[
+                  'b1',
+                  !tableData1.isAlarm
+                    ? !tableData1.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+              <li
+                :class="[
+                  'b2',
+                  !tableData1.isAlarm
+                    ? !tableData1.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+              <li
+                :class="[
+                  'b3',
+                  !tableData1.isAlarm
+                    ? !tableData1.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+            </ul>
+          </div>
+          <div class="fan2">
+            <ul
+              :class="{ blades: tableData2.isStart, bld: !tableData2.isStart }"
+            >
+              <li
+                :class="[
+                  'b1',
+                  !tableData2.isAlarm
+                    ? !tableData2.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+              <li
+                :class="[
+                  'b2',
+                  !tableData2.isAlarm
+                    ? !tableData2.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+              <li
+                :class="[
+                  'b3',
+                  !tableData2.isAlarm
+                    ? !tableData2.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+            </ul>
+          </div>
+
+          <div class="fan3">
+            <ul
+              :class="{ blades: tableData3.isStart, bld: !tableData3.isStart }"
+            >
+              <li
+                :class="[
+                  'b1',
+                  !tableData3.isAlarm
+                    ? !tableData3.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+              <li
+                :class="[
+                  'b2',
+                  !tableData3.isAlarm
+                    ? !tableData3.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+              <li
+                :class="[
+                  'b3',
+                  !tableData3.isAlarm
+                    ? !tableData3.isWarning
+                      ? 'green'
+                      : 'red'
+                    : 'red',
+                ]"
+              ></li>
+            </ul>
+          </div>
+        </div>
+      </el-header>
+      <el-main>
+        <el-row style="margin-top: 80px" :gutter="20">
+          <el-col :span="8"
+            ><div class="center">
+              <data-table
+                title="压风机1号"
+                :tableData="tableData1"
+              ></data-table></div
+          ></el-col>
+          <el-col :span="8"
+            ><div class="center">
+              <data-table
+                title="压风机2号"
+                :tableData="tableData2"
+              ></data-table></div
+          ></el-col>
+          <el-col :span="8"
+            ><div class="center">
+              <data-table
+                title="压风机3号"
+                :tableData="tableData3"
+              ></data-table></div
+          ></el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import dataTable from "@/views/compressed/configImg/dataTable";
+export default {
+  data() {
+    return {
+      tableData1: {
+        isStart: false,
+        isAlarm: false,
+        isWarning: false,
+        isLoading: false,
+        runningTime: 22716,
+        loadingTime: 23760,
+      },
+      tableData2: {
+        isStart: true,
+        isAlarm: true,
+        isWarning: true,
+        isLoading: false,
+        runningTime: 26716,
+        loadingTime: 20760,
+      },
+      tableData3: {
+        isStart: true,
+        isAlarm: false,
+        isWarning: true,
+        isLoading: false,
+        runningTime: 18716,
+        loadingTime: 17760,
+      },
+    };
+  },
+  components: {
+    dataTable,
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 5045 #06133c 100%
+  );
+}
+.center {
+  width: 100%;
+  height: 500px;
+  margin-top: 300px;
+  background: url("../../../assets/img/tunneling/dataBg.png") no-repeat;
+  background-size: 100%;
+}
+#imgSwitch {
+  width: 100%;
+  height: 450px;
+  /* padding-bottom: 100px; */
+  /* left: 50px; */
+  /* margin-left: 30px; */
+}
+.header {
+  width: 100px;
+  height: 100px;
+  margin-top: -100px;
+}
+li {
+  list-style: none;
+}
+.fan1 {
+  margin-left: 0px;
+  position: absolute;
+}
+.fan2 {
+  margin-left: 450px;
+  margin-top: 0px;
+  position: absolute;
+}
+.fan3 {
+  margin-left: 920px;
+  margin-top: 0px;
+  position: absolute;
+}
+#fan {
+  position: absolute;
+  width: 16em;
+  height: 30em;
+  left: 14em;
+  top: 22em;
+}
+.blades {
+  height: 110px;
+  width: 110px;
+  /* position: absolute; */
+  animation: blades 1s infinite linear;
+}
+.bld {
+  height: 110px;
+  width: 110px;
+  /* position: absolute; */
+}
+.blades li {
+  height: 4em;
+  width: 4em;
+  position: absolute;
+  border-radius: 0 100% 0%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+}
+.bld li {
+  height: 4em;
+  width: 4em;
+  position: absolute;
+  border-radius: 0 100% 0%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+}
+/*扇叶*/
+.b1 {
+  top: 5em;
+  left: 1.2em;
+  transform: rotate(240deg);
+}
+.b2 {
+  top: 0em;
+  left: 0em;
+  transform: rotate(0deg);
+}
+.b3 {
+  top: 1.2em;
+  left: 5em;
+  transform: rotate(120deg);
+}
+@keyframes blades {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(600deg);
+  }
+}
+.red {
+  background: #f90005;
+}
+.green {
+  background: #009966;
+}
+</style>

src/views/compressed/configImg/dataTable.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <span class="title">{{ this.title }}</span>
+    <ul>
+      <li>
+        启停状态:
+        <div class="start" v-if="tableData.isStart"></div>
+        <div class="stop" v-else></div>
+      </li>
+      <li>
+        设备报警:
+        <div class="start" v-if="!tableData.isAlarm"></div>
+        <div class="stop" v-else></div>
+      </li>
+      <li>
+        设备预警:
+        <div class="start" v-if="!tableData.isWarning"></div>
+        <div class="stop" v-else></div>
+      </li>
+      <li>
+        加载和卸放:
+        <div class="start" v-if="tableData.isLoading"></div>
+        <div class="stop" v-else></div>
+      </li>
+      <li>
+        运行时间:<span class="center">{{ this.tableData.runningTime }}</span
+        >小时
+      </li>
+      <li>
+        加载时间:<span class="center">{{ this.tableData.loadingTime }}</span
+        >小时
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["title", "tableData"],
+};
+</script>
+
+<style scoped>
+ul {
+  margin-top: 20px;
+}
+li {
+  width: 100%;
+  height: 100%;
+  color: #4adefe;
+  display: flex;
+  /* flex-direction: column; */
+  font-size: 1.25rem;
+  position: relative;
+  line-height: 50px;
+  padding-left: 40px;
+}
+.title {
+  border-bottom: #5ddcf8 1px solid;
+  height: 40px;
+  width: 100%;
+  font-size: 20px;
+  line-height: 2;
+  padding: 5px;
+  font-weight: 500;
+  color: #4adefe;
+  margin-left: 20px;
+}
+.center {
+  color: #f3db5c;
+  padding-left: 100px;
+}
+.start {
+  /* margin-left: 40px; */
+  width: 40px;
+  height: 40px;
+  background-color: #009966;
+  border-radius: 50%; 
+  position:absolute;
+  margin-left:200px;
+}
+
+.stop {
+  /* margin: left: 40px; */
+  width: 40px;
+  height: 40px;
+  background-color: #FF6666;
+  border-radius: 50%;
+  position:absolute;
+  margin-left:200px;
+}
+</style>

src/views/power_supply/dataBoard/leftChart.vue

@@ -8,7 +8,7 @@
       @change="selectParm"
     >
       <el-option
-        v-for="item in parmoptions"
+        v-for="item in parmOptions"
         :key="item.id+''"
         :label="item.label"
         :value="item.id"