优化

src/components/HomeStatics/countPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1vh;">
+    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;">
         <div class="title">今日统计</div>
         <div style="padding-left: 1vw;">
             <div class="bgClass">

src/components/HomeStatics/lineEcharts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1vh;">
+  <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1.5vh;">
     <div class="title">七日趋势</div>
     <div ref="linechart" style="width:100%;height: 90%;"></div>
   </div>

src/components/HomeStatics/messageTable.vue

@@ -1,15 +1,17 @@
 <template>
-    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1vh;">
-        <div class="title">到站提醒</div>
-        <div style="margin-top: 10px;overflow-y: scroll;">
-            <div v-for="(item, index) in messageList">
-                <div style="display: flex;flex-direction: row;justify-content: space-around;">
-                    <div :class="item.type == 1 ? 'carClass' : 'goodClass'">{{ item.carNum }}</div>
-                    <div class="contentClass">{{ item.content }}</div>
-                    <div class="stationClass">{{ item.station }}</div>
-                    <div class="timeClass">{{ item.time }}</div>
+    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;padding-right: 2vw;">
+        <div>
+            <div class="title" style="padding-left: 0.5vw;">到站提醒</div>
+            <div style="margin-left: 1vw">
+                <div v-for="(item, index) in messageList">
+                    <div style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 20px;">
+                        <div :class="item.type == 1 ? 'carClass' : 'goodClass'">{{ item.carNum }}</div>
+                        <div class="contentClass">{{ item.content }}</div>
+                        <div class="stationClass">{{ item.station }}</div>
+                        <div class="timeClass">{{ item.time }}</div>
+                    </div>
+                    <el-divider />
                 </div>
-                <el-divider />
             </div>
         </div>
     </div>
@@ -49,7 +51,7 @@ onMounted(() => {
 .contentClass {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #C1D2E4;
     line-height: 24px;
     text-align: left;
@@ -60,7 +62,7 @@ onMounted(() => {
 .stationClass {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 13px;
     color: #C1D2E4;
     line-height: 24px;
     text-align: left;
@@ -71,7 +73,7 @@ onMounted(() => {
 .timeClass {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #C1D2E4;
     line-height: 24px;
     text-align: left;
@@ -81,6 +83,7 @@ onMounted(() => {
 
 .el-divider--horizontal {
     margin-top: 10px;
+    margin-bottom: 0px;
 }
 
 .carClass {
@@ -88,7 +91,7 @@ onMounted(() => {
     background-size: 100% 100%;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #FFFFFF;
     line-height: 20px;
     text-align: left;
@@ -96,6 +99,8 @@ onMounted(() => {
     text-transform: none;
     width: 5vw;
     text-align: center;
+    height: 24px;
+    line-height: 24px;
 }
 
 .goodClass {
@@ -103,7 +108,7 @@ onMounted(() => {
     background-size: 100% 100%;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #6A4119;
     line-height: 20px;
     text-align: left;
@@ -111,5 +116,7 @@ onMounted(() => {
     text-transform: none;
     width: 5vw;
     text-align: center;
+    height: 24px;
+    line-height: 24px;
 }
 </style>

src/components/HomeStatics/pieEcharts.vue

@@ -16,28 +16,53 @@ const dataList = ref([])
 
 
 const initData = async () => {
-    console.log(11111)
-    const carTotal = await listCarInfo({pageSize:1000});
+    const carTotal = await listCarInfo({ pageSize: 1000 });
     var total = carTotal.total
     const data = await getDicts('tbl_car_type')
     carTypeList.value = data.data
     console.log(carTypeList.value)
+    var label = {
+        normal: {
+            formatter: '{c|{c}}'+"\n\n"+'{b|{b}} ',
+            padding: [0, -50],
+            rich: {
+                b: {
+                    fontSize: 14,
+                    color: '#C1D2E4',
+                    align: 'center',
+                },
+                c: {
+                    fontSize: 18,
+                    color: '#ffffff',
+                    align: 'center',
+                    fontWeight: 'bolder'
+                },
+            }
+        }
+    }
+
+    var labelLine = {
+        length: 20,
+        length2: 50
+    }
     for (var index in carTypeList.value) {
         console.log(carTypeList.value[0])
         var obj = {
-           pageSize:1000,
-           carType:carTypeList.value[index].dictValue
+            pageSize: 1000,
+            carType: carTypeList.value[index].dictValue
         }
         console.log(obj)
         const res = await listCarInfo(obj);
         total = total - res.total
         var cObj = {
-            name:'客车'+ carTypeList.value[index].dictLabel,
-            value:res.total
+            name: '客车' + carTypeList.value[index].dictLabel,
+            value: res.total,
+            label: label,
+            labelLine: labelLine
         }
         dataList.value.push(cObj)
     }
-    dataList.value.push({name:'其它',value:total});
+    dataList.value.push({ name: '其它', value: total, label: label, labelLine: labelLine });
     drawEchart();
 }
 

src/components/HomeStatics/stationPie.vue

@@ -1,30 +1,30 @@
 <template>
     <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1vh;">
         <div class="title">电子站台统计</div>
-        <div style="display: flex;flex-direction: row;margin-top: 1vh;">
+        <div style="display: flex;flex-direction: row;margin-top: 1vh;padding-left: 1vw;">
             <div ref="stationchart" style="width:11vw;height: 20vh;"></div>
-            <div style="width:12vw;padding-right: 1vw;margin-left: 1vw;">
+            <div style="width:10vw;margin-left: 1vw;padding-right: 1vw;">
                 <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;">
                     <div class="stationkeyClass">设备总数</div>
-                    <div class="stationvalueClass">1568</div>
+                    <div class="stationvalueClass">80</div>
                     <div class="stationunitClass">台</div>
                 </div>
                 <img class="imageDiv" src="@/assets/images/home/Bg(4).png"/>
                 <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
                     <div class="stationkeyClass">在线设备</div>
-                    <div class="stationvalueClass">1568</div>
+                    <div class="stationvalueClass">1</div>
                     <div class="stationunitClass">台</div>
                 </div>
                 <img class="imageDiv" src="@/assets/images/home/Bg(7).png"/>
                 <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
                     <div class="stationkeyClass">箱体总数</div>
-                    <div class="stationvalueClass">1568</div>
+                    <div class="stationvalueClass">3200</div>
                     <div class="stationunitClass">台</div>
                 </div>
                 <img class="imageDiv" src="@/assets/images/home/Bg(5).png"/>
                 <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
                     <div class="stationkeyClass">空闲箱体</div>
-                    <div class="stationvalueClass">1568</div>
+                    <div class="stationvalueClass">3100</div>
                     <div class="stationunitClass">台</div>
                 </div>
                 <img class="imageDiv" src="@/assets/images/home/Bg(6).png"/>
@@ -54,6 +54,9 @@ const drawEchart = () => {
                 color: "rgb(50,197,233)",//文字颜色
                 fontSize: 15,//字号
                 align: "center"//对齐方式
+            },
+            subtextStyle:{
+                color:"#ffffff"
             }
         },
         series: [
@@ -152,7 +155,7 @@ onMounted(() => {
 }
 
 .imageDiv{
-    width: 11vw;
+    width: 9vw;
     margin-top: 1vh;
 }
 </style>

src/components/HomeStatics/warnTable.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1vh;">
-        <div class="title">到站提醒</div>
-        <div style="margin-top: 10px;overflow-y: scroll;">
-            <div v-for="(item, index) in messageList">
+    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;padding-right: 2vw;">
+        <div class="title">告警信息</div>
+        <div style="padding-left: 1vw;">
+            <div v-for="(item, index) in messageList" style="margin-top:20px">
                 <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
                     <div>
                         <img v-if="item.type == 1" src="@/assets/images/home/Rectangle8.png" />
@@ -62,7 +62,7 @@ onMounted(() => {
 .stationClass {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 13px;
     color: #C1D2E4;
     line-height: 24px;
     text-align: left;
@@ -73,7 +73,7 @@ onMounted(() => {
 .timeClass {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #C1D2E4;
     line-height: 24px;
     text-align: left;
@@ -83,6 +83,7 @@ onMounted(() => {
 
 .el-divider--horizontal {
     margin-top: 10px;
+    margin-bottom: 0;;
 }
 
 .carClass {
@@ -90,7 +91,7 @@ onMounted(() => {
     background-size: 100% 100%;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #FFFFFF;
     line-height: 20px;
     text-align: left;
@@ -105,7 +106,7 @@ onMounted(() => {
     background-size: 100% 100%;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 13px;
     color: #6A4119;
     line-height: 20px;
     text-align: left;

src/components/Map/map.vue

@@ -16,6 +16,7 @@ import { ref } from "vue";
 import { getDicts } from '@/api/system/dict/data'
 import { getGpsData } from '@/api/gpsData/index'
 import carImage from "@/assets/images/icon/小货车.png";
+import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
 import add from '@/views/car/carInfo/add.vue';
 
 const props = defineProps({
@@ -39,6 +40,18 @@ const lineObj = ref(null);
 
 const iconImage = new URL("@/assets/images/home/Point.png",import.meta.url);
 
+const getCarInfoList = () => {
+    listCarInfo({pageSzie:1000}).then(res=>{
+            console.log(res)
+            for (var index in res.rows) {
+            var obj = res.rows[index].location;
+            // console.log(obj.toString())
+            var location = formatGCJ(obj.lng,obj.lat);
+            // console.log(location.toString())
+            addMarker(location, res.rows[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 'location')
+        }
+    })
+}
 
 
 const getDictsData = (param) => {
@@ -108,9 +121,10 @@ const initMap = () => {
         //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
         // });
-        if (props.showMarket) {
-            getDictsData("tbl_sites");
-        }
+        getCarInfoList();
+        // if (props.showMarket) {
+        //     getDictsData("tbl_sites");
+        // }
         // 单击
         map.on('click', (e) => {
             // lng ==> 经度值  lat => 维度值
@@ -160,8 +174,8 @@ const addMarker = (obj, data, src, type) => {
         offset: new AMap.Pixel(-10, -20),
     });
     marker.setLabel({
-        offset: new AMap.Pixel(-30, 20),
-        content: data.dictLabel
+        offset: new AMap.Pixel(-50, 25),
+        content: data.carNum
     });
     if (type == 'car') {
         singleMarker.value = marker

src/router/index.ts

@@ -48,6 +48,11 @@ export const constantRoutes: RouteOption[] = [
     hidden: true
   },
   {
+    path: '/home',
+    component: () => import('@/views/home.vue'),
+    hidden: true
+  },
+  {
     path: '/register',
     component: () => import('@/views/register.vue'),
     hidden: true

src/views/home.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="home">
+      <mapDiv :showMarket="showMarket" :darkType="darkType" style="width:100%;height:100vh;padding: 0 0 0 0" ref="mapElm"></mapDiv>
+      <countPage style="position: absolute;left: 1vw;z-index: 1000;top: 3vh;"></countPage>
+      <lineEcharts style="position: absolute;left: 1vw;z-index: 1000;top: 34vh;"></lineEcharts>
+      <messageTable style="position: absolute;left: 1vw;z-index: 1000;top: 66vh;"></messageTable>
+      <pieEcharts style="position: absolute;right: 1vw;z-index: 1000;top: 3vh;"></pieEcharts>
+      <stationPie style="position: absolute;right: 1vw;z-index: 1000;top: 34vh;"></stationPie>
+      <warnTable style="position: absolute;right: 1vw;z-index: 1000;top: 66vh;"></warnTable>
+    </div>
+  </template>
+  
+  <script setup name="Index" lang="ts">
+  import { initWebSocket } from '@/utils/websocket';
+  import mapDiv from "@/components/Map/map.vue"
+  import countPage from "@/components/HomeStatics/countPage.vue";
+  import lineEcharts from "@/components/HomeStatics/lineEcharts.vue";
+  import messageTable from '@/components/HomeStatics/messageTable.vue';
+  import pieEcharts from '@/components/HomeStatics/pieEcharts.vue';
+  import stationPie from '@/components/HomeStatics/stationPie.vue';
+  import warnTable from '@/components/HomeStatics/warnTable.vue';
+  
+  
+  const showMarket =ref(true);
+  const darkType =ref(true);
+  
+  onMounted(() => {
+    let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
+    initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
+  });
+  
+  const goTarget = (url: string) => {
+    window.open(url, '__blank')
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  .home {
+  
+    height: 100%;
+    width: 100%;
+    padding: 0 0 0 0 !important;
+  
+    blockquote {
+      padding: 10px 20px;
+      margin: 0 0 20px;
+      font-size: 17.5px;
+      border-left: 5px solid #eee;
+    }
+  
+    hr {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border: 0;
+      border-top: 1px solid #eee;
+    }
+  
+    .col-item {
+      margin-bottom: 20px;
+    }
+  
+    ul {
+      padding: 0;
+      margin: 0;
+    }
+  
+    font-family: "open sans",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+    font-size: 13px;
+    color: #676a6c;
+    overflow-x: hidden;
+  
+    ul {
+      list-style-type: none;
+    }
+  
+    h4 {
+      margin-top: 0px;
+    }
+  
+    h2 {
+      margin-top: 10px;
+      font-size: 26px;
+      font-weight: 100;
+    }
+  
+    p {
+      margin-top: 10px;
+  
+      b {
+        font-weight: 700;
+      }
+    }
+  
+    .update-log {
+      ol {
+        display: block;
+        list-style-type: decimal;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        padding-inline-start: 40px;
+      }
+    }
+  }
+  
+  </style>
+  

src/views/yunying/video/index.vue

@@ -6,41 +6,22 @@
         <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-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"
-
-          >
+          <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 :node="node" :treeData="data" :showLabelLine="false" :indent="treeIndent">
               </element-tree-line>
             </template>
           </el-tree-v2>
@@ -50,105 +31,109 @@
         <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 style="margin-left: 30px; font-size: 14px">{{currentdata?.label}}</span>
+              ">站点设备</span>
+            <span style="margin-left: 30px; font-size: 14px">{{ currentdata?.label }}</span>
 
 
           </div>
-           <el-button v-if="tableData.length>0 && tableData.length<4" type="primary" style="position: absolute;right: 20px;" @click="dialogVisible = true">添加设备</el-button>
+          <el-button v-if="tableData.length > 0 && tableData.length < 4" type="primary"
+            style="position: absolute;right: 20px;" @click="goAdd">添加设备</el-button>
         </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 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 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 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 type="danger" link size="small" @click="deleteDevice(scope.row)">删除</el-button>
-                        <el-button v-if="scope.row.type=='cabinet'"  type="primary" link size="small">立即同步</el-button>
-                   </div>
-                </template>
+            <el-table-column prop="code" label="操作">
+              <template #default="scope">
+                <div>
+                  <el-button type="danger" link size="small" @click="deleteDevice(scope.row)">删除</el-button>
+                  <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">
+            <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: 100%;justify-content: flex-start;flex-direction: row;align-content: center;">
-                  <div :class="item.box_status==1?'':''" v-for="(item,index) in currentCabinet.boxlist" style="width: 60px;height:60px;border: 1px solid #33333317;border-radius: 6px;position: relative;">
-                    <div style="font-size: 10px;padding:8px">{{ item.box_name }}</div>
-
-                    <el-button size="small"  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>
+            </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: 100%;justify-content: flex-start;flex-direction: row;align-content: center;">
+                <div :class="item.box_status == 1 ? '' : ''" v-for="(item, index) in currentCabinet.boxlist"
+                  style="width: 60px;height:60px;border: 1px solid #33333317;border-radius: 6px;position: relative;">
+                  <div style="font-size: 10px;padding:8px">{{ item.box_name }}</div>
+
+                  <el-button size="small" 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>
 
-<el-dialog  v-model="dialogVisible" title="添加设备" width="500">
-  <el-form :model="formdata" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-     <el-form-item label="名称">
-      <el-input v-model="formdata.name" />
-    </el-form-item>
-    <el-form-item label="类型">
-      <el-select v-model="formdata.type" placeholder="请选择设备类型">
-        <el-option v-if="tableData.filter(i=>i.type=='tts').length<1" label="tts" value="tts" />
-        <el-option v-if="tableData.filter(i=>i.type=='led').length<1" label="led" value="led" />
-        <el-option v-if="tableData.filter(i=>i.type=='cabinet').length<1" label="快递柜" value="cabinet" />
-        <el-option v-if="tableData.filter(i=>i.type=='camera').length<1" label="摄像头" value="camera" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="序列号">
-      <el-input v-model="formdata.code" />
-    </el-form-item>
-  </el-form>
-  <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="addDevice">
-          保存
-        </el-button>
-      </div>
-    </template>
+    <el-dialog v-model="dialogVisible" title="添加设备" width="500">
+      <el-form :model="formdata" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="名称">
+          <el-input v-model="formdata.name" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="formdata.type" placeholder="请选择设备类型">
+            <el-option v-if="tableData.filter(i => i.type == 'tts').length < 1" label="tts" value="tts" />
+            <el-option v-if="tableData.filter(i => i.type == 'led').length < 1" label="led" value="led" />
+            <el-option v-if="tableData.filter(i => i.type == 'cabinet').length < 1" label="快递柜" value="cabinet" />
+            <el-option v-if="tableData.filter(i => i.type == 'camera').length < 1" label="摄像头" value="camera" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="序列号">
+          <el-input v-model="formdata.code" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="addDevice">
+            保存
+          </el-button>
+        </div>
+      </template>
 
 
-</el-dialog>
+    </el-dialog>
 
   </div>
 </template>
@@ -158,7 +143,7 @@ import { TreeNode } from "element-plus";
 import { useRoute, useRouter } from "vue-router";
 import EZUIKit from 'ezuikit-js';
 import { getCameraPlayerConfig } from '@/api/gpsData';
-import { updateData,listData } from "@/api/system/dict/data";
+import { updateData, listData } from "@/api/system/dict/data";
 import imgulock from "@/assets/images/unlock@2x.png";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -169,7 +154,7 @@ const sites = ref([]);
 const formdata = ref({
   name: "",
   type: "",
-  code:""
+  code: ""
 })
 
 
@@ -178,7 +163,7 @@ const router = useRouter();
 
 const tableData = ref([]);
 
-const activeName=ref("camera")
+const activeName = ref("camera")
 
 const filterText = ref("");
 const treeRef = ref(null);
@@ -188,6 +173,15 @@ const gettreeheight = () => {
   return document.body.clientHeight - 100;
 }
 
+const goAdd = () => {
+  dialogVisible.value = true
+  formdata.value = {
+    name: "",
+    type: "",
+    code: ""
+  }
+}
+
 const defaultProps = {
   children: "children",
   label: "label",
@@ -218,16 +212,16 @@ const savedata = () => {
 }
 
 const getSites = () => {
-    listData({ dictType: "tbl_sites" }).then(res2 => {
-      sites.value = res2.rows;
-
-       var index = 1;
-      data.value = [{
-        id: 1,
-        label: "站点",
-        children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
-      },];
-    });
+  listData({ dictType: "tbl_sites" }).then(res2 => {
+    sites.value = res2.rows;
+
+    var index = 1;
+    data.value = [{
+      id: 1,
+      label: "站点",
+      children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
+    },];
+  });
 }
 
 const deleteDevice = (datac) => {
@@ -239,7 +233,7 @@ const deleteDevice = (datac) => {
     dictType: "tbl_sites",
     remark: JSON.stringify(tableData.value)
   }
-   updateData(data).then(res => {
+  updateData(data).then(res => {
     ElMessage.success("成功!");
   })
 }
@@ -250,8 +244,8 @@ const handleTabClick = () => {
 
 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;
+  console.log(node.label.indexOf(value) != -1)
+  return node.label.indexOf(value) != -1;
 };
 
 const currentdata = ref(null)
@@ -301,18 +295,18 @@ const addDevice = () => {
     ElMessage.warning("设备序列号未填写");
     return;
   }
-   if (tableData.value.filter(i => i.type == formdata.value.type).length >0) {
+  if (tableData.value.filter(i => i.type == formdata.value.type).length > 0) {
     ElMessage.warning("存在相同类型的设备");
     return;
   }
   tableData.value.push(formdata.value);
-   var data = {
+  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("成功!");
   })
@@ -323,7 +317,7 @@ const addDevice = () => {
 const currentCabinet = ref({
   total: 40,
   unused: 10,
-  boxlist:[]
+  boxlist: []
 })
 const SycCabinet = (code) => {
   //TODO 获取格数
@@ -332,11 +326,11 @@ const SycCabinet = (code) => {
   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
-      }
+    currentCabinet.value.boxlist.push({
+      box_id: 1,
+      box_name: (i + 1) + "",
+      box_status: i % 2
+    }
     )
   }
 }
@@ -354,7 +348,7 @@ const data = computed(() => {
   return [{
     id: 1,
     label: "站点",
-    children: sites.value.map(i => { return {id:++index,label:i.dictLabel} }),
+    children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
   },]
 });
 onMounted(() => {
@@ -377,7 +371,8 @@ onMounted(() => {
   flex-direction: row;
   justify-content: space-between;
 }
-.boxunused{
+
+.boxunused {
   background: #3333332d;
 }
 </style>