bugfix

src/components/tower/Index.vue

@@ -126,7 +126,7 @@
 import AMapLoader from "@amap/amap-jsapi-loader";
 import onlineIcon from "@/assets/tower/online_tower.png";
 import offlineIcon from "@/assets/tower/offline_tower.png";
-import deviceDialog from "./deviceDialog.vue";
+import deviceDialog from "./deviceDialog2.vue";
 import hooks from "@/assets/tower/hooks.png";
 import {
   getBaseInfo,

src/components/tower/deviceDialog2.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    title="设备详情"
+    append-to-body
+    @opened="openedEvents"
+    width="1100px"
+  >
+    <div>
+      <div class="title-label">
+        <img src="@/assets/tower/arrow.png" alt="" />
+        {{ deviceData.device_sn }} /
+        <span :class="[deviceData.is_online == 1 ? 'online' : '']">{{
+          deviceData.is_online_text
+        }}</span>
+      </div>
+      <div class="base-info">
+        <div class="status-area">
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.height }}</div>
+            <div class="status-text">高度/m</div>
+          </div>
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.rotation }}</div>
+            <div class="status-text">回转/°</div>
+          </div>
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.amplitude }}</div>
+            <div class="status-text">幅度/m</div>
+          </div>
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.load }}</div>
+            <div class="status-text">载重/t</div>
+          </div>
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.moment_rate }}</div>
+            <div class="status-text">力矩百分比/%</div>
+          </div>
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.wind_speed }}</div>
+            <div class="status-text">风速/m/s</div>
+          </div>
+          <div class="status-window">
+            <div class="status-value">{{ deviceData.wind_speed_rate }}</div>
+            <div class="status-text">风速百分比/%</div>
+          </div>
+          <div class="status-window">
+            <div
+              class="status-value"
+              style="line-height: 20px; font-size: 15px"
+            >
+              {{ deviceData.log_time && deviceData.log_time.split(" ")[0] }}
+              <br />
+              {{ deviceData.log_time && deviceData.log_time.split(" ")[1] }}
+            </div>
+            <div class="status-text">数据更新</div>
+          </div>
+        </div>
+        <div id="video-container" v-if="deviceData.is_camera == 1"></div>
+        <div id="video-container-img" v-else>
+          <img src="@/assets/tower/no_camera.png" alt="" />
+          <div>暂无监控信息</div>
+        </div>
+      </div>
+
+      <div class="title-label">
+        <img src="@/assets/tower/arrow.png" alt="" />
+        今日载重/高度实时数据
+      </div>
+
+      <div id="current-chart" ref="currentChart"></div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getDeviceTodayChart, getTowerLiveUrl } from "@/api/index";
+require("vue-video-player/node_modules/video.js/dist/video-js.css");
+import videojs from "video.js";
+import "videojs-contrib-hls";
+export default {
+  name: "DeviceDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    deviceId: {
+      type: [String, Number],
+      default: "",
+    },
+    deviceData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      todayData: [],
+      player: null,
+    };
+  },
+  methods: {
+    renderTodayChart() {
+      const xAxisData = this.todayData.map((item) => {
+        return item.time;
+      });
+      const loadData = this.todayData.map((item) => {
+        return item.load;
+      });
+      const heightData = this.todayData.map((item) => {
+        return item.height;
+      });
+      const chart = this.$echarts.init(this.$refs.currentChart);
+      const option = {
+        grid: {
+          top: 30,
+          bottom: 30,
+          left: 30,
+          right: 30,
+        },
+        legend: {
+          orient: "horizontal",
+          x: "center",
+          y: "top",
+          textStyle: {
+            fontSize: 12,
+            color: "rgba(225, 239, 255, 0.7)",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisTick: { show: false },
+          axisLabel: {
+            fontSize: "12",
+            color: "#c6def9",
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            fontSize: "12",
+            color: "#c6def9",
+          },
+          splitNumber: 4,
+          splitLine: {
+            lineStyle: {
+              color: "rgba(95, 120, 144, 0.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "吊重",
+            type: "line",
+            smooth: true,
+            data: loadData,
+          },
+          {
+            name: "高度",
+            type: "line",
+            smooth: true,
+            data: heightData,
+          },
+        ],
+      };
+      chart.setOption(option);
+      this.$nextTick(() => {
+        // 解决echarts图表放大溢出父容器
+        const resizeOb = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            this.$echarts.getInstanceByDom(entry.target).resize();
+          }
+        });
+        resizeOb.observe(document.getElementById("current-chart"));
+      });
+    },
+    openedEvents() {
+      if (this.deviceData.is_camera == 1) {
+        getTowerLiveUrl(this.deviceData.camera_id).then((res) => {
+          const myVideoDiv = document.getElementById(`video-container`);
+          myVideoDiv.innerHTML = `<video
+            id="singleVideo"
+            autoplay="autoplay"
+            class="video-js vjs-default-skin"
+          ></video>`;
+          const singlePlayer = videojs(`singleVideo`, {
+            autoplay: true, // 自动播放
+            controls: true, // 控件显示
+            preload: "auto", //定义视频加载模式
+            loop: true, //是否循环播放
+          });
+          singlePlayer.src({
+            src: res.data.live_address_url,
+            type: "application/x-mpegURL",
+          });
+          singlePlayer.play();
+          this.player = singlePlayer;
+          getDeviceTodayChart(this.deviceId).then((result) => {
+            this.todayData = result.data;
+            this.$nextTick(() => {
+              this.renderTodayChart();
+            });
+          });
+        });
+      } else {
+        getDeviceTodayChart(this.deviceId).then((result) => {
+          this.todayData = result.data;
+          this.$nextTick(() => {
+            this.renderTodayChart();
+          });
+        });
+      }
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("changeVisible", val);
+      },
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (!val) {
+        this.player && this.player.dispose();
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.title-label {
+  border-bottom: 2px solid #00b7ee;
+  height: 18px;
+  font-size: 18px;
+  color: #c6def9;
+  line-height: 30px;
+  min-height: 30px;
+  margin-bottom: 20px;
+  img {
+    width: 16px;
+  }
+}
+.base-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+#video-container {
+  width: calc(40% - 20px);
+}
+#video-container-img {
+  width: calc(40% - 50px);
+  text-align: center;
+  border: 1px solid #00b7ee;
+  box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
+  border-radius: 4px;
+  padding: 20px;
+  background: #113e77;
+  text-align: center;
+  font-size: 14px;
+  color: #3f6fab;
+  img {
+    width: 130px;
+    vertical-align: top;
+  }
+}
+.status-area {
+  display: flex;
+  width: 60%;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.status-window {
+  width: 20%;
+  border: 1px solid #00b7ee;
+  box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
+  border-radius: 4px;
+  padding: 10px;
+  background: #113e77;
+  text-align: center;
+  margin-bottom: 20px;
+  &:nth-child(n + 5) {
+    margin-bottom: 0;
+  }
+  .status-value {
+    font-size: 18px;
+    color: #13e0ff;
+    line-height: 40px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #00b7ee;
+  }
+  .status-text {
+    font-size: 14px;
+    color: #c6def9;
+    line-height: 20px;
+  }
+}
+#current-chart {
+  width: 100%;
+  height: 300px;
+}
+.online {
+  color: #3eec6f;
+}
+::v-deep .video-js {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file