优化

src/api/country/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { CountryVO, CountryForm, CountryQuery } from '@/api/system/country/types';
+
+/**
+ * 查询乡镇管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listCountry = (query?: CountryQuery): AxiosPromise<CountryVO[]> => {
+  return request({
+    url: '/system/country/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询乡镇管理详细
+ * @param id
+ */
+export const getCountry = (id: string | number): AxiosPromise<CountryVO> => {
+  return request({
+    url: '/system/country/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增乡镇管理
+ * @param data
+ */
+export const addCountry = (data: CountryForm) => {
+  return request({
+    url: '/system/country',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改乡镇管理
+ * @param data
+ */
+export const updateCountry = (data: CountryForm) => {
+  return request({
+    url: '/system/country',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除乡镇管理
+ * @param id
+ */
+export const delCountry = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/system/country/' + id,
+    method: 'delete'
+  });
+};

src/api/country/types.ts

@@ -0,0 +1,56 @@
+export interface CountryVO {
+  /**
+   * 
+   */
+  id: string | number;
+
+  /**
+   * 
+   */
+  name: string;
+
+  /**
+   * 
+   */
+  sites: string;
+
+}
+
+export interface CountryForm extends BaseEntity {
+  /**
+   * 
+   */
+  id?: string | number;
+
+  /**
+   * 
+   */
+  name?: string;
+
+  /**
+   * 
+   */
+  sites?: string;
+
+}
+
+export interface CountryQuery extends PageQuery {
+
+  /**
+   * 
+   */
+  name?: string;
+
+  /**
+   * 
+   */
+  sites?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/components/Map/videoMap.vue

@@ -39,6 +39,7 @@ var content = [
 
 // const map = shallowRef(null);
 const path = ref([]);
+const playerObj = ref(null)
 const current_position = ref([]);
 let mapObj = ref()
 const allInfoWindow = shallowRef(null);
@@ -61,6 +62,8 @@ const getDictsData = (param) => {
 
 const closeVideo = () =>{
       console.log('关闭摄像头')
+      playerObj.value.stop()
+      playerObj.value.destroy()
       document.getElementById('video-container').innerHTML= "";
 }
 
@@ -301,6 +304,7 @@ const clickMarker = (e) => {
                         id: 'video-container', // 视频容器ID
                         ...res.data
                     })
+                    playerObj.value = player
                 })
             }
         }

src/views/car/carInfo/add.vue

@@ -15,7 +15,8 @@
           <el-descriptions :column="3">
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 车牌</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  车牌</div>
               </template>
               <div class="content-w">
                 <el-input v-model="form.carNum" placeholder="请输入车牌" />
@@ -23,28 +24,33 @@
             </el-descriptions-item>
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 车辆分类</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  车辆分类</div>
               </template>
               <div class="content-w">
                 <el-select v-model="form.carType" filterable placeholder="车辆分类">
-                  <el-option v-for="item in carTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
+                  <el-option v-for="item in carTypeList" :key="item.dictValue" :label="item.dictLabel"
+                    :value="item.dictValue" />
                 </el-select>
               </div>
             </el-descriptions-item>
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 业务分类</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  业务分类</div>
               </template>
               <div class="content-w">
                 <el-select v-model="formParams.bussinessType" filterable placeholder="业务分类">
-                  <el-option v-for="item in bussinessTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
+                  <el-option v-for="item in bussinessTypeList" :key="item.dictValue" :label="item.dictLabel"
+                    :value="item.dictValue" />
                 </el-select>
               </div>
             </el-descriptions-item>
 
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 所属网格</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  所属网格</div>
               </template>
               <div class="content-w">
                 <el-input v-model="formParams.wangge" placeholder="请输入网格" />
@@ -52,20 +58,26 @@
             </el-descriptions-item>
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 能耗类型</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  能耗类型</div>
               </template>
               <div class="content-w">
                 <el-select v-model="formParams.energyType" filterable placeholder="业务分类">
-                  <el-option v-for="item in energyTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
+                  <el-option v-for="item in energyTypeList" :key="item.dictValue" :label="item.dictLabel"
+                    :value="item.dictValue" />
                 </el-select>
               </div>
             </el-descriptions-item>
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 所属单位</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  所属单位</div>
               </template>
               <div class="content-w">
-                <el-input v-model="formParams.dept" placeholder="请输入所属单位" />
+                <!-- <el-input v-model="formParams.deptId" placeholder="请输入所属单位" /> -->
+                <el-tree-select v-model="formParams.deptId" :data="deptOptions"
+                  :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
+                  check-strictly />
               </div>
             </el-descriptions-item>
 
@@ -151,7 +163,8 @@
               </template>
               <div class="content-w">
                 <div class="content-w">
-                  <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formParams.gzrq" type="date" placeholder="请选择购置日期" />
+                  <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formParams.gzrq" type="date"
+                    placeholder="请选择购置日期" />
                 </div>
               </div>
             </el-descriptions-item>
@@ -200,10 +213,11 @@
           <el-descriptions :column="3">
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 路线</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  路线</div>
               </template>
               <div class="content-w">
-                <el-select v-model="ext2.pathId" filterable placeholder="业务分类">
+                <el-select multiple v-model="ext2.pathId" filterable placeholder="路线选择">
                   <el-option v-for="item in carPathList" :key="item.id" :label="item.name" :value="item.id" />
                 </el-select>
               </div>
@@ -211,7 +225,8 @@
 
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span> 司机</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red">*</span>
+                  司机</div>
               </template>
               <div class="content-w">
                 <el-select v-model="ext2.driverInfo" class="m-2" placeholder="请选择司机" style="width: 240px">
@@ -222,7 +237,8 @@
 
             <el-descriptions-item>
               <template #label>
-                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red"></span> 跟车人员</div>
+                <div style="display: inline-block;min-width: 100px;text-align: right"><span style="color: red"></span>
+                  跟车人员</div>
               </template>
               <div class="content-w">
                 <el-select v-model="ext2.attendantInfo" class="m-2" placeholder="请选择跟车人员" style="width: 240px">
@@ -240,28 +256,36 @@
         <el-col :span="24" v-if="carId != 0 && carId != null">
           <el-tabs type="card" class="demo-tabs" v-model="activeName" @tab-click="tabClick">
             <el-tab-pane label="车辆设备" name="1">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 1" :columns="columns[0]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 1" :columns="columns[0]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="维修记录" name="2">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 2" :columns="columns[1]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 2" :columns="columns[1]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="保养记录" name="3">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 3" :columns="columns[2]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 3" :columns="columns[2]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="保险记录" name="4">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 4" :columns="columns[3]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 4" :columns="columns[3]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="年检记录" name="5">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 5" :columns="columns[4]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 5" :columns="columns[4]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="交通事故记录" name="6">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 6" :columns="columns[5]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 6" :columns="columns[5]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="违章记录" name="7">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 7" :columns="columns[6]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 7" :columns="columns[6]" ref="table">
+              </tableElm>
             </el-tab-pane>
             <el-tab-pane label="车辆变更记录" name="8">
-              <tableElm @childToParent="childrenClick" v-if="activeName == 8" :columns="columns[7]" ref="table"> </tableElm>
+              <tableElm @childToParent="childrenClick" v-if="activeName == 8" :columns="columns[7]" ref="table">
+              </tableElm>
             </el-tab-pane>
           </el-tabs>
         </el-col>
@@ -272,22 +296,10 @@
       <el-form ref="" :model="form" :rules="rules" label-width="120px">
         <el-form-item v-for="(item, index) in formList" :label="item.label" prop="carNum">
           <el-input v-if="item.type == 'input'" v-model="addForm[item.prop]" :placeholder="item.placeholder" />
-          <el-date-picker
-            v-if="item.type == 'date'"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            v-model="addForm[item.prop]"
-            type="date"
-            :placeholder="item.placeholder"
-          />
-          <el-upload
-            v-if="item.type == 'image'"
-            v-model:file-list="fileList"
-            :headers="headers"
-            :action="uploadImgUrl"
-            list-type="picture-card"
-            :on-remove="handleRemove"
-            :on-success="handleUploadSuccess"
-          >
+          <el-date-picker v-if="item.type == 'date'" value-format="YYYY-MM-DD HH:mm:ss" v-model="addForm[item.prop]"
+            type="date" :placeholder="item.placeholder" />
+          <el-upload v-if="item.type == 'image'" v-model:file-list="fileList" :headers="headers" :action="uploadImgUrl"
+            list-type="picture-card" :on-remove="handleRemove" :on-success="handleUploadSuccess">
             <el-icon>
               <Plus />
             </el-icon>
@@ -306,41 +318,43 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import { ref, toRaw } from "vue";
-import { useRoute, useRouter } from "vue-router";
-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 { getDicts } from '@/api/system/dict/data'
-import tableJson from "@/assets/json/table.json"
-import useTagsViewStore from '@/store/modules/tagsView';
-import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
-import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
-import type { UploadProps, UploadUserFile } from 'element-plus'
-import { globalHeaders } from '@/utils/request';
-import { getToken } from '@/utils/auth';
-
-const fileList = ref<UploadUserFile[]>([
-
-])
-
-const fileData = ref([])
-
-const headers = ref({
-    "Authorization":'Bearer ' +getToken(),
-    "Clientid":'e5cd7e4891bf95d1d19206ce24a7b32e',
-    "Accept":'application/json, text/plain, */*'
-});
-
-const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadImgUrl = ref(baseUrl + "/resource/oss/upload"); // 上传的图片服务器地址
-
-const route = useRoute();
-const router = useRouter();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const initFormData: CarInfoForm = {
+  import api from "@/api/system/user"
+  import { listDept } from "@/api/system/dept"
+  import { ref, toRaw } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  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 { getDicts } from '@/api/system/dict/data';
+  import tableJson from "@/assets/json/table.json";
+  import useTagsViewStore from '@/store/modules/tagsView';
+  import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
+  import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
+  import type { UploadProps, UploadUserFile } from 'element-plus';
+  import { globalHeaders } from '@/utils/request';
+  import { getToken } from '@/utils/auth';
+
+  const fileList = ref < UploadUserFile[] > ([
+
+  ])
+
+  const fileData = ref([])
+
+  const headers = ref({
+    "Authorization": 'Bearer ' + getToken(),
+    "Clientid": 'e5cd7e4891bf95d1d19206ce24a7b32e',
+    "Accept": 'application/json, text/plain, */*'
+  });
+
+  const baseUrl = import.meta.env.VITE_APP_BASE_API;
+  const uploadImgUrl = ref(baseUrl + "/resource/oss/upload"); // 上传的图片服务器地址
+
+  const route = useRoute();
+  const router = useRouter();
+
+  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+  const initFormData: CarInfoForm = {
     id: undefined,
     carNum: undefined,
     carType: undefined,
@@ -354,15 +368,15 @@ const initFormData: CarInfoForm = {
     changeInfo: undefined,
     ext1: undefined,
     ext2: undefined
-}
+  }
 
-const ext2 = ref({
+  const ext2 = ref({
     driverInfo: undefined,
     attendantInfo: undefined,
     pathId: undefined
-})
+  })
 
-const formParams = ref({
+  const formParams = ref({
     bussinessType: undefined,
     energyType: undefined,
     wangge: undefined,
@@ -380,152 +394,156 @@ const formParams = ref({
     synx: undefined,
     edzz: undefined,
     sydw: undefined
-})
+  })
+
+  const upload = reactive < UploadOption > ({
+    headers: globalHeaders(),
+    url: 'http://47.104.97.60/api/resource/oss/upload'
+  })
 
-const upload = reactive<UploadOption>({
-  headers: globalHeaders(),
-  url: 'http://47.104.97.60/api/resource/oss/upload'
-})
+  const table = ref(tableElm)
 
-const table = ref(tableElm)
+  const addForm = ref({});
 
-const addForm = ref({});
+  const activeName = ref("1");
 
-const activeName = ref("1");
+  const deptOptions = ref < DeptVO[] > ([]);
+  const deptTreeRef = ref < ElTreeInstance > ();
+  const deptName = ref('');
 
-const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
+  const data = reactive < PageData < CarInfoForm, CarInfoQuery>> ({
     form: { ...initFormData },
     queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        carNum: undefined,
-        carType: undefined,
-        deviceInfos: undefined,
-        repairInfo: undefined,
-        maintenanceInfo: undefined,
-        insuranceInfo: undefined,
-        inspectionInfo: undefined,
-        trafficAccidentInfo: undefined,
-        violationInfo: undefined,
-        changeInfo: undefined,
-        ext1: undefined,
-        ext2: undefined,
-        params: {
-        }
+      pageNum: 1,
+      pageSize: 10,
+      carNum: undefined,
+      carType: undefined,
+      deviceInfos: undefined,
+      repairInfo: undefined,
+      maintenanceInfo: undefined,
+      insuranceInfo: undefined,
+      inspectionInfo: undefined,
+      trafficAccidentInfo: undefined,
+      violationInfo: undefined,
+      changeInfo: undefined,
+      ext1: undefined,
+      ext2: undefined,
+      params: {
+      }
     },
     rules: {
-        id: [
-            { required: true, message: "编号不能为空", trigger: "blur" }
-        ],
-        carNum: [
-            { required: true, message: "车牌号不能为空", trigger: "blur" }
-        ],
-        carType: [
-            { required: true, message: "车类型不能为空", trigger: "change" }
-        ],
-        deviceInfos: [
-            { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
-        ],
-        repairInfo: [
-            { required: true, message: "维修信息不能为空", trigger: "blur" }
-        ],
-        maintenanceInfo: [
-            { required: true, message: "保养信息不能为空", trigger: "blur" }
-        ],
-        insuranceInfo: [
-            { required: true, message: "保险信息不能为空", trigger: "blur" }
-        ],
-        inspectionInfo: [
-            { required: true, message: "年检信息不能为空", trigger: "blur" }
-        ],
-        trafficAccidentInfo: [
-            { required: true, message: "交通事故信息不能为空", trigger: "blur" }
-        ],
-        violationInfo: [
-            { required: true, message: "违章信息不能为空", trigger: "blur" }
-        ],
-        changeInfo: [
-            { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
-        ],
-        ext1: [
-            { required: true, message: "扩展1不能为空", trigger: "blur" }
-        ],
-        ext2: [
-            { required: true, message: "扩展2不能为空", trigger: "blur" }
-        ]
+      id: [
+        { required: true, message: "编号不能为空", trigger: "blur" }
+      ],
+      carNum: [
+        { required: true, message: "车牌号不能为空", trigger: "blur" }
+      ],
+      carType: [
+        { required: true, message: "车类型不能为空", trigger: "change" }
+      ],
+      deviceInfos: [
+        { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
+      ],
+      repairInfo: [
+        { required: true, message: "维修信息不能为空", trigger: "blur" }
+      ],
+      maintenanceInfo: [
+        { required: true, message: "保养信息不能为空", trigger: "blur" }
+      ],
+      insuranceInfo: [
+        { required: true, message: "保险信息不能为空", trigger: "blur" }
+      ],
+      inspectionInfo: [
+        { required: true, message: "年检信息不能为空", trigger: "blur" }
+      ],
+      trafficAccidentInfo: [
+        { required: true, message: "交通事故信息不能为空", trigger: "blur" }
+      ],
+      violationInfo: [
+        { required: true, message: "违章信息不能为空", trigger: "blur" }
+      ],
+      changeInfo: [
+        { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
+      ],
+      ext1: [
+        { required: true, message: "扩展1不能为空", trigger: "blur" }
+      ],
+      ext2: [
+        { required: true, message: "扩展2不能为空", trigger: "blur" }
+      ]
     }
-});
+  });
 
-const buttonLoading = ref(false);
+  const buttonLoading = ref(false);
 
-const { queryParams, form, rules } = toRefs(data);
+  const { queryParams, form, rules } = toRefs(data);
 
-const formList = ref([
+  const formList = ref([
     { placeholder: "请选择维修日期", type: 'date', label: '维修日期', prop: 'carNum', visible: true, isTemplate: false },
     { placeholder: "请输入维修内容", type: 'input', label: '维修内容', prop: 'carNum', visible: true, isTemplate: false },
     { placeholder: "请输入金额", type: 'input', label: '金额', prop: 'carNum', visible: true, isTemplate: false },
-])
+  ])
 
 
-const sjList = ref([])
-const driver = ref(null)
-const ckList = ref([])
-const ck = ref(null)
+  const sjList = ref([])
+  const driver = ref(null)
+  const ckList = ref([])
+  const ck = ref(null)
 
-const reset = () => {
+  const reset = () => {
     console.log(111111111111)
     console.log(upload)
     form.value = {};
     console.log(0)
-}
+  }
 
-const columns = ref(
+  const columns = ref(
     [[
-        // {label: '上层位置', prop: 'v', visible: true},
-        { label: '日期', prop: 'carNum', visible: true, isTemplate: false },
-        { label: '维修内容', prop: 'carNum', visible: true, isTemplate: false },
-        { label: '金额', prop: 'carNum', visible: true, isTemplate: false },
+      // {label: '上层位置', prop: 'v', visible: true},
+      { label: '日期', prop: 'carNum', visible: true, isTemplate: false },
+      { label: '维修内容', prop: 'carNum', visible: true, isTemplate: false },
+      { label: '金额', prop: 'carNum', visible: true, isTemplate: false },
     ]])
 
-const dialog = reactive<DialogOption>({
+  const dialog = reactive < DialogOption > ({
     visible: false,
     title: ''
-});
+  });
 
-const carPathList = ref([])
+  const carPathList = ref([])
 
-const carTypeList = ref([]);
-const energyTypeList = ref([])
-const bussinessTypeList = ref([])
-const carId = ref(0);
+  const carTypeList = ref([]);
+  const energyTypeList = ref([])
+  const bussinessTypeList = ref([])
+  const carId = ref(0);
 
-const handleRemove = (uploadFile, uploadFiles) =>{
+  const handleRemove = (uploadFile, uploadFiles) => {
     console.log(uploadFile)
     const arry = fileData.value.filter((item) => item.ossId != fileData.value.ossId)
     fileData.value = arry;
     fileList.value = arry;
-}
+  }
 
-const getDictsData = (param, obj) => {
+  const getDictsData = (param, obj) => {
     getDicts(param).then(res => {
-        obj.value = res.data;
+      obj.value = res.data;
     })
-}
-
-const handleUploadSuccess = (response, file, fileList) =>{
-     console.log(response)
-     console.log(response.data.url)
-     if(response.code == 200){
-        var obj = {
-            name:response.data.fileName,
-            url:response.data.url.replaceAll("http://127.0.0.1:9000","https://khy.xiaole.vip/khyfile").split('?')[0],
-            ossId:response.data.ossId
-        }
-     }
-     fileData.value.push(obj)
-}
+  }
+
+  const handleUploadSuccess = (response, file, fileList) => {
+    console.log(response)
+    console.log(response.data.url)
+    if (response.code == 200) {
+      var obj = {
+        name: response.data.fileName,
+        url: response.data.url.replaceAll("http://127.0.0.1:9000", "https://khy.xiaole.vip/khyfile").split('?')[0],
+        ossId: response.data.ossId
+      }
+    }
+    fileData.value.push(obj)
+  }
 
-const updateObj = (data) => {
+  const updateObj = (data) => {
     addObj();
     dialog.visible = true
     console.log(data)
@@ -534,12 +552,12 @@ const updateObj = (data) => {
     fileList.value = JSON.parse(data.fileList)
     fileData.value = JSON.parse(data.fileList)
     console.log(addForm.value)
-}
+  }
 
-const deleteObj = (data) => {
+  const deleteObj = (data) => {
     console.log(data.id);
     var param = {
-        id: route.query.id,
+      id: route.query.id,
     }
     console.log(tableJson[activeName.value - 1]);
     let prop = tableJson[activeName.value - 1].dataName
@@ -549,48 +567,48 @@ const deleteObj = (data) => {
     // console.log(date)
     param[prop] = JSON.stringify(arry);
     updateCarInfo(param).then(res => {
-        addForm.value = {}
-        dialog.visible = false
-        form.value[prop] = JSON.stringify(arry)
-        setTableData(activeName.value);
+      addForm.value = {}
+      dialog.visible = false
+      form.value[prop] = JSON.stringify(arry)
+      setTableData(activeName.value);
     })
-}
+  }
 
-const getUserList = async () => {
+  const getUserList = async () => {
     const res = await allocatedUserList({ pageSize: 1000, roleId: '1763484881548447746' });
     sjList.value = res.rows
     const ckres = await allocatedUserList({ pageSize: 1000, roleId: '1763484977044361217' });
     ckList.value = ckres.rows
-}
+  }
 
 
-const childrenClick = (data) => {
+  const childrenClick = (data) => {
     if (data.func == 'updateObj') {
-        updateObj(data.data)
+      updateObj(data.data)
     } else if (data.func == 'deleteObj') {
-        deleteObj(data.data)
+      deleteObj(data.data)
     }
-}
+  }
 
-const submit = async () => {
+  const submit = async () => {
     form.value.ext1 = JSON.stringify(formParams.value);
     form.value.ext2 = JSON.stringify(ext2.value)
     console.log(form.value)
     buttonLoading.value = true;
     if (form.value.id) {
-        await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
+      await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
     } else {
-        await addCarInfo(form.value).finally(() => buttonLoading.value = false);
+      await addCarInfo(form.value).finally(() => buttonLoading.value = false);
     }
     proxy?.$modal.msgSuccess("修改成功");
     useTagsViewStore().delView(route);
     router.push({ path: '/car/carInfo' })
-}
+  }
 
-const submitForm = () => {
+  const submitForm = () => {
     console.log(addForm.value);
     var param = {
-        id: route.query.id,
+      id: route.query.id,
     }
     console.log(tableJson[activeName.value - 1]);
     let prop = tableJson[activeName.value - 1].dataName
@@ -599,86 +617,87 @@ const submitForm = () => {
     console.log(data)
     var arry = [];
     if (data) {
-        if (data.length > 0) {
-            arry = JSON.parse(data)
-        }
+      if (data.length > 0) {
+        arry = JSON.parse(data)
+      }
     }
     if (addForm.value.id != null) {
-        addForm.value.fileList = JSON.stringify(fileData.value)
-        for (var index in arry) {
-            if (arry[index].id == addForm.value.id) {
-                arry[index] = addForm.value
-            }
+      addForm.value.fileList = JSON.stringify(fileData.value)
+      for (var index in arry) {
+        if (arry[index].id == addForm.value.id) {
+          arry[index] = addForm.value
         }
+      }
     } else {
-        addForm.value.fileList = JSON.stringify(fileData.value)
-        addForm.value.id = 'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9);
-        arry.push(addForm.value);
+      addForm.value.fileList = JSON.stringify(fileData.value)
+      addForm.value.id = 'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9);
+      arry.push(addForm.value);
     }
     param[prop] = JSON.stringify(arry);
     updateCarInfo(param).then(res => {
-        addForm.value = {}
-        dialog.visible = false
-        form.value[prop] = JSON.stringify(arry)
-        setTableData(activeName.value);
+      addForm.value = {}
+      dialog.visible = false
+      form.value[prop] = JSON.stringify(arry)
+      setTableData(activeName.value);
     })
-}
+  }
 
 
-const tabClick = (tab, event) => {
+  const tabClick = (tab, event) => {
     setTimeout(() => {
-        setTableData(activeName.value);
+      setTableData(activeName.value);
     }, 200);
-}
+  }
 
-const setTableData = (tab) => {
+  const setTableData = (tab) => {
     console.log(tab)
     let obj = tableJson[tab - 1]
     var data = eval("form.value." + obj.dataName);
     console.log(data)
     table.value.setDataList(JSON.parse(data));
     table.value.setButton(obj.buttons);
-}
-
-// onMounted(() => {
-//     // getDictsData('tbl_car_type', carTypeList);
-//     // getDictsData('energy_type', energyTypeList);
-//     // getDictsData('business_type', bussinessTypeList);
-//     reset();
-//     setTimeout(() => {
-//         getData();
-//     }, 100);
-// });
-
-const setData = async (id) => {
+  }
+
+  // onMounted(() => {
+  //     // getDictsData('tbl_car_type', carTypeList);
+  //     // getDictsData('energy_type', energyTypeList);
+  //     // getDictsData('business_type', bussinessTypeList);
+  //     reset();
+  //     setTimeout(() => {
+  //         getData();
+  //     }, 100);
+  // });
+
+  const setData = async (id) => {
     const res = await getCarInfo(id);
     formParams.value = JSON.parse(res.data.ext1)
+    console.log(formParams.value)
     if (res.data.ext2 != null) {
-        ext2.value = JSON.parse(res.data.ext2)
+      ext2.value = JSON.parse(res.data.ext2)
     }
     form.value = res.data
     // formParams.value = res
-}
+  }
 
-const goBack = () => {
+  const goBack = () => {
     useTagsViewStore().delView(route);
     router.back();
-}
+  }
 
-const addObj = () => {
+  const addObj = () => {
     formList.value = tableJson[activeName.value - 1].columns
     console.log(formList.value)
     addForm.value = {}
     dialog.visible = true
-}
+  }
 
-const getcarPathList = async () => {
+  const getcarPathList = async () => {
     const res = await listCarPath(queryParams.value);
     carPathList.value = res.rows;
-}
+  }
 
 
-const getData = async () => {
+  const getData = async () => {
     let objId = route.query.id
     carId.value = route.query.id
     await getcarPathList();
@@ -687,42 +706,49 @@ const getData = async () => {
     await getDictsData('energy_type', energyTypeList);
     await getDictsData('business_type', bussinessTypeList);
     if (objId != 0 && objId != null) {
-        await setData(objId);
-        setTableData(activeName.value);
+      await setData(objId);
+      setTableData(activeName.value);
     }
     for (var i in tableJson) {
-        var obj = {}
-        var columnsList = [];
-        columns.value[i] = [];
-        for (var j in tableJson[i].columns) {
-            var dataObj = tableJson[i].columns[j]
-            var obj = {
-                label: dataObj.label,
-                prop: dataObj.prop,
-                visible: true,
-            }
-            columns.value[i].push(obj);
+      var obj = {}
+      var columnsList = [];
+      columns.value[i] = [];
+      for (var j in tableJson[i].columns) {
+        var dataObj = tableJson[i].columns[j]
+        var obj = {
+          label: dataObj.label,
+          prop: dataObj.prop,
+          visible: true,
         }
+        columns.value[i].push(obj);
+      }
     }
-}
+  }
+
+
+  const getTreeSelect = async () => {
+    const res = await api.deptTreeSelect();
+    deptOptions.value = res.data;
+  };
 
 
 
-reset();
-setTimeout(() => {
+  reset();
+  getTreeSelect();
+  setTimeout(() => {
     getData();
-}, 100);
+  }, 100);
 </script>
 
 <style lang="scss" scoped>
-.card-header {
+  .card-header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-}
+  }
 
-.content-w {
+  .content-w {
     display: inline-flex;
     max-width: 160px;
-}
-</style>
+  }
+</style>

src/views/car/carInfo/index.vue

@@ -1,59 +1,71 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-      :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
-        <div style="width: 85%;">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-            <el-form-item label="车牌号" prop="carNum">
-              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
-                @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="驾驶员" prop="people">
-              <el-input v-model="queryParams.people" placeholder="请输入驾驶员" clearable style="width: 160px"
-                @keyup.enter="handleQuery" />
-            </el-form-item>
-            <!-- TODO @李伟 -->
-            <el-form-item label="业务类型" prop="ext1">
-              <el-select v-model="queryParams.params.ext1$bussinessType" filterable clearable placeholder="业务分类">
-                <el-option v-for="item in bussinessTypeList" :key="item.dictValue" :label="item.dictLabel"
-                  :value="item.dictValue" />
-              </el-select>
-            </el-form-item>
-            <!-- TODO @李伟 -->
-            <el-form-item label="能耗类型" prop="ext1">
-              <el-select v-model="queryParams.params.ext1$energyType" filterable clearable placeholder="能耗分类">
-                <el-option v-for="item in energyTypeList" :key="item.dictValue" :label="item.dictLabel"
-                  :value="item.dictValue" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="网格" prop="wangge">
-              <el-input v-model="queryParams.params.ext1$wangge" placeholder="请输入网格" clearable style="width: 160px"
-                @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="单位" prop="dept">
-              <el-input v-model="queryParams.params.ext1$dept" placeholder="请输入单位" clearable style="width: 160px"
-                @keyup.enter="handleQuery" />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div style="width: 15%;">
-          <el-form-item>
-            <el-button type="primary" @click="goadd">新增</el-button>
-            <el-button type="primary" @click="handleQuery">查询</el-button>
-            <!-- <el-button type="primary" @click="resetQuery">重置</el-button> -->
-          </el-form-item>
-        </div>
-      </div>
-    </transition>
-
-    <el-card shadow="never">
-
-      <tableElm :columns="columns" @childToParent='childrenClick' :showButton="false" ref="table"></tableElm>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
+    <el-row :gutter="20">
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+          <el-tree class="mt-2" ref="deptTreeRef" node-key="id" :data="deptOptions"
+            :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
+            :filter-node-method="filterNode" highlight-current default-expand-all @node-click="handleNodeClick" />
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+          :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
+            <div style="width: 85%;">
+              <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+                <el-form-item label="车牌号" prop="carNum">
+                  <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="驾驶员" prop="people">
+                  <el-input v-model="queryParams.people" placeholder="请输入驾驶员" clearable style="width: 160px"
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+                <!-- TODO @李伟 -->
+                <el-form-item label="业务类型" prop="ext1">
+                  <el-select v-model="queryParams.params.ext1$bussinessType" filterable clearable placeholder="业务分类">
+                    <el-option v-for="item in bussinessTypeList" :key="item.dictValue" :label="item.dictLabel"
+                      :value="item.dictValue" />
+                  </el-select>
+                </el-form-item>
+                <!-- TODO @李伟 -->
+                <el-form-item label="能耗类型" prop="ext1">
+                  <el-select v-model="queryParams.params.ext1$energyType" filterable clearable placeholder="能耗分类">
+                    <el-option v-for="item in energyTypeList" :key="item.dictValue" :label="item.dictLabel"
+                      :value="item.dictValue" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="网格" prop="wangge">
+                  <el-input v-model="queryParams.params.ext1$wangge" placeholder="请输入网格" clearable style="width: 160px"
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="单位" prop="dept">
+                  <el-input v-model="queryParams.params.ext1$dept" placeholder="请输入单位" clearable style="width: 160px"
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+              </el-form>
+            </div>
+            <div style="width: 15%;">
+              <el-form-item>
+                <el-button type="primary" @click="goadd">新增</el-button>
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <!-- <el-button type="primary" @click="resetQuery">重置</el-button> -->
+              </el-form-item>
+            </div>
+          </div>
+        </transition>
+
+        <el-card shadow="never">
+
+          <tableElm :columns="columns" @childToParent='childrenClick' :showButton="false" ref="table"></tableElm>
+
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="getList" />
+        </el-card>
+      </el-col>
+    </el-row>
     <!-- 添加或修改车辆信息对话框 -->
     <!-- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="carInfoFormRef" :model="form" :rules="rules" label-width="80px">
@@ -86,6 +98,7 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
+  import api from "@/api/system/user"
   import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
   import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
   import tableElm from "@/components/Public/table.vue";
@@ -96,6 +109,8 @@
   import { ElButton, ElMessage } from 'element-plus'
   import mapDiv from "@/components/Map/index.vue"
   import moment from 'moment';
+  import { treeselect } from "@/api/system/dept";
+  import { DeptVO } from "@/api/system/dept/types";
 
 
   const route = useRoute();
@@ -113,6 +128,10 @@
   const total = ref(0);
   const params = ref(null)
 
+  const deptOptions = ref < DeptVO[] > ([]);
+  const deptTreeRef = ref < ElTreeInstance > ();
+  const deptName = ref('');
+
   const showMarket = ref(false)
 
   const timeArry = ref([])
@@ -163,7 +182,7 @@
   const mapElm = ref(mapDiv)
 
   const energyTypeList = ref([])
-  const bussinessTypeList =ref([])
+  const bussinessTypeList = ref([])
 
   const catObj = ref('');
 
@@ -256,6 +275,11 @@
     // router.push("/car/carInfo/add")
   }
 
+  const getTreeSelect = async () => {
+    const res = await api.deptTreeSelect();
+    deptOptions.value = res.data;
+  };
+
   const initMapLine = () => {
     const info = catObj.value
     // const info = getCatInfoData(data.carNum);
@@ -283,6 +307,18 @@
     // }, 1000);
   }
 
+  const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.label.indexOf(value) !== -1
+  }
+
+  watchEffect(
+    () => { deptTreeRef.value?.filter(deptName.value); },
+    {
+      flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    }
+  );
+
   const openMapDiv = (data) => {
     dialog.visible = true;
     catObj.value = data;
@@ -406,6 +442,7 @@
   getList();
 
   onMounted(() => {
+    getTreeSelect()
     initData();
     // initMapLine();
     // getList();

src/views/country/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+      :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div class="search" v-show="showSearch">
+        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form-item label="" prop="name">
+            <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 240px"
+              @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="" prop="sites">
+            <el-input v-model="queryParams.sites" placeholder="请输入" clearable style="width: 240px"
+              @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd"
+              v-hasPermi="['system:country:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
+              v-hasPermi="['system:country:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
+              v-hasPermi="['system:country:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport"
+              v-hasPermi="['system:country:export']">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :data="countryList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <!-- <el-table-column label="" align="center" prop="id" v-if="true" /> -->
+        <el-table-column label="乡镇名称" align="center" prop="name" />
+        <el-table-column label="站点" align="center" prop="sites">
+          <template #default="scope">
+            <span>{{ getSitesData(scope.row.sites) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:country:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                v-hasPermi="['system:country:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改乡镇管理对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="countryFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="站点" prop="sites">
+          <!-- <el-input v-model="form.sites" type="textarea" placeholder="请输入内容" /> -->
+          <el-select multiple v-model="form.sitesList" placeholder="请选择站点" style="width: 240px">
+            <el-option v-for="item in sitesList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Country" lang="ts">
+  import { listCountry, getCountry, delCountry, addCountry, updateCountry } from '@/api/country';
+  import { CountryVO, CountryQuery, CountryForm } from '@/api/country/types';
+  import { getDicts } from '@/api/system/dict/data'
+
+  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+  const countryList = ref < CountryVO[] > ([]);
+  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 queryFormRef = ref < ElFormInstance > ();
+  const countryFormRef = ref < ElFormInstance > ();
+
+  // const carPathList = ref([]);
+  const sitesList = ref([]);
+
+  const dialog = reactive < DialogOption > ({
+    visible: false,
+    title: ''
+  });
+
+  const initFormData: CountryForm = {
+    id: undefined,
+    name: undefined,
+    sites: undefined
+  }
+  const data = reactive < PageData < CountryForm, CountryQuery>> ({
+    form: { ...initFormData },
+    queryParams: {
+      pageNum: 1,
+      pageSize: 10,
+      name: undefined,
+      sites: undefined,
+      params: {
+      }
+    },
+    rules: {
+      id: [
+        { required: true, message: "不能为空", trigger: "blur" }
+      ],
+      name: [
+        { required: true, message: "不能为空", trigger: "blur" }
+      ],
+      sites: [
+        { required: true, message: "不能为空", trigger: "blur" }
+      ]
+    }
+  });
+
+  const { queryParams, form, rules } = toRefs(data);
+
+  /** 查询乡镇管理列表 */
+  const getList = async () => {
+    loading.value = true;
+    const res = await listCountry(queryParams.value);
+    countryList.value = res.rows;
+    total.value = res.total;
+    loading.value = false;
+  }
+
+  /** 取消按钮 */
+  const cancel = () => {
+    reset();
+    dialog.visible = false;
+  }
+
+  const initData = async () => {
+    const res = await listCarPath({ pageSize: 1000 });
+    carPathList.value = res.rows;
+  }
+
+  /** 表单重置 */
+  const reset = () => {
+    form.value = { ...initFormData };
+    countryFormRef.value?.resetFields();
+  }
+
+  /** 搜索按钮操作 */
+  const handleQuery = () => {
+    queryParams.value.pageNum = 1;
+    getList();
+  }
+
+  /** 重置按钮操作 */
+  const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+  }
+
+  /** 多选框选中数据 */
+  const handleSelectionChange = (selection: CountryVO[]) => {
+    ids.value = selection.map(item => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+  }
+
+  /** 新增按钮操作 */
+  const handleAdd = () => {
+    reset();
+    dialog.visible = true;
+    dialog.title = "添加乡镇管理";
+  }
+
+  /** 修改按钮操作 */
+  const handleUpdate = async (row?: CountryVO) => {
+    reset();
+    const _id = row?.id || ids.value[0]
+    const res = await getCountry(_id);
+    Object.assign(form.value, res.data);
+    form.value.sitesList = form.value.sites.split(",")
+    dialog.visible = true;
+    dialog.title = "修改乡镇管理";
+  }
+
+  /** 提交按钮 */
+  const submitForm = () => {
+    form.value.sites = form.value.sitesList.join(",")
+    countryFormRef.value?.validate(async (valid: boolean) => {
+      if (valid) {
+        buttonLoading.value = true;
+        if (form.value.id) {
+          await updateCountry(form.value).finally(() => buttonLoading.value = false);
+        } else {
+          await addCountry(form.value).finally(() => buttonLoading.value = false);
+        }
+        proxy?.$modal.msgSuccess("修改成功");
+        dialog.visible = false;
+        await getList();
+      }
+    });
+  }
+
+  /** 删除按钮操作 */
+  const handleDelete = async (row?: CountryVO) => {
+    const _ids = row?.id || ids.value;
+    await proxy?.$modal.confirm('是否确认删除乡镇管理编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+    await delCountry(_ids);
+    proxy?.$modal.msgSuccess("删除成功");
+    await getList();
+  }
+
+  /** 导出按钮操作 */
+  const handleExport = () => {
+    proxy?.download('system/country/export', {
+      ...queryParams.value
+    }, `country_${new Date().getTime()}.xlsx`)
+  }
+
+  const getDeviceData = () => {
+    getDicts('tbl_sites').then(res => {
+      // console.log(res)
+      sitesList.value = res.data
+    })
+  }
+
+  const getSitesData = (data) => {
+    var siteNameList = []
+    var siteList = data.split(",")
+    for (var i in siteList) {
+      for (var j in sitesList.value) {
+        if (siteList[i] == sitesList.value[j].dictCode) {
+          siteNameList.push(sitesList.value[j].dictLabel)
+        }
+      }
+    }
+    // console.log(siteNameList)
+    return siteNameList.join(",")
+  }
+
+
+  onMounted(() => {
+    getDeviceData();
+    getList();
+  });
+</script>

src/views/yunying/kdg/index.vue

@@ -17,8 +17,8 @@
           </div>
         </div>
         <div style="margin-top: 20px; padding-left: 10px">
-          <el-select v-model="line" placeholder="请选择路线" style="width: 240px" @change="getLineSites()">
-            <el-option v-for="item in carPathList" :key="item.id" :label="item.name" :value="item.id" />
+          <el-select v-model="line" placeholder="请选择路线" style="width: 240px" @change="getCountrySites()">
+            <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
           <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"
@@ -55,7 +55,7 @@
           <!-- <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: 10vh;"  v-if="showKdg">
+        <div style="margin-top: 10vh;" v-if="showKdg">
           <div v-if="type == 1">
             <div style="display: flex;flex-direction: row;justify-content: center;">
               <div style="width: 9vw;border:0.5vw solid #000;">
@@ -392,63 +392,66 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import { TreeNode } from "element-plus";
-import { useRoute, useRouter } from "vue-router";
-import EZUIKit from 'ezuikit-js';
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { getCameraPlayerConfig } from '@/api/gpsData';
-import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
-import { updateData, listData } from "@/api/system/dict/data";
-import imgulock from "@/assets/images/unlock@2x.png";
-import { getBoxInfo, getLock, openall } from "@/api/data"
+    import { listCountry, getCountry, delCountry, addCountry, updateCountry } from '@/api/country';
+  import { TreeNode } from "element-plus";
+  import { useRoute, useRouter } from "vue-router";
+  import EZUIKit from 'ezuikit-js';
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { getCameraPlayerConfig } from '@/api/gpsData';
+  import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
+  import { updateData, listData } from "@/api/system/dict/data";
+  import imgulock from "@/assets/images/unlock@2x.png";
+  import { getBoxInfo, getLock, openall } from "@/api/data"
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const sites = ref([]);
+  const sites = ref([]);
 
-const showTree = ref(true)
+  const showTree = ref(true)
 
-const type = ref([])
+  const type = ref([])
 
-const boxData = ref([])
-const boxCode = ref(null)
-const showKdg = ref(false)
+  const boxData = ref([])
+  const boxCode = ref(null)
+  const showKdg = ref(false)
 
 
-const formdata = ref({
-  name: "",
-  type: "",
-  code: ""
-})
+  const formdata = ref({
+    name: "",
+    type: "",
+    code: ""
+  })
 
 
-const route = useRoute();
-const router = useRouter();
+  const route = useRoute();
+  const router = useRouter();
 
-const tableData = ref([]);
-const carPathList = ref([]);
-const line = ref([]);
+  const tableData = ref([]);
+  const carPathList = ref([]);
+  const line = ref([]);
 
-const activeName = ref("camera")
+  const activeName = ref("camera")
 
-const filterText = ref("");
-const treeRef = ref(null);
-const dialogVisible = ref(false);
+  const countryList = ref([])
 
-const gettreeheight = () => {
-  return document.body.clientHeight - 300;
-}
+  const filterText = ref("");
+  const treeRef = ref(null);
+  const dialogVisible = ref(false);
 
-const goAdd = () => {
-  dialogVisible.value = true
-  formdata.value = {
-    name: "",
-    type: "",
-    code: ""
+  const gettreeheight = () => {
+    return document.body.clientHeight - 300;
+  }
+
+  const goAdd = () => {
+    dialogVisible.value = true
+    formdata.value = {
+      name: "",
+      type: "",
+      code: ""
+    }
   }
-}
 
-const openBox = (value, lockCode) => {
+  const openBox = (value, lockCode) => {
 
     ElMessageBox.confirm(
       '是否打开' + value + "号柜",
@@ -476,322 +479,366 @@ const openBox = (value, lockCode) => {
         // })
       })
 
-}
+  }
 
-const clickCabinet = (value, lockCode) => {
-  for (var index in boxData.value) {
-    if (boxData.value[index].box_name == value) {
-      //  console.log(boxData.value[index].box_lock_address)
-      openBox(value, boxData.value[index].box_lock_address);
+  const clickCabinet = (value, lockCode) => {
+    for (var index in boxData.value) {
+      if (boxData.value[index].box_name == value) {
+        //  console.log(boxData.value[index].box_lock_address)
+        openBox(value, boxData.value[index].box_lock_address);
+      }
     }
+    // ElMessage.success(value + "号柜远程开启成功");
   }
-  // ElMessage.success(value + "号柜远程开启成功");
-}
-
-const initData = async () => {
-  const res = await listCarPath({ pageSize: 1000 });
-  carPathList.value = res.rows;
-}
 
+  const initData = async () => {
+    const res = await listCarPath({ pageSize: 1000 });
+    carPathList.value = res.rows;
+  }
 
-const defaultProps = {
-  children: "children",
-  label: "label",
-  value: 'id',
-};
-const treeIndent = ref(40);
 
-watch(filterText, (val) => {
-  if (treeRef.value) {
-    treeRef.value.filter(val);
-  }
-});
-
-const savedata = () => {
-  //保存数据
-  var data = {
-    dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.dictValue,
-    dictLabel: currentdata.value.dictLabel,
-    dictType: "tbl_sites",
-    remark: JSON.stringify(tableData.value)
-  }
-  updateData(data).then(res => {
-    ElMessage.success("成功!");
-    getSites();
+  const defaultProps = {
+    children: "children",
+    label: "label",
+    value: 'id',
+  };
+  const treeIndent = ref(40);
 
-  })
-}
-
-const getLineSites = () => {
-  console.log(line.value)
-  var sitesList = []
-  for (var index in carPathList.value) {
-    if (carPathList.value[index].id == line.value) {
-      sitesList = JSON.parse(carPathList.value[index].stationList)
+  watch(filterText, (val) => {
+    if (treeRef.value) {
+      treeRef.value.filter(val);
     }
-  }
-  console.log(sitesList)
-  var sites = []
-  for (var i in sitesList) {
-    sites.push({ id: i, label: sitesList[i].data.dictLabel })
-  }
-  console.log(sites)
-  data.value = [{
-    id: 1,
-    label: "站点",
-  },];
-  data.value[0].children = sites
-  console.log(data.value)
-  showTree.value = false;
-  setTimeout(() => {
-    showTree.value = true
-  }, 100);
-
-}
+  });
 
+  const savedata = () => {
+    //保存数据
+    var data = {
+      dictCode: currentdata.value.dictCode,
+      dictValue: currentdata.value.dictValue,
+      dictLabel: currentdata.value.dictLabel,
+      dictType: "tbl_sites",
+      remark: JSON.stringify(tableData.value)
+    }
+    updateData(data).then(res => {
+      ElMessage.success("成功!");
+      getSites();
 
-const getSites = () => {
-  listData({ dictType: "tbl_sites" }).then(res2 => {
-    sites.value = res2.rows;
+    })
+  }
 
-    var index = 1;
+  const getLineSites = () => {
+    console.log(line.value)
+    var sitesList = []
+    for (var index in carPathList.value) {
+      if (carPathList.value[index].id == line.value) {
+        sitesList = JSON.parse(carPathList.value[index].stationList)
+      }
+    }
+    console.log(sitesList)
+    var sites = []
+    for (var i in sitesList) {
+      sites.push({ id: i, label: sitesList[i].data.dictLabel })
+    }
+    console.log(sites)
     data.value = [{
       id: 1,
       label: "站点",
-      children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
     },];
-  });
-}
-
-const openAllBox = () => {
-  let code = boxCode.value
-  ElMessageBox.confirm(
-    '是否打开所有柜子',
-    '提示',
-    {
-      confirmButtonText: '是',
-      cancelButtonText: '否',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-      openall(code).then(res => {
-        if (res.code == 0) {
-          ElMessage.success("打开所有柜子成功");
-        }
-      })
-      // ElMessage({
-      //   type: 'success',
-      //   message: 'Delete completed',
-      // })
-    })
-    .catch(() => {
-      // ElMessage({
-      //   type: 'info',
-      //   message: 'Delete canceled',
-      // })
-    })
-}
-
-const deleteDevice = (datac) => {
-  tableData.value = tableData.value.filter(i => i.type != datac.type);
-  var data = {
-    dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.dictValue,
-    dictLabel: currentdata.value.dictLabel,
-    dictType: "tbl_sites",
-    remark: JSON.stringify(tableData.value)
-  }
-  updateData(data).then(res => {
-    ElMessage.success("成功!");
-  })
-}
-
-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;
-};
-
-const currentdata = ref(null)
-
-const treeclick = (data: TreeNodeData, node: TreeNode) => {
-
-  currentdata.value = sites.value.filter(i => {
-    return i.dictLabel == data.label
-  })[0];
-  // console.log(currentdata.value)
-  tableData.value = JSON.parse((currentdata.value.remark==''?"[]":currentdata.value.remark)??"[]")
-  if (currentdata.value) {
-    var cabinets = tableData.value.filter(i => i.type == 'cabinet');
-    if (cabinets.length > 0) {
-       boxCode.value = cabinets[0].code
-    getBoxInfoData(cabinets[0].code)
-    if (cabinets.length > 0) {
-      type.value = cabinets[0].cabinetType
-    } else {
-      type.value = 4
-    }
-    }
-    // console.log(cabinets)
+    data.value[0].children = sites
+    console.log(data.value)
+    showTree.value = false;
+    setTimeout(() => {
+      showTree.value = true
+    }, 100);
 
   }
 
-}
 
-const getBoxInfoData = (code) => {
-  showKdg.value = false
-  getBoxInfo(code).then(res => {
-    boxData.value = res.data.list
-    showKdg.value = true
-    console.log(boxData.value)
-  })
-}
+  const getSites = () => {
+    listData({ dictType: "tbl_sites" }).then(res2 => {
+      sites.value = res2.rows;
 
-const addDevice = () => {
-  dialogVisible.value = false;
-  if (formdata.value.name == "") {
-    ElMessage.warning("设备名称未填写");
-    return;
+      var index = 1;
+      data.value = [{
+        id: 1,
+        label: "站点",
+        children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
+      },];
+    });
+  }
+
+  const openAllBox = () => {
+    let code = boxCode.value
+    ElMessageBox.confirm(
+      '是否打开所有柜子',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        openall(code).then(res => {
+          if (res.code == 0) {
+            ElMessage.success("打开所有柜子成功");
+          }
+        })
+        // ElMessage({
+        //   type: 'success',
+        //   message: 'Delete completed',
+        // })
+      })
+      .catch(() => {
+        // ElMessage({
+        //   type: 'info',
+        //   message: 'Delete canceled',
+        // })
+      })
   }
-  if (formdata.value.type == "") {
-    ElMessage.warning("设备类型未填写");
-    return;
+
+  const deleteDevice = (datac) => {
+    tableData.value = tableData.value.filter(i => i.type != datac.type);
+    var data = {
+      dictCode: currentdata.value.dictCode,
+      dictValue: currentdata.value.dictValue,
+      dictLabel: currentdata.value.dictLabel,
+      dictType: "tbl_sites",
+      remark: JSON.stringify(tableData.value)
+    }
+    updateData(data).then(res => {
+      ElMessage.success("成功!");
+    })
   }
-  if (formdata.value.code == "") {
-    ElMessage.warning("设备序列号未填写");
-    return;
+
+  const handleTabClick = () => {
+
   }
-  if (tableData.value.filter(i => i.type == formdata.value.type).length > 0) {
-    ElMessage.warning("存在相同类型的设备");
-    return;
+
+  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 currentdata = ref(null)
+
+  const treeclick = (data: TreeNodeData, node: TreeNode) => {
+
+    currentdata.value = sites.value.filter(i => {
+      return i.dictLabel == data.label
+    })[0];
+    // console.log(currentdata.value)
+    tableData.value = JSON.parse((currentdata.value.remark == '' ? "[]" : currentdata.value.remark) ?? "[]")
+    if (currentdata.value) {
+      var cabinets = tableData.value.filter(i => i.type == 'cabinet');
+      if (cabinets.length > 0) {
+        boxCode.value = cabinets[0].code
+        getBoxInfoData(cabinets[0].code)
+        if (cabinets.length > 0) {
+          type.value = cabinets[0].cabinetType
+        } else {
+          type.value = 4
+        }
+      }
+      // console.log(cabinets)
+
+    }
+
   }
-  tableData.value.push(formdata.value);
-  var data = {
-    dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.value,
-    dictLabel: currentdata.value.label,
-    dictType: "tbl_sites",
-    remark: JSON.stringify(tableData.value)
+
+  const getBoxInfoData = (code) => {
+    showKdg.value = false
+    getBoxInfo(code).then(res => {
+      boxData.value = res.data.list
+      showKdg.value = true
+      console.log(boxData.value)
+    })
   }
-  updateData(data).then(res => {
-    ElMessage.success("成功!");
-  })
 
+  const addDevice = () => {
+    dialogVisible.value = false;
+    if (formdata.value.name == "") {
+      ElMessage.warning("设备名称未填写");
+      return;
+    }
+    if (formdata.value.type == "") {
+      ElMessage.warning("设备类型未填写");
+      return;
+    }
+    if (formdata.value.code == "") {
+      ElMessage.warning("设备序列号未填写");
+      return;
+    }
+    if (tableData.value.filter(i => i.type == formdata.value.type).length > 0) {
+      ElMessage.warning("存在相同类型的设备");
+      return;
+    }
+    tableData.value.push(formdata.value);
+    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("成功!");
+    })
 
-}
-
-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
+
+  }
+
+  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
+      }
+      )
     }
-    )
   }
-}
-// const openbox = (code) => {
-//   setTimeout(() => {
-//     ElMessage.success("指令已发送！");
-//   }, 1000);
-// }
-
-const formatIndex = (value) => {
-  if (value < 10) {
-    return '0' + value
-  } else {
-    return value
+  // const openbox = (code) => {
+  //   setTimeout(() => {
+  //     ElMessage.success("指令已发送！");
+  //   }, 1000);
+  // }
+
+  const formatIndex = (value) => {
+    if (value < 10) {
+      return '0' + value
+    } else {
+      return value
+    }
   }
-}
 
-const getStatus = (index) => {
-  console.log(boxData.value.length)
-  if (index - 1 < boxData.value.length) {
-    if (boxData.value[index - 1].box_use_status == 0) {
-      return '空闲中'
+  const getStatus = (index) => {
+    console.log(boxData.value.length)
+    if (index - 1 < boxData.value.length) {
+      if (boxData.value[index - 1].box_use_status == 0) {
+        return '空闲中'
+      } else {
+        return '使用中'
+      }
     } else {
-      return '使用中'
+      return '暂无'
     }
-  }else{
-    return '暂无'
+
   }
 
-}
+  const getCountrySites = () => {
+    for (var i in countryList.value) {
+      if (line.value == countryList.value[i].id) {
+        console.log(countryList.value[i].sites)
+        var siteList = countryList.value[i].sites.split(",")
+        var siteObjList = [];
+        for (var j in sites.value) {
+          if (siteList.indexOf(sites.value[j].dictCode) > -1) {
+            siteObjList.push(sites.value[j])
+          }
+        }
+        updateSites(siteObjList)
+      }
+    }
+  }
 
-const data = computed(() => {
+  const getCountry = () => {
+    listCountry({ pageSize: 10000 }).then(res => {
+      console.log(res)
+      countryList.value = res.rows
+    })
+  }
 
-  var index = 1;
+  const updateSites = (sitesList) => {
+    console.log(sitesList)
+    var sites = []
+    for (var i in sitesList) {
 
-  return [{
-    id: 1,
-    label: "站点",
-    children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
-  },]
-});
-onMounted(() => {
-  if (treeRef.value) {
+      sites.push({ id: i, label: sitesList[i].dictLabel })
+    }
+    console.log(sites)
+    data.value = [{
+      id: 1,
+      label: "站点",
+    },];
+    data.value[0].children = sites
+    console.log(data.value)
+    showTree.value = false;
     setTimeout(() => {
-      treeRef.value.expandNode(treeRef.value.getNode(1))
+      showTree.value = true
     }, 100);
-    getSites();
-    initData();
-    // treeRef.value.expandNode(treeRef.value.getNode(1))
   }
-});
+
+  const data = computed(() => {
+
+    var index = 1;
+
+    return [{
+      id: 1,
+      label: "站点",
+      children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
+    },]
+  });
+  onMounted(() => {
+    if (treeRef.value) {
+      setTimeout(() => {
+        treeRef.value.expandNode(treeRef.value.getNode(1))
+      }, 100);
+      getSites();
+      // initData();
+      getCountry();
+      // treeRef.value.expandNode(treeRef.value.getNode(1))
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
-.card-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.boxunused {
-  background: #3333332d;
-}
-
-.indexDiv {
-  background-color: white;
-  width: 20px;
-  height: 10px;
-  color: #000;
-  font-weight: 600;
-  position: absolute;
-  right: 2px;
-  bottom: 1px;
-  z-index: 1000;
-  font-size: 10px;
-  text-align: center;
-}
-
-.indexDivLeft {
-  background-color: white;
-  width: 40px;
-  height: 10px;
-  color: #000;
-  font-weight: 600;
-  position: absolute;
-  left: 2px;
-  bottom: 1px;
-  z-index: 1000;
-  font-size: 10px;
-  text-align: center;
-}
-</style>
+  .card-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .boxunused {
+    background: #3333332d;
+  }
+
+  .indexDiv {
+    background-color: white;
+    width: 20px;
+    height: 10px;
+    color: #000;
+    font-weight: 600;
+    position: absolute;
+    right: 2px;
+    bottom: 1px;
+    z-index: 1000;
+    font-size: 10px;
+    text-align: center;
+  }
+
+  .indexDivLeft {
+    background-color: white;
+    width: 40px;
+    height: 10px;
+    color: #000;
+    font-weight: 600;
+    position: absolute;
+    left: 2px;
+    bottom: 1px;
+    z-index: 1000;
+    font-size: 10px;
+    text-align: center;
+  }
+</style>

src/views/yunying/sties/index.vue

@@ -17,8 +17,8 @@
           </div>
         </div>
         <div style="margin-top: 20px; padding-left: 10px;">
-          <el-select v-model="line" placeholder="请选择路线" style="width: 240px" @change="getLineSites()">
-            <el-option v-for="item in carPathList" :key="item.id" :label="item.name" :value="item.id" />
+          <el-select v-model="line" placeholder="请选择乡镇" style="width: 240px" @change="getCountrySites()">
+            <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
           <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"
@@ -47,8 +47,8 @@
 
 
           </div>
-          <el-button v-if="tableData.length < 4" type="primary"
-            style="position: absolute;right: 20px;" @click="goAdd">添加设备</el-button>
+          <el-button v-if="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%">
@@ -153,191 +153,235 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import { TreeNode } from "element-plus";
-import { useRoute, useRouter } from "vue-router";
-import EZUIKit from 'ezuikit-js';
-import { getCameraPlayerConfig } from '@/api/gpsData';
-import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
-import { updateData, listData } from "@/api/system/dict/data";
-import imgulock from "@/assets/images/unlock@2x.png";
+  import { listCountry, getCountry, delCountry, addCountry, updateCountry } from '@/api/country';
+  import { TreeNode } from "element-plus";
+  import { useRoute, useRouter } from "vue-router";
+  import EZUIKit from 'ezuikit-js';
+  import { getCameraPlayerConfig } from '@/api/gpsData';
+  import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
+  import { updateData, listData } from "@/api/system/dict/data";
+  import imgulock from "@/assets/images/unlock@2x.png";
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const sites = ref([]);
+  const sites = ref([]);
 
-const showTree = ref(true)
+  const showTree = ref(true)
 
 
-const formdata = ref({
-  name: "",
-  type: "",
-  code: "",
-  cabinetType: ''
-})
-
+  const formdata = ref({
+    name: "",
+    type: "",
+    code: "",
+    cabinetType: ''
+  })
 
-const route = useRoute();
-const router = useRouter();
 
-const tableData = ref([]);
-const carPathList = ref([]);
-const line = ref([]);
+  const route = useRoute();
+  const router = useRouter();
 
-const activeName = ref("camera")
+  const tableData = ref([]);
+  const carPathList = ref([]);
+  const countryList = ref([])
+  const line = ref([]);
 
-const filterText = ref("");
-const treeRef = ref(null);
-const dialogVisible = ref(false);
+  const activeName = ref("camera")
 
-const gettreeheight = () => {
-  return document.body.clientHeight - 300;
-}
+  const filterText = ref("");
+  const treeRef = ref(null);
+  const dialogVisible = ref(false);
 
-const goAdd = () => {
-  dialogVisible.value = true
-  formdata.value = {
-    name: "",
-    type: "",
-    code: ""
-  }
-}
-
-const getTypeName = (data) => {
-  var type = data.cabinetType
-  if (type == 1) {
-    return '一主'
-  } else if (type == 2) {
-    return '一主一副'
-  } else {
-    return '一主二副'
+  const gettreeheight = () => {
+    return document.body.clientHeight - 300;
   }
-}
 
-const initData = async () => {
-  const res = await listCarPath({ pageSize: 1000 });
-  carPathList.value = res.rows;
-}
+  const goAdd = () => {
+    dialogVisible.value = true
+    formdata.value = {
+      name: "",
+      type: "",
+      code: ""
+    }
+  }
 
+  const getTypeName = (data) => {
+    var type = data.cabinetType
+    if (type == 1) {
+      return '一主'
+    } else if (type == 2) {
+      return '一主一副'
+    } else {
+      return '一主二副'
+    }
+  }
 
-const defaultProps = {
-  children: "children",
-  label: "label",
-  value: 'id',
-};
-const treeIndent = ref(40);
+  const initData = async () => {
+    const res = await listCarPath({ pageSize: 1000 });
+    carPathList.value = res.rows;
+  }
 
-watch(filterText, (val) => {
-  if (treeRef.value) {
-    treeRef.value.filter(val);
+  const getCountry = () => {
+    listCountry({ pageSize: 10000 }).then(res => {
+      console.log(res)
+      countryList.value = res.rows
+    })
   }
-});
-
-const savedata = () => {
-  //保存数据
-  var data = {
-    dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.dictValue,
-    dictLabel: currentdata.value.dictLabel,
-    dictType: "tbl_sites",
-    remark: JSON.stringify(tableData.value)
+
+  const getCountrySites = () => {
+    for (var i in countryList.value) {
+      if (line.value == countryList.value[i].id) {
+        console.log(countryList.value[i].sites)
+        var siteList = countryList.value[i].sites.split(",")
+        var siteObjList = [];
+        for (var j in sites.value) {
+          if (siteList.indexOf(sites.value[j].dictCode) > -1) {
+            siteObjList.push(sites.value[j])
+          }
+        }
+        updateSites(siteObjList)
+      }
+    }
   }
-  updateData(data).then(res => {
-    ElMessage.success("成功!");
-    getLineSites();
 
-  })
-}
-
-const getLineSites = () => {
-  console.log(line.value)
-  var sitesList = []
-  for (var index in carPathList.value) {
-    if (carPathList.value[index].id == line.value) {
-      sitesList = JSON.parse(carPathList.value[index].stationList)
+  const updateSites = (sitesList) => {
+    console.log(sitesList)
+    var sites = []
+    for (var i in sitesList) {
+      
+      sites.push({ id: i, label: sitesList[i].dictLabel })
     }
+    console.log(sites)
+    data.value = [{
+      id: 1,
+      label: "站点",
+    },];
+    data.value[0].children = sites
+    console.log(data.value)
+    showTree.value = false;
+    setTimeout(() => {
+      showTree.value = true
+    }, 100);
   }
-  console.log(sitesList)
-  var sites = []
-  for (var i in sitesList) {
-    sites.push({ id: i, label: sitesList[i].data.dictLabel })
+
+
+  const defaultProps = {
+    children: "children",
+    label: "label",
+    value: 'id',
+  };
+  const treeIndent = ref(40);
+
+  watch(filterText, (val) => {
+    if (treeRef.value) {
+      treeRef.value.filter(val);
+    }
+  });
+
+  const savedata = () => {
+    //保存数据
+    var data = {
+      dictCode: currentdata.value.dictCode,
+      dictValue: currentdata.value.dictValue,
+      dictLabel: currentdata.value.dictLabel,
+      dictType: "tbl_sites",
+      remark: JSON.stringify(tableData.value)
+    }
+    updateData(data).then(res => {
+      ElMessage.success("成功!");
+      getLineSites();
+
+    })
   }
-  console.log(sites)
-  data.value = [{
-    id: 1,
-    label: "站点",
-  },];
-  data.value[0].children = sites
-  console.log(data.value)
-  showTree.value = false;
-  setTimeout(() => {
-    showTree.value = true
-  }, 100);
-
-}
-
-const getSites = () => {
-  listData({ dictType: "tbl_sites" }).then(res2 => {
-    sites.value = res2.rows;
-    var index = 1;
+
+  const getLineSites = () => {
+    console.log(line.value)
+    var sitesList = []
+    for (var index in carPathList.value) {
+      if (carPathList.value[index].id == line.value) {
+        sitesList = JSON.parse(carPathList.value[index].stationList)
+      }
+    }
+    var sites = []
+    for (var i in sitesList) {
+      sites.push({ id: i, label: sitesList[i].data.dictLabel })
+    }
+    console.log(sites)
     data.value = [{
       id: 1,
       label: "站点",
-      children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
     },];
-  });
-}
-
-const deleteDevice = (datac) => {
-  tableData.value = tableData.value.filter(i => i.type != datac.type);
-  var data = {
-    dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.dictValue,
-    dictLabel: currentdata.value.dictLabel,
-    dictType: "tbl_sites",
-    remark: JSON.stringify(tableData.value)
+    data.value[0].children = sites
+    console.log(data.value)
+    showTree.value = false;
+    setTimeout(() => {
+      showTree.value = true
+    }, 100);
+
   }
-  updateData(data).then(res => {
-    ElMessage.success("成功!");
-  })
-}
 
-const handleTabClick = () => {
+  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 } }),
+      },];
+    });
+  }
 
-}
+  const deleteDevice = (datac) => {
+    tableData.value = tableData.value.filter(i => i.type != datac.type);
+    var data = {
+      dictCode: currentdata.value.dictCode,
+      dictValue: currentdata.value.dictValue,
+      dictLabel: currentdata.value.dictLabel,
+      dictType: "tbl_sites",
+      remark: JSON.stringify(tableData.value)
+    }
+    updateData(data).then(res => {
+      ElMessage.success("成功!");
+    })
+  }
 
-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 handleTabClick = () => {
 
-const currentdata = ref(null)
+  }
 
-const isJSON = (str) => {
-  if (typeof str == 'string') {
-    try {
-      var obj = JSON.parse(str);
-      if (typeof obj == 'object' && obj) {
-        return true;
-      } else {
+  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 currentdata = ref(null)
+
+  const isJSON = (str) => {
+    if (typeof str == 'string') {
+      try {
+        var obj = JSON.parse(str);
+        if (typeof obj == 'object' && obj) {
+          return true;
+        } else {
+          return false;
+        }
+
+      } catch (e) {
         return false;
       }
-
-    } catch (e) {
-      return false;
     }
   }
-}
 
-const treeclick = (data: TreeNodeData, node: TreeNode) => {
+  const treeclick = (data: TreeNodeData, node: TreeNode) => {
 
-  currentdata.value = sites.value.filter(i => {
-    return i.dictLabel == data.label
-  })[0];
-  tableData.value = [];
-  if (currentdata.value) {
-    // if (isJSON(currentdata.value.remark)) {
-      tableData.value = JSON.parse((currentdata.value.remark==''?"[]":currentdata.value.remark)??"[]");
+    currentdata.value = sites.value.filter(i => {
+      return i.dictLabel == data.label
+    })[0];
+    tableData.value = [];
+    if (currentdata.value) {
+      // if (isJSON(currentdata.value.remark)) {
+      tableData.value = JSON.parse((currentdata.value.remark == '' ? "[]" : currentdata.value.remark) ?? "[]");
       var cameras = tableData.value.filter(i => i.type == 'camera');
       if (cameras.length > 0) {
         var cameracode = cameras[0].code;
@@ -357,104 +401,104 @@ const treeclick = (data: TreeNodeData, node: TreeNode) => {
         var cabinetcode = cameras[0].code;
         SycCabinet(cabinetcode);
       }
-    // }else{
-    //   ElMessage.warning("站点设备配置错误");
-    // }
+      // }else{
+      //   ElMessage.warning("站点设备配置错误");
+      // }
+    }
+
   }
 
-}
 
+  const addDevice = () => {
+    dialogVisible.value = false;
+    if (formdata.value.name == "") {
+      ElMessage.warning("设备名称未填写");
+      return;
+    }
+    if (formdata.value.type == "") {
+      ElMessage.warning("设备类型未填写");
+      return;
+    }
+    if (formdata.value.code == "") {
+      ElMessage.warning("设备序列号未填写");
+      return;
+    }
+    if (tableData.value.filter(i => i.type == formdata.value.type).length > 0) {
+      ElMessage.warning("存在相同类型的设备");
+      return;
+    }
+    tableData.value.push(formdata.value);
+    var data = {
+      dictCode: currentdata.value.dictCode,
+      dictValue: currentdata.value.dictValue,
+      dictLabel: currentdata.value.dictLabel,
+      dictType: "tbl_sites",
+      remark: JSON.stringify(tableData.value)
+    }
+    updateData(data).then(res => {
+      ElMessage.success("成功!");
+    })
 
-const addDevice = () => {
-  dialogVisible.value = false;
-  if (formdata.value.name == "") {
-    ElMessage.warning("设备名称未填写");
-    return;
-  }
-  if (formdata.value.type == "") {
-    ElMessage.warning("设备类型未填写");
-    return;
-  }
-  if (formdata.value.code == "") {
-    ElMessage.warning("设备序列号未填写");
-    return;
-  }
-  if (tableData.value.filter(i => i.type == formdata.value.type).length > 0) {
-    ElMessage.warning("存在相同类型的设备");
-    return;
-  }
-  tableData.value.push(formdata.value);
-  var data = {
-    dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.dictValue,
-    dictLabel: currentdata.value.dictLabel,
-    dictType: "tbl_sites",
-    remark: JSON.stringify(tableData.value)
-  }
-  updateData(data).then(res => {
-    ElMessage.success("成功!");
-  })
 
+  }
 
-}
-
-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
+  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
+      }
+      )
     }
-    )
   }
-}
-const openbox = (code) => {
-  setTimeout(() => {
-    ElMessage.success("指令已发送！");
-  }, 1000);
-}
-
-
-const data = computed(() => {
-
-  var index = 1;
-
-  return [{
-    id: 1,
-    label: "站点",
-    children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
-  },]
-});
-onMounted(() => {
-  if (treeRef.value) {
+  const openbox = (code) => {
     setTimeout(() => {
-      treeRef.value.expandNode(treeRef.value.getNode(1))
-    }, 100);
-    getSites();
-    initData();
-    // treeRef.value.expandNode(treeRef.value.getNode(1))
+      ElMessage.success("指令已发送！");
+    }, 1000);
   }
-});
+
+
+  const data = computed(() => {
+
+    var index = 1;
+
+    return [{
+      id: 1,
+      label: "站点",
+      children: sites.value.map(i => { return { id: ++index, label: i.dictLabel } }),
+    },]
+  });
+  onMounted(() => {
+    if (treeRef.value) {
+      setTimeout(() => {
+        treeRef.value.expandNode(treeRef.value.getNode(1))
+      }, 100);
+      getSites();
+      getCountry();
+      // treeRef.value.expandNode(treeRef.value.getNode(1))
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
-.card-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.boxunused {
-  background: #3333332d;
-}
-</style>
+  .card-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .boxunused {
+    background: #3333332d;
+  }
+</style>