`fix`

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "2.1.0",
+    "@layui/layui-vue": "^2.18.3",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "9.5.0",
     "animate.css": "4.1.1",

src/assets/styles/index.scss

@@ -35,11 +35,11 @@ html.dark svg {
   height: 100%;
 }
 
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
+// *,
+// *:before,
+// *:after {
+//   box-sizing: inherit;
+// }
 
 .no-padding {
   padding: 0px !important;

src/main.ts

@@ -32,6 +32,8 @@ import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels
 import { getElementLabelLine } from 'element-tree-line';
 // css
 import 'element-tree-line/dist/style.css';
+import Layui from '@layui/layui-vue';
+import '@layui/layui-vue/lib/index.css';
 
 // 国际化
 import i18n from '@/lang/index';
@@ -55,6 +57,7 @@ app.use(router);
 app.use(store);
 app.use(i18n);
 app.use(plugins);
+app.use(Layui);
 
 const ElementLabelLine = getElementLabelLine(h);
 app.component(ElementLabelLine.name, ElementLabelLine);

src/views/statics/index.vue

@@ -2,239 +2,299 @@
 <template>
   <div class="p-2" style="padding: 10px">
     <div style="display: flex; flex-direction: row">
-      <div style="width: 20%;">
+      <div style="width: 20%">
         <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;">
-          <el-tree-select v-model="deptId" :data="deptOptions" @change="changeDept"
-            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
-            check-strictly />
-          <el-input style="margin-top: 10px;" v-model="filterText" placeholder="输入关键字" />
-          <el-tree-v2 v-if="showTree" style="margin-top: 10px;" ref="treeRef" class="filter-tree"
-            :height="gettreeheight()" :data="data" :indent="treeIndent" :props="defaultProps"
-            :filter-method="filterNode" @node-click="treeclick">
+        <div style="margin-top: 20px; padding-left: 10px">
+          <!-- <el-tree-select
+            v-model="deptId"
+            :data="deptOptions"
+            @change="changeDept"
+            :props="{ value: 'id', label: 'label', children: 'children' }"
+            value-key="id"
+            placeholder="请选择归属部门"
+            check-strictly
+          /> -->
+          <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"
+            >
+              <template #title="{ data }">
+                <div>
+                  <span>{{ data.title }}</span>
+                  <el-tag
+                    v-if="data.time != undefined"
+                    style="margin-left: 20px"
+                    :type="data.time == '在线' ? 'success' : 'danger'"
+                  >
+                    {{ data.time }}
+                  </el-tag>
+                </div>
+              </template>
+            </lay-tree>
+          </div>
+          <!-- <el-tree-v2
+
+            style="margin-top: 10px"
+            ref="treeRef"
+            class="filter-tree"
+            :default-expanded-keys="keys"
+            :height="gettreeheight()"
+            :data="data"
+            :indent="treeIndent"
+            :props="defaultProps"
+            :filter-method="filterNode"
+            @node-click="treeclick"
+          >
             <template v-slot:default="{ node }">
-              <element-tree-line :node="node" :treeData="data" :showLabelLine="false" :indent="treeIndent">
-                <div><span>{{node.label}}</span> <el-tag style="margin-left: 20px;"
-                    :type="node.data.time=='在线'?'success':'danger'"> {{ node.data.time }}</el-tag></div>
+              <element-tree-line
+                :node="node"
+                :treeData="data"
+                :showLabelLine="true"
+                :indent="treeIndent"
+              >
+                <div>
+                  <span>{{ node.label }}</span>
+                  <el-tag
+                    v-if="node.data.time"
+                    style="margin-left: 20px"
+                    :type="node.data.time == '在线' ? 'success' : 'danger'"
+                  >
+                    {{ node.data.time }}</el-tag
+                  >
+                </div>
               </element-tree-line>
             </template>
-          </el-tree-v2>
+          </el-tree-v2> -->
         </div>
       </div>
       <div style="width: 77%; margin-left: 2%">
         <div class="card-header">
-          <div style="display: flex; flex-direction: row;position: relative">
+          <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 style="margin-left: 30px; font-size: 14px">{{ currentdata?.label }}</span>
-            <div style="margin-top: 20px">
-
-
-
-            </div>
-
-
+              "
+              >车辆视频</span
+            >
+            <span style="margin-left: 30px; font-size: 14px">{{
+              currentdata?.label
+            }}</span>
+            <div style="margin-top: 20px"></div>
           </div>
-
         </div>
-        <div id="container" style="margin-top: 20px;width:100%;height:80vh"></div>
-
+        <div id="container" style="margin-top: 20px; 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 { DeptVO } from "@/api/system/dept/types";
-
-
-  const carlist = ref([]);
-  const carData = ref([])
-
-  const showTree = ref(true)
-
-  const filterText = ref("");
-  const treeRef = ref(null);
-
-  const deptOptions = ref([]);
-
-  const deptId = ref([])
-
-  const gettreeheight = () => {
-    return document.body.clientHeight - 300;
-  }
-
-
-  const getTreeSelect = async () => {
-    const res = await api.deptTreeSelect();
-    console.log(res)
-    deptOptions.value = res.data;
-  };
-
-
-
-  const initData = async () => {
-    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;
-
-      });
-      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;
-            }
+import { listCarInfo } from "@/api/carInfo";
+import moment from "moment";
+import api from "@/api/system/user";
+
+const carlist = ref([]);
+const carData = ref([]);
+
+const showTree = ref(true);
+
+const filterText = ref("");
+const treeRef = ref(null);
+
+const deptOptions = ref([]);
+
+const deptId = ref([]);
+const keys = ref();
+
+const gettreeheight = () => {
+  return document.body.clientHeight - 300;
+};
+
+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;
+    });
+
+    var keyp = [100];
+    var index = 0;
+    deptOptions.value[0]["title"] = deptOptions.value[0]["label"];
+    deptOptions.value[0].children.forEach((p) => {
+      p["title"] = p.label;
+      p["children"] = (p.children ?? []).concat(
+        carlist.value
+          .filter((i) => JSON.parse(i.ext1).deptId == p.id)
+          .map((i) => {
+            keyp.push(p.id);
+            return {
+              id: `car_${++index}`,
+              title: i.carNum,
+              deviceInfos: i.deviceInfos,
+              time:
+                i.lastCountTime == null
+                  ? "离线"
+                  : moment().unix() - moment(i.lastCountTime).unix() > 60 * 5
+                  ? "离线"
+                  : "在线",
+            };
           })
-        }
-        return hsin;
-
-      });
-
-    }
-    );
-  }
-
-
-  const defaultProps = {
-    children: "children",
-    label: "label",
-    value: 'id',
-  };
-  const treeIndent = ref(40);
-
-  watch(filterText, (val) => {
-    if (treeRef.value) {
-      treeRef.value.filter(val);
-    }
+      );
+    });
+    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
+
+    // });
   });
+};
+
+const defaultProps = {
+  children: "children",
+  label: "label",
+  value: "id",
+};
+const treeIndent = ref(40);
+
+watch(filterText, (val) => {
+  if (treeRef.value) {
+    treeRef.value.filter(val);
+  }
+});
 
-  const currenturl = ref("");
-
-
-  const filterNode = (value, node) => {
-    if (node.id == 1) return true;
-    return node.label.indexOf(value) != -1;
-  };
-
-  const currentdata = ref(null)
-
+const currenturl = ref("");
 
-  const treeclick = (data, node) => {
-    if (data.deviceInfos) {
-      JSON.parse(data.deviceInfos).forEach(item => {
+const filterNode = (node, value) => {
+  if (node.id == 1) return true;
+  return node.title.indexOf(value) != -1;
+};
 
-        if (item.type == "camera") {
-          currenturl.value = item.code;
-          jessibuca.play(currenturl.value);
-        }
-      })
-    }
-  }
+const currentdata = ref(null);
 
-  const changeDept = () => {
-    var carListData = []
-    for(var index in carData.value){
-        var carDataObj = JSON.parse(carData.value[index].ext1)
-        if(carDataObj.deptId){
-          if(carDataObj.deptId == deptId.value){
-            carListData.push(carData.value[index])
-          }
-        }
-    } 
-    carlist.value = carListData
-    // console.log(carListData)
+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 data = computed(() => {
-    let index = 0;
-    return carlist.value.map(i => { return { id: ++index, label: i.carNum, deviceInfos: i.deviceInfos, time: i.lastCountTime == null ? "离线" : ((moment().unix() - moment(i.lastCountTime).unix()) > 60 * 5 ? "离线" : "在线") } })
-  });
-  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))
-    // }
+};
+
+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))
+  // }
+});
 </script>
 
 <style lang="scss" scoped>
-  #container {
-    background: rgba(13, 14, 27, 0.7);
-    width: 50vw;
-    height: 398px;
-  }
-
-  .card-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .boxunused {
-    background: #3333332d;
-  }
-</style>
+#container {
+  background: rgba(13, 14, 27, 0.7);
+  width: 50vw;
+  height: 398px;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.boxunused {
+  background: #3333332d;
+}
+</style>