优化车前后监控

src/views/statics/index.vue

@@ -6,17 +6,14 @@
         <div class="card-header">
           <div style="display: flex; flex-direction: row">
             <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
-            <span
-              style="
+            <span style="
                 font-family: PingFang SC;
                 font-size: 14px;
                 font-weight: normal;
                 line-height: 19px;
                 height: 19px;
                 margin-left: 5px;
-              "
-              >车辆列表</span
-            >
+              ">车辆列表</span>
           </div>
         </div>
         <div style="margin-top: 20px; padding-left: 10px">
@@ -29,30 +26,16 @@
             placeholder="请选择归属部门"
             check-strictly
           /> -->
-          <el-input
-            style="margin-top: 10px"
-            v-model="filterText"
-            placeholder="输入关键字"
-          />
+          <el-input style="margin-top: 10px" v-model="filterText" placeholder="输入关键字" />
           <div style="max-height: 80vh;overflow-y: scroll">
-            <lay-tree
-              :data="data"
-              ref="treeRef"
-              :tail-node-icon="false"
-              :onlyIconControl="true"
-              :default-expand-all="true"
-              v-model:selectedKey="keys"
-              :searchNodeMethod="filterNode"
-              @node-click="treeclick"
-            >
+            <lay-tree :data="data" ref="treeRef" :tail-node-icon="false" :onlyIconControl="true"
+              :default-expand-all="true" v-model:selectedKey="keys" :searchNodeMethod="filterNode"
+              @node-click="treeclick">
               <template #title="{ data }">
                 <div>
                   <span>{{ data.title }}</span>
-                  <el-tag
-                    v-if="data.time != undefined"
-                    style="margin-left: 20px"
-                    :type="data.time == '在线' ? 'success' : 'danger'"
-                  >
+                  <el-tag v-if="data.time != undefined" style="margin-left: 20px"
+                    :type="data.time == '在线' ? 'success' : 'danger'">
                     {{ data.time }}
                   </el-tag>
                 </div>
@@ -98,211 +81,231 @@
         <div class="card-header">
           <div style="display: flex; flex-direction: row; position: relative">
             <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
-            <span
-              style="
+            <span style="
                 font-family: PingFang SC;
                 font-size: 14px;
                 font-weight: normal;
                 line-height: 19px;
                 height: 19px;
                 margin-left: 5px;
-              "
-              >车辆视频</span
-            >
+              ">车辆视频</span>
             <span style="margin-left: 30px; font-size: 14px">{{
               currentdata?.label
-            }}</span>
+              }}</span>
             <div style="margin-top: 20px"></div>
           </div>
         </div>
-        <div id="container" style="margin-top: 20px; width: 100%; height: 80vh"></div>
+        <ArrowRightBold v-if="videoList.length > 1 && videoIndex == 0" style="width: 20px; height: 20px; margin-left: 800px"
+          @click="playVideo(1)"></ArrowRightBold>
+        <ArrowLeftBold v-if="videoList.length > 1  && videoIndex == 1" style="width: 20px; height: 20px; margin-left: 800px"
+          @click="playVideo(0)"></ArrowLeftBold>
+        <div id="container" style="margin-top: 10px; width: 100%; height: 80vh"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { listCarInfo } from "@/api/carInfo";
-import moment from "moment";
-import api from "@/api/system/user";
+  import { listCarInfo } from "@/api/carInfo";
+  import moment from "moment";
+  import api from "@/api/system/user";
 
-const carlist = ref([]);
-const carData = ref([]);
+  const carlist = ref([]);
+  const carData = ref([]);
 
-const showTree = ref(true);
+  const showTree = ref(true);
 
-const filterText = ref("");
-const treeRef = ref(null);
+  const filterText = ref("");
+  const treeRef = ref(null);
 
-const deptOptions = ref([]);
+  const deptOptions = ref([]);
 
-const deptId = ref([]);
-const keys = ref();
+  const deptId = ref([]);
+  const keys = ref();
+  const videoList = ref([]);
+  const videoIndex =ref(0)
 
-const gettreeheight = () => {
-  return document.body.clientHeight - 300;
-};
+  const gettreeheight = () => {
+    return document.body.clientHeight - 300;
+  };
 
-const getTreeSelect = async () => {
-  const res = await api.deptTreeSelect();
-  console.log(res);
-  deptOptions.value = res.data;
-};
+  const getTreeSelect = async () => {
+    const res = await api.deptTreeSelect();
+    console.log(res);
+    deptOptions.value = res.data;
+  };
 
-const initData = async () => {
-  getTreeSelect();
-  listCarInfo({ pageSize: 1000000 }).then((res) => {
-    carData.value = carlist.value = res.rows.filter((i) => {
-      var hsin = false;
-      if (i.deviceInfos) {
-        JSON.parse(i.deviceInfos).forEach((item) => {
-          if (item.type == "camera") {
-            hsin = true;
-            return true;
-          }
-        });
-      }
-      return hsin;
-    });
+  const initData = async () => {
+    getTreeSelect();
+    listCarInfo({ pageSize: 1000000 }).then((res) => {
+      carData.value = carlist.value = res.rows.filter((i) => {
+        var hsin = false;
+        if (i.deviceInfos) {
+          JSON.parse(i.deviceInfos).forEach((item) => {
+            if (item.type == "camera") {
+              hsin = true;
+              return true;
+            }
+          });
+        }
+        return hsin;
+      });
 
-    var keyp = [100];
-    var index = 0;
-    var all = 0;
-    var zx = 0;
+      var keyp = [100];
+      var index = 0;
+      var all = 0;
+      var zx = 0;
 
-    deptOptions.value[0].children.forEach((p) => {
-      p["children"] = (p.children ?? []).concat(
-        carlist.value
-          .filter((i) => JSON.parse(i.ext1).deptId == p.id)
-          .map((i) => {
-            keyp.push(p.id);
-            let ll = i.lastCountTime == null
-              ? "离线"
-              : moment().unix() - moment(i.lastCountTime).unix() > 60 * 5
+      deptOptions.value[0].children.forEach((p) => {
+        p["children"] = (p.children ?? []).concat(
+          carlist.value
+            .filter((i) => JSON.parse(i.ext1).deptId == p.id)
+            .map((i) => {
+              keyp.push(p.id);
+              let ll = i.lastCountTime == null
                 ? "离线"
-                : "在线";
-            if (ll == "在线") {
-              zx++;
-            }
-            all++;
-            return {
-              id: `car_${++index}`,
-              title: i.carNum,
-              deviceInfos: i.deviceInfos,
-              time:
-                ll,
-            };
-          })
-      );
-      p["title"] = p.label+` [ ${p["children"].filter(i=>i.time.indexOf("在线")!=-1).length}/${p["children"].length}]`;
-    });
-    deptOptions.value[0]["title"] = deptOptions.value[0]["label"] +` [ ${zx}/${all}]`;
-    data.value = deptOptions.value;
-    keys.value = keyp;
-    setTimeout(() => {
-      treeRef.value.setExpandedKeys(keys.value);
-    }, 10000);
+                : moment().unix() - moment(i.lastCountTime).unix() > 60 * 5
+                  ? "离线"
+                  : "在线";
+              if (ll == "在线") {
+                zx++;
+              }
+              all++;
+              return {
+                id: `car_${++index}`,
+                title: i.carNum,
+                deviceInfos: i.deviceInfos,
+                time:
+                  ll,
+              };
+            })
+        );
+        p["title"] = p.label + ` [ ${p["children"].filter(i => i.time.indexOf("在线") != -1).length}/${p["children"].length}]`;
+      });
+      deptOptions.value[0]["title"] = deptOptions.value[0]["label"] + ` [ ${zx}/${all}]`;
+      data.value = deptOptions.value;
+      keys.value = keyp;
+      setTimeout(() => {
+        treeRef.value.setExpandedKeys(keys.value);
+      }, 10000);
 
-    // carlist.value = res.rows.filter(i => {
-    //   var hsin = false;
-    //   if (i.deviceInfos) {
-    //     JSON.parse(i.deviceInfos).forEach(item => {
-    //       if (item.type == "camera") {
-    //         hsin = true;
-    //         return true;
-    //       }
-    //     })
-    //   }
-    //   return hsin
+      // carlist.value = res.rows.filter(i => {
+      //   var hsin = false;
+      //   if (i.deviceInfos) {
+      //     JSON.parse(i.deviceInfos).forEach(item => {
+      //       if (item.type == "camera") {
+      //         hsin = true;
+      //         return true;
+      //       }
+      //     })
+      //   }
+      //   return hsin
 
-    // });
-  });
-};
+      // });
+    });
+  };
 
-const defaultProps = {
-  children: "children",
-  label: "label",
-  value: "id",
-};
-const treeIndent = ref(40);
+  const defaultProps = {
+    children: "children",
+    label: "label",
+    value: "id",
+  };
+  const treeIndent = ref(40);
 
-watch(filterText, (val) => {
-  if (treeRef.value) {
-    treeRef.value.filter(val);
-  }
-});
+  watch(filterText, (val) => {
+    if (treeRef.value) {
+      treeRef.value.filter(val);
+    }
+  });
 
-const currenturl = ref("");
+  const currenturl = ref("");
 
-const filterNode = (node, value) => {
-  if (node.id == 1) return true;
-  return node.title.indexOf(value) != -1;
-};
+  const filterNode = (node, value) => {
+    if (node.id == 1) return true;
+    return node.title.indexOf(value) != -1;
+  };
 
-const currentdata = ref(null);
+  const currentdata = ref(null);
 
-const treeclick = (data, node) => {
-  if (data.deviceInfos) {
-    JSON.parse(data.deviceInfos).forEach((item) => {
-      if (item.type == "camera") {
-        currenturl.value = item.code;
-        jessibuca.play(currenturl.value);
+  const treeclick = (data, node) => {
+    videoList.value = []
+    if (data.deviceInfos) {
+      // JSON.parse(data.deviceInfos).forEach((item) => {
+      //   if (item.type == "camera") {
+      //     currenturl.value = item.code;
+      //     jessibuca.play(currenturl.value);
+      //   }
+      // });
+      var deviceData = JSON.parse(data.deviceInfos)
+      for (var index in deviceData) {
+        var item = deviceData[index]
+        if (item.type == "camera") {
+          currenturl.value = item.code;
+          videoList.value.push(currenturl.value)
+        }
       }
-    });
+      if (videoList.value.length > 0) {
+        jessibuca.play(videoList.value[0]);
+      }
+    }
+  };
+
+  const playVideo = (index) => {
+    videoIndex.value = index
+    jessibuca.play(videoList.value[index]);
   }
-};
 
-const data = ref([]);
-var jessibuca = null;
-onMounted(() => {
-  initData();
-  // getTreeSelect();
-  var $container = document.getElementById("container");
-  jessibuca = new Jessibuca({
-    container: $container,
-    videoBuffer: 0.2, // 缓存时长
-    isResize: false,
-    text: "",
-    decoder: "/jess/decoder.js",
-    loadingText: "",
-    useMSE: false,
-    debug: true,
-    showBandwidth: true, // 显示网速
-    operateBtns: {
-      fullscreen: true,
-      screenshot: false,
-      play: true,
-      audio: false,
-      recorder: false,
-    },
-    forceNoOffscreen: true,
-    isNotMute: false,
+  const data = ref([]);
+  var jessibuca = null;
+  onMounted(() => {
+    initData();
+    // getTreeSelect();
+    var $container = document.getElementById("container");
+    jessibuca = new Jessibuca({
+      container: $container,
+      videoBuffer: 0.2, // 缓存时长
+      isResize: false,
+      text: "",
+      decoder: "/jess/decoder.js",
+      loadingText: "",
+      useMSE: false,
+      debug: true,
+      showBandwidth: true, // 显示网速
+      operateBtns: {
+        fullscreen: true,
+        screenshot: false,
+        play: true,
+        audio: false,
+        recorder: false,
+      },
+      forceNoOffscreen: true,
+      isNotMute: false,
+    });
+    // if (treeRef.value) {
+    //   setTimeout(() => {
+    //     treeRef.value.expandNode(treeRef.value.getNode(1))
+    //   }, 100);
+    //   getSites();
+    //   initData();
+    //   // treeRef.value.expandNode(treeRef.value.getNode(1))
+    // }
   });
-  // if (treeRef.value) {
-  //   setTimeout(() => {
-  //     treeRef.value.expandNode(treeRef.value.getNode(1))
-  //   }, 100);
-  //   getSites();
-  //   initData();
-  //   // treeRef.value.expandNode(treeRef.value.getNode(1))
-  // }
-});
 </script>
 
 <style lang="scss" scoped>
-#container {
-  background: rgba(13, 14, 27, 0.7);
-  width: 50vw;
-  height: 398px;
-}
+  #container {
+    background: rgba(13, 14, 27, 0.7);
+    width: 50vw;
+    height: 398px;
+  }
 
-.card-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
+  .card-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
-.boxunused {
-  background: #3333332d;
-}
-</style>
+  .boxunused {
+    background: #3333332d;
+  }
+</style>