地图 热力图 设备 视频 详情页 图标

liuyg

2021-04-28 4ac408e9a9c9c24ef0ea3e12004a500238956103

 src/views/dataL/dataL.vue

@@ -2,26 +2,14 @@
  <div id="Lour" style="height: 100%">
    <div class="left" style="height: 101%">
      <div class="top">
        <div class="top-l">
          <div class="left-top">
        <div class="top-t">
          <div class="t-t-title">
            <p style="font-size: 24px; font-weight: 100">
              {{ name.length > 14 ? name.substr(0, 14) + "···" : name }}
              {{ name }}
            </p>
            <div class="l-t-state">
              <!-- dataState: ["掉线", "在线", "故障", "预警"], 
                if (s != "") {
                    states = "故障";
                  } else {
                    if (j != 1) {
                      if (o == 1) {
                        states = "在线";
                      } else {
                        states = "掉线";
                      }
                    } else {
                      states = "预警";
                    }
                  }-->
          </div>
          <div class="t-t-title2">
            <div class="t-t-state">
              <span
                :class="{
                  'l-t-s-grey': state == dataState[0],
@@ -30,20 +18,17 @@
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span>
              ></span
              >&nbsp
              <span>{{ state }}</span>
            </div>

            <!-- <p>{{evaluate}}</p> -->
          </div>
          <div class="left-bot">
            <p>{{ machineCode }}</p>
            <!-- <p>{{smoke}}</p> -->
            <!-- <p>{{proportion}}</p> -->
            <div class="t-t-time">
              <p>{{ ReportTime }}</p>
            </div>
          </div>
        </div>
        <div class="top-r">
          <p>{{ ReportTime }}</p>
        <div class="top-b">
          {{ machineCode }}
        </div>
      </div>
      <div class="l-main">
@@ -294,9 +279,9 @@
            <el-tab-pane label="设备详情" name="second">
              <div class="l-main-3">
                <div class="l-m-3-heard">
                  <h2>
                  <!-- <h2>
                    {{ name.length > 16 ? name.substr(0, 16) + "···" : name }}
                  </h2>
                  </h2> -->
                  <div>设备数据详情</div>
                </div>
                <el-divider content-position="left"
@@ -419,7 +404,7 @@
                            </el-form-item>
                          </el-col>
                          <el-col span="12">
                            <el-form-item label="街道">
                            <el-form-item label="地址">
                              <el-input
                                disabled="true"
                                v-model="detailsData.street"
@@ -471,6 +456,26 @@
                      </el-row>
                    </el-form>
                  </el-row>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="现场视频" name="third">
              <div class="l-main-3">
                <!-- <div class="l-m-3-heard">222</div> -->
                <div class="l-m-3-heard">
                  <div>设备现场视频</div>
                </div>
                <!-- <el-divider content-position="left"></el-divider> -->
                <el-divider content-position="left"
                  ><i class="el-icon-mobile-phone"></i
                ></el-divider>
                <div class="l-m-3-main">
                  <!-- {{ videoUrl }} -->
                  <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                </div>
              </div>
            </el-tab-pane>
@@ -573,7 +578,13 @@
</template>
<script>
import { Loading } from "element-ui";
import { getdataL, getGalarm, getnum, getImg } from "../../api/dataL/axiosL";
import {
  getdataL,
  getGalarm,
  getnum,
  getImg,
  getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
import echarts from "echarts";
import { Form } from "element-ui";
@@ -584,7 +595,7 @@
      // timeL: "",
      a: "",
      myDeviceNumber: "",

      videoUrl: "",
      //折线图
      myChart: "",
      numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
@@ -608,6 +619,7 @@

      activeName: "first",
      // activeName: 'second',
      // activeName: "third",
      isRecord: true,
      screens: false,
      //复选框
@@ -953,6 +965,7 @@
    getdata() {
      // const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}&current=1&size=10&pid=`
      // axios.get(url)
      var that = this;
      var data = {
        deviceName: this.myDeviceNumber,
        current: "1",
@@ -965,7 +978,7 @@
        var data = res.data.data.records[0];
        var setimgl = null;
        //插入图片api获取图片
        // this.stetDetails(data);
        this.stetDetails(data);
        getImg(imgdadta, "post").then((res) => {
          // console.log(res.data.data.length != 0)
          var imgdatas = [];
@@ -985,7 +998,41 @@
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        // console.log(data);
        var videoData = {
          deviceCode: that.a.serialNumber,
          chl: that.a.channelNumber,
        };
        // console.log(videoData);
        // getVideo(videoData).then((res) => {
        //   that.videoUrl = res

        //   console.log(res)

        // });
        var xhr2 = null, //视频请求
          url =
            "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
            videoData.deviceCode +
            "&chl=" +
            videoData.chl;
        if (XMLHttpRequest) {
          //http请求
          xhr2 = new XMLHttpRequest();
        } else {
          xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr2.open("get", url, true);
        xhr2.send();
        xhr2.onreadystatechange = function () {
          if (xhr2.readyState === 4) {
            if (xhr2.status === 200) {
              // 判断isJson是否传进来了
              var data2 = JSON.parse(xhr2.responseText); // JSON转js
              that.videoUrl = data2.data.m3u8;
              // console.log(videoUrl);
            }
          }
        };
      });
    },
    stetDetails(d, imgdata) {
@@ -1028,7 +1075,7 @@
      // console.log(j, 1000);

      // console.log(states, 1000);
      this.state =  states;
      this.state = states;

      this.evaluate = "空气质量";
      this.machineCode = "无数据" && this.a.deviceNumber;
@@ -1180,7 +1227,8 @@
      //   _iframe1.contentWindow.location.reload(true);
      location.reload();
    },
    handleCurrentChange(val) {//行点击事件
    handleCurrentChange(val) {
      //行点击事件
      // console.log(val.i);
    },
  },
@@ -1249,79 +1297,131 @@
      width: 98%;
      height: 150px;
      // border: 1px solid rgb(21, 18, 204);
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      .top-l {
        position: relative;
        top: 40px;
        width: 500px;
        // border: 1px solid rgb(24, 207, 48);
        div {
          display: flex;
          align-items: center;
          justify-content: space-around;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: PingFangSC-Regular;
      .top-t,
      .top-b {
        width: 95%;
        // padding-left: 50px;
      }
      .top-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // border: 1px solid rgb(204, 161, 18);
        .t-t-title {
          font-size: 14px;
          // border: 1px solid rgb(24, 207, 48);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          // border: 1px solid rgb(18, 204, 80);
        }
        .left-top {
          p {
            width: 356px;
            // border: 1px solid rgb(37, 37, 37);
          }
          padding-left: 15px;
          // border: 1px solid rgb(24, 207, 48);
          .l-t-state {
            // border: 1px solid rgb(24, 207, 48);
            position: relative;
            top: 5px;
            left: 10px;
            width: 55px;
        .t-t-title2 {
          position: relative;
          top: 25px;
          .t-t-state {
            .l-t-s-yuan {
              display: block;
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 5px;
              border: 1px solid transparent;
            }
            .l-t-s-grey {
              background-color: #CDCDCD;
              background-color: #cdcdcd;
            }
            .l-t-s-green {
              background-color: #32C1A2;
              background-color: #32c1a2;
            }
            .l-t-s-yewllo {
              background-color: #F49966;
              background-color: #f49966;
            }
            .l-t-s-red {
              background-color: #F35B5B;
              background-color: #f35b5b;
            }
          }
        }
      }
      .left-bot,
      .top-r {
        font-size: 14px;
        font-weight: 400;
        color: #c4c4c4;
        // border: 1px solid rgb(24, 207, 48);
      .top-b,
      .t-t-time {
        // width: 100%;
        font-weight: 600;
        color: rgba($color: #6b6b6b, $alpha: 0.5);
        // border: 1px solid rgb(18, 204, 148);
      }
      .left-bot {
        position: relative;
        left: -68px;
        p {
          width: 295px;
          // border: 1px solid rgb(37, 37, 37);
        }
      }
      .top-r {
        width: 250px;
        // border: 1px solid rgb(24, 207, 48);
        float: right;
        position: relative;
        top: -50px;
      }
      // border-bottom:1px solid #000;
      // .top-l {
      //   position: relative;
      //   top: 40px;
      //   width: 500px;
      //   border: 1px solid rgb(24, 207, 48);
      //   div {
      //     display: flex;
      //     align-items: center;
      //     justify-content: space-around;
      //     font-size: 14px;
      //     // border: 1px solid rgb(24, 207, 48);
      //   }
      //   .left-top {
      //     p {
      //       width: 356px;
      //       // border: 1px solid rgb(37, 37, 37);
      //     }
      //     padding-left: 15px;
      //     // border: 1px solid rgb(24, 207, 48);
      //     .l-t-state {
      //       // border: 1px solid rgb(24, 207, 48);
      //       position: relative;
      //       top: 5px;
      //       left: 50px;
      //       width: 55px;
      //       .l-t-s-yuan {
      //         display: block;
      //         width: 10px;
      //         height: 10px;
      //         border-radius: 5px;
      //         border: 1px solid transparent;
      //       }
      //       .l-t-s-grey {
      //         background-color: #cdcdcd;
      //       }
      //       .l-t-s-green {
      //         background-color: #32c1a2;
      //       }
      //       .l-t-s-yewllo {
      //         background-color: #f49966;
      //       }
      //       .l-t-s-red {
      //         background-color: #f35b5b;
      //       }
      //     }
      //   }
      // }
      // .left-bot,
      // .top-r {
      //   font-size: 14px;
      //   font-weight: 400;
      //   color: #c4c4c4;
      //   // border: 1px solid rgb(24, 207, 48);
      // }
      // .left-bot {
      //   position: relative;
      //   left: -68px;
      //   p {
      //     width: 295px;
      //     // border: 1px solid rgb(37, 37, 37);
      //   }
      // }
      // .top-r {
      //   width: 250px;
      //   // border: 1px solid rgb(24, 207, 48);
      //   float: right;
      //   position: relative;
      //   top: -50px;
      // }
      // // border-bottom:1px solid #000;
    }
    .l-main {
      width: 98%;
@@ -1497,7 +1597,7 @@
      font-weight: normal;
      font-size: 14px;
      .r-b-top {
        height: 200px;
        height: 380px;
        display: flex;
        // border: 1px solid rgb(23, 201, 62);
        display: flex;
@@ -1540,13 +1640,13 @@
        }
      }
      .r-b-map {
        height: 500px;
        height: 350px;
        // border: 1px solid rgba(109, 109, 109, 0.2);
        #detailMap {
          position: relative;
          top: 25px;
          width: 100%;
          height: 500px;
          height: 350px;
        }
      }
    }