Merge branch 'master' of https://gitee.com/qinnamin/large_screen

src/components/tunneling/lmid.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="lmid">
+  <div id="lmid">
     <!-- <ul>
         <li >
             <span id="l_title">压入式风机</span>
@@ -15,41 +15,38 @@
         </li>
     </ul> -->
     <div class="middle_top_list">
-            <div class="list_title">压入式风机风压</div>
-            <div class="list_num list_num1"><span class="counter-value">{{data.fengliang_after}}</span>m^3/min</div>
+      <div class="list_title">压入式风机风压</div>
+      <div class="list_num list_num1"><span class="counter-value">{{data.fengliang_after}}</span>m^3/min</div>
 
-          </div>
-          <div class="middle_top_list">
-            <div class="list_title">压入式风机风量</div>
-            <div class="list_num list_num2"><span class="counter-value">{{data.fengya_after}}</span>m^3/min</div>
-          </div>
-</div>
+    </div>
+    <div class="middle_top_list">
+      <div class="list_title">压入式风机风量</div>
+      <div class="list_num list_num2"><span class="counter-value">{{data.fengya_after}}</span>m^3/min</div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 export default {
- 
-  data(){
+  data() {
     return {
-        data: {
+      data: {
         fengliang_after: "0",
         date: "2022-01-09 16:28:07",
         fengliang_before: "0",
         fengya_after: "0",
         fengya_before: "0",
       },
-   }
+    };
   },
 
   mounted() {
-        this.websocket = new WebSocket(
-        `ws://${this.websocketIP}/hbase/ws/belt/49`
-      );
-      this.initWebSocket();
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/49`);
+    this.initWebSocket();
   },
-  methods:{
-       initWebSocket() {
+  methods: {
+    initWebSocket() {
       // 连接错误
       this.websocket.onerror = () => {
         console.log(
@@ -80,7 +77,7 @@ export default {
       });
     },
     changeState(data) {
-      this.data = data[0]
+      this.data = data[0];
     },
     close() {
       this.websocket.close();
@@ -90,9 +87,7 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
-
-  };
-  
+};
 </script>
 
 
@@ -123,40 +118,38 @@ export default {
 .list_num span {
   font-size: 30px;
 }
-li{
-    width: 100%;
-    height: 100%;
-    color: royalblue;
-    display: flex;
-    /* flex-direction: column; */
-    margin-top: 3rem;
-    margin-right:.75rem;
-    font-size: 1.625rem;
-    text-align:center
-
-
+li {
+  width: 100%;
+  height: 100%;
+  color: royalblue;
+  display: flex;
+  /* flex-direction: column; */
+  margin-top: 3rem;
+  margin-right: 0.75rem;
+  font-size: 1.625rem;
+  text-align: center;
 }
-#l_one{
-    border-radius:0.7rem;
-    width: 5rem;
-    height: 2rem;
-    background-color: rgb(133, 158, 231);
-    margin: 0 .325rem .25rem; 
-    text-align: center;
+#l_one {
+  border-radius: 0.7rem;
+  width: 5rem;
+  height: 2rem;
+  background-color: rgb(133, 158, 231);
+  margin: 0 0.325rem 0.25rem;
+  text-align: center;
 }
-#l_two{
-    border-radius:0.7rem;
-    width: 5rem;
-    height: 2rem;
-    background-color: rgb(133, 158, 231);
-    margin: 0 .325rem .25rem; 
-    text-align: center;
+#l_two {
+  border-radius: 0.7rem;
+  width: 5rem;
+  height: 2rem;
+  background-color: rgb(133, 158, 231);
+  margin: 0 0.325rem 0.25rem;
+  text-align: center;
 }
-#l_title{
-    width: 8.75rem;
-    height: 1.875rem;
-    background-color: rgb(30, 3, 66);
-    color: pink;
-    text-align: center;
+#l_title {
+  width: 8.75rem;
+  height: 1.875rem;
+  background-color: rgb(30, 3, 66);
+  color: pink;
+  text-align: center;
 }
 </style>

src/router/index.js

@@ -459,7 +459,7 @@ export default new Router({
             }, {
                 path: 'dataview/:id',
                 hidden: true,
-                component: () => import('@/views/gas/configImg/index.vue')
+                component: () => import('@/views/gas/configImg/index1.vue')
             }
             ]
         }, {

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    websocketIP: "10.170.4.209:8081",
+    websocketIP: "10.170.46.116:8081",
   },
   mutations: {
 

src/views/app_personnel_positioning/personnelPositioning.vue

@@ -1,58 +1,13 @@
 <template>
-<div>
- <ul class="xcspwt-box js-xcspwt">
-	 <span style="font-size: 16px;
-							color: #FFFFFF;
-							
-							padding-top: 6%;">日志</span>
-                        <li>
-                            <span>掘进机控制系统</span>
-                            <span >启动中...</span>
-                            <!-- <span title="视频信号不稳定">视频信号不稳定</span> -->
-                        </li>
-                        <li>
-                            <span>油缸温度</span>
-                            <span>温度过高...</span>
-                        </li>
-                        <li>
-                            <span>粉尘浓度</span>
-                            <span>超出正常范围...</span>
-                        </li>
- </ul></div>
+  
 </template>
 
 <script>
-  export default {
+export default {
 
-  }
-</script>
-<style scoped>
-.xcspwt-box li{
-    width: 100%;
-    height: 20px;
-    line-height: 20px;
-    color:#4ADEFE;
-    font-size: 18px;
-    margin-top: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor:default;
-}
-.xcspwt-box li span{
-    display: block;
-    float: left;
-}
-.xcspwt-box li span:nth-of-type(1){
-    padding: 0 5px;
-    line-height: 20px;
-    text-align: center;
-    /* background: url("../img/bg1.png") no-repeat; */
-    background-size: 100% 100%;
 }
+</script>
+
+<style>
 
-.xcspwt-box li span:nth-of-type(2){
-    color:#F3DB5C;
-    width: 138px;
-}
 </style>

src/views/gas/configImg/Chart.vue

@@ -0,0 +1,372 @@
+<template>
+  <div>
+    <div class="select-veido">
+      <el-select
+      style="margin-top:10px"
+      v-model="currentChartId"
+      placeholder="请选择"
+      @change="selectChart()"
+    >
+      <el-option
+        v-for="item in chartoptions"
+        :key="item.id+''"
+        :label="item.label"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    </div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 400px; margin:0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      chartoptions: [
+        {
+          id: 1,
+          label: "流量",
+        },
+        {
+          id: 2,
+          label: "浓度",
+        },
+      ],
+      type: {
+        name1: "chouqiliuliang_after",
+        name2: "paiqiliuliang_after",
+      },
+      gasId: "35",
+      title: "流量",
+      gasUnit: "%",
+      currentChartId: "流量",
+      currentChartTitle: "流量",
+      paiqidata: new Array(30).fill("-"),
+      chouqidata: 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.gasUnit} <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: "管道流量/浓度",
+          padding: [5, 230],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+
+        series: [
+          {
+            name: "抽气流量",
+            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: [],
+          },
+          {
+            name: "排气流量",
+            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: "#CD5C5C", 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: "#CD5C5C", opacity: 0.5 } },
+            connectNulls: true,
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  methods: {
+    selectChart() {
+      for (let i in this.chartoptions) {
+        if (this.chartoptions[i].id == this.currentChartId) {
+          this.currentChartTitle = this.chartoptions[i].label;
+          break;
+        }
+      }
+      // 画流量对应的图
+      if (this.currentChartId == 1) {
+        this.title = this.currentChartTitle;
+        this.gasUnit = "%";
+        this.type = {
+          name1: "chouqiliuliang_after",
+          name2: "paiqiliuliang_after",
+        };
+        this.paiqidata = new Array(30).fill("-");
+        this.chouqidata = new Array(30).fill("-");
+        this.xData = new Array(30).fill("-");
+        this.count = 0;
+      } else {
+        // 画浓度对应的图
+        this.title = this.currentChartTitle;
+        this.gasUnit = "m^3/h";
+
+        this.type = {
+          name1: "chouqinongdu_after",
+          name2: "paiqinongdu_after",
+        };
+        this.paiqidata = new Array(30).fill("-");
+        this.chouqidata = new Array(30).fill("-");
+        this.xData = new Array(30).fill("-");
+        this.count = 0;
+      }
+      console.log("gasId", this.type["name1"]);
+    },
+    addData(data) {
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.paiqidata[this.count] = data[i][this.type["name1"]];
+          this.chouqidata[this.count] = data[i][this.type["name2"]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.paiqidata.shift();
+          this.paiqidata.push(data[i][this.type["name1"]]);
+          this.chouqidata.shift();
+          this.chouqidata.push(data[i][this.type["name2"]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: "抽气流量",
+            data: this.chouqidata,
+          },
+          {
+            name: "排气流量",
+            data: this.paiqidata,
+          },
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/35`);
+    this.initWebSocket();
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select{
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido>>>.el-input--small .el-input__inner {
+
+    background: none;
+
+  }
+    .select-veido>>>.el-input__inner {
+
+    border: 0;
+
+  }
+</style>

src/views/gas/configImg/bottomLeft.vue

@@ -1,49 +0,0 @@
-<template>
-  <div id="bottomLeft">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-bar" class="text-icon"></icon>
-        </span>
-      </div>
-      <div>
-        <BottomLeftChart />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BottomLeftChart from '@/components/gas/echart/bottom/bottomLeftChart'
-export default {
-  components: {
-    BottomLeftChart
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$box-height: 300px;
-$box-width: 100%;
-#bottomLeft {
-  padding: 10px 16px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 35px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .chart-box {
-    margin-top: 16px;
-    width: 100%;
-    height: 100%;
-    .active-ring-name {
-      padding-top: 10px;
-    }
-  }
-}
-</style>

src/views/gas/configImg/bottomRight.vue

@@ -1,60 +1,225 @@
 <template>
-  <div id="bottomRight">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-area" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">抽放泵电流</span>
-          <div class="decoration2">
-            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
-          </div>
-        </div>
-      </div>
-      <div>
-        <BottomRightChart />
-      </div>
-    </div>
-  </div>
+  <div
+    ref="testLine"
+    style="width: 450px; height: 400px; margin-top: 40px"
+  ></div>
 </template>
 
 <script>
-import BottomRightChart from "@/components/gas/echart/bottom/bottomRightChart";
+import { mapState } from "vuex";
+
 export default {
-  components: {
-    BottomRightChart
-  }
+  data() {
+    return {
+      paiqidata: new Array(30).fill("-"),
+      chouqidata: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
+        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) => {
+            var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        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: "#5A6872",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: [],
+          },
+        ],
+        title: {
+          text: `${this.title}`,
+          padding: [5, 230],
+        },
+        color: ["#41D6C3", "#5AAAFA"],
+        series: [
+          {
+            name: "瓦斯泵电流",
+            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} ${this.unit}`,
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            // lineStyle: { normal: { color: "#5AAAFA", 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: "#5AAAFA", opacity: 0.5 } },
+            connectNulls: true,
+            data: [],
+          },
+    
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props: ["id", "title", "unit"],
+  methods: {
+    addData(data) {
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.paiqidata[this.count] = data[i]["paiqiliuliang_after"];
+          this.chouqidata[this.count] = data[i]["chouqiliuliang_after"];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.paiqidata.shift();
+          this.paiqidata.push(data[i]["paiqiliuliang_after"]);
+          this.chouqidata.shift();
+          this.chouqidata.push(data[i]["chouqiliuliang_after"]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: "瓦斯泵电流",
+            data: this.chouqidata,
+          },
+      
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
+    this.initWebSocket();
+  },
 };
 </script>
 
-<style lang="scss" class scoped>
-$box-height: 300px;
-$box-width: 100%;
-#bottomRight {
-  padding: 14px 16px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 35px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  //下滑线动态
-  .decoration2 {
-    position: absolute;
-    right: 0.125rem;
-  }
-  .chart-box {
-    margin-top: 16px;
-    width: 170px;
-    height: 170px;
-    .active-ring-name {
-      padding-top: 10px;
-    }
-  }
-}
-</style>

src/views/gas/configImg/center.vue

@@ -1,19 +1,17 @@
 <template>
   <div id="center">
-    <div class="up">
-      <div class="item">
-        <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>瓦斯泵工作时间:0 S</p>
-        </div>
-        <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>瓦斯泵平均功率:20 w</p>
-        </div>
-        <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>
-            管道瓦斯含量: 0
-          </p>
-        </div>
-      </div>
+    <div class="middle_top_list">
+      <div class="list_title">瓦斯泵工作时间</div>
+      <div class="list_num list_num1"><span class="counter-value">0.5</span></div>
+
+    </div>
+    <div class="middle_top_list">
+      <div class="list_title">瓦斯泵平均功率</div>
+      <div class="list_num list_num2"><span class="counter-value">20</span></div>
+    </div>
+    <div class="middle_top_list">
+      <div class="list_title">管道瓦斯含量</div>
+      <div class="list_num list_num2"><span class="counter-value">30</span></div>
     </div>
   </div>
 </template>
@@ -30,36 +28,45 @@ export default {
 
 <style lang="scss" scoped>
 #center {
+  // margin: auto;
+  width: 400px;
+  height: 300px;
   display: flex;
   flex-direction: column;
-  .up {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    .item {
-      border-radius: 150px;
-      padding-top: 8px;
-      margin-top: 5px;
-      width: 100%;
-      height: 310px;
-      div {
-        position: relative;
-        display: flex;
-        border: 0px solid #ffffff;
-        background-color: #14162b;
-        margin-left: 20px;
-        margin-bottom: 20px;
-        height: 80px;
-        width: 180px;
-        p {
-          position: absolute;
-          margin-top: 15%;
-          margin-left: 5%;
-          font-size: 18px;
-        }
-      }
-    }
-  }
+  padding:6px;
+  margin:5px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  // border:3px solid #96c2f1;background:#77bedf;
+  // padding:6px;border:3px solid #96c2f1;background:#eff7ff
+  // background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+  // background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+
+}
+.middle_top_list {
+  float: left;
+  width: 35.2%;
+  height: 18%;
+  margin-top: 10%;
+  margin-left: 28%;
+  text-align: center;
+  color: #4ADEFE;
+}
+.middle_top_list span {
+  color: #F3DB5C;
+}
+.list_title {
+  font-size: 18px;
+  margin-top: -15%;
+}
+/* .control{
+  margin-top: 20px;
+} */
+.list_num {
+  margin-top: 3%;
+  font-size: 16px;
+}
+.list_num span {
+  font-size: 30px;
 }
 </style>

src/views/gas/configImg/centerLeft1.vue

@@ -1,75 +1,108 @@
-<template>
-  <div id="centerLeft1" style="width: 100%">
-    <div class="bg-color-black" style="width: 100%">
-      <div class="d-flex pt-2 pl-2" style="width: 100%">
-        <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">故障记录</span>
-        </div>
-      </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board class="dv-scr-board" :config="config" />
-      </div>
-    </div>
+  <template>
+  <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
+  <div class="table-wrapper main">
+<span class="title">故障记录</span>
+    <el-table
+      :data="tableData"
+      
+    >
+      <el-table-column
+        prop="name"
+        label="名称"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="problem"
+        label="记录"
+        width="180"
+      >
+      </el-table-column>
+    </el-table>
   </div>
 </template>
-
 <script>
 export default {
   data() {
     return {
-      cdata1: [],
-      cdata2: [],
-      oldupdate: -1,
-      config: {
-        header: ["故障设备", "故障问题"],
-        data: [
-          ["1#瓦斯泵电机", "过流"],
-          ["高位水池", "高温"],
-          ["低位水池", "高温"],
-        ],
-        rowNum: 5, //表格行数
-        headerHeight: 35,
-        headerBGC: "#0f1325", //表头
-        oddRowBGC: "#0f1325", //奇数行
-        evenRowBGC: "#171c33", //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ["center"],
-      },
+      tableData: [
+        {
+          name: "1#瓦斯泵电机",
+          problem: "过流",
+        },
+        {
+          name: "高位水池",
+          problem: "高温",
+        },
+        {
+          name: "低位水池",
+          problem: "高温",
+        },
+      ],
     };
   },
-
-  methods: {},
+  methods: {
+    headerStyle({ row, column, rowIndex, columnIndex }) {
+      return "tableStyle";
+    },
+    tableRowStyle({ row, rowIndex }) {
+      return "background-color:#ecf5ff";
+    },
+  },
 };
 </script>
-
-
-<style lang="scss" scoped>
-$box-height: 310px;
-$box-width: 300px;
-#centerLeft1 {
-  padding: 16px;
-  padding-top: 20px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 30px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .body-box {
-    border-radius: 30px;
-    overflow: hidden;
-    .dv-scr-board {
-      width: 600px;
-      height: 300px;
-    }
+<style lang='scss' scoped>
+.main{
+  padding:6px;
+  // border:3px solid #96c2f1;
+  height:180px;
+  margin-top:60px;
+  padding-left: 40px;;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.table-wrapper {
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
   }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 15px;
+  border: none;
+}
+.title {
+	/* font-weight:; */
+	/* padding-bottom: 15px; */
+font-size: 18px;
+  color: #4ADEFE;
+
 }
 </style>

src/views/gas/configImg/centerRight1.vue

@@ -1,73 +1,94 @@
-<template>
-  <div id="centerRight1" style="width: 100%">
-    <div class="bg-color-black" style="width: 100%">
-      <div class="d-flex pt-2 pl-2" style="width: 100%">
-        <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">启停记录</span>
-        </div>
-      </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board class="dv-scr-board" :config="config" />
-      </div>
-    </div>
-  </div>
-</template>
+  <template>
+ <div class="table-wrapper main">
+    <span class="title">启停记录</span>
+      <el-table
+      :data="tableData"
+         border
+    style="width: 100%"
+  >
+      <el-table-column
+        prop="name"
+        label="瓦斯泵本体设备"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="problem"
+        label="启停"
+        width="180">
+      </el-table-column>
+    </el-table>
+   </div>
+  </template>
 
 <script>
-export default {
-  data() {
-    return {
-      oldupdate: -1,
-      drawTiming: null,
-      state: 0,
-      cdata1: [],
-      cdata2: [],
-      config: {
-        header: ["瓦斯泵本体设备", "启停"],
-        data: [
-          ["1#瓦斯泵供水", "关闭"],
-          ["1#瓦斯泵本机", "关闭"],
-        ],
-        rowNum: 5, //表格行数
-        headerHeight: 35,
-        headerBGC: "#0f1325", //表头
-        oddRowBGC: "#0f1325", //奇数行
-        evenRowBGC: "#171c33", //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ["center"],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-$box-height: 310px;
-$box-width: 300px;
-#centerRight1 {
-  padding: 16px;
-  padding-top: 20px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 30px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  }
-  .body-box {
-    border-radius: 30px;
-    overflow: hidden;
-    .dv-scr-board {
-      width: 600px;
-      height: 300px;
+    export default {
+      data() {
+        return {
+          tableData: [{
+            name: '1#瓦斯泵电机',
+            problem: '关闭'
+          }, {
+            name: '1#瓦斯泵本机',
+            problem: '关闭'
+          }]
+        }
+      }
     }
+  </script>
+<style lang='scss' scoped>
+  .table{
+  width: 370px;
+}
+.main{
+  padding:6px;
+  height:180px;
+  margin-top:60px;
+  padding-left: 40px;;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.table-wrapper {
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
   }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 15px;
+  border: none;
+}
+.title {
+	/* font-weight:; */
+	/* padding-bottom: 15px; */
+font-size: 18px;
+  color: #4ADEFE;
+
 }
-</style>
+  </style>

src/views/gas/configImg/dianliuChart.vue

@@ -0,0 +1,220 @@
+<template>
+  <div
+    ref="testLine"
+    style="width: 450px; height: 400px; margin:40px auto"
+  ></div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      dianliudata: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
+        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) => {
+            var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
+            return result;
+          },
+        },
+        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",
+          },
+        },
+        color: ["#41D6C3", "#5AAAFA"],
+        series: [
+          {
+            name: `${this.unit}`,
+            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} ${this.unit}`,
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            // lineStyle: { normal: { color: "#5AAAFA", 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: "#5AAAFA", opacity: 0.5 } },
+            connectNulls: true,
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props: ["id", "title", "unit"],
+  methods: {
+    addData(data) {
+      console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.dianliudata[this.count] = data[i]["dianjidianliui_after"];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.dianliudata.shift();
+          this.dianliudata.push(data[i]["dianjidianliui_after"]);
+
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: "A",
+            data: this.dianliudata,
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      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();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
+    this.initWebSocket();
+  },
+};
+</script>
+

src/views/gas/configImg/index.vue

@@ -78,7 +78,7 @@
             <div class="bototm-box">
               <div style="flex: 1">
                 <dv-border-box-12>
-                  <bottomLeft />
+                  <!-- <bottomLeft /> -->
                 </dv-border-box-12>
               </div>
               <div style="flex: 1">
@@ -99,7 +99,7 @@ import { formatTime } from "@/utils/index.js";
 import centerLeft1 from "./centerLeft1";
 import centerRight1 from "./centerRight1";
 import center from "./center";
-import bottomLeft from "./bottomLeft";
+// import bottomLeft from "./bottomLeft";
 import bottomRight from "./bottomRight";
 export default {
   data() {
@@ -436,7 +436,7 @@ export default {
     centerLeft1,
     centerRight1,
     center,
-    bottomLeft,
+    // bottomLeft,
     bottomRight,
   },
   mounted() {

src/views/gas/configImg/index1.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="main1">
+      <div class="header">
+			<h1 class="header-title">1#瓦斯泵</h1>
+	  </div>
+    <div class="top">
+      <!-- <div class="center_left"> -->
+      <centerLeft1></centerLeft1>
+      <!-- </div> -->
+      <center></center>
+      <!-- <div class="center_right"> -->
+      <centerRight1></centerRight1>
+      <!-- </div> -->
+
+    </div>
+
+    <el-row>
+
+      <div class="bottom">
+            <!-- 浓度或流量曲线 -->
+        <div class="bottom_left">
+          <chart></chart>
+        </div>
+
+    
+        <!-- 电机电流曲线 -->
+        <div class="bottom_right">
+          <dianliuChart
+            :id="8"
+            title="瓦斯泵电流"
+            unit="A"
+          ></dianliuChart>
+        </div>
+      </div>
+
+ 
+
+    </el-row>
+  </div>
+
+</template>
+
+<script>
+import Chart from "./Chart";
+import centerLeft1 from "./centerLeft1";
+import dianliuChart from "./dianliuChart";
+import centerRight1 from "./centerRight1";
+import center from "./center";
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    centerLeft1,
+    Chart,
+    dianliuChart,
+    centerRight1,
+    center,
+  },
+};
+</script>
+<style scoped>
+.main1 {
+    /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
+     background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+
+}
+.header {margin:0 auto;position:relative;width:100%;
+	height:65px;max-width:1920px;
+	background:url("../../../assets/img/gas/header.png") center no-repeat;box-sizing:border-box;}
+.header-title {
+	margin:0;
+	padding:0;
+	line-height:50px;
+	text-align:center;
+	font-size:22px;
+	color:#ffffff;
+}
+.top {
+  display: flex;
+  justify-content:space-around;
+}
+.bottom{
+    display: flex;
+    justify-content:space-around;
+}
+.bottom_left {
+  width: 40%;
+  height: 440px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.bottom_right {
+  width:40%;
+  height: 400px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_right {
+  width: 100%;
+  height: 280px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_left {
+  width: 100%;
+  height: 280px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+</style>