Explorar o código

Merge branch 'master' of http://git.xt.wenhq.top:8083/wenhongquan/khyznh-ui

liwei19941102 %!s(int64=2) %!d(string=hai) anos
pai
achega
9c3b5158a7

+ 2 - 0
package.json

@@ -27,6 +27,8 @@
     "crypto-js": "^4.1.1",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
+    "element-tree-line": "^0.2.1",
+    "ezuikit-js": "^8.0.5-beta.4",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",

+ 16 - 1
src/api/gpsData/index.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { gpsDataVO } from '@/api/gpsData/type';
+import { countData, gpsDataVO } from '@/api/gpsData/type';
 
 // 获取路由
 export function getGpsData(query): AxiosPromise<gpsDataVO[]> {
@@ -10,3 +10,18 @@ export function getGpsData(query): AxiosPromise<gpsDataVO[]> {
     params: query
   });
 }
+
+export function getCountData(query): AxiosPromise<countData[]> {
+  return request({
+    url: '/system/peoplecount/list',
+    method: 'get',
+    params: query
+  });
+}
+
+export function getCameraPlayerConfig(code): AxiosPromise<any> {
+  return request({
+    url: `/system/common/${code}/getPlayConfig`,
+    method: 'get'
+  });
+}

+ 35 - 31
src/api/gpsData/type.ts

@@ -1,32 +1,36 @@
 export interface gpsDataVO {
-    /**
-     * 
-     */
-    devicecode: string | number;
-  
-    /**
-     * 路线名称
-     */
-    speed: string;
-  
-    /**
-     * 起止及经过站点信息(包括场站编号及路过场站的时间)
-     */
-    lat: string;
-  
-    /**
-     * 车辆信息
-     */
-    lng: string ;
-  
-    /**
-     * 司机
-     */
-    alt: string;
-  
-    /**
-     * 随车人员
-     */
-    ts: string;
-  
-  }
+  /**
+   *
+   */
+  devicecode: string | number;
+
+  /**
+   * 路线名称
+   */
+  speed: string;
+
+  /**
+   * 起止及经过站点信息(包括场站编号及路过场站的时间)
+   */
+  lat: string;
+
+  /**
+   * 车辆信息
+   */
+  lng: string;
+
+  /**
+   * 司机
+   */
+  alt: string;
+
+  /**
+   * 随车人员
+   */
+  ts: string;
+}
+
+export interface countData {
+  totalin: number;
+  totalout: number;
+}

BIN=BIN
src/assets/images/unlock@2x.png


+ 33 - 5
src/components/Public/timeLine.vue

@@ -25,21 +25,19 @@
           <div style="display: flex;flex-direction: row;">
             <div class="activitieyContent" v-if="index == 0" style="background: #06D903;">
               起
-              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{
-        formatDate(item.planInTime) }}</div>
+              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;width:100px;text-align: left;left:-10px">{{ gettoptxt(item)  }}</div>
             </div>
             <div class="activitieyContent" v-if="index > 0 && index < list.length - 1" style="">
               {{ index }}
               <div
                 style="position: absolute;top:-26px;left:-35px;color:#C0C4CC;font-weight:bold;width:100px;display:flex;justify-content: space-evenly;">
-                <div>{{ formatDate(item.planInTime) }}</div>
+                <div>{{ gettoptxt(item)  }}</div>
                 <!-- <div>{{ formatDate(item.planOutTime) }}</div> -->
               </div>
             </div>
             <div class="activitieyContent" v-if="index == list.length - 1" style="background: #ad012f;">
               终
-              <div style="position: absolute;top:-26px;color:#C0C4CC;font-weight: bold;">{{
-        formatDate(item.planInTime) }}</div>
+              <div style="position: absolute;top:-26px;color:#C0C4CC;width:100px;text-align: left;left:-10px;font-weight: bold;">{{ gettoptxt(item)  }}</div>
             </div>
             <div class="line" style="margin: 2px 4px;margin-top:13px;" v-if="index != list.length - 1"></div>
           </div>
@@ -54,6 +52,8 @@
 </template>
 <script lang="ts" setup>
 
+import {getCurrentInstance} from 'vue'
+
 const props = defineProps({
   list: {
     type: [Object],
@@ -62,11 +62,39 @@ const props = defineProps({
   stationInfo: {
     type: Object,
     default: ""
+  },
+  parentdata: {
+    type: Object,
+    default: {}
   }
 });
 
+const internalInstance = getCurrentInstance();
+
+const gettoptxt = (item) => {
+  var counttext = "";
+  if (props.parentdata.peoplecount != undefined) {
+     counttext=  (Object.keys(props.parentdata.peoplecount).indexOf(item.stationName) != -1 ? `上:${props.parentdata.peoplecount[item.stationName].totalin}  下:${props.parentdata.peoplecount[item.stationName].totalout}` : ``)
+
+    //   console.log(item.stationName)
+    //  console.log(props.parentdata.peoplecount)
+  }
+
+  return (item.planInTime != undefined && item.planInTime != null && item.planInTime.indexOf(":")!= -1 ? (formatDate(item.planInTime)+"  ") : '') +counttext;
+  // return counttext;
+}
+
 const carIndex = ref(-1)
 
+// setTimeout(() => {
+//   internalInstance.ctx.$forceUpdate();
+// }, 2000);
+
+
+// watch(() => props.peoplecount, (val) => {
+//   console.log('发生变化咯',props,val)
+// })
+
 const activities = [
   {
     content: '白下',

+ 8 - 1
src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp, h } from 'vue';
 // global css
 import 'uno.css';
 import '@/assets/styles/index.scss';
@@ -29,6 +29,9 @@ import './permission';
 import { useDict } from '@/utils/dict';
 import { getConfigKey, updateConfigByKey } from '@/api/system/config';
 import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
+import { getElementLabelLine } from 'element-tree-line';
+// css
+import 'element-tree-line/dist/style.css';
 
 // 国际化
 import i18n from '@/lang/index';
@@ -51,6 +54,10 @@ app.use(router);
 app.use(store);
 app.use(i18n);
 app.use(plugins);
+
+const ElementLabelLine = getElementLabelLine(h);
+app.component(ElementLabelLine.name, ElementLabelLine);
+
 // 自定义指令
 directive(app);
 

+ 3 - 0
src/types/global.d.ts

@@ -60,6 +60,9 @@ declare global {
     value: string;
     elTagType?: ElTagType;
     elTagClass?: string;
+    remark: string;
+    dictCode: string;
+  }
   }
 
   declare interface BaseEntity {

+ 8 - 1
src/utils/dict.ts

@@ -16,7 +16,14 @@ export const useDict = (...args: string[]): { [key: string]: DictDataOption[] }
       } else {
         await getDicts(dictType).then((resp) => {
           res.value[dictType] = resp.data.map(
-            (p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
+            (p): DictDataOption => ({
+              label: p.dictLabel,
+              value: p.dictValue,
+              elTagType: p.listClass,
+              elTagClass: p.cssClass,
+              remark: p.remark,
+              dictCode: p.dictCode
+            })
           );
           useDictStore().setDict(dictType, res.value[dictType]);
         });

+ 41 - 4
src/views/yunying/scheduling/index.vue

@@ -59,7 +59,7 @@
                         </div>
                         <div style="width: 80%;">
                             <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
-                                <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine"
+                                <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine" :parentdata="item"
                                     :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
                             </el-scrollbar>
                         </div>
@@ -72,7 +72,7 @@
                             </div>
                         </div>
                         <div style="position:absolute;bottom:10px;right:6px;font-size:10px">
-                            <span>乘客:11人 </span> <span style="margin-left: 10px;">货物:11个</span>
+                            <span>客流:{{ gettotalpeople(item,11) }}人 </span> <span  style="margin-left: 10px;">乘客:{{ gettotalpeople(item,0) }}人 </span> <span style="margin-left: 10px;">货物:11个</span>
                         </div>
                     </div>
                 </el-card>
@@ -96,7 +96,6 @@ import api from "@/api/system/user"
 import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
 import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
 import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
-import tableElm from "@/components/Public/table.vue";
 import { useRoute, useRouter } from "vue-router";
 import timeLineDiv from "@/components/Public/timeline";
 import { getDicts } from '@/api/system/dict/data'
@@ -105,10 +104,13 @@ import mapDiv from "@/components/Map/index.vue"
 import { listCarSchedule, getCarSchedule, delCarSchedule, addCarSchedule, updateCarSchedule } from '@/api/carSchedule';
 import { CarScheduleVO, CarScheduleQuery, CarScheduleForm } from '@/api/carSchedule/types';
 import moment from 'moment';
+import { getCountData } from '@/api/gpsData';
+import { countData } from '@/api/gpsData/type';
 
 
 import videojs from "video.js"
 import "video.js/dist/video-js.css"
+import { values } from "video.js/dist/types/utils/obj";
 
 
 
@@ -134,6 +136,20 @@ const queryFormRef = ref<ElFormInstance>();
 const carInfoFormRef = ref<ElFormInstance>();
 
 
+const gettotalpeople = (item,type) => {
+  if (item.peoplecount != undefined && item.peoplecount != null) {
+      var totalpeople = item.peoplecount['total'];
+      if (type == 1) {
+        return totalpeople.totalin - totalpeople.totalout>0?totalpeople.totalin - totalpeople.totalout:0;
+      }
+      if (type == 0) {
+          return totalpeople.totalin;
+      }
+
+  }
+  return 0;
+}
+
 const dialogMap = reactive<DialogOption>({
     visible: false,
     title: '地图'
@@ -262,6 +278,27 @@ const getScheduleList = async () => {
     }
     const res = await listCarSchedule(param);
     carScheduleList.value = res.rows;
+    carScheduleList.value.map(i => {
+
+    if (i.ext1 != undefined && i.ext1 != null) {
+      var datajson = JSON.parse(i.ext1)
+      var times = Object.values(datajson).map(j => {
+        return j.intime + "|" + j.outtime
+      }).join("$");
+      times+="$"+i.scheduleDate+"|"+moment().format("YYYY-MM-DD HH:mm:ss")
+      getCountData({ "params[times]": `${times}` }).then(res1 => {
+        var pcount = {}
+        var index = 0;
+        Object.keys(datajson).map(j => {
+          pcount[j]=res1.data[index++]
+        })
+        pcount['total'] = res1.data[index]
+        i['peoplecount'] = pcount;
+      });
+    }
+  })
+
+
     reloadData.value = true
 }
 
@@ -500,7 +537,7 @@ onMounted(() => {
     //         mapElmDiv.value.getGpsDataList(param);
     //     }
     // }, 2000);
-}); 
+});
 </script>
 
 <style lang="scss" scoped>

+ 222 - 120
src/views/yunying/video/index.vue

@@ -1,176 +1,278 @@
+<!-- eslint-disable prettier/prettier -->
 <template>
-  <div class="p-2">
-    <div style="display: flex;flex-direction: row;">
-      <div style="width:20%">
+  <div class="p-2" style="padding: 10px">
+    <div style="display: flex; flex-direction: row">
+      <div style="width: 20%">
         <div class="card-header">
-          <div style="display: flex;flex-direction: row;">
-            <div style="width: 8px;height: 19px;opacity: 1;background: #409EFF"></div>
+          <div style="display: flex; flex-direction: row">
+            <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
             <span
-              style="font-family: PingFang SC;font-size: 14px;font-weight: normal;line-height: 19px;height: 19px;margin-left: 2px;">车辆信息</span>
+              style="
+                font-family: PingFang SC;
+                font-size: 14px;
+                font-weight: normal;
+                line-height: 19px;
+                height: 19px;
+                margin-left: 5px;
+              "
+              >站点列表</span
+            >
           </div>
         </div>
-        <div style="margin-top: 1vh;">
-          <el-input v-model="filterText" placeholder="输入车牌号" />
-          <el-tree show-checkbox ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all
-            :filter-node-method="filterNode" />
+        <div style="margin-top: 20px; padding-left: 10px">
+          <el-input v-model="filterText" placeholder="输入关键字" />
+          <el-tree-v2
+            style="margin-top: 10px"
+            ref="treeRef"
+            class="filter-tree"
+            :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"
+
+              >
+              </element-tree-line>
+            </template>
+          </el-tree-v2>
         </div>
       </div>
-      <div style="width: 77%;margin-left: 2%;">
+      <div style="width: 77%; margin-left: 2%">
         <div class="card-header">
-          <div style="display: flex;flex-direction: row;">
-            <div style="width: 8px;height: 19px;opacity: 1;background: #409EFF"></div>
+          <div style="display: flex; flex-direction: row">
+            <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
             <span
-              style="font-family: PingFang SC;font-size: 14px;font-weight: normal;line-height: 19px;height: 19px;margin-left: 2px;">视频</span>
-          </div>
-          <div>
-            <img style="width: 14.5px;height:14.5px;" @click="videoType = 1" src="@/assets/images/icon/容器.png" />
-            <img style="width: 14.5px;height:14.5px;margin-left: 5px" @click="videoType = 4" src="@/assets/images/icon/四宫格.png" />
-            <img style="width: 14.5px;height:14.5px;margin-left: 5px;" @click="videoType = 9" src="@/assets/images/icon/九宫格.png" />
+              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>
         </div>
-        <div style="margin-top: 5vh;">
-          <div style="width: 100%;" v-if="videoType == 1">
-            <!-- <div v-for="item in 9"> -->
-            <video v-for="item in 1" style="width: 99%;margin-left:0.5%" controls="controls" :autoplay="false"
-              muted="muted" :ref="`videoref${item}`"></video>
-            <!-- </div> -->
-          </div>
-          <div style="width: 100%;" v-if="videoType == 4">
-            <!-- <div v-for="item in 9"> -->
-            <video v-for="item in 4" style="width: 49%;margin-left:0.5%" controls="controls" :autoplay="false"
-              muted="muted" :ref="`videoref${item}`"></video>
-            <!-- </div> -->
-          </div>
-          <div style="width: 100%;" v-if="videoType == 9">
-            <!-- <div v-for="item in 9"> -->
-            <video v-for="item in 9" style="width: 32%;margin-left:0.5%" controls="controls" :autoplay="false"
-              muted="muted" :ref="`videoref${item}`"></video>
-            <!-- </div> -->
-          </div>
+        <div style="margin-top: 20px">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="name" label="设备名称" width="160" >
+                <template #default="scope">
+                   <div>
+                       <span>{{ scope.row.name }}</span>   <el-tag style="margin-left: 40px;" type="success" v-if="scope.row.type=='cabinet'" >{{ '在线' }}</el-tag>
+                   </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="type" label="类型" >
+                <template #default="scope">
+                   <div>
+                       <el-tag type="success" effect="dark">{{ scope.row.type }}</el-tag> <span style="margin-left: 20px;" v-if="scope.row.type=='cabinet'">{{ `共 ${currentCabinet.total} 格` }}<span style="margin-left: 5px;color:green" >{{ `可用 ${currentCabinet.total-currentCabinet.unused} 格` }}</span></span>
+                   </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="code" label="设备序列号" >
+               <template #default="scope">
+                   <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between;">
+                      <el-input v-model="scope.row.code" style="width: 240px" placeholder="请输入" />
+                       <el-button   type="primary" size="small" @click="savedata">保存</el-button>
+                   </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="code" label="操作" >
+                <template #default="scope">
+                   <div>
+                        <el-button v-if="scope.row.type=='cabinet'"  type="primary" link size="small">立即同步</el-button>
+                   </div>
+                </template>
+            </el-table-column>
+          </el-table>
+
+          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
+           <el-tab-pane v-if="tableData.filter(i=>i.type=='camera').length>0" label="摄像头" name="camera">
+              <div id="video-container" style="border-radius: 10px;"></div>
+           </el-tab-pane>
+           <el-tab-pane v-if="tableData.filter(i=>i.type=='cabinet').length>0" label="快递柜" name="cabinet">
+               <div style="display: flex;align-items: center;flex-wrap: wrap;gap: 10px;place-content: center;width: 80vw;justify-content: flex-start;flex-direction: row;align-content: center;">
+                  <div :class="item.box_status==1?'boxunused':''" v-for="(item,index) in currentCabinet.boxlist" style="width: 60px;height:60px;border: 1px solid #33333317;border-radius: 6px;margin-right:20px;margin-bottom: 10px;position: relative;">
+                    <div style="font-size: 10px;padding:8px">{{ item.box_name }}</div>
+
+                    <el-button size="small" v-if="item.box_status!=1" text style="position: absolute;right: 0;bottom: 0;" @click="openbox">
+                         <img style="width:10px" src="@/assets/images/unlock@2x.png">
+                    </el-button>
+                  </div>
+               </div>
+           </el-tab-pane>
+         </el-tabs>
         </div>
       </div>
     </div>
   </div>
 </template>
-    
+
 <script setup name="CarInfo" lang="ts">
-import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
-import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
-import tableElm from "@/components/Public/table.vue";
+import { TreeNode } from "element-plus";
 import { useRoute, useRouter } from "vue-router";
+import EZUIKit from 'ezuikit-js';
+import { getCameraPlayerConfig } from '@/api/gpsData';
+import { updateData } from "@/api/system/dict/data";
+import imgulock from "@/assets/images/unlock@2x.png";
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { tbl_sites } = toRefs<any>(proxy?.useDict('tbl_sites'));
+
+
 
-import videojs from "video.js"
-import "video.js/dist/video-js.css"
 
 const route = useRoute();
 const router = useRouter();
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const tableData = ref([]);
 
-const carInfoList = ref<CarInfoVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
+const activeName=ref("camera")
 
-const queryFormRef = ref<ElFormInstance>();
-const carInfoFormRef = ref<ElFormInstance>();
+const filterText = ref("");
+const treeRef = ref(null);
 
-const videoPlayer = ref(null)
+const gettreeheight = () => {
+  return document.body.clientHeight - 100;
+}
 
-const myPlayer = ref(null)
+const defaultProps = {
+  children: "children",
+  label: "label",
+  value: 'id',
+};
+const treeIndent = ref(40);
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
+watch(filterText, (val) => {
+  if (treeRef.value) {
+    treeRef.value.filter(val);
+  }
 });
 
-const table = ref(tableElm)
-
-const videoType = ref(4)
-
-
-const initFormData: CarInfoForm = {
-  id: undefined,
-  carNum: undefined,
-  carType: undefined,
-  deviceInfos: undefined,
-  repairInfo: undefined,
-  maintenanceInfo: undefined,
-  insuranceInfo: undefined,
-  inspectionInfo: undefined,
-  trafficAccidentInfo: undefined,
-  violationInfo: undefined,
-  changeInfo: undefined,
-  ext1: undefined,
-  ext2: undefined
+const savedata = () => {
+  //保存数据
+  var data = {
+    dictCode: currentdata.value.dictCode,
+    dictValue: currentdata.value.value,
+    dictLabel: currentdata.value.label,
+    dictType: "tbl_sites",
+    remark: JSON.stringify(tableData.value)
+  }
+  updateData(data).then(res => {
+    ElMessage.success("成功!");
+  })
 }
 
-interface Tree {
-  [key: string]: any
+const handleTabClick = () => {
+
 }
 
-const filterText = ref('')
-const treeRef = ref<InstanceType<typeof ElTree>>()
+const filterNode = (value: string, node: TreeNode) => {
+  if (node.id == 1) return true;
+  console.log(node.label.indexOf(value)!=-1)
+  return node.label.indexOf(value)!=-1;
+};
 
-const defaultProps = {
-  children: 'children',
-  label: 'carNum',
-}
+const currentdata = ref(null)
 
-watch(filterText, (val) => {
-  treeRef.value!.filter(val)
-})
+const treeclick = (data: TreeNodeData, node: TreeNode) => {
+
+  currentdata.value = tbl_sites.value.filter(i => {
+    return i.label == data.label
+  })[0];
+  tableData.value = [];
+  if (currentdata.value) {
+    tableData.value = JSON.parse(currentdata.value.remark);
+    var cameras = tableData.value.filter(i => i.type == 'camera');
+    if (cameras.length > 0) {
+      var cameracode = cameras[0].code;
+      //存在视频播放视频
+      getCameraPlayerConfig(cameracode).then(res => {
+        var player = new EZUIKit.EZUIKitPlayer({
+          template: "pcLive",
+          id: 'video-container', // 视频容器ID
+          ...res.data
+        })
+      })
+    }
+
+    var cabinets = tableData.value.filter(i => i.type == 'cabinet');
+    if (cabinets.length > 0) {
+      var cabinetcode = cameras[0].code;
+      SycCabinet(cabinetcode);
+    }
+  }
 
-const filterNode = (value: string, data: Tree) => {
-  if (!value) return true
-  return data.label.includes(value)
 }
 
-const data: Tree[] = [
-  {
-    id: 1,
-    carNum: '在线车辆',
-    children: [
-      {carNum:'苏A8762'},
-      {carNum:'苏A8762'},
-    ],
-  },
-]
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询车辆信息列表 */
-const getList = async () => {
-  const res = await listCarInfo({ pageSize:1000 });
-  for(var index in res.rows){
-      data[0].children.push(res.rows[index]);
+const currentCabinet = ref({
+  total: 40,
+  unused: 10,
+  boxlist:[]
+})
+const SycCabinet = (code) => {
+  //TODO 获取格数
+  // var toalnum
+  currentCabinet.value.boxlist = [];
+  for (var i = 0; i < currentCabinet.value.total; i++) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    currentCabinet.value.boxlist.push( {
+        box_id: 1,
+        box_name: (i+1)+"",
+        box_status:i%2
+      }
+    )
   }
-  console.log(data);
+}
+const openbox = (code) => {
+  setTimeout(() => {
+    ElMessage.success("指令已发送!");
+  }, 1000);
 }
 
+
+const data = computed(() => {
+
+  var index = 1;
+
+  return [{
+    id: 1,
+    label: "站点",
+    children: tbl_sites.value.map(i => { return {id:++index,label:i.label} }),
+  },]
+});
 onMounted(() => {
-  getList();
+  if (treeRef.value) {
+    setTimeout(() => {
+      treeRef.value.expandNode(treeRef.value.getNode(1))
+    }, 100);
+    // treeRef.value.expandNode(treeRef.value.getNode(1))
+  }
 });
 
-onUnmounted(() => {
-  if (myPlayer.value) {
-    myPlayer.value.dispose()
-  }
-})
 
 
 </script>
 
-
 <style lang="scss" scoped>
 .card-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
+.boxunused{
+  background: #3333332d;
+}
 </style>
-