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

src/router/index.js

@@ -581,7 +581,7 @@ const router = new Router({
           name: "皮带能效分析",
           id: 203,
           component: () =>
-            import("../views/app_beam_tube_inspection/test.vue"),
+            import("../views/app_beam_tube_inspection/main.vue"),
           hidden: false,
         },
         {

src/views/app_beam_tube_inspection/dataBoardtest.vue

@@ -5,7 +5,8 @@
       <el-row :gutter="10">
         <el-col :span="8">
           <div class="top_left">
-            <fuzai title="负载曲线"></fuzai>
+            <fuzai title="负载曲线" ></fuzai>
+<!--            <timeselect style="margin-left: 480px;color: gray;z-index: 2;margin-top: -228px;width:100px;"></timeselect> &lt;!&ndash;算法框&ndash;&gt;-->
           </div>
         </el-col>
         <el-col :span="8">
@@ -31,7 +32,7 @@
         <el-col :span="8">
           <div class="center_center">
             <div class="title2" style="width: 100%">工况分析</div>
-            <albox style="margin-left: 400px;color: gray"></albox>
+            <albox style="margin-left: 420px;margin-top: -38px; color: gray;width:160px;"></albox> <!--算法框-->
             <div class="title2" style="width: 100%">区域状态：<span style="color: #f3db5c;font-size: 20px">{{work.info}}</span>
 <!--              <radartu></radartu>-->
 <!--              <RadarChart></RadarChart>-->
@@ -41,6 +42,7 @@
         <el-col :span="8">
           <div class="center_right">
             <dangqian title="当前负载与额定负载占比曲线"></dangqian>
+<!--            <timeselect style="margin-left: 480px;color: gray;z-index: 2;margin-top: -228px;width:100px;"></timeselect> &lt;!&ndash;算法框&ndash;&gt;-->
           </div>
         </el-col>
       </el-row>
@@ -140,12 +142,13 @@
 
 
       <div class="myleft">
+        <br>
 
         <div class="title2" style="width: 100%">皮带速度：<span style="color: #f3db5c;margin-left: 30px;">{{ belt.speed}}m/s</span></div>
 
       </div>
     </div>
-    <div class="bottom" style="margin-top:0px">
+    <div class="bottom2" style="margin-top:0px">
       <span class="title1">头部驱动电机2</span>
 
       <div class="myleft">
@@ -180,7 +183,7 @@
               频率:<span class="content">{{ transducer1.frequency }}Hz</span>
             </li>
             <li>
-              电压:<span class="content">{{ transducer1.voltage }}V</span>
+              电压:<span class="content">{{ transducer1.voltage }}kV</span>
             </li>
             <li>
               转速:<span class="content">{{ transducer1.speed }}r/min</span>
@@ -236,7 +239,12 @@
         </div>
       </div>
       <div class="myleft">
-        <img src="@/assets/img/012belt.gif" class="pidai" style="z-index: 2;position: absolute;margin-left: 0px; margin-top: -200px;" /><br>
+        <div class="video1">
+          <m3u8></m3u8>
+        </div>
+
+
+<!--        <img src="@/assets/img/012belt.gif" class="pidai" style="z-index: 2;position: absolute;margin-left: 0px; margin-top: -200px;" /><br>-->
       </div>
     </div>
 
@@ -253,6 +261,8 @@ import xiaolv from "@/views/app_beam_tube_inspection/picture/xiaolv";
 import albox from "@/views/app_beam_tube_inspection/albox";
 import radartu from "@/views/app_beam_tube_inspection/picture/radartu";
 import RadarChart from "@/views/app_beam_tube_inspection/picture/RadarChart";
+import m3u8 from "@/common/m3u8";
+import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
 export default {
 
   data() {
@@ -388,12 +398,14 @@ export default {
     albox,
     radartu,
     RadarChart,
+    m3u8,
+    timeselect
 
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .myleft {
   margin-top: 5px;
   width: 20%;
@@ -410,7 +422,7 @@ export default {
 
   height: 40px;
   width: 5%;
-  font-size: 25px;
+  font-size: 20px;
   line-height: 2;
   padding: 5px;
   font-weight: 500;
@@ -439,7 +451,7 @@ export default {
   position: absolute;
 }
 .mycenter {
-  height: 240px;
+  height: 160px;
   margin-left: 0px;
   background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
@@ -473,7 +485,7 @@ export default {
     font-size: 18px;
     position: relative;
     margin-top: -10px;
-    line-height: 50px;   //30
+    line-height: 32px;   //30
     padding-left: 0px;
   }
   .start {
@@ -496,6 +508,18 @@ export default {
     right: 100px;
   }
 }
+.video1 {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  grid-gap: 5px;
+  z-index: 2;
+  position: absolute;
+  margin-left: 10px;
+  margin-top: -70px;
+
+
+}
 
 </style>
 <style scoped>
@@ -542,7 +566,9 @@ export default {
 .main {
   width: 100%;
   position: relative;
-  height: 1090px;
+  height: 890px;
+  /*890*/
+  /*1090*/
   background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
     linear-gradient(
       to top,
@@ -578,6 +604,7 @@ export default {
   background: url(../../../src/assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
   height: 230px;
+  /*230*/
 }
 .top_center {
   margin-top: 20px;
@@ -593,6 +620,7 @@ export default {
 }
 
 .center {
+  margin-top: 40px;
   height: 30%;
 }
 .center_left {
@@ -619,7 +647,17 @@ export default {
   /* height: 30%; */
   /* display: inline; */
   /* height: 400px; */
-  margin-top: -70px;
+  margin-top: -20px;
+  display: flex;
+  justify-content: space-around;
+  /*position: relative;*/
+  /*z-index: 1;*/
+}
+.bottom2 {
+  /* height: 30%; */
+  /* display: inline; */
+  /* height: 400px; */
+  margin-top: 0px;
   display: flex;
   justify-content: space-around;
   /*position: relative;*/

src/views/app_beam_tube_inspection/picture/dangqian.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <div ref="testLine" style="width: 600px; height: 230px"></div>
+    <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!--算法框-->
+
+    <!--    230-->
   </div>
 </template>
 
 <script>
-/**
- * @module mining/envTest/waterStorage
- * @desc 工作区蓄水图
- * @vue-data {Object} myChart - Echarts实例
- * @vue-data {Object} option - Echarts配置项
- */
+import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
 export default {
+  components:{
+    timeselect,
+  },
   props: {
     title: {
       type: String,
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     return {
+      chooseDatetime: "0",
       currentChartId: 1,
       count: 0,
       myChart: null,
@@ -45,7 +47,7 @@ export default {
             lineHeight: 24,
           },
           extraCssText:
-            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+              "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/>`;
@@ -71,7 +73,7 @@ export default {
         },
         yAxis: [
           {
-            max:1,
+            max:1.0,
             min:0.8,
             boundaryGap: [0, "100%"],
             name: this.unit,
@@ -108,7 +110,7 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+            data: [],
           },
         ],
         title: {
@@ -177,56 +179,223 @@ export default {
             tooltip: {
               show: true,
             },
-            data: [0.85, 0.9, 0.86, 0.89, 0.93],       //初始数据
+            data: [],       //初始数据
           },
         ],
       },
     };
   },
   mounted() {
-    // 先画图
-
+    console.log('@@@'+this.chooseDatetime)
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-
-    var first = 1;
-    if(first){
-      var xData=[];
-      var data1 = [];
-      for (let i = 0; i < 5; i++) {
-        let now =new Date();
-        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
-        now = new Date(+now - 2000);
-        data1.push(this.getRandomNumWithDecimals(0.8, 1));
-      }
-      first = 0;
-    }
-
-    let interval = setInterval(() => {
-      let temp = [];
-      // for (let i = 0; i < 5; i++) {
-      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
-      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
-      // }
-      xData.shift();
-      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
-      data1.shift();
-      data1.push(this.getRandomNumWithDecimals(0.8, 1));
-      this.myChart.setOption({
-        xAxis:[{
-          data:xData
-        }],
-        series: [
-          {
-            data: data1,
-          },
-        ],
-      });
-    }, 3000);
+    this.chooseDate(this.chooseDatetime);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
     });
   },
+  methods:{
+    convertToDate(date) {
+      var date = new Date(date);
+      // var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      var d = date.getDate();
+      var s = date.getHours()
+      m = m < 10 ? "0" + m : m; //月小于10，加0
+      d = d < 10 ? "0" + d : d; //day小于10，加0
+      s = s < 10 ? "0" + s : s; //时小于10，加0
+      return  m + "-" + d + '\xa0'+s+'时';
+    },
+
+
+    chooseDate(value) {
+      // console.log(value);
+      this.chooseDatetime = value;
+      this.count = 0;
+      switch (value) {
+        case "0":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+              time = time-1000*60*30;   //间隔30分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          let interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*30);
+          break;
+        case "1":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()    //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+              time = time-1000*60*60;   //间隔60分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60);
+          break;
+        case "2":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+              time = time-1000*60*60*24;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24);
+          break;
+        case "3":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+              time = time-1000*60*60*24*7;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.8, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24*7);
+          break;
+      }
+    },
+  },
 };
 </script>
 <style scoped>

src/views/app_beam_tube_inspection/picture/dunmei.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <div ref="testLine" style="width: 600px; height: 230px"></div>
+    <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!--算法框-->
+
+    <!--    230-->
   </div>
 </template>
 
 <script>
-/**
- * @module mining/envTest/waterStorage
- * @desc 工作区蓄水图
- * @vue-data {Object} myChart - Echarts实例
- * @vue-data {Object} option - Echarts配置项
- */
+import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
 export default {
+  components:{
+    timeselect,
+  },
   props: {
     title: {
       type: String,
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     return {
+      chooseDatetime: "0",
       currentChartId: 1,
       count: 0,
       myChart: null,
@@ -74,7 +76,12 @@ export default {
             max:1600,
             min:900,
             boundaryGap: [0, "100%"],
-            name: this.unit,
+            // name: this.unit,
+            name:"单位(t/KWh)",
+            nameTextStyle: {
+              color: "#fff",
+              nameLocation: "start",
+            },
             splitLine: {
               show: false,
               lineStyle: {
@@ -108,7 +115,7 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+            data: [],
           },
         ],
         title: {
@@ -177,56 +184,223 @@ export default {
             tooltip: {
               show: true,
             },
-            data: [1000, 1200, 1500, 1035, 1600],       //初始数据
+            data: [],       //初始数据
           },
         ],
       },
     };
   },
   mounted() {
-    // 先画图
-
+    console.log('@@@'+this.chooseDatetime)
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-
-    var first = 1;
-    if(first){
-      var xData=[];
-      var data1 = [];
-      for (let i = 0; i < 5; i++) {
-        let now =new Date();
-        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
-        now = new Date(+now - 2000);
-        data1.push(this.getRandomNumWithDecimals(900, 1600));
-      }
-      first = 0;
-    }
-
-    let interval = setInterval(() => {
-      let temp = [];
-      // for (let i = 0; i < 5; i++) {
-      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
-      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
-      // }
-      xData.shift();
-      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
-      data1.shift();
-      data1.push(this.getRandomNumWithDecimals(900, 1600));
-      this.myChart.setOption({
-        xAxis:[{
-          data:xData
-        }],
-        series: [
-          {
-            data: data1,
-          },
-        ],
-      });
-    }, 3000);
+    this.chooseDate(this.chooseDatetime);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
     });
   },
+  methods:{
+    convertToDate(date) {
+      var date = new Date(date);
+      // var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      var d = date.getDate();
+      var s = date.getHours()
+      m = m < 10 ? "0" + m : m; //月小于10，加0
+      d = d < 10 ? "0" + d : d; //day小于10，加0
+      s = s < 10 ? "0" + s : s; //时小于10，加0
+      return  m + "-" + d + '\xa0'+s+'时';
+    },
+
+
+    chooseDate(value) {
+      // console.log(value);
+      this.chooseDatetime = value;
+      this.count = 0;
+      switch (value) {
+        case "0":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*30;   //间隔30分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          let interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*30);
+          break;
+        case "1":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()    //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*60;   //间隔60分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60);
+          break;
+        case "2":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*60*24;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24);
+          break;
+        case "3":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*60*24*7;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24*7);
+          break;
+      }
+    },
+  },
 };
 </script>
 <style scoped>

src/views/app_beam_tube_inspection/picture/fuzai.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <div ref="testLine" style="width: 600px; height: 230px"></div>
+    <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!--算法框-->
+
+<!--    230-->
   </div>
 </template>
 
 <script>
-/**
- * @module mining/envTest/waterStorage
- * @desc 工作区蓄水图
- * @vue-data {Object} myChart - Echarts实例
- * @vue-data {Object} option - Echarts配置项
- */
+import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
 export default {
+  components:{
+    timeselect,
+  },
   props: {
     title: {
       type: String,
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     return {
+      chooseDatetime: "0",
       currentChartId: 1,
       count: 0,
       myChart: null,
@@ -113,7 +115,7 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+            data: [],
           },
         ],
         title: {
@@ -182,56 +184,223 @@ export default {
             tooltip: {
               show: true,
             },
-            data: [900, 1300, 1400, 1200, 1600],       //初始数据
+            data: [],       //初始数据
           },
         ],
       },
     };
   },
   mounted() {
-    // 先画图
-
+    console.log('@@@'+this.chooseDatetime)
     this.myChart = this.$echarts.init(this.$refs.testLine);
-    this.myChart.setOption(this.option);
-
-    var first = 1;
-    if(first){
-      var xData=[];
-      var data1 = [];
-      for (let i = 0; i < 5; i++) {
-        let now =new Date();
-        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
-        now = new Date(+now - 2000);
-        data1.push(this.getRandomNumWithDecimals(900, 1600));
-      }
-      first = 0;
-    }
-
-    let interval = setInterval(() => {
-      let temp = [];
-      // for (let i = 0; i < 5; i++) {
-      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
-      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
-      // }
-      xData.shift();
-      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
-      data1.shift();
-      data1.push(this.getRandomNumWithDecimals(900, 1600));
-      this.myChart.setOption({
-        xAxis:[{
-          data:xData
-        }],
-        series: [
-          {
-            data: data1,
-          },
-        ],
-      });
-    }, 3000);
+     this.myChart.setOption(this.option);
+     this.chooseDate(this.chooseDatetime);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
     });
   },
+  methods:{
+    convertToDate(date) {
+      var date = new Date(date);
+      // var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      var d = date.getDate();
+      var s = date.getHours()
+      m = m < 10 ? "0" + m : m; //月小于10，加0
+      d = d < 10 ? "0" + d : d; //day小于10，加0
+      s = s < 10 ? "0" + s : s; //时小于10，加0
+      return  m + "-" + d + '\xa0'+s+'时';
+    },
+
+
+    chooseDate(value) {
+      // console.log(value);
+      this.chooseDatetime = value;
+      this.count = 0;
+      switch (value) {
+        case "0":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*30;   //间隔30分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          let interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*30);
+          break;
+        case "1":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()    //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*60;   //间隔60分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60);
+          break;
+        case "2":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*60*24;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24);
+          break;
+        case "3":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(900, 1600));
+              time = time-1000*60*60*24*7;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(900, 1600));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24*7);
+          break;
+      }
+    },
+  },
 };
 </script>
 <style scoped>

src/views/app_beam_tube_inspection/picture/shuru.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <div ref="testLine" style="width: 600px; height: 230px"></div>
+    <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!--算法框-->
+
+    <!--    230-->
   </div>
 </template>
 
 <script>
-/**
- * @module mining/envTest/waterStorage
- * @desc 工作区蓄水图
- * @vue-data {Object} myChart - Echarts实例
- * @vue-data {Object} option - Echarts配置项
- */
+import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
 export default {
+  components:{
+    timeselect,
+  },
   props: {
     title: {
       type: String,
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     return {
+      chooseDatetime: "0",
       currentChartId: 1,
       count: 0,
       myChart: null,
@@ -113,7 +115,7 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: ["2022-08-1", "2022-08-2", "2022-08-3", "2022-08-4", "2022-08-5"],
+            data: [],
           },
         ],
         title: {
@@ -182,56 +184,223 @@ export default {
             tooltip: {
               show: true,
             },
-            data: [1300, 1400, 1200, 1700, 1500],       //初始数据
+            data: [],       //初始数据
           },
         ],
       },
     };
   },
   mounted() {
-    // 先画图
-
+    console.log('@@@'+this.chooseDatetime)
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-
-    var first = 1;
-    if(first){
-      var xData=[];
-      var data1 = [];
-      for (let i = 0; i < 5; i++) {
-        let now =new Date();
-        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
-        now = new Date(+now - 2000);
-        data1.push(this.getRandomNumWithDecimals(1200, 1700));
-      }
-      first = 0;
-    }
-
-    let interval = setInterval(() => {
-      let temp = [];
-      // for (let i = 0; i < 5; i++) {
-      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
-      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
-      // }
-      xData.shift();
-      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
-      data1.shift();
-      data1.push(this.getRandomNumWithDecimals(1200, 1700));
-      this.myChart.setOption({
-        xAxis:[{
-          data:xData
-        }],
-        series: [
-          {
-            data: data1,
-          },
-        ],
-      });
-    }, 3000);
+    this.chooseDate(this.chooseDatetime);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
     });
   },
+  methods:{
+    convertToDate(date) {
+      var date = new Date(date);
+      // var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      var d = date.getDate();
+      var s = date.getHours()
+      m = m < 10 ? "0" + m : m; //月小于10，加0
+      d = d < 10 ? "0" + d : d; //day小于10，加0
+      s = s < 10 ? "0" + s : s; //时小于10，加0
+      return  m + "-" + d + '\xa0'+s+'时';
+    },
+
+
+    chooseDate(value) {
+      // console.log(value);
+      this.chooseDatetime = value;
+      this.count = 0;
+      switch (value) {
+        case "0":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(1200, 1700));
+              time = time-1000*60*30;   //间隔30分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          let interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(1200, 1700));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*30);
+          break;
+        case "1":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()    //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(1200, 1700));
+              time = time-1000*60*60;   //间隔60分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(1200, 1700));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60);
+          break;
+        case "2":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(1200, 1700));
+              time = time-1000*60*60*24;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(1200, 1700));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24);
+          break;
+        case "3":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(1200, 1700));
+              time = time-1000*60*60*24*7;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(1200, 1700));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24*7);
+          break;
+      }
+    },
+  },
 };
 </script>
 <style scoped>

src/views/app_beam_tube_inspection/picture/xiaolv.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <div ref="testLine" style="width: 600px; height: 230px"></div>
+    <timeselect @getMsg="chooseDate" style="margin-left: 480px;color: gray;margin-top: -228px;width:100px;"></timeselect> <!--算法框-->
+
+    <!--    230-->
   </div>
 </template>
 
 <script>
-/**
- * @module mining/envTest/waterStorage
- * @desc 工作区蓄水图
- * @vue-data {Object} myChart - Echarts实例
- * @vue-data {Object} option - Echarts配置项
- */
+import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
 export default {
+  components:{
+    timeselect,
+  },
   props: {
     title: {
       type: String,
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     return {
+      chooseDatetime: "0",
       currentChartId: 1,
       count: 0,
       myChart: null,
@@ -58,7 +60,6 @@ export default {
           right: "8%",
           bottom: "1%",
           containLabel: true,
-
         },
         legend: {
           orient: "vertical",
@@ -72,7 +73,7 @@ export default {
         },
         yAxis: [
           {
-            max:1,
+            max:1.0,
             min:0.9,
             boundaryGap: [0, "100%"],
             name: this.unit,
@@ -178,56 +179,223 @@ export default {
             tooltip: {
               show: true,
             },
-            data: [0.92, 0.91, 0.95, 0.96, 0.94],       //初始数据
+            data: [900, 1300, 1400, 1200, 1600],       //初始数据
           },
         ],
       },
     };
   },
   mounted() {
-    // 先画图
-
+    console.log('@@@'+this.chooseDatetime)
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-
-    var first = 1;
-    if(first){
-      var xData=[];
-      var data1 = [];
-      for (let i = 0; i < 5; i++) {
-        let now =new Date();
-        xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
-        now = new Date(+now - 2000);
-        data1.push(this.getRandomNumWithDecimals(0.9, 1));
-      }
-      first = 0;
-    }
-
-    let interval = setInterval(() => {
-      let temp = [];
-      // for (let i = 0; i < 5; i++) {
-      //   // console.log("@@@", this.getRandomNumWithDecimals(0, 1));
-      //   temp.push(this.getRandomNumWithDecimals(900, 1600));
-      // }
-      xData.shift();
-      xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
-      data1.shift();
-      data1.push(this.getRandomNumWithDecimals(0.9, 1));
-      this.myChart.setOption({
-        xAxis:[{
-          data:xData
-        }],
-        series: [
-          {
-            data: data1,
-          },
-        ],
-      });
-    }, 3000);
+    this.chooseDate(this.chooseDatetime);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
     });
   },
+  methods:{
+    convertToDate(date) {
+      var date = new Date(date);
+      // var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      var d = date.getDate();
+      var s = date.getHours()
+      m = m < 10 ? "0" + m : m; //月小于10，加0
+      d = d < 10 ? "0" + d : d; //day小于10，加0
+      s = s < 10 ? "0" + s : s; //时小于10，加0
+      return  m + "-" + d + '\xa0'+s+'时';
+    },
+
+
+    chooseDate(value) {
+      // console.log(value);
+      this.chooseDatetime = value;
+      this.count = 0;
+      switch (value) {
+        case "0":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+              time = time-1000*60*30;   //间隔30分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          let interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*30);
+          break;
+        case "1":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()    //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              xData.unshift(now1.toLocaleTimeString().replace(/^\D*/, ''))
+              data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+              time = time-1000*60*60;   //间隔60分钟
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60);
+          break;
+        case "2":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+              time = time-1000*60*60*24;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24);
+          break;
+        case "3":
+          var first = 1;
+          if(first){
+            var xData=[];
+            var data1 = [];
+            let now =new Date();
+            let time = now.getTime()   //分钟
+            for (let i = 0; i < 5; i++) {
+              let now1 = now.setTime(time);
+              now1 = new Date(now1)
+              let x = this.convertToDate(now1)
+              xData.unshift(x)
+              data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+              time = time-1000*60*60*24*7;   //
+            }
+            first = 0;
+          }
+          this.myChart.setOption({
+            xAxis:[{
+              data:xData
+            }],
+            series: [
+              {
+                data: data1,
+              },
+            ],
+          });
+
+          interval = setInterval(() => {
+            xData.shift();
+            let now =new Date();
+            xData.push(this.convertToDate(now))
+            data1.shift();
+            data1.push(this.getRandomNumWithDecimals(0.9, 1.0));
+            this.myChart.setOption({
+              xAxis:[{
+                data:xData
+              }],
+              series: [
+                {
+                  data: data1,
+                },
+              ],
+            });
+          }, 1000*60*60*24*7);
+          break;
+      }
+    },
+  },
 };
 </script>
 <style scoped>

src/views/app_beam_tube_inspection/tiemselect.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="class1">
+
+  <el-select v-model="value" placeholder="请选择时间" @change="sendvalue">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "timeselect",
+  data() {
+    return {
+      options: [{
+        value: '0',
+        label: '半小时'
+      }, {
+        value: '1',
+        label: '一小时'
+      }, {
+        value: '2',
+        label: '一天'
+      }, {
+        value: '3',
+        label: '一周'
+      }, ],
+      value: '0'
+    }
+  },
+  methods:{
+    sendvalue(){
+      // this.$parent.chooseDatetime=this.value;
+      // alert('000')
+      this.$emit("getMsg", this.value);
+
+    }
+  },
+}
+</script>
+
+<style scoped>
+.class1{
+  column-rule-color: #00aaff;
+
+}
+
+</style>