新增元数据管理

.env.development

@@ -16,7 +16,7 @@ VITE_GLOB_PUBLIC_PATH = /
 # VITE_PROXY = [["/api","http://192.168.2.225/api"]]
 
 # 线上测试环境
-VITE_PROXY = [["/api","http://192.168.119.4:10073"],["/space-edit","http://192.168.119.192:20034"],["/sys-manage","http://192.168.2.10:20034"]]
+VITE_PROXY = [["/api","http://192.168.119.4:10073"],["/space-edit","http://192.168.119.192:20034"],["/sys-manage","http://192.168.119.192:20034"]]
 
 
 # 实时数据的ws地址

public/config.js

@@ -258,7 +258,7 @@ window.threeMapConfig = {
             uper: 'basic_map',
         },
         {
-            title: "库区水下地形数据",  //库区多波束
+            title: "库区水下地形",  //库区多波束
             key: "base_kq_dbs",
             children: [],
             disabled: false,

src/store/modules/panel.ts

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2023-10-11 09:24:11
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2024-08-27 15:42:47
+ * @LastEditTime: 2024-09-03 12:10:11
  * @FilePath: \xld_web\src\store\modules\panel.ts
  * @Description: 屏幕左右面板的位置
  */
@@ -26,6 +26,7 @@ interface PanelState {
   rightPanelWidth: string;
   bottomPanelHeight: string;
   bottomCenterHeight: string;
+  openSettingPanel:boolean;
 }
 export const usePanelStore = defineStore({
   id: 'panel',
@@ -42,6 +43,7 @@ export const usePanelStore = defineStore({
     bottomPanelHeight: '0',
     //中间面板高度
     bottomCenterHeight: '0',
+    openSettingPanel:false,
   }),
   getters: {
     /**
@@ -130,7 +132,10 @@ export const usePanelStore = defineStore({
         this.setPanelSize(item.name, item.size)
       })
     },
-
+    
+    setOpenSettingPanel(bool:boolean):void{
+      this.openSettingPanel = bool
+    }
   },
 });
 

src/views/SystemManage/component/Contents.vue

@@ -1,110 +0,0 @@
-<!--
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2023-06-25 16:25:45
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2024-08-28 10:01:18
- * @FilePath: \xld_web\src\views\SystemManage\component\Contents.vue
- * @Description: 目录
--->
-
-<template>
-  <div class="menu-contents">
-    <template v-for="item in menu" :key="item.id">
-      <a-row class="menu-row" @click="menuClick(item)" :class="{active:item.id === current}">
-        <a-col :span="2" class="menu-col"></a-col>
-        <a-col :span="7" class="menu-col img-col">
-          <div class="img" :style="{'background-image':`url(${item.id === current ? item.imgH : item.img})`}"></div>  
-        </a-col>
-        <a-col :span="15" class="menu-col">{{ item.name }}</a-col>
-      </a-row>
-    </template>
-  </div>
-</template>
-    
-    <script>
-import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue';
-// import updatelogH from '/@/assets/images/menus/update-log-h.png'
-// import updatelog from '/@/assets/images/menus/update-log.png'
-// import initViewH from '/@/assets/images/menus/init-view-h.png'
-// import initView from '/@/assets/images/menus/init-view.png'
-// import machineH from '/@/assets/images/menus/machine-h.png'
-// import machine from '/@/assets/images/menus/machine.png'
-// import spaceH from '/@/assets/images/menus/space-h.png'
-// import space from '/@/assets/images/menus/space.png'
-// import inspectionH from '/@/assets/images/menus/inspection-h.png'
-// import inspection from '/@/assets/images/menus/inspection.png'
-// import videoH from '/@/assets/images/menus/video-h.png'
-// import video from '/@/assets/images/menus/video.png'
-
-export default defineComponent({
-  name: 'MenuContents',
-  components: {},
-  setup(props,{emit}) {
-    const data = reactive({
-      current: 1,
-      menu: [
-        { id: 1, name: '系统更新日志',component:'SysLog',img:updatelog,imgH:updatelogH,panelWidth:'100%' },
-        { id: 2, name: '初始视角管理',component:'InitView',img:initView,imgH:initViewH,panelWidth:'auto' },
-        { id: 3, name: '机组标签管理',component:'MachineFlag',img:machine,imgH:machineH,panelWidth:'auto' },
-        { id: 4, name: '空间位置管理',component:'SpaceLocation',img:space,imgH:spaceH,panelWidth:'auto' },
-        { id: 5, name: '巡检参数管理',component:'InspectParam',img:inspection,imgH:inspectionH,panelWidth:'100%' },
-        { id: 6, name: '视频点位管理',component:'VideoPoint',img:video,imgH:videoH,panelWidth:'auto' },
-        { id: 7, name: '机组检修态管理',component:'MachineStatus',img:inspection,imgH:inspectionH,panelWidth:'100%' },
-        { id: 8, name: '巡检点位管理',component:'InspectPoint',img:inspection,imgH:inspectionH,panelWidth:'auto' },
-        { id: 9, name: '诊断报告管理',component:'DiagnReport',img:inspection,imgH:inspectionH,panelWidth:'100%' },
-        { id: 10, name: '异常规则管理',component:'WarnRules',img:inspection,imgH:inspectionH,panelWidth:'100%' },
-      ]
-    });
-    /**
-     * 菜单事件
-    */
-    const menuClick = (obj) => {
-      data.current = obj.id;
-      //通知父组件
-      emit('changeMenu',obj)
-    };
-    onMounted(() => {});
-    return {
-      ...toRefs(data),
-      menuClick,
-    };
-  },
-});
-</script>
-    
-    <style lang="less" scoped>
-.menu-contents {
-  height: 100%;
-  width: 100%;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-  //border: 1px solid rgba(115, 183, 209,0.5);
-  .menu-row {
-    height: 60px;
-    cursor: pointer;
-    .menu-col {
-      height: 100%;
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: rgb(115, 183, 209);
-      line-height: 60px;
-    }
-    .img-col {
-        padding: 15px;
-      .img {
-        height: 100%;
-        width: 100%;
-        background-size: 100% 100%;
-      }
-    }
-  }
-  .active{
-    //background: url('/@/assets/images/menus/current.png') no-repeat;
-    //background-size: 100% 100%;
-  }
-}
-</style>
-    

src/views/SystemManage/component/DiagnReport.vue

@@ -1,486 +0,0 @@
-<template>
-  <div class="diagn-report">
-    <div class="title-label">
-      <span class="label">运行诊断报告</span>
-      <div class="input-group"></div>
-    </div>
-    <div class="content">
-      <div class="list-panel">
-        <a-row class="item-row">
-          <a-col :span="8" class="item-col">开始时间：</a-col>
-          <a-col :span="14">
-            <a-date-picker
-              v-model:value="startDate"
-              format="YYYY-MM-DD"
-              :disabled-date="disabledDate"
-              style="width: 100%; height: 40px; line-height: 40px"
-              @change="stratDatachange"
-            />
-          </a-col>
-          <a-col :span="8" class="item-col">结束时间：</a-col>
-          <a-col :span="14">
-            <a-date-picker
-              v-model:value="endDate"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              :disabled-date="disabledDate"
-              style="width: 100%; height: 40px; line-height: 40px"
-              disabled
-            />
-          </a-col>
-          <a-col :span="8" class="item-col"></a-col>
-          <a-col :span="14" class="btn-col">
-            <span class="btn analysis-btn" @click="analysis">{{ analysisText }}</span>
-            <span class="btn updown-btn" @click="download">{{ loadupText }}</span>
-          </a-col>
-        </a-row>
-      </div>
-      <div class="file-view">
-        <template v-if="!current.url">
-          <a-empty :image="simpleImage" />
-        </template>
-        <template v-else>
-          <iframe
-            id="myIframe"
-            :src="current.url"
-            style="width: 100%; height: 100%"
-            frameborder="0"
-          ></iframe>
-          <!-- <div class="page-tool">
-            <div class="page-tool-item" @click="lastPage">上一页</div>
-            <div class="page-tool-item" @click="nextPage">下一页</div>
-            <div class="page-tool-item">{{ pageNum }}/{{ numPages }}</div>
-            <div class="page-tool-item" @click="pageZoomOut">放大</div>
-            <div class="page-tool-item" @click="pageZoomIn">缩小</div>
-          </div>
-          <vue-pdf-embed
-            ref="pdf"
-            :source="source"
-            :style="scale"
-            :page="pageNum"
-            class="vue-pdf-embed"
-          /> -->
-          <!-- textLayer -->
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import {
-  defineComponent,
-  reactive,
-  ref,
-  toRefs,
-  computed,
-  onMounted,
-  createVNode,
-} from "vue";
-import { Empty, message, Modal } from "ant-design-vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { useGlobSetting } from "/@/hooks/setting";
-import moment from "moment";
-// 引入插件
-import VuePdfEmbed, { useVuePdfEmbed } from "vue-pdf-embed";
-import * as pdfjsLib from "pdfjs-dist";
-// import { createLoadingTask } from 'vue3-pdfjs/esm';
-
-// import {
-//   addSysLogPdf,
-//   editSysLogPdf,
-//   delSysLogPdfByIds,
-//   getSysLogPdf,
-//   addSysFile,
-//   getSysFile,
-//   delSysFileByIds,
-//   downloadSysFileById,
-//   downloadDiagnReportFile,
-//   downloadPdfDiagnReportFile,
-// } from "/@/api/sys/systemManage";
-
-export default defineComponent({
-  name: "DiagnReport",
-  components: { VuePdfEmbed },
-  setup(props, { emit }) {
-    const analysisText = ref("分析");
-    const loadupText = ref("下载");
-    const data = reactive({
-      selectData: moment(new Date()).format("YYYY-MM"),
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
-      current: {
-        id: "",
-        url: "",
-      },
-      sysLogList: [],
-      formState: {
-        time: moment(new Date()).format("YYYY-MM-DD"),
-        fileList: [],
-      },
-      tempList: [], //时间查询时，备份的数据列表
-      startDate: null,
-      endDate: null,
-    });
-
-    //定义
-    const state = reactive({
-      source: "", // 预览pdf文件地址
-      pageNum: 0, // 当前页面
-      scale2: 1, // 缩放比例
-      numPages: 0, // 总页数
-    });
-    const scale = computed(() => `transform:scale(${state.scale2})`);
-    const globSetting = useGlobSetting();
-    pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.js";
-    onMounted(() => {});
-    /**
-     * 限制只能选择过去周日
-     */
-    const disabledDate = (current) => {
-      return current > moment().endOf("day") || moment(current).day() != 0;
-    };
-    /**
-     * 开始时间发生改变
-     */
-    const stratDatachange = (date) => {
-      data.startDate = moment(date).format("YYYY-MM-DD");
-      //如果选择开始时间小于当前时间获取下一个周六
-      if (moment().endOf("day") > date) {
-        let nextSaturday = moment(date).add(6, "days");
-        //如果获取的下一个周六大于当前日期则结束时间为当前日期，否则结束时间就是选择的下一个周六
-        if (nextSaturday > moment(new Date()))
-          data.endDate = moment(new Date()).format("YYYY-MM-DD");
-        else data.endDate = moment(nextSaturday).format("YYYY-MM-DD");
-      } else {
-        //如果开始时间大于或者等于当前日期，则结束时间就是当前日期
-        data.endDate = moment(date).format("YYYY-MMM-DD");
-      }
-    };
-
-    /**
-     * 下载文件
-     */
-    const downFile = () => {
-      loadupText.value = "下载中...";
-      downloadDiagnReportFile({ startDate: data.startDate, endDate: data.endDate })
-        .then((response) => {
-          if (response) {
-            // 获取后端返回的二进制数据（response）
-            const blob = new Blob([response], {
-              type: "application/msword;charset-UTF-8",
-            }); // 根据实际情况指定MIME类型
-            // let url = window.URL.createObjectURL(blob);
-            // data.current.url = window.URL.createObjectURL(blob);
-
-            // data.current.url = //'https://view.officeapps.live.com/op/embed.aspx?src=' +  //"https://view.xdocin.com/view?src=" +
-            //   "data:application/msword;base64," + //data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,
-            //   btoa(
-            //     new Uint8Array(response).reduce(
-            //       (data, byte) => data + String.fromCharCode(byte),
-            //       ""
-            //     )
-            //   );
-            let url = (window.URL || window.webkitURL).createObjectURL(blob);
-            let link = document.createElement("a");
-            link.style.display = "none";
-            link.href = url;
-            link.setAttribute(
-              "download",
-              `发供电设备运行周诊断报告(${data.startDate}~${data.endDate}).doc`
-            );
-            document.body.appendChild(link);
-            link.click();
-            loadupText.value = "下载";
-            document.body.removeChild(link);
-          }
-        })
-        .catch(() => {
-          message.warning("导出文件出错！");
-          loadupText.value = "下载";
-        });
-    };
-
-    function analysisFile() {
-      analysisText.value = "分析中...";
-      downloadPdfDiagnReportFile({
-        startDate: data.startDate,
-        endDate: data.endDate,
-      })
-        .then((response) => {
-          if (response) {
-            data.current.url =
-              "data:application/pdf;base64," +
-              btoa(
-                new Uint8Array(response).reduce(
-                  (data, byte) => data + String.fromCharCode(byte),
-                  ""
-                )
-              );
-            analysisText.value = "分析";
-            getPdfUrl(data.current.url);
-          }
-        })
-        .catch(() => {
-          message.warning("分析出错！");
-          analysisText.value = "分析";
-        });
-    }
-    function download() {
-      if (loadupText.value === "下载中...")
-        return message.warning("当前正在下载文件，请稍后再操作！");
-      if (data.startDate && data.endDate) downFile();
-      else {
-        message.warning("请先选择开始时间和结束时间！");
-      }
-    }
-    function analysis() {
-      if (analysisText.value === "分析中...")
-        return message.warning("当前正在分析操作，请稍后再操作！");
-      if (data.startDate && data.endDate) analysisFile();
-      else {
-        message.warning("请先选择开始时间和结束时间！");
-      }
-    }
-
-    function getPdfUrl(data) {
-      state.source = data;
-      const loadingTask = pdfjsLib.getDocument(data);
-      loadingTask.promise.then((pdf) => {
-        state.numPages = pdf.numPages;
-        state.pageNum = 1;
-      });
-    }
-
-    // 上一页
-    function lastPage() {
-      if (state.pageNum > 1) {
-        state.pageNum -= 1;
-      }
-    }
-    // 下一页
-    function nextPage() {
-      if (state.pageNum < state.numPages) {
-        state.pageNum += 1;
-      }
-    }
-    // 放大
-    function pageZoomOut() {
-      if (state.scale2 < 1) {
-        state.scale2 += 0.1;
-      }
-    }
-    // 缩小
-    function pageZoomIn() {
-      if (state.scale2 > 0) {
-        state.scale2 -= 0.1;
-      }
-    }
-    return {
-      ...toRefs(data),
-      ...toRefs(state),
-      scale,
-      loadupText,
-      analysisText,
-      labelCol: { span: 7 },
-      wrapperCol: { span: 17 },
-      headers: {
-        authorization: "authorization-text",
-      },
-      globSetting,
-      disabledDate,
-      stratDatachange,
-      downFile,
-      analysisFile,
-      download,
-      analysis,
-      getPdfUrl,
-      lastPage,
-      nextPage,
-      pageZoomOut,
-      pageZoomIn,
-    };
-  },
-});
-</script>
-
-<style lang="less" scoped>
-.diagn-report {
-  height: 100%;
-  width: 100%;
-  padding: 20px;
-  color: #feffff;
-  .title-label {
-    height: 40px;
-    border-bottom: 2px solid;
-    border-image-source: linear-gradient(
-      90deg,
-      rgba(14, 247, 255, 1) 0%,
-      rgba(14, 247, 255, 0) 100%
-    );
-    border-image-slice: 1;
-    font-size: 16px;
-    font-family: Source Han Sans CN;
-    font-weight: 400;
-    color: #ffffff;
-
-    .input-group {
-      float: right;
-      width: 360px;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .label {
-        display: flex;
-        background-size: 100% 100%;
-        width: 110px;
-        height: 36px;
-        background: rgba(3, 55, 78, 0.6);
-        border-radius: 4px;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-        cursor: pointer;
-
-        &:hover {
-          background: rgba(115, 183, 209, 0.5);
-        }
-      }
-      .input-date {
-        display: flex;
-        background-size: 100% 100%;
-        width: 140px;
-        height: 23px;
-      }
-      .input-falg {
-        display: flex;
-        background-size: 100% 100%;
-        width: 10px;
-        height: 23px;
-      }
-    }
-  }
-
-  .content {
-    display: flex;
-    height: calc(100% - 40px);
-    padding: 10px 0;
-
-    .list-panel {
-      width: 260px;
-      height: 100%;
-      margin-right: 10px;
-      padding-top: 12px;
-      color: #feffff;
-      background: rgba(3, 49, 79, 0.1);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-      .item-row {
-        height: 50px;
-        line-height: 50px;
-        // border-bottom: 2px solid rgba(13, 99, 169, 0.6);
-        .item-col {
-          text-align: end;
-          font-size: 14px;
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          color: #73b7d1;
-        }
-        .btn-col {
-          height: 100%;
-          padding: 10px 0;
-          .btn {
-            height: 100%;
-            width: 46%;
-            background: rgba(14, 247, 255, 0.7);
-            color: #fff;
-            text-align: center;
-            line-height: 31px;
-            font-size: 17px;
-            cursor: pointer;
-            border-radius: 3px;
-            &:hover {
-              background: rgba(14, 247, 255, 0.4);
-            }
-          }
-          .analysis-btn {
-            float: left;
-          }
-          .updown-btn {
-            float: right;
-          }
-        }
-      }
-
-      .log-item-row {
-        height: 50px;
-        width: 100%;
-        padding: 0 10px 0 20px;
-        line-height: 50px;
-        font-size: 14px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #ffffff;
-
-        &:hover {
-          background: linear-gradient(
-            90deg,
-            rgba(22, 192, 255, 0.2) 0%,
-            rgba(22, 192, 255, 0) 100%
-          );
-        }
-      }
-
-      .activeRow {
-        background: linear-gradient(
-          90deg,
-          rgba(22, 192, 255, 0.2) 0%,
-          rgba(22, 192, 255, 0) 100%
-        );
-      }
-    }
-
-    .file-view {
-      width: calc(100% - 270px);
-      height: 100%;
-      // padding: 10px 4px;
-      // display: flex;
-      // justify-content: center;
-      // align-items: center;
-      background: rgba(3, 49, 79, 0.1);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-      .page-tool {
-        display: flex;
-        position: absolute;
-        left: 62%;
-        bottom: 44px;
-        z-index: 100;
-        transform: translateX(-50%);
-        align-items: center;
-        background: rgb(66 66 66);
-        color: white;
-        border-radius: 19px;
-        cursor: pointer;
-        justify-content: center;
-        font-size: 15px;
-        .page-tool-item {
-          padding: 4px 10px;
-          cursor: pointer;
-        }
-      }
-      .vue-pdf-embed {
-        width: 100%;
-        height: 100%;
-        overflow-x: visible;
-        overflow-y: auto;
-      }
-    }
-  }
-}
-
-::v-deep.ant-calendar-picker {
-  input {
-    border: 1px solid #325d71 !important;
-  }
-}
-</style>

src/views/SystemManage/component/InitView.vue

@@ -1,215 +0,0 @@
-<!--
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2023-06-26 10:42:50
- * @LastEditors: Xiax
- * @LastEditTime: 2023-07-10 11:00:53
- * @FilePath: \xld_web\src\views\SystemManage\component\InitView.vue
- * @Description: 初始视角管理
--->
-
-<template>
-  <div class="init-view">
-    <div class="top-btn-group">
-      <template v-for="yard in yards" :key="yard.id">
-        <a-row class="item-row" :class="{ active: current.id === yard.id }" @click="yardClick(yard)">{{
-          yard.vwnm
-        }}</a-row>
-      </template>
-    </div>
-    <div class="bottom-btn-group">
-      <div class="btn btn1" @click="getCamera">拾取视角</div>
-      <div class="btn" @click="saveCamera">保存</div>
-    </div>
-  </div>
-</template>
-      
-<script>
-import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue';
-import eventBus from '/@/utils/eventBus';
-import { message, Modal } from 'ant-design-vue';
-// import { addViewConfig, editViewConfig, getViewConfigById } from '/@/api/sys/systemManage';
-
-export default defineComponent({
-  name: 'InitView',
-  components: {},
-  setup(props, { emit }) {
-    const data = reactive({
-      current: {},
-      yards: [
-        { id: 1, vmcd: 'xld', vwnm: '小浪底', viewExtent: "" },
-        { id: 2, vmcd: 'xxy', vwnm: '西霞院', viewExtent: "" },
-      ],
-      cameraInfo: {}
-    });
-    onMounted(() => {
-      //此处查询小浪底的视角并设置
-      searchView(1)
-      data.current = data.yards[0]
-    })
-    //列表点击事件
-    const yardClick = (obj) => {
-      //此处查询当前点击的视角
-      searchView(obj.id)
-      data.current = obj
-    };
-    /**
-     * 获取镜头信息
-     */
-    const getCamera = () => {
-      // eventBus.emit('getCameraEventBus')
-      // eventBus.emit('getCameraRoamEventBus')
-      // 拾取当前视角配置给选中的项
-      let jsondata = {
-        // "camera_id": "",  //场景镜头id(由AddCamera添加); 置空时获取镜头当前信息
-        "coord_type": 0,          //坐标类型(0:经纬度坐标, 1:cad坐标)
-        "cad_mapkey": ""          //CAD基准点Key值, 项目中约定
-      }
-      window.sysCloudRender.SuperAPI("GetCameraInfo", jsondata, (e) => {
-        console.log(e);
-        const jsonObject =
-          typeof e === 'object' ? JSON.parse(JSON.stringify(e)) : JSON.parse(e);
-        jsonObject.args.center_coord && message.success('视角点位已获取')
-        data.cameraInfo = {
-          center_coord: jsonObject.args.center_coord,        //路径坐标点 lng,lat
-          coord_z: jsonObject.args.coord_z,                        //高度(单位:米, cad坐标无效)
-          coord_type: 0,
-          cad_mapkey: "",
-          arm_distance: jsonObject.args.arm_distance,                   //镜头与坐标点距离(单位:米)
-          pitch: jsonObject.args.pitch,                           //镜头俯仰角(0~89)
-          yaw: jsonObject.args.yaw,                             //镜头偏航角(0正北, 0~359)
-          fly: true
-        }
-        data.yards[data.current.id - 1].viewExtent = JSON.stringify(data.cameraInfo)
-      })
-      // message.success('位置拾取成功')
-    }
-    /**
-     * 保存镜头信息
-     */
-    const saveCamera = () => {
-      let idx = data.current.id - 1
-      //保存时判断状态，0新增1修改
-      if(data.yards[idx].viewExtent===''){
-        message.error('请先拾取视角！')
-        return;
-      }
-      let params = {
-        id: data.current.id,
-        viewExtent: data.yards[idx].viewExtent,
-        vmcd: data.yards[idx].vmcd,
-        vwnm: data.yards[idx].vwnm
-      }
-      editViewConfig(params).then(res => {
-        if (res.result) {
-          message.success('保存成功！')
-          searchView(data.current.id)
-        } else {
-          message.error('保存失败，请检查网络等问题!')
-        }
-      })
-      // eventBus.emit('saveCameraEventBus', data.current.code)
-      //eventBus.emit('startCameraRoamEventBus')
-    }
-    //通过id查询视角信息，并设置视角
-    const searchView = (id) => {
-      getViewConfigById(id).then(res => {
-        if (res.result.hasOwnProperty('viewExtent') && res.result.viewExtent) {
-          let camera = JSON.parse(res.result.viewExtent)
-          window.sysCloudRender.SuperAPI("SetCameraInfo", camera, (status) => {
-            console.log(status); //成功、失败回调
-            // message.success(`设置${res.result.vwnm}视角成功`)
-          })
-        } else {
-          message.info('该点位暂未设置视角！')
-        }
-      })
-    }
-    onMounted(() => { });
-    return {
-      ...toRefs(data),
-      yardClick,
-      getCamera,
-      saveCamera
-    };
-  },
-});
-</script>
-      
-<style lang="less" scoped>
-.init-view {
-  position: relative;
-  height: 100%;
-  width: 260px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-  .top-btn-group {
-    height: auto;
-    width: 100%;
-    padding: 20px;
-
-    .item-row {
-      display: flex;
-      justify-content: center;
-      height: 60px;
-      line-height: 60px;
-      width: 100%;
-      font-size: 16px;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: #73b7d1;
-      margin-bottom: 20px;
-      background: rgba(3, 49, 79, 0.3);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-      cursor: pointer;
-      user-select: none;
-
-      &:hover {
-        color: rgb(36, 255, 252);
-      }
-    }
-
-    .active {
-      color: rgb(36, 255, 252);
-      background: rgba(3, 49, 79, 0.3);
-      box-shadow: inset 0px 0px 3px 3px rgba(36, 255, 252, 0.6);
-    }
-  }
-
-  .bottom-btn-group {
-    position: absolute;
-    display: flex;
-    bottom: 10px;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 100%;
-
-    .btn {
-      height: 40px;
-      line-height: 40px;
-      width: 100px;
-      text-align: center;
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 500;
-      color: rgb(4, 236, 239);
-      background: rgba(3, 49, 79, 0.3);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-      cursor: pointer;
-
-      &:hover {
-        color: rgba(4, 236, 239, 0.8);
-        box-shadow: inset 0px 0px 3px 3px rgba(36, 255, 252, 0.8);
-      }
-    }
-
-    .btn1 {
-      margin-right: 20px;
-    }
-  }
-}
-</style>
-      

src/views/SystemManage/component/InspectPoint.vue

@@ -1,505 +0,0 @@
-<!--
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2023-06-26 10:43:42
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2024-08-28 09:55:41
- * @FilePath: \xld_web\src\views\SystemManage\component\SpaceLocation.vue
- * @Description: 空间位置管理
--->
-
-<template>
-  <div class="space-location">
-    <div class="top-panel">
-      <a-row class="query-content">
-        <a-col class="query-col" :span="14">
-          <div class="content">
-            <span class="label">巡检班次</span>
-            <span class="value">
-              <a-select class="self-select" v-model:value="queryParam.inspectType" style="width: 100%; height: 40px"
-                @change="onSearch" size="large">
-                <a-select-option value="1">白班</a-select-option>
-                <a-select-option value="2">夜班</a-select-option>
-                <a-select-option value="3">全天</a-select-option>
-              </a-select>
-            </span>
-          </div>
-        </a-col>
-        <a-col class="query-col" :span="10">
-          <div class="content">
-            <span class="label">状态</span>
-            <span class="value">
-              <a-select class="self-select" v-model:value="queryParam.status" style="width: 100%; height: 40px"
-                @change="onSearch" size="large">
-                <a-select-option value="1">占用</a-select-option>
-                <a-select-option value="2">停用</a-select-option>
-              </a-select>
-            </span>
-          </div>
-        </a-col>
-
-        <a-col class="query-col" :span="19">
-          <div class="content">
-            <a-input v-model:value="queryParam.keyword" placeholder="请输入关键字查询" style="width: 100%" />
-          </div>
-        </a-col>
-        <a-col class="query-col" :span="5">
-          <div class="content">
-            <div class="btn" @click="queryClick">
-              <div class="img"></div>
-            </div>
-          </div>
-        </a-col>
-      </a-row>
-      <div class="tree-panel">
-        <tf-tree :treeData="treeData" :replaceFields="replaceFields" @treeOptClick="treeOptClick"
-          :searchValue="searchValue" @treeNodeSelect="treeNodeSelect" />
-      </div>
-    </div>
-
-    <div class="bottom-panel" v-if="bottomPanelHeight === '500px'">
-      <InspectPointForm :title="formTitle" :selectedNodeData="selectedNodeData" @closePanel="closePanel"
-        @onSubmit="onSubmit" />
-    </div>
-
-    <a-modal v-model:visible="showDialog" :title="null" :footer="null" wrapClassName="wrap-power" :centered="true"
-      :width="400" :closable="true" bodyStyle="padding: 0 !important;">
-      <div style="height: 250px; width: 100%" class="dialogclass">
-        <div class="title">位置移动</div>
-        <div class="dialog-content">
-          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-form-item ref="sort" label="输入序号" name="sort" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input v-model:value="formState.sort" />
-            </a-form-item>
-          </a-form>
-          <div class="btn-group">
-            <span class="btn" @click="onEditCancel">取消</span>
-            <span class="btn" @click="onEditSubmit">确定</span>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-        
-<script>
-import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode, onBeforeUnmount } from 'vue';
-import TfTree from './InspectPointTree.vue'
-import InspectPointForm from './form/InspectPointForm.vue';
-// import { delUnitGeoByIds, searchUnitGeo } from '/@/api/sys/systemManage';
-// import { getXjGeo, delXjGeoByIds, editXjGeo } from '/@/api/sys/systemManage';
-import { message, Modal } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-
-export default defineComponent({
-  name: 'SpaceLocation',
-  components: { TfTree, InspectPointForm },
-  setup(props, { emit }) {
-    const formRef = ref()
-    const data = reactive({
-      topPanelHeight: '100%',
-      bottomPanelHeight: '0px',
-      formTitle: '新增点位',
-      queryParam: {
-        inspectType: '1',
-        status: '1',
-        keyword: '',
-      },
-      replaceFields: {
-        children: 'children',
-        title: 'unnm',
-        key: 'id'
-      },//树结构替换的字段
-      treeData: [],//获取的节点树数据
-      selectedNodeData: {},//选中的节点
-      searchValue: '',
-      showDialog: false,
-      formState: {
-        id: "",
-        sort: 0
-      }
-    });
-
-    const rules = {
-      sort: [{ required: true, message: '请输入序号', trigger: 'blur' }],
-    };
-
-    onMounted(() => {
-      getTreeData()
-    })
-    /**
-     * 获取树结构
-     */
-    const getTreeData = () => {
-      getXjGeo().then(res => {
-        if (res.result.length) {
-          data.treeData = toTree(res.result)
-        } else {
-          message.error('获取巡检点位失败！')
-        }
-      })
-    }
-    /**
-     * 生成树结构
-     */
-    const toTree = (data) => {
-      let result = [];
-      let obj = {};
-      if (data.length === 1) {
-        result.push(data[0])
-        return result;
-      }
-      data.forEach(item => {
-        obj[item.id] = Object.assign(item, obj[item.id] || {});
-        if (item.supId > 0) {
-          let parent = obj[item.supId] || {};
-          parent.children = parent.children || [];
-          parent.children.push(item);
-          obj[item.supId] = parent;
-        } else {
-          result.push(obj[item.id])
-        }
-      })
-      return result;
-    }
-    /**
-     * 当编辑面板大小发生改变时
-    */
-    watch(
-      () => data.bottomPanelHeight,
-      (val) => {
-        data.topPanelHeight = `calc(100% - ${val})`;
-      }
-    );
-    /**
-     * 查询事件
-    */
-    const queryClick = () => {
-      console.log('查询')
-      data.searchValue = data.queryParam.keyword
-    };
-    const onSearch = (value) => {
-      let params = {
-        insShift: `${data.queryParam.inspectType}`,
-        state: `${data.queryParam.status}`,
-        current: 1,
-        size: 10000,
-      }
-      searchUnitGeo(params).then(res => {
-        if (res.code === 1 && res.result && res.result.records) {
-          // data.searchValue = res.result.records[0].unnm
-          data.treeData = toTree(res.result.records)
-        } else {
-          message.error('机组数据查询失败')
-          getTreeData()
-        }
-      })
-    }
-    /**
-     * 操作事件
-    */
-    const treeOptClick = (obj, type) => {
-      console.log('操作类型和数据', obj, type);
-      data.selectedNodeData = obj.dataRef
-      //新增和修改可打开编辑面板
-      if (['update', 'add'].includes(type)) {
-        data.bottomPanelHeight = '500px';
-        if (type === 'update') data.formTitle = '修改点位'
-        else data.formTitle = '新增点位'
-      } else if (type === 'delete') {
-        //根据ids删除点位
-        Modal.confirm({
-          title: '确认删除该点位?',
-          icon: createVNode(ExclamationCircleOutlined),
-          content: '点位删除后不可恢复，请确认操作无误！',
-          okText: '确定',
-          okType: 'danger',
-          cancelText: '取消',
-          onOk() {
-            delXjGeoByIds({ ids: obj.dataRef.id }).then(res => {
-              if (res.result) {
-                message.success('删除成功')
-                getTreeData()
-              } else {
-                message.error('删除失败，请检查网络等问题')
-              }
-            })
-          },
-          onCancel() {
-            message.info('取消删除！')
-          },
-        });
-      } else {
-        data.showDialog = true
-        data.formState.id = obj.dataRef.id
-        data.formState.sort = obj.dataRef.sort
-      }
-    };
-    /**
-     * 点击树节点触发
-     */
-    const treeNodeSelect = (selectedNode) => {
-      delAllPoi()
-      if (!selectedNode.loc) {
-        message.info('该点位暂无位置')
-      } else {
-        try {
-          let poiPos = JSON.parse(selectedNode.loc)
-          // console.log(poiPos);
-          let poiInfo = {
-            "id": selectedNode.id,
-            "label": selectedNode.unnm,                   //POI title文本
-            "coord_type": 0,                        //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                       //CAD基准点Key值, 项目中约定
-            "adaptive": false,                      //true:自适应大小;false:默认
-            "coord": poiPos.coord,         //POI点的坐标 lng,lat
-            "coord_z": poiPos.coord_z,                         //高度(单位:米)
-            "coord_z_type": 2,                      //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效)
-            "always_show_label": true,              //是否永远显示title, true:显示title(默认), false:不显示title
-            "show_label_range": "0,2000",           //POI点显示label的范围(单位:米, 范围最小、最大距离; 在此范围内显示, 超出范围隐藏; 注意:always_show_label属性优先于此属性)
-            "umg_type": "default",                  //此POI所使用的UI模板类型(default: 带线的默认POI UI样式, default_noline:不带线的POI UI样式, 项目中约定)
-            "sort_order": true,                     //是否自动遮挡排序
-            "animation_type": "bounce",             //动画类型(bounce:弹出式; stretch:伸缩式; wipe:展开式)
-            "duration_time": 0.5                    //规定完成动画所花费的时间(单位:秒)
-          }
-          window.sysCloudRender.SuperAPI("AddPOI", poiInfo, (status) => {
-            console.log('打点成功');
-          })
-          let jsondata = {
-            "coord_type": 0,                                 //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                                //CAD基准点Key值, 项目中约定
-            "coord_z": poiPos.r_coord_z,                               //海拔高度(单位:米)
-            "center_coord": poiPos.r_coord,           //中心点的坐标 lng,lat
-            "arm_distance": poiPos.arm_distance,                            //镜头距中心点距离(单位:米)
-            "pitch": poiPos.pitch,                                     //镜头俯仰角(5~89)
-            "yaw": poiPos.yaw,                                        //镜头偏航角(0正北, 0~359)
-            "fly": true                                      //true: 飞行动画(有一个短暂飞行动画,并按照arm_distance,pitch,yaw设置镜头);
-          }
-          window.sysCloudRender.SuperAPI("SetCameraInfo", jsondata, (status) => {
-            console.log(status); //成功、失败回调
-          })
-        } catch {
-          message.error('点位信息不正确，请重新拾取')
-        }
-      }
-    }
-    const delAllPoi = () => {
-      let jsondata = {
-        "covering_type": "poi"   //覆盖物类型, 详见下表
-      }
-      window.sysCloudRender.SuperAPI("RemoveAllCovering", jsondata, (status) => {
-        console.log(status); //成功、失败回调
-      })
-    }
-    /**
-     * 关闭面板
-    */
-    const closePanel = () => {
-      data.bottomPanelHeight = '0px';
-    };
-    /**
-     * 新增点位确认事件
-    */
-    const onSubmit = (form) => {
-      getTreeData()
-      closePanel()
-    }
-
-    const onEditCancel = () => {
-      data.showDialog = false
-      data.formState = {
-        id: "",
-        sort: 0
-      }
-    }
-
-    const onEditSubmit = () => {
-      formRef.value
-        .validate()
-        .then(() => {
-          data.showDialog = false
-          data.formState.sort = parseInt(data.formState.sort)
-          editXjGeo(data.formState).then(res => {
-            if (res.result) {
-              message.success('修改点位成功')
-              getTreeData()
-            } else {
-              message.success('修改点位失败')
-            }
-            data.formState = {
-              id: "",
-              sort: 0
-            }
-          })
-        })
-    }
-
-    onBeforeUnmount(() => {
-      delAllPoi()
-    })
-
-    return {
-      formRef,
-      rules,
-      ...toRefs(data),
-      labelCol: { span: 5 },
-      wrapperCol: { span: 17 },
-      onSearch,
-      queryClick,
-      treeOptClick,
-      treeNodeSelect,
-      closePanel,
-      onSubmit,
-      onEditCancel,
-      onEditSubmit
-    };
-  },
-});
-</script>
-        
-<style lang="less" scoped>
-.space-location {
-  position: relative;
-  height: 100%;
-  width: 400px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-  .top-panel {
-    width: 100%;
-    height: v-bind(topPanelHeight);
-
-    .query-content {
-      width: 100%;
-      height: 152px;
-      padding: 20px 6px;
-
-      .query-col {
-        height: 40px;
-        width: 100%;
-        padding: 0 4px;
-        margin-bottom: 16px;
-
-        .content {
-          display: flex;
-          height: 100%;
-          width: 100%;
-          background: rgba(3, 49, 79, 0.3);
-          box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-          .label {
-            display: flex;
-            justify-content: center;
-            height: 40px;
-            line-height: 40px;
-            width: 70px;
-            box-shadow: inset 0px 0px 3px 0px rgba(10, 99, 183, 0.5);
-          }
-
-          .value {
-            display: flex;
-            height: 100%;
-            width: calc(100% - 70px);
-
-            ::v-deep.ant-select-selector {
-              height: 100% !important;
-            }
-          }
-
-          .btn {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-
-            &:hover {
-              cursor: pointer;
-              box-shadow: inset 0px 0px 3px 3px rgba(40, 185, 243, 0.5);
-            }
-
-            .img {
-              height: 31px;
-              width: 31px;
-              //background: url('/@/assets/images/button/query.png') no-repeat;
-              //background-size: 100% 100%;
-            }
-          }
-        }
-      }
-    }
-
-    .tree-panel {
-      height: calc(100% - 152px);
-    }
-  }
-
-  .bottom-panel {
-    width: 100%;
-    height: v-bind(bottomPanelHeight);
-  }
-}
-
-.dialogclass {
-  // background: url('/@/assets/images/dialog/small.png') no-repeat;
-  // background-size: 100% 100%;
-
-  .title {
-    margin-bottom: 20px;
-    height: 49px;
-    width: 80%;
-    line-height: 49px;
-    padding-left: 33px;
-    font-size:18px;
-  }
-
-  .dialog-content {
-    height: calc(100% - 60px);
-    width: 100%;
-    padding: 10px 40px;
-
-    //display: flex;
-    //justify-content: center;
-    //align-items: center;
-    .btn-group {
-      position: absolute;
-      display: flex;
-      height: 40px;
-      width: calc(100% - 80px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      bottom: 36px;
-
-      .btn {
-        height: 40px;
-        width: 80px;
-        text-align: center;
-        line-height: 40px;
-        margin: 0 20px;
-        color: #feffff;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(22, 192, 255, 0.5);
-        cursor: pointer;
-        user-select: none;
-
-        &:hover {
-          color: #04ecef;
-        }
-      }
-    }
-  }
-}
-
-::v-deep .self-select {
-  .ant-select-selector {
-    border: 0px !important;
-
-    .ant-select-arrow {
-      color: aqua;
-    }
-  }
-}
-</style>
-        

src/views/SystemManage/component/MachineFlag.vue

@@ -1,436 +0,0 @@
-<!--
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2023-06-26 10:43:18
- * @LastEditors: Xiax
- * @LastEditTime: 2023-07-07 17:34:42
- * @FilePath: \xld_web\src\views\SystemManage\component\MachineFlag.vue
- * @Description: 机组标签
--->
-
-<template>
-  <div class="machine-flag">
-    <div class="tree-panel">
-      <a-directory-tree :replaceFields="replaceFields" :treeData="treeData" :showIcon="false" :defaultExpandAll="true"
-        @select="nodeSelect" class="tree-content">
-        <template #switcherIcon>
-          <div class="self-switcher-icon"></div>
-        </template>
-        <template #title="item">
-          <!-- 标签 -->
-          <span class="self-tree-label">{{ item[replaceFields.title] }}</span>
-          <!-- 存在位置信息 -->
-          <span class="self-tree-location" v-if="Object.hasOwnProperty.call(item, 'loc') && item.loc"></span>
-        </template>
-      </a-directory-tree>
-    </div>
-    <div class="bottom-btn-group">
-      <div class="btn" @click="getCameraInfo">拾取视角</div>
-      <div class="btn" @click="getPosition">拾取点位</div>
-      <div class="btn" @click="savePosition">保存</div>
-    </div>
-  </div>
-</template>
-      
-<script>
-import { defineComponent, reactive, toRefs, computed, onMounted, onBeforeUnmount, watch } from 'vue';
-import eventBus from '/@/utils/eventBus';
-import { message, notification } from 'ant-design-vue';
-// import { getUnitLabel, editUnitLabel } from '/@/api/sys/systemManage';
-
-export default defineComponent({
-  name: 'MachineFlag',
-  components: {},
-  setup(props, { emit }) {
-    // const selectedNode= reactive({})
-    const data = reactive({
-      current: 1,
-      treeData: [],
-      replaceFields: {
-        children: 'children',
-        title: 'unnm',
-        key: 'uncd'
-      },
-      expandedKeys: ['0-0-0', '0-0-1'],
-      autoExpandParent: true,
-      checkedKeys: ['0-0-0'],
-      selectedKeys: [],
-      selectedNode: {},
-      posInfo: {
-        coord_easetype: "linear",
-        attitude_easetype: "Linear",
-        time: 4,
-        speed_easetype: "linear"
-      },//拾取的坐标点位信息
-    });
-    onMounted(() => {
-      delAllPoi()
-      getAllData()
-    })
-    //获取机组
-    const getAllData = () => {
-      getUnitLabel().then(res => {
-        if (res.result.length) {
-          data.treeData = toTree(res.result)
-        } else {
-          message.error('机组数据查询失败')
-        }
-      })
-    }
-    /**
-     * 生成树结构
-     */
-    const toTree = (data) => {
-      let result = [];
-      let obj = {};
-      data.forEach(item => {
-        obj[item.uncd] = Object.assign(item, obj[item.uncd] || {});
-        if (item.supcd && item.supcd != '-1') {
-          let parent = obj[item.supcd] || {};
-          parent.children = parent.children || [];
-          parent.children.push(item);
-          obj[item.supcd] = parent;
-        } else {
-          result.push(obj[item.uncd])
-        }
-      })
-      return result;
-    }
-    const delAllPoi = () => {
-      let jsondata = {
-        "covering_type": "poi"   //覆盖物类型, 详见下表
-      }
-      window.sysCloudRender.SuperAPI("RemoveAllCovering", jsondata, (status) => {
-        console.log(status); //成功、失败回调
-      })
-    }
-    /**
-     * 点击树节点触发
-     */
-    const nodeSelect = (selectkey, { selectedNodes, node }) => {
-      delAllPoi()
-      window.sysCloudRender.SuperAPI("EndGetCoord")
-      data.selectedNode = node.dataRef
-      data.posInfo = {
-        coord_easetype: "linear",
-        attitude_easetype: "Linear",
-        time: 4,
-        speed_easetype: "linear"
-      }
-      //如果有点位则加载标签
-      if (!data.selectedNode.loc) {
-        message.info('该点位暂无位置')
-      } else {
-        try {
-          let poiPos = JSON.parse(data.selectedNode.loc)
-          data.posInfo = poiPos
-          let poiInfo = {
-            "id": data.selectedNode.id,
-            "label": data.selectedNode.unnm,                   //POI title文本
-            "coord_type": 0,                        //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                       //CAD基准点Key值, 项目中约定
-            "adaptive": false,                      //true:自适应大小;false:默认
-            "coord": poiPos.coord,         //POI点的坐标 lng,lat
-            "coord_z": poiPos.coord_z,                         //高度(单位:米)
-            "coord_z_type": 2,                      //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效)
-            "always_show_label": true,              //是否永远显示title, true:显示title(默认), false:不显示title
-            "show_label_range": "0,2000",           //POI点显示label的范围(单位:米, 范围最小、最大距离; 在此范围内显示, 超出范围隐藏; 注意:always_show_label属性优先于此属性)
-            "umg_type": "default",                  //此POI所使用的UI模板类型(default: 带线的默认POI UI样式, default_noline:不带线的POI UI样式, 项目中约定)
-            "sort_order": true,                     //是否自动遮挡排序
-            "animation_type": "bounce",             //动画类型(bounce:弹出式; stretch:伸缩式; wipe:展开式)
-            "duration_time": 0.5                    //规定完成动画所花费的时间(单位:秒)
-          }
-          window.sysCloudRender.SuperAPI("AddPOI", poiInfo, (status) => {
-            console.log('打点成功');
-          })
-          let jsondata = {
-            "coord_type": 0,                                 //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                                //CAD基准点Key值, 项目中约定
-            "coord_z": poiPos.r_coord_z,                               //海拔高度(单位:米)
-            "center_coord": poiPos.r_coord,           //中心点的坐标 lng,lat
-            "arm_distance": poiPos.arm_distance,                            //镜头距中心点距离(单位:米)
-            "pitch": poiPos.pitch,                                     //镜头俯仰角(5~89)
-            "yaw": poiPos.yaw,                                        //镜头偏航角(0正北, 0~359)
-            "fly": true                                      //true: 飞行动画(有一个短暂飞行动画,并按照arm_distance,pitch,yaw设置镜头);
-          }
-          window.sysCloudRender.SuperAPI("SetCameraInfo", jsondata, (status) => {
-            console.log(status); //成功、失败回调
-          })
-        } catch {
-          message.error('点位信息不正确，请重新拾取')
-        }
-      }
-    };
-
-    const rotateWordTree = (e) => {
-      let translateYFront = e.target.style.transform;
-      if (translateYFront == 'rotate(0deg)' && !translateYFront) {
-        e.target.style.transform = 'rotate(90deg)';
-      } else {
-        e.target.style.transform = 'rotate(0deg)';
-      }
-    };
-    /**
-     * 拾取视角
-     */
-    const getCameraInfo = () => {
-      window.sysCloudRender.SuperAPI("EndGetCoord")
-      delAllPoi()
-      if (data.selectedNode.id) {
-        //获取视角信息
-        let cameraJsonData = {
-          "coord_type": 0,          //坐标类型(0:经纬度坐标, 1:cad坐标)
-          "cad_mapkey": ""          //CAD基准点Key值, 项目中约定
-        }
-        window.sysCloudRender.SuperAPI("GetCameraInfo", cameraJsonData, (e) => {
-          const cameraObject =
-            typeof e === 'object' ? JSON.parse(JSON.stringify(e)) : JSON.parse(e);
-          data.posInfo.r_coord = cameraObject.args.center_coord;
-          data.posInfo.r_coord_z = cameraObject.args.coord_z;
-          data.posInfo.arm_distance = cameraObject.args.arm_distance;
-          data.posInfo.yaw = cameraObject.args.yaw;
-          data.posInfo.pitch = cameraObject.args.pitch;
-          message.success('拾取视角成功')
-          console.log(data.posInfo);
-        })
-      }
-      else {
-        message.error('请先选择机组节点')
-      }
-    }
-    /**
-     * 拾取点位
-     */
-     const getPosition = () => {
-      window.sysCloudRender.SuperAPI("EndGetCoord")
-      delAllPoi()
-      if (data.selectedNode.id) {
-        // 弹出取点说明
-        notification['info']({
-          message: '取点提示',
-          description: '单击拾取点位，拾取成功后自动结束，可使用右键或滚轮等方式移动场景选取合适的坐标点',
-        });
-        // 此处开始拾取坐标
-        //初始化取点工具
-        let jsondata = {
-          coord_type: 0, //坐标类型(0:经纬度坐标, 1:cad坐标)
-          cad_mapkey: "", //CAD基准点Key值, 项目中约定
-          coord_z_type: 2, //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效)
-          coordinate_show: false, //true:显示; false:隐藏 (显隐坐标信息,默认隐藏)
-          icon_show: true, //true:显示取点标记; false:隐藏取点标记
-        };
-        //这注册时间时候所有的都会存储起来一起输出，所以每一次取最后一个
-        window.sysCloudRender.SuperAPI('StartGetCoord', jsondata, (resData) => {
-          const jsonObject =
-            typeof resData === 'object' ? JSON.parse(JSON.stringify(resData)) : JSON.parse(resData);
-          if (jsonObject.success && jsonObject.coord_result.length > 0) {
-            //获取点成功
-            const { coord, coord_z } = jsonObject.coord_result[jsonObject.coord_result.length - 1];
-            data.posInfo.coord = coord;
-            data.posInfo.coord_z = coord_z;
-            //加标签
-            let poiInfo = {
-              "id": data.selectedNode.id,
-              "label": data.selectedNode.unnm,                   //POI title文本
-              "coord_type": 0,                        //坐标类型(0:经纬度坐标, 1:cad坐标)
-              "cad_mapkey": "",                       //CAD基准点Key值, 项目中约定
-              "adaptive": false,                      //true:自适应大小;false:默认
-              "coord": coord,         //POI点的坐标 lng,lat
-              "coord_z": coord_z,                         //高度(单位:米)
-              "coord_z_type": 2,                      //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效)
-              "always_show_label": true,              //是否永远显示title, true:显示title(默认), false:不显示title
-              "show_label_range": "0,2000",           //POI点显示label的范围(单位:米, 范围最小、最大距离; 在此范围内显示, 超出范围隐藏; 注意:always_show_label属性优先于此属性)
-              "umg_type": "default",                  //此POI所使用的UI模板类型(default: 带线的默认POI UI样式, default_noline:不带线的POI UI样式, 项目中约定)
-              "sort_order": true,                     //是否自动遮挡排序
-              "animation_type": "bounce",             //动画类型(bounce:弹出式; stretch:伸缩式; wipe:展开式)
-              "duration_time": 0.5                    //规定完成动画所花费的时间(单位:秒)
-            }
-            window.sysCloudRender.SuperAPI("AddPOI", poiInfo, (status) => {
-              console.log(status); //成功、失败回调
-            })
-            message.success('拾取点位成功')
-            window.sysCloudRender.SuperAPI("EndGetCoord")
-            console.log(data.posInfo);
-          }
-        });
-      }
-      else {
-        message.error('请先选择机组节点')
-      }
-    }
-    /**
-     * 保存坐标点和视角
-    */
-    const savePosition = () => {
-      //此处调用更新数据接口
-      //选中子节点的id，使用此参数去修改
-      if (data.posInfo.coord && data.posInfo.coord_z) {
-        let params = {
-          id: data.selectedNode.id,
-          loc: JSON.stringify(data.posInfo)
-        }
-        editUnitLabel(params).then(res => {
-          if (res.result) {
-            message.success('保存成功')
-            data.posInfo = {
-              coord_easetype: "linear",
-              attitude_easetype: "Linear",
-              time: 4,
-              speed_easetype: "linear"
-            }
-            let jsondata = {
-              "id": data.selectedNode.id,            //覆盖物id
-              "covering_type": "poi"     //覆盖物类型, 详见下表
-            }
-            window.sysCloudRender.SuperAPI("RemoveCovering", jsondata, (status) => {
-              console.log(status); //成功、失败回调
-            })
-            //获取机组
-            getAllData()
-          } else {
-            message.error('保存失败，请检查网络等问题!')
-          }
-        })
-      } else {
-        message.error('请先拾取坐标')
-      }
-    }
-    onBeforeUnmount(() => {
-      delAllPoi()
-    })
-    return {
-      ...toRefs(data),
-      rotateWordTree,
-      nodeSelect,
-      getCameraInfo,
-      getPosition,
-      savePosition
-    };
-  },
-});
-</script>
-      
-<style lang="less" scoped>
-.machine-flag {
-  position: relative;
-  height: 100%;
-  width: 260px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-  .tree-panel {
-    height: auto;
-    width: 100%;
-    padding: 20px;
-    height: calc(100% - 60px);
-
-    .tree-content {
-      ::v-deep .ant-tree-switcher_close {
-        .ant-tree-switcher-icon {
-          height: 100%;
-          width: 100%;
-          background: url('/@/assets/images/button/close.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-
-      ::v-deep .ant-tree-switcher_open {
-        .ant-tree-switcher-icon {
-          height: 100%;
-          width: 100%;
-          background: url('/@/assets/images/button/open.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-
-      ::v-deep .ant-tree-treenode-selected {
-        .ant-tree-node-content-wrapper .ant-tree-node-content-wrapper-normal .ant-tree-node-selected::before {
-          background: linear-gradient(90deg,
-              rgba(22, 192, 255, 0.4) 0%,
-              rgba(22, 192, 255, 0) 100%) !important;
-        }
-      }
-
-      ::v-deep .ant-tree-treenode-selected {
-        .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal.ant-tree-node-selected::before {
-          background: linear-gradient(90deg,
-              rgba(22, 192, 255, 0.4) 0%,
-              rgba(22, 192, 255, 0) 100%) !important;
-        }
-
-        .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-open.ant-tree-node-selected::before {
-          background: linear-gradient(90deg,
-              rgba(22, 192, 255, 0.4) 0%,
-              rgba(22, 192, 255, 0) 100%) !important;
-        }
-
-        .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-close.ant-tree-node-selected::before {
-          background: linear-gradient(90deg,
-              rgba(22, 192, 255, 0.4) 0%,
-              rgba(22, 192, 255, 0) 100%) !important;
-        }
-      }
-
-      ::v-deep .ant-tree-node-content-wrapper {
-        .ant-tree-title {
-          position: inherit !important;
-          display: flex;
-          align-items: center;
-          width: auto;
-
-          .self-tree-label {
-            display: flex;
-            height: 22px;
-          }
-
-          .self-tree-location {
-            display: flex;
-            height: 22px;
-            width: 26px;
-            background: url('/@/assets/images/button/select.png') no-repeat;
-            background-size: 100% 100%;
-            margin-left: 10px;
-          }
-        }
-
-      }
-    }
-  }
-
-  .bottom-btn-group {
-    position: absolute;
-    display: flex;
-    bottom: 10px;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 100%;
-    padding:0 10px;
-
-    .btn {
-      margin-right:10px;
-      height: 40px;
-      line-height: 40px;
-      width: 100px;
-      text-align: center;
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 500;
-      color: rgb(4, 236, 239);
-      background: rgba(3, 49, 79, 0.3);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-      cursor: pointer;
-      &:last-child{
-        margin-right:0;
-      }
-
-      &:hover {
-        color: rgba(4, 236, 239, 0.8);
-        box-shadow: inset 0px 0px 3px 3px rgba(36, 255, 252, 0.8);
-      }
-    }
-  }
-}
-</style>
-      

src/views/SystemManage/component/MachineStatus.vue

@@ -1,645 +0,0 @@
-<!--
- * @Author: Xiax
- * @Date: 2023-07-03 16:12:50
- * @LastEditTime: 2023-07-05 11:10:34
- * @LastEditors: Xiax
- * @Description: 机组检修态管理
- * @FilePath: \xld_web\src\views\SystemManage\component\MachineStatus.vue
- * 版权声明
--->
-<template>
-  <div class="machine-status">
-    <div class="title-label">机组检修态管理</div>
-    <div class="title-fun">
-      <div class="search-group">
-        <span>机组名称：</span>
-        <div class="query-content">
-          <a-input v-model:value="queryParam.keyword" placeholder="请输入内容" style="width: 200px" />
-        </div>
-        <span>检修时间段：</span>
-        <div class="query-content">
-          <!-- <a-range-picker v-model:value="queryParam.selectDate" /> -->
-          <a-range-picker :show-time="{ format: 'HH' }" format="YYYY-MM-DD HH" v-model:value="queryParam.selectDate"
-            :placeholder="['开始时间', '结束时间']" />
-        </div>
-        <div class="btn" @click="queryClick">
-          <div class="img"></div>
-        </div>
-      </div>
-      <div class="btn-group">
-        <span class="btn">
-          <span class="add-btn" @click="addRecord"></span>
-        </span>
-        <span class="btn">
-          <span class="del-btn" @click="delRecord"></span>
-        </span>
-      </div>
-    </div>
-    <div class="content">
-      <div class="table-pannel">
-        <template v-if="!dataSource.length">
-          <a-empty :image="simpleImage" />
-        </template>
-        <a-table v-if="dataSource.length" :rowKey="(r, i) => i" :row-selection="rowSelection" :columns="columns"
-          :data-source="dataSource" :pagination="paginationOpt" @change="tableChange" style="height: 100%;">
-          <template #func="{ record }">
-            <div class="editable-row-operations">
-              <a @click="onDetails(record)">详情</a>
-              <a @click="onEdit(record)">修改</a>
-              <a-popconfirm title="确认删除该条数据?" ok-text="确定" cancel-text="取消" @confirm="onDelete(record)">
-                <a>删除</a>
-              </a-popconfirm>
-            </div>
-          </template>
-        </a-table>
-      </div>
-    </div>
-    <!-- 新增弹窗 -->
-    <a-modal v-model:visible="showDialog" :title="null" :footer="null" wrapClassName="wrap-power" :centered="true"
-      :width="430" :closable="true" bodyStyle="padding: 0 !important;">
-      <div style="height: 385px; width: 100%" class="dialogclass">
-        <div class="title">机组检修时间管理</div>
-        <div class="dialog-content">
-          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <!-- <a-form-item label="库区" name="area">
-              <a-select v-model:value="formState.area" placeholder="请选择">
-                <template v-for="(area, index) in addRecordAreaArr" :key="index">
-                  <a-select-option :value="area">{{ area }}</a-select-option>
-                </template>
-              </a-select>
-            </a-form-item> -->
-            <!-- <a-form-item label="机组" name="name">
-              <a-select v-model:value="formState.name" placeholder="请选择">
-                <template v-for="(item, index) in addRecordNameArr" :key="index">
-                  <a-select-option :value="item.name">{{ item.name }}</a-select-option>
-                </template>
-              </a-select>
-            </a-form-item> -->
-            <a-form-item label="机组名称" name="unnm">
-              <a-input v-model:value="formState.unnm" />
-            </a-form-item>
-            <a-form-item label="机组编号" name="uncd">
-              <a-input v-model:value="formState.uncd" />
-            </a-form-item>
-            <a-form-item label="开始日期" name="startTime">
-              <a-date-picker v-model:value="formState.startTime" :show-time="{ format: 'HH' }" format="YYYY-MM-DD HH"
-                valueFormat="YYYY-MM-DD HH" />
-            </a-form-item>
-            <a-form-item label="结束日期" name="endTime">
-              <a-date-picker v-model:value="formState.endTime" :show-time="{ format: 'HH' }" format="YYYY-MM-DD HH"
-                valueFormat="YYYY-MM-DD HH" />
-            </a-form-item>
-          </a-form>
-          <div class="btn-gropu">
-            <span class="btn" @click="cancelClick">取消</span>
-            <span class="btn" @click="onSubmit">确定</span>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-        
-<script>
-import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, h } from 'vue';
-import moment from 'moment';
-import { message, Empty, Modal } from 'ant-design-vue';
-// import {
-//   addUnitRepair,
-//   editUnitRepair,
-//   getUnitRepairById,
-//   delUnitRepairByIds,
-//   getUnitRepair,
-//   searchUnitRepair
-// } from '/@/api/sys/systemManage';
-
-export default defineComponent({
-  name: 'MachineStatus',
-  components: {},
-  setup(props, { emit }) {
-    const formRef = ref();
-    const data = reactive({
-      queryParam: {
-        keyword: "",
-        selectDate: [moment(new Date()).format('YYYY-MM-DD HH'), moment(new Date()).add(1, 'month').format('YYYY-MM-DD HH')]
-      },
-      columns: [
-        {
-          title: "序号",
-          dataIndex: "key",
-          key: "key",
-          align: "center",
-          width: 70,
-          // customRender: (text,record,index) => `${index+1}`,//此处为重点
-        },
-        {
-          title: '机组名称',
-          dataIndex: 'unnm',
-          align: 'center',
-        },
-        {
-          title: '机组编号',
-          dataIndex: 'uncd',
-          align: 'center',
-        },
-        {
-          title: '开始时间',
-          dataIndex: 'startTime',
-          align: 'center',
-        },
-        {
-          title: '结束时间',
-          dataIndex: 'endTime',
-          align: 'center',
-        },
-        {
-          title: '操作',
-          dataIndex: 'func',
-          align: 'center',
-          slots: {
-            customRender: 'func',
-          },
-        }
-      ],
-      dataSource: [],
-      showDialog: false,//新增弹窗
-      formState: {
-        unnm: "",
-        uncd: "",
-        startTime: "",
-        endTime: ""
-      },
-      paginationOpt: {
-        pageSize: 10,
-        total: 0,
-        current: 1
-      },
-      addRecordAreaArr: [],//新增弹窗中库区选项
-      addRecordNameArr: [],//新增弹窗中机组选项
-      selectedRows: [],//选中的行
-      dialogType: 'add',
-      editId: null,
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
-    });
-    //弹窗验证规则
-    const rules = {
-      unnm: [{ required: true, message: '请填写名称', trigger: 'blur' }],
-      uncd: [{ required: true, message: '请填写编号', trigger: 'blur' }],
-      startTime: [{ required: true, message: '请填写时间', trigger: 'blur' }],
-      endTime: [{ required: true, message: '请填写时间', trigger: 'blur' }],
-    };
-    onMounted(() => {
-      getAllData(data.paginationOpt.current, data.paginationOpt.pageSize)
-    });
-    //查询表格页面数据
-    const getAllData = (current = null, size = null, unnm = null, startTime = null, endTime = null) => {
-      let searchParams = {
-        current: current,
-        size: size,
-        searchValue: unnm || null,
-        startTime: startTime ? moment(startTime).format('YYYY-MM-DD HH') : null,
-        endTime: endTime ? moment(endTime).format('YYYY-MM-DD HH') : null
-      }
-      searchUnitRepair(searchParams).then(res => {
-        if (res.result.hasOwnProperty('records')) {
-          data.paginationOpt.total = res.result.total
-          data.dataSource = res.result.records
-          data.dataSource.forEach((item, index) => {
-            item.key = index + 1
-          })
-        }
-      })
-    }
-    //表格改变事件
-    const tableChange = (pagination, filters, sorter, { currentDataSource }) => {
-      data.paginationOpt = pagination
-      getAllData(pagination.current, pagination.pageSize)
-    }
-    //列表选择事件
-    const rowSelection = {
-      onChange: (key, selectedRows) => {
-        data.selectedRows = selectedRows
-      },
-      // onSelect: (record, selected, selectedRows) => {
-      //   console.log(record, selected, selectedRows);
-      // },
-      // onSelectAll: (selected, selectedRows, changeRows) => {
-      //   console.log(selected, selectedRows, changeRows);
-      // },
-    };
-    /**
-     * @description: 顶部栏搜索
-     * @param {*} e
-     * @return {*}
-     * @use: 
-     */
-    const onSearch = (e) => {
-      console.log(e);
-    }
-    /**
-     * @description: 搜索按钮事件
-     * @return {*}
-     * @use: 
-     */
-    const queryClick = () => {
-      console.log(data.queryParam);
-      data.paginationOpt.current = 1
-      getAllData(null, null, data.queryParam.keyword, data.queryParam.selectDate[0], data.queryParam.selectDate[1])
-    }
-    /**
-     * @description: 列表删除某一行
-     * @param {*} record
-     * @return {*}
-     * @use: 
-     */
-    const onDelete = (record) => {
-      delUnitRepairByIds({ ids: record.id }).then(res => {
-        if (res.result) {
-          message.success('删除成功')
-          data.paginationOpt.current = 1
-          getAllData(data.paginationOpt.current, data.paginationOpt.pageSize)
-        } else {
-          message.error('删除失败，请检查网络等问题！')
-        }
-      })
-    };
-    /**
-     * @description: 列表修改某一行
-     * @param {*} record
-     * @return {*}
-     * @use: 
-     */
-    const onEdit = (record) => {
-      data.showDialog = true
-      data.formState = {
-        unnm: record.unnm,
-        uncd: record.uncd,
-        startTime: record.startTime,
-        endTime: record.endTime
-      }
-      data.dialogType = 'edit'
-      data.editId = record.id
-    };
-    /**
-     * 列表详情
-     */
-    const onDetails = (record) => {
-      Modal.info({
-        title: '详情',
-        content: h('div', {}, [
-          h('p', `测点id：${record.id}`),
-          h('p', `测点名称：${record.unnm}`),
-          h('p', `测点编号：${record.uncd}`),
-          h('p', `开始时间：${record.startTime}`),
-          h('p', `结束时间：${record.endTime}`),
-        ]),
-
-        okText: '确定',
-        onOk() {
-          console.log('ok');
-        },
-      });
-    }
-    /**
-     * @description: 新增检修记录
-     * @return {*}
-     * @use: 
-     */
-    const addRecord = () => {
-      data.showDialog = true
-      data.dialogType = 'add'
-    }
-    /**
-     * @description: 删除检修记录
-     * @return {*}
-     * @use: 
-     */
-    const delRecord = () => {
-      if (!data.selectedRows.length) {
-        message.error('请先选择要删除的数据')
-        return
-      }
-      let ids = ''
-      data.selectedRows.forEach(item => {
-        ids += item.id + ','
-      })
-      ids.slice(0, -1)
-      delUnitRepairByIds({ ids: ids }).then(res => {
-        if (res.result) {
-          message.success('删除成功')
-          data.paginationOpt.current = 1
-          getAllData(data.paginationOpt.current, data.paginationOpt.pageSize)
-        } else {
-          message.error('删除失败，请检查网络等问题！')
-        }
-      })
-    }
-    /**
-     * @description: 新增弹窗确认按钮
-     * @return {*}
-     * @use: 
-     */
-    const onSubmit = () => {
-      formRef.value
-        .validate()
-        .then(() => {
-          if (data.dialogType === 'add') {
-            addUnitRepair(data.formState).then(res => {
-              if (res.result) {
-                message.success('新增成功')
-                cancelClick()
-                getAllData(data.paginationOpt.current, data.paginationOpt.pageSize)
-              } else {
-                message.error('新增失败，请检查网络等问题！')
-              }
-            })
-          } else {
-            let params = {
-              id: data.editId,
-              ...data.formState
-            }
-            editUnitRepair(params).then(res => {
-              if (res.result) {
-                message.success('修改成功')
-                cancelClick()
-                getAllData(data.paginationOpt.current, data.paginationOpt.pageSize)
-              } else {
-                message.error('新增失败，请检查网络等问题！')
-              }
-            })
-          }
-        })
-        .catch((error) => {
-          console.log('error', error);
-        });
-    }
-    /**
-     * 重置表单
-     */
-    const resetForm = () => {
-      formRef.value.resetFields();
-      data.editId = null
-      data.dialogType = 'add'
-    };
-    /**
-     * @description: 弹窗取消按钮
-     * @return {*}
-     * @use: 
-     */
-    const cancelClick = () => {
-      data.showDialog = false;
-      resetForm()
-    };
-    return {
-      formRef,
-      ...toRefs(data),
-      onSearch,
-      tableChange,
-      rowSelection,
-      rules,
-      labelCol: { span: 8 },
-      wrapperCol: { span: 12 },
-      queryClick,
-      onDetails,
-      onDelete,
-      onEdit,
-      addRecord,
-      delRecord,
-      onSubmit,
-      cancelClick
-    };
-  },
-});
-</script>
-        
-<style lang="less" scoped>
-.machine-status {
-  height: 100%;
-  width: 100%;
-  padding: 0 20px 20px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  overflow: hidden;
-
-  .title-label {
-    margin: 15px 0 11px;
-    height: 34px;
-    font-size: 16px;
-    font-family: Source Han Sans CN;
-    font-weight: 400;
-    color: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .title-fun {
-    margin: 10px 0;
-    height: 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .search-group {
-      display: flex;
-      align-items: center;
-
-      .query-content {
-        margin: 0 20px 0 10px;
-        height: 100%;
-        // width: 200px;
-        padding: 0;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-        input {
-          width: 200px;
-        }
-      }
-
-      .btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 50px;
-        height: 100%;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-        &:hover {
-          cursor: pointer;
-          box-shadow: inset 0px 0px 3px 3px rgba(40, 185, 243, 0.5);
-        }
-
-        .img {
-          height: 31px;
-          width: 31px;
-          background: url('/@/assets/images/button/query.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-    }
-
-    .btn-group {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .search-box {
-        margin-right: 47px;
-        width: 260px;
-        height: 34px;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-        .search-btn {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-
-          .img {
-            height: 31px;
-            width: 31px;
-            background: url('/@/assets/images/button/query.png') no-repeat;
-            background-size: 100% 100%;
-          }
-        }
-      }
-
-      .btn {
-        display: flex;
-        background-size: 100% 100%;
-        width: 50px;
-        height: 36px;
-        background: rgba(3, 55, 78, 0.6);
-        border-radius: 4px;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-        cursor: pointer;
-
-        &:hover {
-          background: rgba(115, 183, 209, 0.5);
-        }
-
-        .add-btn {
-          display: flex;
-          height: 31px;
-          width: 31px;
-          background: url('/@/assets/images/button/add.png') no-repeat;
-        }
-
-        .del-btn {
-          display: flex;
-          height: 31px;
-          width: 31px;
-          background: url('/@/assets/images/button/delete.png') no-repeat;
-        }
-      }
-    }
-  }
-
-  .content {
-    position: relative;
-    height: calc(100% - 120px);
-    color: #feffff;
-    display: flex;
-
-    .table-pannel {
-      width: 100%;
-      background: rgba(3, 49, 79, 0.3);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: #13FCFF;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .editable-row-operations {
-        a {
-          margin-right: 8px;
-        }
-      }
-
-      ::v-deep .ant-table-wrapper {
-        width: 98%;
-      }
-
-      ::v-deep .ant-table {
-        background: none;
-      }
-
-      ::v-deep .ant-table-thead>tr>th {
-        background: none;
-        border-bottom: 1px solid rgba(10, 103, 143, 0.26);
-      }
-
-      ::v-deep .ant-table-tbody>tr>td {
-        color: #ffffff;
-        border-bottom: 1px solid rgba(10, 103, 143, 0.26);
-      }
-
-      ::v-deep .ant-table-pagination.ant-pagination {
-        margin-right: 10px;
-      }
-    }
-  }
-}
-
-.dialogclass {
-  background: url('/@/assets/images/dialog/small.png') no-repeat;
-  background-size: 100% 100%;
-
-  .title {
-    height: 60px;
-    width: 80%;
-    line-height: 60px;
-    padding-left: 33px;
-  }
-
-  .dialog-content {
-    height: calc(100% - 60px);
-    width: 100%;
-    padding: 10px 40px;
-
-    //display: flex;
-    //justify-content: center;
-    //align-items: center;
-    .btn-gropu {
-      position: absolute;
-      display: flex;
-      height: 40px;
-      width: calc(100% - 80px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      bottom: 36px;
-
-      .btn {
-        height: 40px;
-        width: 80px;
-        text-align: center;
-        line-height: 40px;
-        margin: 0 20px;
-        color: #feffff;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(22, 192, 255, 0.5);
-        cursor: pointer;
-        user-select: none;
-
-        &:hover {
-          color: #04ecef;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/SystemManage/component/SpaceLocation.vue

@@ -1,501 +0,0 @@
-<!--
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2023-06-26 10:43:42
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-09-26 09:53:10
- * @FilePath: \xld_web\src\views\SystemManage\component\SpaceLocation.vue
- * @Description: 空间位置管理
--->
-
-<template>
-  <div class="space-location">
-    <div class="top-panel">
-      <a-row class="query-content">
-        <a-col class="query-col" :span="14">
-          <div class="content">
-            <span class="label">巡检班次</span>
-            <span class="value">
-              <a-select class="self-select" v-model:value="queryParam.inspectType" style="width: 100%; height: 40px"
-                @change="onSearch" size="large">
-                <a-select-option value="1">白班</a-select-option>
-                <a-select-option value="2">夜班</a-select-option>
-                <a-select-option value="3">全天</a-select-option>
-              </a-select>
-            </span>
-          </div>
-        </a-col>
-        <a-col class="query-col" :span="10">
-          <div class="content">
-            <span class="label">状态</span>
-            <span class="value">
-              <a-select class="self-select" v-model:value="queryParam.status" style="width: 100%; height: 40px"
-                @change="onSearch" size="large">
-                <a-select-option value="1">占用</a-select-option>
-                <a-select-option value="2">停用</a-select-option>
-              </a-select>
-            </span>
-          </div>
-        </a-col>
-
-        <a-col class="query-col" :span="19">
-          <div class="content">
-            <a-input v-model:value="queryParam.keyword" placeholder="请输入关键字查询" style="width: 100%" />
-          </div>
-        </a-col>
-        <a-col class="query-col" :span="5">
-          <div class="content">
-            <div class="btn" @click="queryClick">
-              <div class="img"></div>
-            </div>
-          </div>
-        </a-col>
-      </a-row>
-      <div class="tree-panel">
-        <tf-tree :treeData="treeData" :replaceFields="replaceFields" @treeOptClick="treeOptClick"
-          :searchValue="searchValue" @treeNodeSelect="treeNodeSelect" />
-      </div>
-    </div>
-
-    <div class="bottom-panel" v-if="bottomPanelHeight === '500px'">
-      <space-location-form :title="formTitle" :selectedNodeData="selectedNodeData" @closePanel="closePanel"
-        @onSubmit="onSubmit" />
-    </div>
-
-    <a-modal v-model:visible="showDialog" :title="null" :footer="null" wrapClassName="wrap-power" :centered="true"
-      :width="470" :closable="true" bodyStyle="padding: 0 !important;">
-      <div style="height: 250px; width: 100%" class="dialogclass">
-        <div class="title">位置移动</div>
-        <div class="dialog-content">
-          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-form-item ref="sort" label="输入序号" name="sort" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input v-model:value="formState.sort" />
-            </a-form-item>
-          </a-form>
-          <div class="btn-group">
-            <span class="btn" @click="onEditCancel">取消</span>
-            <span class="btn" @click="onEditSubmit">确定</span>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-      
-<script>
-import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode, onBeforeUnmount } from 'vue';
-import TfTree from './Tree.vue'
-import SpaceLocationForm from './form/SpaceLocationForm.vue';
-// import { delUnitGeoByIds, getUnitGeo, searchUnitGeo } from '/@/api/sys/systemManage';
-import { message, Modal } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-
-export default defineComponent({
-  name: 'SpaceLocation',
-  components: { TfTree, SpaceLocationForm },
-  setup(props, { emit }) {
-    const formRef = ref()
-    const data = reactive({
-      topPanelHeight: '100%',
-      bottomPanelHeight: '0px',
-      formTitle: '新增点位',
-      queryParam: {
-        inspectType: '1',
-        status: '1',
-        keyword: '',
-      },
-      replaceFields: {
-        children: 'children',
-        title: 'unnm',
-        key: 'id'
-      },//树结构替换的字段
-      treeData: [],//获取的节点树数据
-      selectedNodeData: {},//选中的节点
-      searchValue: '',
-      showDialog: false,
-      formState: {
-        id: "",
-        sort: 0
-      }
-    });
-
-    const rules = {
-      sort: [{ required: true, message: '请输入序号', trigger: 'blur' }],
-    };
-
-    onMounted(() => {
-      getTreeData()
-    })
-    /**
-     * 获取树结构
-     */
-    const getTreeData = () => {
-      getUnitGeo().then(res => {
-        if (res.result.length) {
-          data.treeData = toTree(res.result)
-        } else {
-          message.error('机组数据查询失败')
-        }
-      })
-    }
-    /**
-     * 生成树结构
-     */
-    const toTree = (data) => {
-      let result = [];
-      let obj = {};
-      if (data.length === 1) {
-        result.push(data[0])
-        return result;
-      }
-      data.forEach(item => {
-        obj[item.id] = Object.assign(item, obj[item.id] || {});
-        if (item.supId > 0) {
-          let parent = obj[item.supId] || {};
-          parent.children = parent.children || [];
-          parent.children.push(item);
-          obj[item.supId] = parent;
-        } else {
-          result.push(obj[item.id])
-        }
-      })
-      return result;
-    }
-    /**
-     * 当编辑面板大小发生改变时
-    */
-    watch(
-      () => data.bottomPanelHeight,
-      (val) => {
-        data.topPanelHeight = `calc(100% - ${val})`;
-      }
-    );
-    /**
-     * 查询事件
-    */
-    const queryClick = () => {
-      console.log('查询')
-      data.searchValue = data.queryParam.keyword
-    };
-    const onSearch = (value) => {
-      let params = {
-        insShift: `${data.queryParam.inspectType}`,
-        state: `${data.queryParam.status}`
-      }
-      searchUnitGeo(params).then(res => {
-        if (res.result && res.result.length) {
-          // data.searchValue = res.result.records[0].unnm
-          data.treeData = toTree(res.result)
-        } else {
-          message.error('机组数据查询失败')
-          getTreeData()
-        }
-      })
-    }
-    /**
-     * 操作事件
-    */
-    const treeOptClick = (obj, type) => {
-      console.log('操作类型和数据', obj, type);
-      data.selectedNodeData = obj.dataRef
-      //新增和修改可打开编辑面板
-      if (['update', 'add'].includes(type)) {
-        data.bottomPanelHeight = '500px';
-        if (type === 'update') data.formTitle = '修改点位'
-        else data.formTitle = '新增点位'
-      } else if (type === 'delete') {
-        //根据ids删除点位
-        Modal.confirm({
-          title: '确认删除该机组?',
-          icon: createVNode(ExclamationCircleOutlined),
-          content: '机组删除后不可恢复，请确认操作无误！',
-          okText: '确定',
-          okType: 'danger',
-          cancelText: '取消',
-          onOk() {
-            delUnitGeoByIds({ ids: obj.dataRef.id }).then(res => {
-              if (res.result) {
-                message.success('删除成功')
-                getTreeData()
-              } else {
-                message.error('删除失败，请检查网络等问题')
-              }
-            })
-          },
-          onCancel() {
-            message.info('取消删除！')
-          },
-        });
-      } else {
-        data.showDialog = true
-        data.formState.id = obj.dataRef.id
-        data.formState.sort = obj.dataRef.sort
-      }
-    };
-    /**
-     * 点击树节点触发
-     */
-    const treeNodeSelect = (selectedNode) => {
-      delAllPoi()
-      if (!selectedNode.loc) {
-        message.info('该点位暂无位置')
-      } else {
-        try {
-          let poiPos = JSON.parse(selectedNode.loc)
-          // console.log(poiPos);
-          let poiInfo = {
-            "id": selectedNode.id,
-            "label": selectedNode.unnm,                   //POI title文本
-            "coord_type": 0,                        //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                       //CAD基准点Key值, 项目中约定
-            "adaptive": false,                      //true:自适应大小;false:默认
-            "coord": poiPos.coord,         //POI点的坐标 lng,lat
-            "coord_z": poiPos.coord_z,                         //高度(单位:米)
-            "coord_z_type": 2,                      //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效)
-            "always_show_label": true,              //是否永远显示title, true:显示title(默认), false:不显示title
-            "show_label_range": "0,2000",           //POI点显示label的范围(单位:米, 范围最小、最大距离; 在此范围内显示, 超出范围隐藏; 注意:always_show_label属性优先于此属性)
-            "umg_type": "default",                  //此POI所使用的UI模板类型(default: 带线的默认POI UI样式, default_noline:不带线的POI UI样式, 项目中约定)
-            "sort_order": true,                     //是否自动遮挡排序
-            "animation_type": "bounce",             //动画类型(bounce:弹出式; stretch:伸缩式; wipe:展开式)
-            "duration_time": 0.5                    //规定完成动画所花费的时间(单位:秒)
-          }
-          window.sysCloudRender.SuperAPI("AddPOI", poiInfo, (status) => {
-            console.log('打点成功');
-          })
-          let jsondata = {
-            "coord_type": 0,                                 //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                                //CAD基准点Key值, 项目中约定
-            "coord_z": poiPos.r_coord_z,                               //海拔高度(单位:米)
-            "center_coord": poiPos.r_coord,           //中心点的坐标 lng,lat
-            "arm_distance": poiPos.arm_distance,                            //镜头距中心点距离(单位:米)
-            "pitch": poiPos.pitch,                                     //镜头俯仰角(5~89)
-            "yaw": poiPos.yaw,                                        //镜头偏航角(0正北, 0~359)
-            "fly": true                                      //true: 飞行动画(有一个短暂飞行动画,并按照arm_distance,pitch,yaw设置镜头);
-          }
-          window.sysCloudRender.SuperAPI("SetCameraInfo", jsondata, (status) => {
-            console.log(status); //成功、失败回调
-          })
-        } catch {
-          message.error('点位信息不正确，请重新拾取')
-        }
-      }
-    }
-    const delAllPoi = () => {
-      let jsondata = {
-        "covering_type": "poi"   //覆盖物类型, 详见下表
-      }
-      window.sysCloudRender.SuperAPI("RemoveAllCovering", jsondata, (status) => {
-        console.log(status); //成功、失败回调
-      })
-    }
-    /**
-     * 关闭面板
-    */
-    const closePanel = () => {
-      data.bottomPanelHeight = '0px';
-    };
-    /**
-     * 新增点位确认事件
-    */
-    const onSubmit = (form) => {
-      getTreeData()
-      closePanel()
-    }
-
-    const onEditCancel = () => {
-      data.showDialog = false
-      data.formState = {
-        id: "",
-        sort: 0
-      }
-    }
-
-    const onEditSubmit = () => {
-      formRef.value
-        .validate()
-        .then(() => {
-          data.showDialog = false
-          data.formState.sort = parseInt(data.formState.sort)
-          editUnitGeo(data.formState).then(res => {
-            if (res.result) {
-              message.success('修改点位成功')
-              getTreeData()
-            } else {
-              message.success('修改点位失败')
-            }
-            data.formState = {
-              id: "",
-              sort: 0
-            }
-          })
-        })
-    }
-
-    onBeforeUnmount(() => {
-      delAllPoi()
-    })
-
-    return {
-      formRef,
-      rules,
-      ...toRefs(data),
-      labelCol: { span: 7 },
-      wrapperCol: { span: 17 },
-      onSearch,
-      queryClick,
-      treeOptClick,
-      treeNodeSelect,
-      closePanel,
-      onSubmit,
-      onEditCancel,
-      onEditSubmit
-    };
-  },
-});
-</script>
-      
-<style lang="less" scoped>
-.space-location {
-  position: relative;
-  height: 100%;
-  width: 400px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-  .top-panel {
-    width: 100%;
-    height: v-bind(topPanelHeight);
-
-    .query-content {
-      width: 100%;
-      height: 152px;
-      padding: 20px 6px;
-
-      .query-col {
-        height: 40px;
-        width: 100%;
-        padding: 0 4px;
-        margin-bottom: 16px;
-
-        .content {
-          display: flex;
-          height: 100%;
-          width: 100%;
-          background: rgba(3, 49, 79, 0.3);
-          box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-          .label {
-            display: flex;
-            justify-content: center;
-            height: 40px;
-            line-height: 40px;
-            width: 70px;
-            box-shadow: inset 0px 0px 3px 0px rgba(10, 99, 183, 0.5);
-          }
-
-          .value {
-            display: flex;
-            height: 100%;
-            width: calc(100% - 70px);
-
-            ::v-deep.ant-select-selector {
-              height: 100% !important;
-            }
-          }
-
-          .btn {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-
-            &:hover {
-              cursor: pointer;
-              box-shadow: inset 0px 0px 3px 3px rgba(40, 185, 243, 0.5);
-            }
-
-            .img {
-              height: 31px;
-              width: 31px;
-              background: url('/@/assets/images/button/query.png') no-repeat;
-              background-size: 100% 100%;
-            }
-          }
-        }
-      }
-    }
-
-    .tree-panel {
-      height: calc(100% - 152px);
-    }
-  }
-
-  .bottom-panel {
-    width: 100%;
-    height: v-bind(bottomPanelHeight);
-  }
-}
-
-.dialogclass {
-  background: url('/@/assets/images/dialog/small.png') no-repeat;
-  background-size: 100% 100%;
-
-  .title {
-    margin-bottom: 20px;
-    height: 49px;
-    width: 80%;
-    line-height: 49px;
-    padding-left: 33px;
-  }
-
-  .dialog-content {
-    height: calc(100% - 60px);
-    width: 100%;
-    padding: 10px 40px;
-
-    //display: flex;
-    //justify-content: center;
-    //align-items: center;
-    .btn-group {
-      position: absolute;
-      display: flex;
-      height: 40px;
-      width: calc(100% - 80px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      bottom: 36px;
-
-      .btn {
-        height: 40px;
-        width: 80px;
-        text-align: center;
-        line-height: 40px;
-        margin: 0 20px;
-        color: #feffff;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(22, 192, 255, 0.5);
-        cursor: pointer;
-        user-select: none;
-
-        &:hover {
-          color: #04ecef;
-        }
-      }
-    }
-  }
-}
-
-::v-deep .self-select {
-  .ant-select-selector {
-    border: 0px !important;
-
-    .ant-select-arrow {
-      color: aqua;
-    }
-  }
-}
-</style>
-      

src/views/SystemManage/component/SystemMap.vue

@@ -1,146 +0,0 @@
-<!--
- * @Author: Xiax
- * @Date: 2023-07-06 17:34:09
- * @LastEditTime: 2024-08-24 10:15:16
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @Description: 系统管理中三维场景
- * @FilePath: \xld_web\src\views\SystemManage\component\SystemMap.vue
- * 版权声明
--->
-
-<template>
-  <div class="map-content" ref="mapRef">
-    <div id="sys-map">
-      <div id="sysPlayer" style="display: none"></div>
-    </div>
-  </div>
-</template>
-<script>
-import { defineComponent, onMounted, onUnmounted, reactive, toRefs, watch, ref } from 'vue';
-import { useMapStore } from '/@/store/modules/map';
-import { message } from 'ant-design-vue';
-const props = {
-  showTool: { type: Object, default: false },
-};
-export default defineComponent({
-  name: 'sysMap',
-  components: {},
-  props,
-  setup(props, { emit }) {
-    const mapRef = ref();
-    const data = reactive({
-      markerAddType: true,
-      showTool: props.showTool,
-      showMapTools: true,
-      //厂房
-      workshops: [],
-      //视频
-      videos: [],
-      //机组
-      machines: [
-        {
-          index: '1',
-          id: 'MC0001',
-          coord: '112.373711,34.932053',
-          coord_z: '-20.0',
-          name: '1#机组',
-          status: 1,
-        },
-        {
-          index: '2',
-          id: 'MC0002',
-          coord: '112.373856,34.932262',
-          coord_z: '-20.0',
-          name: '2#机组',
-          status: 1,
-        },
-        {
-          index: '3',
-          id: 'MC0003',
-          coord: '112.374001,34.932468',
-          coord_z: '-20.0',
-          name: '3#机组',
-          status: 1,
-        },
-        {
-          index: '4',
-          id: 'MC0004',
-          coord: '112.374146,34.932678',
-          coord_z: '-20.0',
-          name: '4#机组',
-          status: 1,
-        },
-        {
-          index: '5',
-          id: 'MC0005',
-          coord: '112.37429,34.932884',
-          coord_z: '-20.0',
-          name: '5#机组',
-          status: 1,
-        },
-        {
-          index: '6',
-          id: 'MC0006',
-          coord: '112.374435,34.933094',
-          coord_z: '-20.0',
-          name: '6#机组',
-          status: 1,
-        },
-      ],
-      cameraInfo: {},//镜头信息
-      roamCameraPos: [],//漫游点位
-    });
-    const mapStore = useMapStore();
-
-
-
-    onMounted(() => {
-      
-    });
-    onUnmounted(() => {
-      
-    });
-    return {
-      mapStore,
-      mapRef,
-      ...toRefs(data),
-     
-    };
-  },
-});
-</script>
-<style lang="less">
-.map-content {
-  height: 100%;
-}
-
-::v-deep .cesium-roller-blind {
-  z-index: 0;
-}
-
-#map2 {
-  background: url('../../assets/images/map.jpg') no-repeat;
-}
-
-.mapMfasking {
-  height: 100vh;
-  width: 100vw;
-  position: absolute;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.mfasking1 {
-  box-shadow: inset 420px 100px 100px rgba(0, 0, 0, 0.5);
-}
-
-.mfasking2 {
-  box-shadow: inset -420px -100px 100px rgba(0, 0, 0, 0.5);
-}
-
-#sys-map {
-  // height: 100vh;
-  height: 100% !important;
-}
-</style>
-  

src/views/SystemManage/component/VideoPoint.vue

@@ -1,403 +0,0 @@
-<!--
- * @Author: tengmingxue 1473375109@qq.com
- * @Date: 2023-06-26 10:44:38
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2023-06-27 22:58:12
- * @FilePath: \xld_web\src\views\SystemManage\component\VideoPoint.vue
- * @Description: 视频点位
--->
-
-<template>
-  <div class="video-point">
-    <div class="top-panel">
-      <a-row class="query-content">
-        <a-col class="query-col" :span="19">
-          <div class="content">
-            <a-input v-model:value="queryParam.keyword" placeholder="请输入关键字查询" style="width: 100%" />
-          </div>
-        </a-col>
-        <a-col class="query-col" :span="5">
-          <div class="content">
-            <div class="btn" @click="queryClick">
-              <div class="img"></div>
-            </div>
-          </div>
-        </a-col>
-      </a-row>
-      <div class="tree-panel">
-        <tf-tree :treeData="geoTreeData" :replaceFields="replaceFields" :iconControl="false" :searchValue="searchValue" @treeNodeSelect="treeNodeSelect"
-          @treeOptClick="treeOptClick" />
-      </div>
-    </div>
-
-    <div class="bottom-panel" v-if="bottomPanelHeight === '466px'">
-      <video-point-form :title="formTitle" :selectedNodeData="selectedNodeData" @closePanel="closePanel"
-        @onSubmit="onSubmit" />
-    </div>
-  </div>
-</template>
-      
-<script>
-import { defineComponent, reactive, toRefs, computed, onMounted, watch } from 'vue';
-import TfTree from './Tree.vue';
-import VideoPointForm from './form/VideoPointForm.vue';
-// import { getUnitGeo, getVideo, delVideoByIds } from '/@/api/sys/systemManage'
-import { message } from 'ant-design-vue';
-
-export default defineComponent({
-  name: 'VideoPoint',
-  components: { TfTree, VideoPointForm },
-  setup(props, { emit }) {
-    const data = reactive({
-      topPanelHeight: '100%',
-      bottomPanelHeight: '0px',
-      formTitle: '新增视频点位',
-      queryParam: {
-        keyword: '',
-      },
-      searchValue: '',
-      videoData: [],//视频点位数据，获取后插入树结构，因为接口不通所以暂时写个静态数据
-      geoTreeData: [],//树结构数据，从空间位置管理中获取
-      replaceFields: {
-        children: 'children',
-        title: 'unnm',
-        key: 'id'
-      },//树结构替换的字段
-      selectedNodeData: {},//选中的节点
-      expandedKeys: [],//展开的节点
-    });
-
-    onMounted(() => {
-      //初始化获取空间点位数据与视频点位数据，生成结构树
-      getAllData()
-    })
-    /**
-     * 获取所有数据
-     */
-    const getAllData = () => {
-      getUnitGeo().then(res => {
-        if (res.result.length) {
-          //此处向获取的结构树中插入视频点位
-          //首先生成树，再插入
-          let treeData = toTree(res.result)
-          // 获取视频点位数据
-          getVideo().then(resVideo => {
-            if (resVideo.result.length) {
-              //插入unnm，作为树的title
-              resVideo.result.forEach(item => {
-                item.unnm = item.vdnm
-              })
-              data.videoData = resVideo.result
-              getMenuBtnList(treeData, data.videoData)
-              data.geoTreeData = treeData
-            } else {
-              message.info('无视频点位！')
-              data.geoTreeData = treeData
-            }
-          })
-        } else {
-          message.error('获取空间点位失败！')
-        }
-      })
-    }
-    /**
-     * 生成树结构
-     */
-    const toTree = (data) => {
-      let result = [];
-      let obj = {};
-      data.forEach(item => {
-        obj[item.id] = Object.assign(item, obj[item.id] || {});
-        if (item.supId>0) {
-          let parent = obj[item.supId] || {};
-          parent.children = parent.children || [];
-          parent.children.push(item);
-          obj[item.supId] = parent;
-        } else {
-          result.push(obj[item.id])
-        }
-      })
-      return result;
-    }
-    const delAllPoi = () => {
-      let jsondata = {
-        "covering_type": "poi"   //覆盖物类型, 详见下表
-      }
-      window.sysCloudRender.SuperAPI("RemoveAllCovering", jsondata, (status) => {
-        console.log(status); //成功、失败回调
-      })
-    }
-    /**
-     * 点击树节点触发
-     */
-     const treeNodeSelect = (selectedNode) => {
-      delAllPoi()
-      if (!selectedNode.loc) {
-        message.info('该点位暂无位置')
-      } else {
-        try {
-          let poiPos = JSON.parse(selectedNode.loc)
-          let poiInfo = {
-            "id": selectedNode.id,
-            "label": selectedNode.unnm,                   //POI title文本
-            "coord_type": 0,                        //坐标类型(0:经纬度坐标, 1:cad坐标)
-            "cad_mapkey": "",                       //CAD基准点Key值, 项目中约定
-            "adaptive": false,                      //true:自适应大小;false:默认
-            "coord": poiPos.coord,         //POI点的坐标 lng,lat
-            "coord_z": poiPos.coord_z,                         //高度(单位:米)
-            "coord_z_type": 2,                      //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效)
-            "always_show_label": true,              //是否永远显示title, true:显示title(默认), false:不显示title
-            "show_label_range": "0,2000",           //POI点显示label的范围(单位:米, 范围最小、最大距离; 在此范围内显示, 超出范围隐藏; 注意:always_show_label属性优先于此属性)
-            "umg_type": "default",                  //此POI所使用的UI模板类型(default: 带线的默认POI UI样式, default_noline:不带线的POI UI样式, 项目中约定)
-            "sort_order": true,                     //是否自动遮挡排序
-            "animation_type": "bounce",             //动画类型(bounce:弹出式; stretch:伸缩式; wipe:展开式)
-            "duration_time": 0.5                    //规定完成动画所花费的时间(单位:秒)
-          }
-          let sandMode = {
-            "reset_attitude": true,                //true: 使用当前自定义字段限制; false: 使用当前相机的默认参数以及限制
-            "coord_z_type": 2,                     //坐标高度类型(0:相对3D世界表面; 1:相对3D世界地面; 2:相对3D世界海拔)
-            "coord_z": poiPos.coord_z,                        //高度(单位:米)
-            "pitch": 30,                           //镜头俯仰角(-89~89)
-            "pitch_limit": "-85,89",               //镜头俯仰角范围(-89~89)
-            "yaw": 30,                             //镜头偏航角(0正北, 0~359)
-            "yaw_limit": "0,179",                  //镜头偏航角范围(0正北, 0~359)
-            "arm_distance": 10,                   //镜头距(地面、表面、海拔)距离(单位:米)
-            "arm_distance_limit": "10,10000",      //镜头距(地面、表面、海拔)距离范围(单位:米)
-            "speed_ratio": 3                       //倍率, 取值范围(1~5)
-          }
-          window.sysCloudRender.SuperAPI("SetSandtablesMode", sandMode, (status) => {
-            window.sysCloudRender.SuperAPI("AddPOI", poiInfo, (status) => {
-              console.log(status); //成功、失败回调
-              console.log('拾取成功');
-              let jsondata = {
-                "trace_object_type": "poi",    //支持类型：aes_object  ,poi，场景特效，可视域，3D文字，灯光
-                "trace_object_id": selectedNode.id, //对象ID
-                "arm_distance": 1,
-                "fly": false
-              }
-              window.sysCloudRender.SuperAPI("CameraTrace", jsondata, (status) => {
-                console.log(status); //成功、失败回调
-                let walkMode = {
-                  "reset_attitude": true,       //true: 使用当前自定义字段限制; false: 使用当前相机的默认参数以及限制
-                  "pitch": 30,                  //镜头俯仰角(-89~89)
-                  "pitch_limit": "-85,89",      //镜头俯仰角范围(-89~89)
-                  "yaw": 30,                    //镜头偏航角(0正北, 0~359)
-                  "yaw_limit": "0,359",         //镜头偏航角范围(0正北, 0~359)
-                  "speed": 10,                  //行走速度(单位:米), 取值范围(1~50)
-                  "speed_ratio": 3,             //行走倍率, 取值范围(1~5)
-                  "eye_height": 3,              //视眼高度(单位:米), 取值范围在(0.2~3)
-                  "teleport": true              //下落方式; true:瞬间下落; false:自由落体
-                }
-                window.sysCloudRender.SuperAPI("SetWalkMode", walkMode, (status) => {
-                  console.log(status); //成功、失败回调
-                })
-              })
-            })
-          })
-        } catch {
-          message.error('点位信息不正确，请重新拾取')
-        }
-      }
-    }
-    /**
-     * 遍历树结构插入视频点位数据
-     */
-    const getMenuBtnList = (menuTreeList, menuList) => {
-      for (let item of menuTreeList) {
-        menuList.forEach((videoItem, i) => {
-          if (item.id === videoItem.unitgeoId) {
-            item.children ? item.children.splice(0, 0, videoItem) : item.children = [videoItem];
-            menuList.splice(i, 1);
-          }
-        })
-
-        if (!menuList.length) {
-          return;
-        }
-
-        if (item.hasOwnProperty('children') && item.children.length > 0) {
-          getMenuBtnList(item.children, menuList);
-        }
-      }
-    }
-    /**
-     * 当编辑面板大小发生改变时
-     */
-    watch(
-      () => data.bottomPanelHeight,
-      (val) => {
-        data.topPanelHeight = `calc(100% - ${val})`;
-      }
-    );
-    /**
-     * 查询事件
-     */
-    const queryClick = () => {
-      console.log('查询');
-      //遍历后拿到展开的节点
-      if (data.queryParam.keyword === '') {
-        message.error('请输入关键词搜索');
-        return;
-      }
-      data.searchValue = data.queryParam.keyword
-      console.log(data.searchValue);
-      // console.log(data.geoTreeData);
-      // queryFun(data.geoTreeData)
-      // console.log(data.expandedKeys);
-    };
-    const queryFun = (treeList) => {
-      for (let item of treeList) {
-        if (item.unnm === data.queryParam.keyword) {
-          data.expandedKeys.push(item.id)
-        }
-        if (item.hasOwnProperty('children') && item.children.length > 0) {
-          queryFun(item.children);
-        }
-      }
-    }
-    /**
-     * 操作事件
-     */
-    const treeOptClick = (obj, type) => {
-      console.log('操作类型和数据', obj, type);
-      data.selectedNodeData = obj.dataRef
-      //新增和修改可打开编辑面板
-      if (['update', 'add'].includes(type)) {
-        data.bottomPanelHeight = '466px';
-        if (type === 'update') data.formTitle = '修改视频点位';
-        else data.formTitle = '新增视频点位';
-      } else if (type === 'delete') {
-        delVideoByIds({ ids: obj.dataRef.id }).then(res => {
-          if (res.result) {
-            message.success('删除点位成功')
-            getAllData()
-          } else {
-            message.error('删除点位失败，请检查网络等问题！')
-          }
-        })
-      }
-    };
-    /**
-     * 关闭面板
-     */
-    const closePanel = () => {
-      data.bottomPanelHeight = '0px';
-    };
-    /**
-     * 新增点位确认事件
-    */
-    const onSubmit = (form) => {
-      console.log(form);
-      getAllData()
-      closePanel()
-    }
-    onMounted(() => { });
-    return {
-      ...toRefs(data),
-      treeNodeSelect,
-      queryClick,
-      treeOptClick,
-      closePanel,
-      onSubmit
-    };
-  },
-});
-</script>
-      
-<style lang="less" scoped>
-.video-point {
-  position: relative;
-  height: 100%;
-  width: 400px;
-  // margin-right: 20px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-  .top-panel {
-    width: 100%;
-    height: v-bind(topPanelHeight);
-
-    .query-content {
-      width: 100%;
-      height: 70px;
-      padding: 20px 6px;
-
-      .query-col {
-        height: 40px;
-        width: 100%;
-        padding: 0 4px;
-        margin-bottom: 16px;
-
-        .content {
-          display: flex;
-          height: 100%;
-          width: 100%;
-          background: rgba(3, 49, 79, 0.3);
-          box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-          .label {
-            display: flex;
-            justify-content: center;
-            height: 40px;
-            line-height: 40px;
-            width: 70px;
-            box-shadow: inset 0px 0px 3px 0px rgba(10, 99, 183, 0.5);
-          }
-
-          .value {
-            display: flex;
-            height: 100%;
-            width: calc(100% - 70px);
-
-            ::v-deep.ant-select-selector {
-              height: 100% !important;
-            }
-          }
-
-          .btn {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-
-            &:hover {
-              cursor: pointer;
-              box-shadow: inset 0px 0px 3px 3px rgba(40, 185, 243, 0.5);
-            }
-
-            .img {
-              height: 31px;
-              width: 31px;
-              background: url('/@/assets/images/button/query.png') no-repeat;
-              background-size: 100% 100%;
-            }
-          }
-        }
-      }
-    }
-
-    .tree-panel {
-      height: calc(100% - 70px);
-    }
-  }
-
-  .bottom-panel {
-    width: 100%;
-    height: v-bind(bottomPanelHeight);
-  }
-}
-
-::v-deep .self-select {
-  .ant-select-selector {
-    border: 0px !important;
-
-    .ant-select-arrow {
-      color: aqua;
-    }
-  }
-}
-</style>
-      

src/views/SystemManage/component/WarnRules.vue

@@ -1,617 +0,0 @@
-<!--
- * @Author: Xiax
- * @Date: 2023-07-03 16:12:50
- * @LastEditTime: 2024-08-24 10:13:37
- * @LastEditors: tengmingxue 1473375109@qq.com
- * @Description: 异常规则管理
- * @FilePath: \xld_web\src\views\SystemManage\component\WarnRules.vue
- * 版权声明
--->
-<template>
-  <div class="machine-status">
-    <div class="title-label">异常规则管理</div>
-    <div class="title-fun">
-      <div class="search-group">
-        <span>关键字：</span>
-        <div class="query-content">
-          <a-input v-model:value="queryParam.keyword" placeholder="请输入测点编号、描述" style="width: 200px" />
-        </div>
-        <div class="btn" @click="queryClick">
-          <div class="img"></div>
-        </div>
-      </div>
-      <div class="btn-group">
-        <span class="btn" @click="addRecord">
-          <span class="add-btn"></span>
-        </span>
-        <span class="btn" @click="delRecord">
-          <span class="del-btn"></span>
-        </span>
-      </div>
-    </div>
-    <div class="content">
-      <div class="table-pannel">
-        <template v-if="!dataSource.length">
-          <a-empty :image="simpleImage" />
-        </template>
-        <a-table v-if="dataSource.length" :rowKey="(r) => r.id" :row-selection="rowSelection" :columns="columns"
-          :data-source="dataSource" :pagination="paginationOpt" @change="tableChange" style="height: 100%;">
-          <template #func="{ record }">
-            <div class="editable-row-operations">
-              <a @click="onEdit(record)">修改</a>
-              <a @click="onDelete(record)">删除</a>
-            </div>
-          </template>
-        </a-table>
-      </div>
-    </div>
-    <!-- 新增弹窗 -->
-    <a-modal v-model:visible="showDialog" :title="null" :footer="null" wrapClassName="wrap-power" :centered="true"
-      :width="500" :destroyOnClose="true" :maskClosable="false" >
-      <div style="height: 385px; width: 100%" class="dialogclass">
-        <div class="title">{{ modalTitle }}</div>
-        <div class="dialog-content">
-          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-form-item label="测点编号" name="stcd">
-              <a-input v-model:value="formState.stcd" placeholder="请输入测点编号/ID" :disabled="ifDisable"/>
-            </a-form-item>
-            <a-form-item label="测点描述" name="stnm">
-              <a-input v-model:value="formState.stnm" placeholder="请输入测点描述"/>
-            </a-form-item>
-            <a-form-item label="判断测点集合" name="rstce">
-              <a-input v-model:value="formState.rstce" placeholder="多个测点以$$分割(2401$$2402)"/>
-            </a-form-item>
-            <a-form-item label="判断条件" name="whereStr">
-              <a-input v-model:value="formState.whereStr" placeholder="条件语句如：(2401==1&&2402==2)||2403<5"/>
-            </a-form-item>
-          </a-form>
-          <div class="btn-gropu">
-            <span class="btn" @click="cancelClick">取消</span>
-            <span class="btn" @click="onSubmit">确定</span>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-        
-<script>
-import { defineComponent, reactive, ref, toRefs, computed, onMounted, onBeforeUnmount, watch, h, createVNode } from 'vue';
-import moment from 'moment';
-import { message, Empty, Modal } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-// import {
-//   addRule,
-//   editRule,
-//   delRuleById,
-//   delRuleByIds,
-//   getRulePage
-// } from '/@/api/sys/systemManage';
-
-export default defineComponent({
-  name: 'MachineStatus',
-  components: {},
-  setup(props, { emit }) {
-    const formRef = ref();
-    const data = reactive({
-      queryParam: {
-        keyword: "",
-        selectDate: [moment(new Date()).format('YYYY-MM-DD HH'), moment(new Date()).add(1, 'month').format('YYYY-MM-DD HH')]
-      },
-      columns: [
-        {
-          title: "序号",
-          dataIndex: "key",
-          key: "key",
-          align: "center",
-          width: 70,
-          customRender: ({text,record,index}) => `${index+1}`,//此处为重点
-        },
-        {
-          title: '测点编号',
-          dataIndex: 'stcd',
-          align: 'center',
-        },
-        {
-          title: '测点描述',
-          dataIndex: 'stnm',
-          align: 'center',
-        },
-        {
-          title: '判断测点集合',
-          dataIndex: 'rstce',
-          align: 'center',
-        },
-        {
-          title: '判断条件',
-          dataIndex: 'whereStr',
-          align: 'center',
-        },
-        {
-          title: '操作',
-          dataIndex: 'func',
-          align: 'center',
-          slots: {
-            customRender: 'func',
-          },
-        }
-      ],
-      dataSource: [],
-      showDialog: false,//新增弹窗
-      formState: {
-        stcd: "",
-        stnm: "",
-        rstce: "",
-        whereStr: ""
-      },
-      paginationOpt: {
-        pageSize: 10,
-        total: 0,
-        current: 1
-      },
-      selectedRowKeys: [],//选中的行
-      dialogType: 'add',
-      editId: null,
-      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
-      modalTitle: '新增判断规则'
-    });
-    watch(
-      () => data.dialogType,
-      (val) => {
-        if (val === 'add') {
-          data.modalTitle = '新增判断规则'
-        } else {
-          data.modalTitle = '修改判断规则'
-        }
-      }
-    )
-    const ifDisable = computed(()=>{
-      return data.dialogType === 'edit'
-    })
-    //弹窗验证规则
-    const rules = {
-      stcd: [{ required: true, message: '请填写测点编号', trigger: 'blur' }],
-      stnm: [{ required: true, message: '请填写测点描述', trigger: 'blur' }],
-      rstce: [{ required: true, message: '请填写测点集合', trigger: 'blur' }],
-      whereStr: [{ required: true, message: '请填写判断规则', trigger: 'blur' }],
-    };
-    onMounted(() => {
-      getAllData()
-    });
-    //查询表格页面数据
-    const getAllData = () => {
-      let searchParams = {
-        current: data.paginationOpt.current,
-        size: data.paginationOpt.pageSize,
-        keyQuery: data.queryParam.keyword
-      }
-      getRulePage(searchParams).then(res=>{
-        if(res.result && res.result?.records){
-          data.dataSource = res.result.records
-          data.paginationOpt.total = res.result.total
-        }
-      })
-    }
-    //表格改变事件
-    const tableChange = (pagination, filters, sorter, { currentDataSource }) => {
-      data.paginationOpt = pagination
-      getAllData()
-    }
-    //列表选择事件
-    const rowSelection = {
-      onChange: selectedRowKeys => {
-        console.log(selectedRowKeys)
-        data.selectedRowKeys = selectedRowKeys
-      }
-    };
-    /**
-     * @description: 搜索按钮事件
-     * @return {*}
-     * @use: 
-     */
-    const queryClick = () => {
-      getAllData()
-    }
-    /**
-     * @description: 列表删除某一行
-     * @param {*} record
-     * @return {*}
-     * @use: 
-     */
-    const onDelete = (record) => {
-      Modal.confirm({
-        title: '确认删除该测点规则?',
-        icon: createVNode(ExclamationCircleOutlined),
-        content: '删除后不可恢复，请确认操作无误！',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk() {
-          delRuleById(record.id).then(res => {
-            if (res.result) {
-              message.success('删除成功')
-              data.paginationOpt.current = 1
-              getAllData()
-            } else {
-              message.error(res.message)
-            }
-          })
-        }
-      });
-    };
-    /**
-     * @description: 列表修改某一行
-     * @param {*} record
-     * @return {*}
-     * @use: 
-     */
-    const onEdit = (record) => {
-      data.formState = {
-        stcd: record.stcd,
-        stnm: record.stnm,
-        rstce: record.rstce,
-        whereStr: record.whereStr
-      }
-      data.editId = record.id
-      data.dialogType = 'edit'
-      data.showDialog = true
-    };
-    /**
-     * @description: 新增检修记录
-     * @return {*}
-     * @use: 
-     */
-    const addRecord = () => {
-      data.dialogType = 'add'
-      data.formState = {
-        stcd: "",
-        stnm: "",
-        rstce: "",
-        whereStr: ""
-      }
-      data.showDialog = true
-    }
-    /**
-     * @description: 删除检修记录
-     * @return {*}
-     * @use: 
-     */
-    const delRecord = () => {
-      if (!data.selectedRowKeys.length) {
-        message.error('请先选择要删除的数据')
-        return
-      }
-      Modal.confirm({
-        title: '确认删除该测点规则?',
-        icon: createVNode(ExclamationCircleOutlined),
-        content: '删除后不可恢复，请确认操作无误！',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk() {
-          let ids = data.selectedRowKeys.toString()
-          
-          delRuleByIds({ ids: ids }).then(res => {
-            if (res.code===1) {
-              message.success('删除成功')
-              data.paginationOpt.current = 1
-              getAllData()
-            } else {
-              message.error(res.message)
-            }
-          })
-        }
-      });
-    }
-    /**
-     * @description: 新增弹窗确认按钮
-     * @return {*}
-     * @use: 
-     */
-    const onSubmit = () => {
-      formRef.value
-        .validate()
-        .then(() => {
-          if (data.dialogType === 'add') {
-            addRule(data.formState).then(res => {
-              if (res.code===1) {
-                message.success('新增成功')
-                cancelClick()
-                data.paginationOpt.current = 1
-                getAllData()
-              } else {
-                message.error(res.message)
-              }
-            })
-          } else {
-            let params = {
-              id: data.editId,
-              ...data.formState
-            }
-            editRule(params).then(res => {
-              if (res.code===1) {
-                message.success('修改成功')
-                cancelClick()
-                data.paginationOpt.current = 1
-                getAllData()
-              } else {
-                message.error(res.message)
-              }
-            })
-          }
-        })
-        .catch((error) => {
-          console.log('error', error);
-        });
-    }
-    /**
-     * 重置表单
-     */
-    const resetForm = () => {
-      formRef.value.resetFields();
-      data.dialogType = 'add'
-    };
-    /**
-     * @description: 弹窗取消按钮
-     * @return {*}
-     * @use: 
-     */
-    const cancelClick = () => {
-      data.showDialog = false;
-      resetForm()
-    };
-
-    onBeforeUnmount(()=>{
-    })
-    return {
-      formRef,
-      ifDisable,
-      ...toRefs(data),
-      tableChange,
-      rowSelection,
-      rules,
-      labelCol: { span: 6 },
-      wrapperCol: { span: 16 },
-      queryClick,
-      onDelete,
-      onEdit,
-      addRecord,
-      delRecord,
-      onSubmit,
-      cancelClick
-    };
-  },
-});
-</script>
-        
-<style lang="less" scoped>
-.machine-status {
-  height: 100%;
-  width: 100%;
-  padding: 0 20px 20px;
-  color: #feffff;
-  // background: rgba(3, 49, 79, 0.3);
-  // background: rgb(3, 49, 79);
-  overflow: hidden;
-
-  .title-label {
-    margin: 15px 0 11px;
-    height: 34px;
-    font-size: 16px;
-    font-family: Source Han Sans CN;
-    font-weight: 400;
-    color: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .title-fun {
-    margin: 10px 0;
-    height: 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .search-group {
-      display: flex;
-      align-items: center;
-
-      .query-content {
-        margin: 0 20px 0 10px;
-        height: 100%;
-        // width: 200px;
-        padding: 0;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-        input {
-          width: 200px;
-        }
-      }
-
-      .btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 50px;
-        height: 100%;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-        &:hover {
-          cursor: pointer;
-          box-shadow: inset 0px 0px 3px 3px rgba(40, 185, 243, 0.5);
-        }
-
-        .img {
-          height: 31px;
-          width: 31px;
-          background: url('/@/assets/images/button/query.png') no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-    }
-
-    .btn-group {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .search-box {
-        margin-right: 47px;
-        width: 260px;
-        height: 34px;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-
-        .search-btn {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-
-          .img {
-            height: 31px;
-            width: 31px;
-            background: url('/@/assets/images/button/query.png') no-repeat;
-            background-size: 100% 100%;
-          }
-        }
-      }
-
-      .btn {
-        display: flex;
-        background-size: 100% 100%;
-        width: 50px;
-        height: 36px;
-        background: rgba(3, 55, 78, 0.6);
-        border-radius: 4px;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-        cursor: pointer;
-
-        &:hover {
-          background: rgba(115, 183, 209, 0.5);
-        }
-
-        .add-btn {
-          display: flex;
-          height: 31px;
-          width: 31px;
-          background: url('/@/assets/images/button/add.png') no-repeat;
-        }
-
-        .del-btn {
-          display: flex;
-          height: 31px;
-          width: 31px;
-          background: url('/@/assets/images/button/delete.png') no-repeat;
-        }
-      }
-    }
-  }
-
-  .content {
-    position: relative;
-    height: calc(100% - 120px);
-    color: #feffff;
-    display: flex;
-
-    .table-pannel {
-      width: 100%;
-      background: rgba(3, 49, 79, 0.3);
-      box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: #13FCFF;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .editable-row-operations {
-        a {
-          margin-right: 8px;
-        }
-      }
-
-      ::v-deep .ant-table-wrapper {
-        width: 98%;
-      }
-
-      ::v-deep .ant-table {
-        background: none;
-      }
-
-      ::v-deep .ant-table-thead>tr>th {
-        background: none;
-        border-bottom: 1px solid rgba(10, 103, 143, 0.26);
-      }
-
-      ::v-deep .ant-table-tbody>tr>td {
-        color: #ffffff;
-        border-bottom: 1px solid rgba(10, 103, 143, 0.26);
-      }
-
-      ::v-deep .ant-table-pagination.ant-pagination {
-        margin-right: 10px;
-      }
-    }
-  }
-}
-
-.dialogclass {
-  // background: url('/@/assets/images/dialog/small.png') no-repeat;
-  // background-size: 100% 100%;
-
-  .title {
-    height: 60px;
-    width: 80%;
-    line-height: 60px;
-    padding-left: 33px;
-  }
-
-  .dialog-content {
-    height: calc(100% - 60px);
-    width: 100%;
-    padding: 10px 40px;
-
-    //display: flex;
-    //justify-content: center;
-    //align-items: center;
-    .btn-gropu {
-      position: absolute;
-      display: flex;
-      height: 40px;
-      width: calc(100% - 80px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      bottom: 36px;
-
-      .btn {
-        height: 40px;
-        width: 80px;
-        text-align: center;
-        line-height: 40px;
-        margin: 0 20px;
-        color: #feffff;
-        background: rgba(3, 49, 79, 0.3);
-        box-shadow: inset 0px 0px 3px 3px rgba(22, 192, 255, 0.5);
-        cursor: pointer;
-        user-select: none;
-
-        &:hover {
-          color: #04ecef;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/SystemManage/component/dictionary.vue

@@ -0,0 +1,234 @@
+
+
+<template>
+  <div class="dictionary-manage">
+    <div class="left-box">
+      <div class="title">字典类型</div>
+      <div class="content-box"></div>
+      <div class="table-box">
+        <a-table
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :columns="columns"
+          :data-source="typeData"
+        >
+          <template #operation="{ record }">
+            <span
+              style="margin: 0 8px; color: #16fff7; font-size: 14px; cursor: pointer"
+              @click="editRow(record)"
+              >编辑</span
+            >
+            <span @click="delRow(record)" style="margin: 0 8px; font-size: 14px; cursor: pointer"
+              >删除</span
+            >
+          </template>
+        </a-table>
+      </div>
+    </div>
+    <div class="right-box">
+      <div class="title">字典值列表</div>
+      <div class="content-box"></div>
+      <div class="table-box">
+        <a-table
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :columns="columns1"
+          :data-source="typeData"
+        >
+          <template #operation="{ record }">
+            <span
+              style="margin: 0 8px; color: #16fff7; font-size: 14px; cursor: pointer"
+              @click="editRow(record)"
+              >编辑</span
+            >
+            <span @click="delRow(record)" style="margin: 0 8px; font-size: 14px; cursor: pointer"
+              >删除</span
+            >
+          </template>
+        </a-table>
+      </div>
+    </div>
+  </div>
+</template>
+    
+  <script>
+import {
+  defineComponent,
+  reactive,
+  ref,
+  toRefs,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from 'vue';
+
+export default defineComponent({
+  name: 'dictionary',
+  components: {},
+  setup() {
+    const data = reactive({
+      show: true,
+      selectedRowKeys: [],
+    });
+    let selectedRowKeys = [];
+    const columns = ref([
+      {
+        title: '字典类型名称',
+        dataIndex: 'dicTypeName',
+        align: 'center',
+      },
+      {
+        title: '字典类型编码',
+        dataIndex: 'dicTypeCode',
+        align: 'center',
+      },
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        slots: { customRender: 'operation' },
+        align: 'center',
+        width: 120,
+      },
+    ]);
+    const columns1 = ref([
+      {
+        title: '字典名称',
+        dataIndex: 'dicName',
+      },
+      {
+        title: '字典编码',
+        dataIndex: 'dicCode',
+      },
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        slots: { customRender: 'operation' },
+        width: 120,
+      },
+    ]);
+    const typeData = ref([
+      { key: 1, dicTypeName: '字典名称', dicTypeCode: 'Cd1', sort: 1 },
+      { key: 2, dicTypeName: '字典名称', dicTypeCode: 'Cd2', sort: 1 },
+      { key: 3, dicTypeName: '字典名称', dicTypeCode: 'Cd3', sort: 1 },
+    ]);
+    const editRow = (record) => {};
+    const delRow = (record) => {};
+
+    onMounted(() => {});
+    /**
+     * 选择改变
+     */
+    const onSelectChange = (rowKeys) => {
+      data.selectedRowKeys = rowKeys;
+    };
+
+    onBeforeUnmount(() => {});
+    return {
+      typeData,
+      columns,
+      columns1,
+      ...toRefs(data),
+      onSelectChange,
+    };
+  },
+});
+</script>
+    
+  <style lang="less" scoped>
+.dictionary-manage {
+  height: 100%;
+  width: 100%;
+  .left-box {
+    float: left;
+    width: 50%;
+    height: 100%;
+    padding: 10px;
+  }
+  .right-box {
+    float: left;
+    width: 50%;
+    height: 100%;
+    padding: 10px;
+  }
+  .title {
+    height: 20px;
+    padding: 0 8px;
+    border-left: 4px solid #16c0ff;
+    font-size: 16px;
+    line-height: 20px;
+  }
+  .content-box {
+    height: 40px;
+    width: 100%;
+  }
+  .table-box {
+    height: calc(100% - 70px);
+    width: 100%;
+  }
+}
+
+::v-deep .ant-table {
+  color: #f9f9f9 !important;
+  .ant-table-thead {
+    background-color: rgba(12, 55, 94, 1);
+    tr {
+      th {
+        background-color: rgba(22, 192, 255, 0.14);
+      }
+    }
+  }
+  .ant-table-thead > tr > th {
+    color: rgba(255, 255, 255, 1) !important;
+    //border-bottom: 1px solid #f0ecec !important;
+  }
+  .ant-table-header {
+    overflow-y: hidden !important;
+  }
+  .ant-table-thead > tr > th {
+    background: rgba(4, 38, 70, 0.2) !important;
+  }
+
+  .ant-table-tbody tr:nth-child(2n) {
+    background-color: rgba(12, 55, 94, 0.8);
+  }
+  .ant-table-tbody tr:nth-child(2n - 1) {
+    background-color: rgba(12, 55, 94, 0.8);
+  }
+}
+.ant-table-striped {
+  ::v-deep .ant-table-thead > tr > th {
+    background: #07b2ff2e;
+    padding: 13px 16px;
+    color: #2ab4eb !important;
+  }
+
+  ::v-deep .ant-table {
+    background: transparent;
+  }
+
+  ::v-deep .table-striped {
+    background-color: rgba(255, 255, 255, 0);
+
+    td {
+      font-size: 16px;
+      padding: 9px 16px;
+    }
+  }
+
+  ::v-deep .table-no-striped {
+    background-color: transparent;
+
+    td {
+      font-size: 16px;
+      padding: 9px 16px;
+    }
+  }
+}
+
+::v-deep .ant-table-pagination {
+  display: flex;
+  justify-content: end;
+  width: 100%;
+}
+
+</style>
+    

src/views/SystemManage/component/form/layerForm.vue

@@ -0,0 +1,167 @@
+
+<template>
+    <div class="space-location-form">
+      <div class="content">
+        <a-form ref="formRef" :model="form" :rules="rules">
+          <a-form-item label="iserver地址：" name="unitgeoId" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-input v-model:value="form.unitgeoId" disabled />
+          </a-form-item>
+  
+          <a-form-item ref="vdnm" label="地图名称：" name="vdnm" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-input v-model:value="form.vdnm" />
+          </a-form-item>
+  
+          <a-form-item ref="vdcd" label="图层名称：" name="vdcd" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-input v-model:value="form.vdcd" />
+          </a-form-item>
+  
+          <a-form-item ref="url" label="图层别名：" name="url" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-input v-model:value="form.url" />
+          </a-form-item>
+  
+          <a-form-item ref="note" label="数据源名称：" name="note" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-input v-model:value="form.note" />
+          </a-form-item>
+  
+          <a-form-item ref="loc" label="数据类型" name="loc" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-input v-model:value="form.loc" disabled />
+          </a-form-item>
+        </a-form>
+      </div>
+      <div class="footer-btn">
+        <div class="btn cancel-btn" @click="closeClick">取消</div>
+        <div class="btn submit-btn" @click="submitClick">确定</div>
+      </div>
+    </div>
+  </template>
+          
+  <script>
+  import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, onBeforeUnmount } from 'vue';
+  import { notification, message  } from 'ant-design-vue';
+  const props = {
+    selectedNodeData: {
+      type: Object,
+      required: false
+    }
+  };
+  
+  export default defineComponent({
+    name: 'VideoPointForm',
+    components: {},
+    props,
+    setup(props, { emit }) {
+      const formRef = ref()
+      const data = reactive({});
+      const form = reactive({
+        id: 0,//自身id，新增时不修改它，但上传时要删掉这个属性
+        vdnm: '',//点位名称
+        vdcd: '',//点位编码
+        url: '',//视频链接
+        note: '',//点位位置描述
+        loc: '',//视频点位位置
+      });
+      const rules = {
+        vdnm: [
+          { required: true, message: '请输入点位名称', trigger: 'blur' },
+          { min: 2, max: 100, message: '点位名称长度不符合', trigger: 'blur' },
+        ],
+        vdcd: [{ required: true, message: '请输入点位编码', trigger: 'blur' }],
+        url: [{ required: true, message: '请输入视频链接', trigger: 'blur' }],
+        note: [{ required: true, message: '请输入点位描述', trigger: 'blur' }],
+        loc: [{ required: true, message: '请拾取点位位置', trigger: 'blur' }],
+      };
+      onMounted(() => {
+        
+      })
+      watch(
+        () => [props.selectedNodeData],
+        ([newData], [oldData]) => {
+        //   form.unitgeoId = newData.id
+        //   newTitle === '修改视频点位' && getVideoInfoById(form.unitgeoId)
+        //   console.log(newTitle, newData);
+        }
+      );
+     
+      //点击取消
+      const closeClick = () => {
+        emit('closePanel');
+      };
+      //点击确定
+      const submitClick = () => {
+        formRef.value
+          .validate()
+          .then(() => {
+            if (data.title === '新增视频点位') {
+              // 此处新增
+              // 清空id属性
+              form.id = null
+              addVideo(form).then(res => {
+                if (res.result) {
+                  emit('onSubmit', form)
+                }
+              })
+            } else {
+              editVideo(form).then(res => {
+                console.log(res);
+              })
+            }
+  
+          })
+          .catch((error) => {
+            console.log('error', error);
+          });
+      }
+      onBeforeUnmount(()=>{
+
+      })
+      return {
+        formRef,
+        ...toRefs(data),
+        form,
+        rules,
+        labelCol: { span: 6 },
+        wrapperCol: { span: 18 },
+        labelColHalf: { span: 6 },
+        wrapperColHalf: { span: 6 },
+        closeClick,
+        submitClick
+      };
+    },
+  });
+  </script>
+          
+  <style lang="less" scoped>
+  .space-location-form {
+    height: 100%;
+    width: 100;
+    box-shadow: inset 0px 3px 0px 0px rgba(115, 183, 209, 0.5);
+  
+    .content {
+      height: calc(100% - 90px);
+      padding: 20px;
+      overflow: auto;
+    }
+  
+    .footer-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+  
+      .btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        width: 90px;
+        color: #feffff;
+        background: rgba(3, 49, 79, 0.3);
+        box-shadow: inset 0px 0px 3px 3px rgba(115, 183, 209, 0.5);
+        margin: 10px;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+  </style>
+          

src/views/SystemManage/component/metaDataMng.vue

@@ -0,0 +1,351 @@
+
+
+<template>
+  <div class="dictionary-manage">
+    <div class="left-box">
+      <div class="title">数据类型</div>
+      <div class="content-box">
+        <a-input-search
+          v-model:value="value"
+          placeholder="关键字搜索"
+          style="width: 200px; border: 1px solid #619eff; float: left"
+          @search="onSearch"
+        />
+        <span class="query-btn">查询</span>
+        <span class="del-btn">删除</span>
+        <span class="add-btn">新增</span>
+      </div>
+      <div class="table-box">
+        <a-table
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :columns="columns"
+          :data-source="typeData"
+        >
+          <template #operation="{ record }">
+            <span
+              style="margin: 0 8px; color: #16fff7; font-size: 14px; cursor: pointer"
+              @click="editRow(record)"
+              >编辑</span
+            >
+            <span @click="delRow(record)" style="margin: 0 8px; font-size: 14px; cursor: pointer"
+              >删除</span
+            >
+          </template>
+        </a-table>
+      </div>
+    </div>
+    <div class="right-box">
+      <div class="title">数据详情</div>
+      <div class="content-box">
+        <a-input-search
+          v-model:value="value"
+          placeholder="关键字搜索"
+          style="width: 200px; border: 1px solid #619eff; float: left"
+          @search="onSearch"
+        />
+        <span class="query-btn">查询</span>
+      </div>
+      <div class="table-box">
+        <a-table
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :columns="columns1"
+          :data-source="typeData"
+        >
+          <template #operation="{ record }">
+            <span
+              style="margin: 0 8px; color: #16fff7; font-size: 14px; cursor: pointer"
+              @click="editRow(record)"
+              >编辑</span
+            >
+            <span @click="delRow(record)" style="margin: 0 8px; font-size: 14px; cursor: pointer"
+              >删除</span
+            >
+          </template>
+        </a-table>
+      </div>
+    </div>
+    <Dialog
+      :width="450"
+      :height="550"
+      v-if="showEditPanel"
+      :title="'编辑'"
+      @visibleChange="showEditPanel = false"
+    >
+      <template #contentBox="changeSizeFlag">
+        <LayerForm :changeSizeFlag="changeSizeFlag"></LayerForm>
+      </template>
+    </Dialog>
+  </div>
+</template>
+    
+  <script>
+import {
+  defineComponent,
+  reactive,
+  ref,
+  toRefs,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from 'vue';
+import Dialog from '/@/components/Dialog/index.vue';
+import LayerForm from './form/layerForm.vue'
+export default defineComponent({
+  name: 'dictionary',
+  components: { Dialog,LayerForm },
+  setup() {
+    const data = reactive({
+      show: true,
+      selectedRowKeys: [],
+      showEditPanel: false,
+    });
+    let selectedRowKeys = [];
+    const columns = ref([
+      {
+        title: '图层类型',
+        dataIndex: 'layerType',
+        align: 'center',
+      },
+      {
+        title: '要素集名称',
+        dataIndex: 'feaType',
+        align: 'center',
+      },
+      {
+        title: '数据类型',
+        dataIndex: 'dataType',
+        align: 'center',
+      },
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        slots: { customRender: 'operation' },
+        align: 'center',
+        width: 120,
+      },
+    ]);
+    const columns1 = ref([
+      {
+        title: '序号',
+        dataIndex: 'sort',
+        align: 'center',
+        width: 70,
+      },
+      {
+        title: '英文字段',
+        dataIndex: 'engField',
+        align: 'center',
+      },
+      {
+        title: '中文字段',
+        dataIndex: 'Field',
+        align: 'center',
+      },
+      {
+        title: '排序操作',
+        dataIndex: 'operation',
+        slots: { customRender: 'operation' },
+        align: 'center',
+        width: 120,
+      },
+      {
+        title: '是否运行更新',
+        dataIndex: 'opt1',
+        slots: { customRender: 'opt1' },
+        align: 'center',
+        width: 140,
+      },
+      {
+        title: '是否隐蔽',
+        dataIndex: 'opt2',
+        slots: { customRender: 'opt2' },
+        align: 'center',
+        width: 120,
+      },
+    ]);
+    const typeData = ref([
+      { key: 1, dicTypeName: '字典名称', dicTypeCode: 'Cd1', sort: 1 },
+      { key: 2, dicTypeName: '字典名称', dicTypeCode: 'Cd2', sort: 1 },
+      { key: 3, dicTypeName: '字典名称', dicTypeCode: 'Cd3', sort: 1 },
+    ]);
+
+    /**
+     * 编辑
+     */
+    const editRow = (record) => {
+      data.showEditPanel = true;
+    };
+    const delRow = (record) => {};
+
+    onMounted(() => {});
+    /**
+     * 选择改变
+     */
+    const onSelectChange = (rowKeys) => {
+      data.selectedRowKeys = rowKeys;
+    };
+
+    onBeforeUnmount(() => {});
+    return {
+      typeData,
+      columns,
+      columns1,
+      ...toRefs(data),
+      onSelectChange,
+      editRow,
+    };
+  },
+});
+</script>
+    
+  <style lang="less" scoped>
+.dictionary-manage {
+  height: 100%;
+  width: 100%;
+  .left-box {
+    float: left;
+    width: 50%;
+    height: 100%;
+    padding: 10px;
+  }
+  .right-box {
+    float: left;
+    width: 50%;
+    height: 100%;
+    padding: 10px;
+  }
+  .title {
+    height: 20px;
+    padding: 0 8px;
+    border-left: 4px solid #16c0ff;
+    font-size: 16px;
+    line-height: 20px;
+    margin-bottom: 8px;
+  }
+  .content-box {
+    height: 40px;
+    width: 100%;
+    .query-btn {
+      display: flex;
+      float: left;
+      width: 64px;
+      height: 34px;
+      line-height: 34px;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: normal;
+      border-radius: 4px;
+      opacity: 1;
+      background: linear-gradient(180deg, rgba(22, 192, 255, 0.9) 0%, rgba(22, 142, 255, 0.5) 100%);
+      margin-left: 10px;
+      cursor: pointer;
+    }
+    .add-btn {
+      display: flex;
+      float: right;
+      width: 64px;
+      height: 34px;
+      line-height: 34px;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: normal;
+      border-radius: 4px;
+      opacity: 1;
+      background: linear-gradient(180deg, rgba(22, 192, 255, 0.9) 0%, rgba(22, 142, 255, 0.5) 100%);
+      margin-left: 10px;
+      cursor: pointer;
+    }
+
+    .del-btn {
+      display: flex;
+      float: right;
+      width: 64px;
+      height: 34px;
+      line-height: 34px;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: normal;
+      border-radius: 4px;
+      opacity: 1;
+      margin-left: 10px;
+      border: 1px solid rgba(22, 192, 255, 0.8);
+      cursor: pointer;
+    }
+  }
+  .table-box {
+    height: calc(100% - 70px);
+    width: 100%;
+  }
+}
+
+::v-deep .ant-table {
+  color: #f9f9f9 !important;
+  .ant-table-thead {
+    background-color: rgba(12, 55, 94, 1);
+    tr {
+      th {
+        background-color: rgba(22, 192, 255, 0.14);
+      }
+    }
+  }
+  .ant-table-thead > tr > th {
+    color: rgba(255, 255, 255, 1) !important;
+    //border-bottom: 1px solid #f0ecec !important;
+  }
+  .ant-table-header {
+    overflow-y: hidden !important;
+  }
+  .ant-table-thead > tr > th {
+    background: rgba(4, 38, 70, 0.2) !important;
+  }
+
+  .ant-table-tbody tr:nth-child(2n) {
+    background-color: rgba(12, 55, 94, 0.8);
+  }
+  .ant-table-tbody tr:nth-child(2n - 1) {
+    background-color: rgba(12, 55, 94, 0.8);
+  }
+}
+.ant-table-striped {
+  ::v-deep .ant-table-thead > tr > th {
+    background: #07b2ff2e;
+    padding: 13px 16px;
+    color: #2ab4eb !important;
+  }
+
+  ::v-deep .ant-table {
+    background: transparent;
+  }
+
+  ::v-deep .table-striped {
+    background-color: rgba(255, 255, 255, 0);
+
+    td {
+      font-size: 16px;
+      padding: 9px 16px;
+    }
+  }
+
+  ::v-deep .table-no-striped {
+    background-color: transparent;
+
+    td {
+      font-size: 16px;
+      padding: 9px 16px;
+    }
+  }
+}
+
+::v-deep .ant-table-pagination {
+  display: flex;
+  justify-content: end;
+  width: 100%;
+}
+
+::v-deep .ant-checkbox-inner {
+  background-color: transparent;
+  border: 1px solid #2ab4eb !important;
+}
+</style>
+    

src/views/SystemManage/index.vue

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2023-06-25 15:24:06
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2024-08-28 09:51:47
+ * @LastEditTime: 2024-09-03 17:57:43
  * @FilePath: \xld_web\src\views\SystemManage\index.vue
  * @Description: 系统管理
 -->
@@ -10,10 +10,16 @@
 <template>
   <div class="system-manage">
     <div class="content">
-      <div class="map-panel" ref="mapBox">
- 
+      <div class="menu-panel" ref="mapBox">
+        <template v-for="menu in menus" :key="menu.id">
+          <div class="menu-item" :class="activeName === menu.id ? 'menu-item-active' : ''" @click="menuClick(menu.id)">{{ menu.name }}</div>
+        </template>
       </div>
-      <div class="opt-panel"
+
+      <div class="model-panel">
+        <component :is="activeName"></component>
+      </div>
+      <!-- <div class="opt-panel"
         :class="{ 'mask': activeName === 'InspectParam' || activeName === 'MachineStatus' || activeName === 'SysLog' || activeName === 'DiagnReport'  }">
         <div class="menu-content">
           <contents @changeMenu="changeMenu" />
@@ -21,180 +27,59 @@
         <div class="content-panel">
           <component :is="activeName"></component>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
   
 <script>
-import { defineComponent, reactive, ref, toRefs, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import {
+  defineComponent,
+  reactive,
+  ref,
+  toRefs,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useMapStore } from '/@/store/modules/map';
 // import { getViewConfigById } from '/@/api/sys/systemManage';
-import SystemMap from './component/SystemMap.vue';
-import Contents from './component/Contents.vue';
-import InitView from './component/InitView.vue'
-import InspectParam from './component/InspectParam.vue'
-import MachineFlag from './component/MachineFlag.vue'
-import SpaceLocation from './component/SpaceLocation.vue'
-import SysLog from './component/SysLog.vue'
-import VideoPoint from './component/VideoPoint.vue'
-import MachineStatus from './component/MachineStatus.vue';
-import InspectPoint from './component/InspectPoint.vue';
-import DiagnReport from './component/DiagnReport.vue';
-import WarnRules from './component/WarnRules.vue';
+
+import InspectParam from './component/InspectParam.vue';
+import SysLog from './component/SysLog.vue';
+import metaDataMng from './component/metaDataMng.vue';
+import dictionary from './component/dictionary.vue';
 
 export default defineComponent({
   name: 'SystemManage',
   components: {
-
-    Contents,
     SysLog,
-    InitView,
     InspectParam,
-    InspectPoint,
-    MachineFlag,
-    SpaceLocation,
-    VideoPoint,
-    MachineStatus,
-    SystemMap,
-    DiagnReport,
-    WarnRules
+    metaDataMng,
+    dictionary
   },
   setup() {
-    const myPlayer = ref()
-    const mapBox = ref()
     const data = reactive({
       show: true,
-      //地图
-      map: {
-        showTool: false,
-      },
-      optPanelWidth: 'calc(100% - 23px)',
-      showPanelWidth: 'calc(100% -  220px)',
-      activeName: 'SysLog',
+      activeName: 'metaDataMng',
     });
-    const mapStore = useMapStore();
-    mapStore.setShowMapMask(false);
-    /**
-     * 菜单改变
-    */
-    const changeMenu = (menu) => {
-      //根据菜单控制面板宽度
-      if (menu.panelWidth !== 'auto') {
-        data.optPanelWidth = 'calc(100% - 23px)'
-        data.showPanelWidth = 'calc(100% -  220px)'
-      }
-      else {
-        data.optPanelWidth = menu.panelWidth
-        data.showPanelWidth = menu.panelWidth
-      }
-      data.activeName = menu.component
-    };
-    /**
-     * 开始连接场景
-    */
-    const myStartRender = async (config) => {
-      try {
-        await window.sysCloudRender.startRender(config).then((el) => {
-          console.log("打印信息", el)
-          // 事件注册；事件监听处理器函数, 接收所有从云渲染返回的事件, 数据等信息
-          window.sysCloudRender.RegisterCloudResponse(myHandleResponseFunction);
-        })
-      } catch (error) {
-        console.error("error:", error)
-      }
-    }
-    /**
-     * 事件注册函数
-    */
-    const myHandleResponseFunction = (data) => {
-      const jsonObject = typeof data === "object" ? JSON.parse(JSON.stringify(data)) : JSON.parse(data);
-      switch (jsonObject.func_name) {
-        case "APIAlready":
-          console.log("APIAlready: 3D世界加载完成");
-          setResetCameraSpace()
-          break;
-      }
-      return data;
-    }
-
-    onMounted(() => {
+    const menus = [{id:'metaDataMng',name:'元数据管理'},{id:'dictionary',name:'字典管理'}]
 
-    });
     /**
-     * 设置镜头视界
-     */
-    const setCameraView = async () => {
-      const res = await getViewConfigById(1);
-      if (res.code === 1 && res.result.hasOwnProperty('viewExtent') && res.result.viewExtent) {
-        let camera = JSON.parse(res.result.viewExtent);
-        camera.fly = false
-        window.sysCloudRender.SuperAPI('SetCameraInfo', camera, (_back) => {
-          
-        });
-      } else {
-        let jsondata = {
-          coord_type: 0, //坐标类型(0:经纬度坐标, 1:cad坐标)
-          cad_mapkey: '', //CAD基准点Key值, 项目中约定
-          coord_z: 145.406479, //海拔高度(单位:米)
-          center_coord: '112.360650,34.926719', //中心点的坐标
-          arm_distance: 0, //镜头距中心点距离(单位:米)
-          pitch: 21.695374, //镜头俯仰角(0 ~ 89)
-          yaw: 308.0, //镜头偏航角(0正北, 0 ~ 359)
-          fly: false, //true/false // true: 飞行动画(有一个短暂飞行动画,并按照arm_distance,pitch,yaw设置镜头); false: 立刻跳转过去(瞬移)
-        };
-        window.sysCloudRender.SuperAPI('SetCameraInfo', jsondata, (_back) => {
-          // setCameraWalkMode();
-        });
-      }
-    };
-    /**
-     * 解除场景镜头限制
-     */
-    const setResetCameraSpace = () => {
-      let jsondata = {
-        state: 'free',
-      };
-      window.sysCloudRender.SuperAPI('ResetCameraSpace', jsondata, (_back) => {
-        //console.error('_back::: ', _back);
-        console.log('------设置解除场景镜头限制已完成--------');
-        setCameraWalkMode()
-      });
-    };
-    /**
-     * 设置行走模式
-     */
-    const setCameraWalkMode = () => {
-      let jsondata = {
-        "reset_attitude": true,       //true: 使用当前自定义字段限制; false: 使用当前相机的默认参数以及限制
-        "pitch": 36.3,                  //镜头俯仰角(-89~89)
-        "pitch_limit": "-85,89",      //镜头俯仰角范围(-89~89)
-        "yaw": 336,                    //镜头偏航角(0正北, 0~359)
-        "yaw_limit": "0,359",         //镜头偏航角范围(0正北, 0~359)
-        "speed": 10,                  //行走速度(单位:米), 取值范围(1~50)
-        "speed_ratio": 2,             //行走倍率, 取值范围(1~5)
-        "eye_height": 1.8,              //视眼高度(单位:米), 取值范围在(0.2~3)
-        "teleport": true              //下落方式; true:瞬间下落; false:自由落体
-      }
-      window.sysCloudRender.SuperAPI("SetWalkMode", jsondata, (status) => {
-        console.log('------设置镜头行走已完成--------');
-        setCameraView();
-      })
+     * 菜单事件
+    */
+    const menuClick = (id) => {
+      data.activeName = id
     }
+    onMounted(() => {});
 
-    onBeforeUnmount(() => {
-      window.sysCloudRender.StopRenderCloud();
-      mapStore.setShowTopAlarm(true);
-    })
+    onBeforeUnmount(() => {});
     return {
-      myPlayer,
-      mapBox,
       ...toRefs(data),
-      myStartRender,
-      myHandleResponseFunction,
-      mapStore,
-      changeMenu,
+      menus,
+      menuClick,
     };
   },
 });
@@ -212,16 +97,38 @@ export default defineComponent({
     margin-top: 67px;
     height: calc(100% - 67px);
     width: 100%;
-    // padding: 26px 29px;
-    padding: 8px 8px 15px 15px;
-    background: url('/@/assets/images/dialog/dialog-all.png') no-repeat;
-    background-size: 100% 100%;
+    padding: 8px;
 
-    .map-panel {
+    .menu-panel {
       position: relative;
+      float: left;
       height: 100%;
-      width: 100%;
+      width: 160px;
+      margin-right: 8px;
       overflow: hidden;
+      border-radius: 8px;
+      background: rgba(12, 55, 94, 0.7);
+      .menu-item{
+        height: 40px;
+        width: 100%;
+        padding-left: 20px;
+        line-height: 40px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+      .menu-item-active {
+        background: url('/@/assets/images/menus/menu-active.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+
+    .model-panel {
+      position: relative;
+      float: left;
+      height: 100%;
+      width: calc(100% - 168px);
+      border-radius: 8px;
+      background: rgba(12, 55, 94, 0.7);
     }
 
     .opt-panel {
@@ -235,23 +142,18 @@ export default defineComponent({
       width: v-bind(optPanelWidth);
       background: linear-gradient(90deg, rgba(2, 26, 41, 0.9) 0%, rgba(2, 26, 41, 0) 100%);
 
-      .menu-content {
-        width: 200px;
-        height: 100%;
-        margin-right: 20px;
-        background: rgb(2, 26, 41);
-      }
-
-      .content-panel {
-        height: 100%;
-        width: v-bind(showPanelWidth);
-        background: rgba(2, 26, 41, 0.9);
-      }
-    }
+      // .menu-content {
+      //   width: 200px;
+      //   height: 100%;
+      //   margin-right: 20px;
+      //   background: rgb(2, 26, 41);
+      // }
 
-    .mask {
-      background: #020c15;
-      border-radius: 0 15px 0 0;
+      // .content-panel {
+      //   height: 100%;
+      //   width: v-bind(showPanelWidth);
+      //   background: rgba(2, 26, 41, 0.9);
+      // }
     }
   }
 }

src/views/components/Header/DateTimeTool.vue

@@ -13,7 +13,7 @@
                 <div class="week-data">{{ week }}</div>
                 <div class="week-data">{{ day }}</div>
             </div>
-            <!-- <img class="setting" @click="setClick" src="../../assets/images/setting.png" alt="设置" title="设置" /> -->
+            <img class="setting" @click="setClick" src="../../../assets/images/setting.png" alt="设置" title="设置" />
             <!-- <img class="sysout" @click="loginOut" src="../../assets/images/sysout.png" alt="退出系统" title="退出系统"/> -->
         </div>
         <!-- <div class="mode-change" v-if="ifShowMode">
@@ -40,12 +40,13 @@ import moment from 'moment';
 // import { useUserStore } from '/@/store/modules/user';
 // import { useMapStore } from '/@/store/modules/map';
 // import { useRouter, useRoute } from 'vue-router';
-
+import { usePanelStore } from '/@/store/modules/panel'
 export default defineComponent({
     name: 'Weather',
     setup() {
         // const router = useRouter();
         // const mapStore = useMapStore();
+        const panelStore = usePanelStore()
         const data = reactive({
             dateTime: null,
             day: null,
@@ -158,13 +159,15 @@ export default defineComponent({
         // const loginOut = () => {
         //   userStore.confirmLoginOut();
         // };
-        // const setClick = () => {
-        //   //跳转到系统管理
+        const setClick = () => {
+          //跳转到系统管理
         //   const path = '/systemManage'
         //   router.push({
         //     path,
         //   })
-        // }
+          panelStore.setOpenSettingPanel(!panelStore.openSettingPanel)
+          panelStore.setActiveMenu('')
+        }
         onMounted(() => {
             data.timeInterval = setInterval(() => {
                 time();
@@ -174,7 +177,8 @@ export default defineComponent({
             //   radioStyle,
             ...toRefs(data),
             // loginOut,
-            // setClick,
+            setClick,
+            panelStore,
             // router,
             // changeModeSubmit
         };
@@ -200,9 +204,7 @@ export default defineComponent({
         user-select: none;
 
         .date {
-            // float: left;
-            // width: 112px;
-            // height: 38px;
+            width: 112px;
             font-size: 30px;
             font-family: DS-Digital;
             font-weight: normal;

src/views/components/Header/Menu.vue

@@ -59,6 +59,7 @@ export default defineComponent({
       // router.push({
       //   path,
       // });
+      panelStore.setOpenSettingPanel(false)
     };
 
     // 路由监控

src/views/index.vue

@@ -7,6 +7,13 @@
     <div class="top-header-box">
       <topHeader />
     </div>
+    <div class="setting-panel" v-show="openSettingPanel">
+      <div class="title"></div>
+      <div class="config-box">
+        <SysMng />
+      </div>
+    </div>
+    <!-- <router-view/> -->
     <!-- 左侧菜单 -->
     <div class="left-pannel">
       <!-- <div class="left-top">
@@ -49,10 +56,8 @@ import topHeader from '/@/views/components/Header/index.vue';
 import Fold from '/@/views/components/Fold/index.vue';
 import popUp from '/@/views/components/Popup/index.vue';
 import LayersTools from './components/LayersTools/index.vue';
-
 import eventBus from '/@/utils/eventBus';
 import { getLayersInfo } from '/@/api/sys/layerInfo'
-
 import { useMapToolsStore } from '/@/store/modules/mapTools.ts';
 const mapToolsStore = useMapToolsStore();
 
@@ -64,8 +69,8 @@ const { addPoint, queryLayer } = useLayerModify();
 
 import { useIQuery } from '/@/hooks/mapTool/useIQuery'
 const { spaceQuery, sqlQuery } = useIQuery({});
-
 import { useMarker } from '/@/hooks/mapTool/useMarker'
+import SysMng from './SystemManage/index.vue'
 
 import moment from 'moment';
 import { message } from 'ant-design-vue';
@@ -73,6 +78,7 @@ import { message } from 'ant-design-vue';
 const leftPanelWidth = ref(panelStore.leftPanelWidth);
 const ifShowLayerControl = ref(leftPanelWidth.value === '0');
 const right = ref('0px');
+const openSettingPanel = ref(false)
 watch(
   () => mapToolsStore.getRightPannel,
   (value) => {
@@ -110,6 +116,10 @@ watch(
     }
   }
 )
+watch(()=>panelStore.openSettingPanel,(val)=>{
+  debugger
+  openSettingPanel.value = val
+});
 // 地图加载完成
 const mapReady = () => {
   const { createMarker } = useMarker(window.map);
@@ -215,11 +225,27 @@ const mapReady = () => {
     top: 0;
     z-index: 100;
     height: 66px;
+    width: 100%;  
+  }
+  .setting-panel{
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 90;
+    height: 100%;
     width: 100%;
+    background: #000;
+    .title{
+      height: 70px;
+    }
+    .config-box{
+      height: calc(100% - 70px);
+      width: 100%;
+    }
   }
 
   .left-pannel {
-    z-index: 100;
+    z-index: 80;
     height: calc(100% - 70px);
     width: auto;
     top: 65px;
@@ -283,7 +309,7 @@ const mapReady = () => {
     bottom: 10px;
     // right: calc(v-bind(right) + 10px);
     right: 10px;
-    z-index: 100;
+    z-index: 80;
     transition: 0.5s;
   }
 }