修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 src/views/dataL/dataL.vue

@@ -1,35 +1,34 @@
<template>
  <div id="Lour">
    <div class="left">
  <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">
          </div>
          <div class="t-t-title2">
            <div class="t-t-state">
              <span
                :class="{
                  'l-t-s-grey': state == dataState[0],
                  'l-t-s-green': state == dataState[1],
                  'l-t-s-yewllo': state == dataState[3],
                  'l-t-s-yewllo': state == dataState[2],
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span>
              <span>{{ state }}</span>
            </div>

            <!-- <p>{{evaluate}}</p> -->
          </div>
          <div class="left-bot">
            <p>{{ machineCode }}</p>
            <!-- <p>{{smoke}}</p> -->
            <!-- <p>{{proportion}}</p> -->
              <span>{{ " " + state }}</span>
            </div>
            <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">
@@ -44,7 +43,7 @@
                  ref="echart01"
                ></div>

                <div class="l-main-2">
                <div class="l-main-2" ref="aaa">
                  <div class="l-m-2-heard">
                    <span style="font-size: 14px">历史事件</span>
                    <span style="font-size: 12px">全部事件类型</span>
@@ -98,8 +97,9 @@
                            viewBox="0 0 1024 1024"
                            width="100%"
                            height="100%"
                            fill="#29c093"
                            fill="rgba(0,0,0,0.5)"
                            style="width: 13px; position: relative; top: 2px"
                            ref="svgBut"
                          >
                            <path
                              d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z"
@@ -134,7 +134,12 @@
                        {{ value.year }}年
                      </p>
                      <div class="l-m-2-m-tablemain">
                        <el-table :data="value.data" style="width: 100%" highlight-current-row @current-change="handleCurrentChange"><!--highlight-current-row: 单选，current-change单选事件-->
                        <el-table
                          :data="value.data"
                          style="width: 100%"
                          highlight-current-row
                          @current-change="handleCurrentChange"
                          ><!--highlight-current-row: 单选，current-change单选事件-->
                          <el-table-column type="index"> </el-table-column>
                          <el-table-column label="日期" prop="day">
                          </el-table-column>
@@ -160,7 +165,7 @@
                            </template>
                          </el-table-column>
                          <!-- <el-table-column label="跳转实时" prop="">
                            

                          </el-table-column> -->
                        </el-table>
                      </div>
@@ -196,7 +201,7 @@
                                                prop="open">
                                                </el-table-column>
                                            </el-table>
                                        </el-form>  
                                        </el-form>
                                </template>
                                </el-table-column>
                                <el-table-column
@@ -274,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"
@@ -321,7 +326,7 @@
                      </el-row>
                      <el-row>
                        <el-col span="12">
                          <el-form-item label="负责人">
                          <el-form-item label="主要负责人">
                            <el-input
                              disabled="true"
                              v-model="detailsData.person"
@@ -347,7 +352,7 @@
                                                v-model="detailsData.user"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item> 
                                            </el-form-item>
                                        </el-col> -->
                        <el-col span="12">
                          <el-form-item label="序列号">
@@ -399,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"
@@ -454,6 +459,29 @@
                </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
                      style="height: 550px; width: 100%"
                      controls="controls"
                      id="real_video_conversationDataL"
                      src=""
                    ></video>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
@@ -462,7 +490,7 @@
      <div class="r-one">
        <div class="r-heard">
          <div class="r-heard-top">部署信息</div>
          <button @click="modifyl" class="r-but-top">修改</button>
          <!-- <button @click="modifyl" class="r-but-top">修改</button> -->
        </div>
        <div class="r-body">
          <div class="r-b-top">
@@ -478,12 +506,12 @@
            <!-- <div class="r-b-t-main">
                                <span class="r-b-t-left">设备标签</span>
                                <span class="r-b-t-right">
                                    <div 
                                    class="r-b-t-r-label" 
                                    v-for="(value,index) in labels" 
                                    <div
                                    class="r-b-t-r-label"
                                    v-for="(value,index) in labels"
                                    :key="index"
                                    >
                                         {{value}} 
                                         {{value}}
                                    </div>
                                </span>
                            </div> -->
@@ -553,8 +581,15 @@
</template>
<script>
import { Loading } from "element-ui";
import { getdataL, getGalarm, getnum } from "../../api/dataL/axiosL";
import {
  getdataL,
  getGalarm,
  getnum,
  getImg,
  getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
import Hls from "hls.js";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
@@ -564,10 +599,12 @@
      // timeL: "",
      a: "",
      myDeviceNumber: "",

      videoUrl: "",
      //折线图
      myChart: "",
      numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],

      jingqingPdianji: null,

      name: "",
      state: "",
@@ -588,10 +625,11 @@

      activeName: "first",
      // activeName: 'second',
      // activeName: "third",
      isRecord: true,
      screens: false,
      //复选框
      dataState: ["掉线", "在线", '故障', "预警"], 
      dataState: ["掉线", "正常", "故障", "预警"],
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
@@ -871,6 +909,7 @@
      this.checkedCities = ["未处理", "处理中", "已处理"];
      // console.log(`按钮重置`);
      this.doEvents(this.checkedCities);
      this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
      // this.eventDetails = this.eventDetaill;
    },
    determine() {
@@ -880,8 +919,14 @@
      if (this.checkedCities.length == 0) {
        // console.log(`未选择`);
        this.eventDetails = [];
        this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
      } else {
        this.doEvents(this.checkedCities); //筛选数据
        if (this.checkedCities.length == 3) {
          this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
        } else {
          this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
        }
      }
    },
    doEvents(ends) {
@@ -926,71 +971,85 @@
    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",
        size: "10",
      };
      var imgdadta = {
        deviceNumber: this.myDeviceNumber,
      };
      getdataL(data).then((res) => {
        var data = res.data.data.records[0];
        var setimgl = null;
        //插入图片api获取图片
        this.stetDetails(data);
        // console.log(data);
        getImg(imgdadta, "post").then((res) => {
          // console.log(res.data.data.length != 0)
          var imgdatas = [];
          if (res.data.data.length != 0) {
            imgdatas = res.data.data[0].paddress.split(",");
          }
          // console.log(imgdatas);
          // imgdatas = [ //最多5张照片
          //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
          //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
          //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",

          //   "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
          // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG",
          // ];
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
      });
    },
    stetDetails(d) {
      this.name = "无数据" && d.deviceName;
    stetDetails(c, imgdata) {
      this.name = "无数据" && this.a.deviceName;
      //设备状态
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
      //   state!= "",
      //   jtype != 2
      //   ]
      var states,
      o = this.a.onlineStatus,
      s = this.a.state,
      j = this.a.jtype;
      if(o == 0){
        states = '掉线';
      }else if(o == 1){
        states = '在线';
      }else if(s != ""){
        states = '故障';
      }else if(j != 2){
        states = '预警';
        d = this.a.dtype;
      if (d == 0) {
        states = "掉线";
      } else if (d == 1) {
        states = "正常";
      } else if (d == 3) {
        states = "故障";
      } else if (d == 2) {
        states = "预警";
      }
      this.state = "无数据" && states;
      this.state = states;

      this.evaluate = "空气质量";
      this.machineCode = "无数据" && d.deviceNumber;
      this.machineCode = "无数据" && this.a.deviceNumber;
      this.smoke = "烟雾";
      this.proportion = "电量";
      this.ReportTime = "最近上报：" + d.heartbeat;
      this.contacts = "无数据" && d.oneContacts;
      this.calls = "无数据" && d.onePhone;
      this.labels = ["无数据"] && [d.deviceType];
      var imgD = ["no"];
      this.imgsl = ["no"] && imgD;
      this.deploymentTime = "无数据" && d.stime;
      this.ReportTime = "最近上报：" + this.a.heartbeat;
      this.contacts = "无数据" && this.a.oneContacts;
      this.calls = "无数据" && this.a.onePhone;
      this.labels = ["无数据"] && [this.a.deviceType];
      this.imgsl = imgdata;
      this.deploymentTime = "无数据" && this.a.stime;

      this.detailsData = {
        machineName: d.deviceName, // 设备名称
        machineNumber: d.deviceNumber, //
        user: d.ownership, //     使用方
        serialNumber: d.serialNumber, //     序列号
        channel: d.channelNumber, //     通道号
        deployment: d.devicestate == 1 ? "布防" : "撤防", //     布撤防状态:
        machineType: d.deviceType, //     设备类型
        province: ["邮编：", d.district, ""], //     省份
        street: d.street, //     街道
        person: d.oneContacts, //     负责人
        call: d.onePhone, //     负责人电话
        dueDate: d.expireTime, //     到期时间
        payment: d.pay, //     缴费信息
        installation: d.stime, //     安装时间
        heartbeat: d.heartbeat, //     心跳时间
        machineName: this.a.deviceName, // 设备名称
        machineNumber: this.a.deviceNumber, //
        user: this.a.ownership, //     使用方
        serialNumber: this.a.serialNumber, //     序列号
        channel: this.a.channelNumber, //     通道号
        deployment: this.a.devicestate == 1 ? "布防" : "撤防", //     布撤防状态:
        machineType: this.a.deviceType, //     设备类型
        province: ["邮编：", this.a.district, ""], //     省份
        street: this.a.street, //     街道
        person: this.a.oneContacts, //     负责人
        call: this.a.onePhone, //     负责人电话
        dueDate: this.a.expireTime, //     到期时间
        payment: this.a.pay, //     缴费信息
        installation: this.a.stime, //     安装时间
        heartbeat: this.a.heartbeat, //     心跳时间
      };
      this.form = d;
      this.form = c;
    },
    getdataG() {
      var dataG = {
@@ -1003,6 +1062,7 @@
        var ds = res.data.data.records;
        // console.log(ds)
        this.setdataG(ds);
        this.jingqingPdianji = ds;
      });
    },
    setdataG(d) {
@@ -1042,6 +1102,7 @@
              oneContacts: d[key].oneContacts,
              alarmPeople: d[key].alarmPeople,
              onePhone: d[key].onePhone,
              jjTime: d[key].jjTime,
              childs: [],
            });
          }
@@ -1060,13 +1121,16 @@
          creates(i, tData);
        }
      }
      for(var k1 in Num){//添加序号
      for (var k1 in Num) {
        //添加序号
        var n2 = Num[k1];
        for(var k2 in n2){
          if(k2 == 'year'){continue};
        for (var k2 in n2) {
          if (k2 == "year") {
            continue;
          }
          // console.log(n2[k2])
          var n3 = n2[k2];
          for(var k3 in n3){
          for (var k3 in n3) {
            // console.log(+k3 + 1);
            n3[k3].i = +k3 + 1;
          }
@@ -1097,7 +1161,7 @@
      this.startEcharts01();
    },
    getMap() {
      window.frames[0].init("DetailMap", {
      window.frames[1].init("DetailMap", {
        x: this.a.jd,
        y: this.a.wd,
      });
@@ -1109,16 +1173,146 @@
      //   _iframe1.contentWindow.location.reload(true);
      location.reload();
    },
    handleCurrentChange(val){
        console.log(val.i)
    }
    handleCurrentChange(val) {
      //行点击事件
      var b = this.jingqingPdianji;
      for (var key in b) {
        if (b[key].jjTime == val.jjTime) {
          // console.log(b[key]);
          // this.$store.commit("SET_DATAL", this.a);
          this.$router.push({ path: "/policeTracking/track", query: b[key] });
        }
      }
      // console.log(this.$store.state)
    },
    //获取视频
    openRealVideoBox(serialNumber, channelNumber,deviceNumber,manufacturer) {
      var that = this;

      if (manufacturer == "HK"){
        axios
          .get(
            `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
          )
          .then((result) => {
            that.videoSource = result.data.data.data.url;
            if (Hls.isSupported()) {
              var dom = document.getElementById(
                "real_video_conversationDataL"
              );
              that.hls = new Hls();
              var m3u8Url = decodeURIComponent(that.videoSource);
              that.hls.loadSource(m3u8Url);
              that.hls.attachMedia(dom);
              that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                dom.play();
              });
              that.hls.on(Hls.Events.ERROR, function (event, data) {
                // console.log(data, 4566824159, "视频播放有问题！！！");
                if (data.fatal) {
                  switch (data.type) {
                    case Hls.ErrorTypes.NETWORK_ERROR:
                      console.log(
                        "fatal network error encountered, try to recover"
                      );
                      that.hls.startLoad();
                      break;
                    case Hls.ErrorTypes.MEDIA_ERROR:
                      console.log(
                        "fatal media error encountered, try to recover"
                      );
                      that.hls.recoverMediaError();
                      break;
                  }
                }
              });
            }
          });
      }else{
        var res = that.a;
        if (res.deviceName.indexOf("（象湖院区）") != -1 || res.deviceName.indexOf("（东湖院区）") != -1){
          debugger
          var dom = document.getElementById(
            "real_video_conversationDataL"
          );
          dom.src = res.netType;
          dom.play();
          return;
        }

        var newAxios = axios.create({
          baseURL: "https://web.byisf.com:18000",
          withCredentials: false,
          headers: {
            "Content-type": "application/x-www-form-urlencoded",
          },
        });
        newAxios
          .post(
            "/api_control",
            {},
            {
              params: {
                param: JSON.stringify({ PktType: "GetAccessToken" }),
              },
            }
          )
          .then((res) => {
            newAxios
              .get(
                `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
              )
              .then((result) => {
                that.videoSource = result.data.data.m3u8;
                if (Hls.isSupported()) {
                  var dom = document.getElementById(
                    "real_video_conversationDataL"
                  );
                  that.hls = new Hls();
                  var m3u8Url = decodeURIComponent(that.videoSource);
                  that.hls.loadSource(m3u8Url);
                  that.hls.attachMedia(dom);
                  that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    dom.play();
                  });
                  that.hls.on(Hls.Events.ERROR, function (event, data) {
                    // console.log(data, 4566824159, "视频播放有问题！！！");
                    if (data.fatal) {
                      switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                          console.log(
                            "fatal network error encountered, try to recover"
                          );
                          that.hls.startLoad();
                          break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                          console.log(
                            "fatal media error encountered, try to recover"
                          );
                          that.hls.recoverMediaError();
                          break;
                      }
                    }
                  });
                }
              });
          });
      }
    },
  },
  created() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
    // this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
    this.a = this.$route.query;
    // this.a = this.$route.query.deviceNumber == undefined? this.$store.state.dataL.dataLa : this.$route.query;
    if(this.$route.query.deviceNumber == undefined){
      this.a = this.$store.state.dataL.dataLa;
    }else{
      this.a =  this.$route.query;
    this.$store.commit("SET_DATAL", this.a);//每次都缓存在vuex中，如果没有从正确路径进来，则使用缓存
    }
    // console.log(this.a);
    this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
    this.myDeviceNumber = this.$route.query.deviceNumber;
    this.myDeviceNumber = this.a.deviceNumber;
    // console.log(this.a);
    // console.log(this.myDeviceNumber);
    this.getdata();
@@ -1131,25 +1325,43 @@
    // this.doEvents();
    // var timel = setTimeout(() => {
    this.$refs.detailMap.onload = () => {
      // window.frames[0].init("DetailMap", {
      // window.frames[1].init("DetailMap", {
      //   x: this.a.jd,
      //   y: this.a.wd,
      // });
      if (window.frames[0].init) {
      if (window.frames[1].init) {
        this.getMap();
      } else {
        // this.re();
        this.getMap();
        console.log(`没有找到到window.frames[1].init`);
      }
    };
  },
  watch: {
    activeName() {
      if (this.activeName == "third") {
        this.i++;
        this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber,this.a.deviceNumber,this.a.manufacturers);
      } else {
        var dom = document.getElementById("real_video_conversationDataL");
        if (dom.getAttribute("src") != "") {
          dom.pause();
          dom.setAttribute("src", "");
          this.hls.destroy();
        }
      }
    },
  },
};
</script>
<style lang="scss" >
video::-webkit-media-controls-timeline {
            display: none;
        }
#Lour {
  width: 100%;
  font-size: 14px;
  height: 99.5%;
  height: 100%;
  // font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
  // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
  // font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
@@ -1167,7 +1379,7 @@
  overflow: hidden;
  .left {
    width: 67%;
    height: 99.5%;
    height: 100%;
    // border: 1px solid rgb(236, 24, 24);
    background-color: #fff;
    display: flex;
@@ -1177,79 +1389,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: rgb(187, 187, 187);
              background-color: #cdcdcd;
            }
            .l-t-s-green {
              background-color: rgb(41, 202, 135);
              background-color: #32c1a2;
            }
            .l-t-s-yewllo{
              background-color: rgb(240, 181, 20);
            .l-t-s-yewllo {
              background-color: #f49966;
            }
            .l-t-s-red {
              background-color: rgba(247, 28, 28, 0.877);
              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%;
@@ -1333,7 +1597,7 @@
        width: 100%;
        height: 370px;
        // overflow: scroll;
        overflow-y: scroll;//滚动条
        overflow-y: scroll; //滚动条
        scrollbar-color: transparent transparent;
        scrollbar-track-color: transparent;
        -ms-scrollbar-track-color: transparent;
@@ -1392,7 +1656,7 @@
  }
  .right {
    width: 30%;
    height: 90.5%;
    height: 95.5%;
    // border: 1px solid rgb(23, 201, 62);
    background-color: #fff;
    display: flex;
@@ -1425,7 +1689,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;
@@ -1468,13 +1732,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;
        }
      }
    }
@@ -1502,4 +1766,7 @@
  margin-bottom: 0;
  width: 50%;
}
</style>
video::-webkit-media-controls-timeline {
  display: none;
}
</style>