From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改

---
 src/views/dataL/dataL.vue |  577 ++++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 422 insertions(+), 155 deletions(-)

diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 32577e2..7710cb1 100644
--- a/src/views/dataL/dataL.vue
+++ b/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>
\ No newline at end of file
+video::-webkit-media-controls-timeline {
+  display: none;
+}
+</style>

--
Gitblit v1.9.3