add： 区域配置

cloudroam

2024-11-22 0390f5ab4b062a9146cd7d92bdd91954a052e13d

add： 区域配置

 src/api/addareaitem.js

对比新文件
@@ -0,0 +1,39 @@
import request from '@/utils/request-api'

export function addAreaItemInfo(dto) {
  return request({
    url: '/api/services/app/SwitchDevice/AddAreaModuleItem',
    method: 'post',
    data: {
      ...dto
    }
  })
}

export function getAreaItemData() {
  return request({
    url: '/api/services/app/SwitchDevice/GetAllAreaModuleItems',
    method: 'get',
    params: {

    }
  })
}

export function updateAreaModuleItem(dto) {
  return request({
    url: '/api/services/app/SwitchDevice/UpdateAreaModuleItem',
    method: 'put',
    data: {
      ...dto
    }
  })
}

export function deleteAreaModuleItem(id) {
  return request({
    url: '/api/services/app/SwitchDevice/DeleteAreaModuleItem',
    method: 'delete',
    params: { id }
  })
}

 src/components/add-area-item.vue

对比新文件
@@ -0,0 +1,300 @@
<template>
  <el-dialog append-to-body
             :visible.sync="open"
             class="equ-add-form-dialog"
             :close-on-click-modal="true"
  >
    <div class="equ-form equ-form-add">
      <div class="equ-form-container">

        <div class="flex m-t-2rem">
          <div class="label require">区域编号:</div>
          <el-input v-model="areacode"></el-input>
        </div>
        <div class="flex m-t-2rem">
          <div class="label require">区域名称:</div>
          <el-input v-model="areaName"></el-input>
        </div>
        <div class="flex m-t-2rem">
          <div class="label require">布局数量:</div>
          <el-input v-model="areaConfigNum"></el-input>
        </div>
        <div class="flex m-t-2rem">
          <div class="label require">首页背景:</div>
          <el-upload
              class="upload-demo"
              action="http://localhost:44311/home/UploadFile"
              :before-upload="beforeUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList">
            <el-button size="small" type="primary" class="button-container">点击上传</el-button>
          </el-upload>
        </div>
        <div class="flex m-t-2rem">
          <div class="label require">区域背景:</div>
          <el-upload
              class="upload-demo"
              action="http://localhost:44311/home/UploadFile"
              :before-upload="beforeUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleSuccess2"
              :on-error="handleError"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList2">
            <el-button size="small" type="primary" class="button-container">点击上传</el-button>
          </el-upload>
        </div>
        <div class="m-t-2rem flex">
          <div style="text-align: center;" class="flex">
            <div class="equ-form-add-button-confirm" @click="submit">确认</div>
            <div class="equ-form-add-button-cancel" @click="open = false">取消</div>
          </div>

        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {addAreaItemInfo} from "@/api/addareaitem";

export default {
  props: {
    menuPositionx:'',
    menuPositiony:'',
  },
  data() {
    return {
      open: false,
      fileList: [],
      fileList2: [],
      uploadUrl: '',
      areaBackGroudURL: '',
      areacode: '',
      areaConfigNum: '',
      areaName: '',
      num: 1,
      editItemId: '',
      filename1: '',
      filename2: '',
    };
  },
  mounted() {
  },
  methods: {
      async submit() {

        if (!this.uploadUrl || !this.areaBackGroudURL || !this.areacode || !this.areaConfigNum || !this.areacode) {
          this.$message.warning("数据未填写完整");
          return;
        }
        await this.$modal.confirm("确定新增区域吗?");
        var dto = {
          xVal: this.menuPositionx,
          yVal: this.menuPositiony,
          uRL: this.uploadUrl,
          areaBackGroudURL: this.areaBackGroudURL,
          areaConfigNum : this.areaConfigNum,
          areacode: this.areacode,
          tVal: this.areaName,
          moduleName : this.filename1,
          areaBackGroudName : this.filename2,
        };
        const re = await addAreaItemInfo(dto);
        if (re.isSuccess) {
          this.$emit('update-area-list'); // 触发自定义事件
          this.$message.success("创建成功");
          this.open = false;
        }
      },
    openConfig() {
      this.open = !this.open;
    },
    editConfig(editItem) {
      this.open = !this.open;
      console.log("editItem",editItem)
      this.editItemId = editItem.id;
      this.areacode = editItem.areacode;
      this.areaName = editItem.t;
      this.areaConfigNum = editItem.areaConfigNum;
      var fileInfo1 = {
        name : editItem.moduleName,
      }
      var fileInfo2 = {
        name : editItem.areaBackGroudName,
      }
      this.fileList[0] = fileInfo1;
      this.fileList2[0].name = fileInfo2;

      console.log( " this.fileList",this.fileList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //删除文件
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleChange(value) {
      console.log(value);
    },
    async beforeUpload(file) {
      return true;
    },
    handleSuccess(response, file, fileList) {
      // 在这里处理文件上传成功的逻辑，例如保存响应数据到组件的状态中。
      this.$message.success('文件上传成功');
      console.log('文件上传成功', response);
      this.uploadUrl = response.result;
      this.filename1 = file.name;
      console.log('文件上传成功地址', this.uploadUrl);
    },
    handleError(err, file, fileList) {
      // 在这里处理文件上传失败的逻辑，例如显示错误消息。
      this.$message.error('文件上传失败');
      console.error('文件上传失败', err);
    },
    handleSuccess2(response, file, fileList) {
      // 在这里处理文件上传成功的逻辑，例如保存响应数据到组件的状态中。
      this.$message.success('文件上传成功');
      console.log('文件上传成功', response);
      this.areaBackGroudURL = response.result;
      this.filename2 = file.name;
      console.log('文件上传成功地址', this.uploadUrl);
    },
  },
  watch: {},
};
</script>
<style lang="scss">
.equ-add-form-dialog .el-dialog {
  background: none !important;
  box-shadow: none !important;
}
</style>

<style lang="scss" scoped>
.equ-form-add-button {
  width: 4.1rem;
  height: 4.1rem;
  background-size: 100% 100%;
  background-image: url("../assets/area/equ-form-add-button.svg");
  cursor: pointer;
}

.equ-form-add {
  display: flex;
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 80px;
  margin-top: 60px;
}

.equ-form-container {
  //靠右
  margin-left: 1rem;
  width: 37.6rem;
  background: #ffffff;
  box-shadow: 0rem 0.2rem 3.4rem 0rem #bccbdd;
  border-radius: 1rem;
  padding: 2.2rem;
  padding-bottom: 1.5rem;

  .label {
    width: 12rem;
    font-size: 1.6rem;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #333333;
    line-height: 2em;
    margin-right: 1rem;
    text-align: left;
  }

  .require::before {
    content: "*";
    color: red;
  }

  .value.input {
    width: 25rem;
    max-width: 25rem;
    height: 3.2rem;
    border-radius: 0.2rem;
    border: 0.1rem solid #6c99be !important;
    padding-left: 0.8rem;
  }

  .value.input::placeholder,
  .value.select::placeholder {
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #6c99be;
  }

  .value.select {
    width: 26.1rem;

    height: 3.2rem;
    border-radius: 0.2rem;
    border: 0.1rem solid #6c99be;
    padding-left: 0.5rem;
    color: #6c99be;
  }

  .equ-form-add-button-confirm {
    width: 10.5rem;
    height: 3.6rem;
    background: #278afa;
    border-radius: 0.4rem;

    font-size: 1.6rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #ffffff;
    line-height: 3.2rem;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
  }

  .equ-form-add-button-cancel {
    width: 10.5rem;
    height: 3.6rem;
    border: 1px solid #278afa;
    border-radius: 0.4rem;

    font-size: 1.6rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333;
    line-height: 3.2rem;
    margin-left: 16.7rem;
    margin-right: 0;
    cursor: pointer;
  }

  .button-container {
    width: 18rem;
    height: 40px;
  }
}
</style>

 src/components/device-info.vue

@@ -1,11 +1,52 @@
<template>
      

      <div
        v-if="local_show_info"
        class="device-info"
        @click="local_show_info = false"
      >
        <div class="title">接口</div>
        <div class="info-container">
        <div class="info-block">
        <div class="title">上一次信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ current_show_info.status }}</div>
        </div>
        <div class="each">
          <div class="label">IP地址:</div>
          <div class="value">{{ current_show_info.ip || "" }}</div>
        </div>
        <div class="each">
          <div class="label">Mac:</div>
          <div class="value">{{ current_show_info.mac }}</div>
        </div>
        <div class="each">
          <div class="label">桥架端口:</div>
          <div class="value">{{ current_show_info.networkPort }}</div>
        </div>
        <div class="each">
          <div class="label">交换机名字:</div>
          <div class="value">{{ current_show_info.switchName }}</div>
        </div>
        <div class="each">
          <div class="label">交换机端口:</div>
          <div class="value">{{ current_show_info.port }}</div>
        </div>
        <div class="each">
          <div class="label">名称:</div>
          <div class="value">{{ current_show_info.clhwName }}</div>
        </div>
        <div class="each">
          <div class="label">类型:</div>
          <div class="value">{{ current_show_info.clhwTier }}</div>
        </div>
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ current_show_info.clhwOperating_System }}</div>
        </div>
      </div>
        <div class="info-block">
        <div class="title">当前信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ device_info.status }}</div>
@@ -42,6 +83,8 @@
          <div class="label">操作系统:</div>
          <div class="value">{{ device_info.clhwOperating_System }}</div>
        </div>
      </div>
      </div>
        <div class="button-to-switch" @click="toSwitchInfo()">交换机</div>
        <div class="button-del-port" @click="delPort()">删除</div>
        <div
@@ -52,7 +95,7 @@
            device_info?.status==3 ||
            device_info?.status==4 
          "
        

          @click="statusPort(index)"
        >
          确认
@@ -104,7 +147,7 @@
        return 4;
      },
    },
    

    code: "",
    areacode: "",
    current_show_id: "",
@@ -173,12 +216,12 @@
      background-image: url("../assets/area/device-info-bg.svg");
      /* background-color: #a6c6e5; */
      background-size: 100% 100%;
      height: 24.4rem;
      width: 29rem;
      height: 39.4rem;
      width: 49rem;
      position: absolute;
      // top: -31.5rem;
      top: -28.7rem;
      transform: translate(-50%, 0%);
      top: -46.5rem;
      transform: translate(-48%, 0%);
      left: 50%;
      z-index: 120;
      padding: 3.1rem;
@@ -284,4 +327,12 @@
        background-color: rgb(243, 15, 15);
      }
    }
.info-container {
  display: flex;
  justify-content: space-between;
}

.info-block {
  width: 45%; /* Adjust the width as needed */
}
</style>

 src/views/screen1/itm-map-plant-board.vue

@@ -14,7 +14,7 @@
      :scale-ratio="0.7" 
      
      :style="{
        backgroundImage: `url(${imgSrc})`,
        backgroundImage: `url(${item.imgSrc})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
@@ -87,15 +87,22 @@
      <li @click="handleDel()">删除</li>
    </ul>

    <div>
      <add-area-item ref="addAreaItem"  :menuPositionx ="this.menuPosition.x" :menu-positiony="this.menuPosition.y" @update-area-list="getAreaItemList"></add-area-item>
    </div>

  </div>
</template>

<script>
import A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
import AddAreaItem from "@/components/add-area-item";
import { itmmapdata } from "./itm-map.js";
import {addAreaItemInfo, deleteAreaModuleItem, getAreaItemData, updateAreaModuleItem} from "@/api/addareaitem";


export default {
  components: {AddAreaItem},
  props: {
    no: {
      type: Number,
@@ -116,67 +123,68 @@
      hLine: [],

      items:[
      {
          x:300,
          y:300,
          w:200,
          h:200,
          t:'',
          s:'',
          n:'',
          areacode:'',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
        {
          x:0,
          y:0,
          w:200,
          h:200,
          t:'测试一区',
          s:'',
          n:'',
          areacode:'01',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
        {
          x:0,
          y:0,
          w:200,
          h:200,
          t:'测试一区',
          s:'',
          n:'',
          areacode:'01',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
        {
          x:120,
          y:120,
          w:200,
          h:200,
          t:'测试二区',
          s:'',
          n:'',
          areacode:'02',
          t_c:'',
          t_c_1:'',
          tl:'',
          stand:'',
          imgSrc:A27,
        },
      // {
      //     x:300,
      //     y:300,
      //     w:200,
      //     h:200,
      //     t:'',
      //     s:'',
      //     n:'',
      //     areacode:'',
      //     t_c:'',
      //     t_c_1:'',
      //     tl:'',
      //     stand:'',
      //     imgSrc:A27,
      //   },
      //   {
      //     x:0,
      //     y:0,
      //     w:200,
      //     h:200,
      //     t:'测试一区',
      //     s:'',
      //     n:'',
      //     areacode:'01',
      //     t_c:'',
      //     t_c_1:'',
      //     tl:'',
      //     stand:'',
      //     imgSrc:A27,
      //   },
      //   {
      //     x:0,
      //     y:0,
      //     w:200,
      //     h:200,
      //     t:'测试一区',
      //     s:'',
      //     n:'',
      //     areacode:'01',
      //     t_c:'',
      //     t_c_1:'',
      //     tl:'',
      //     stand:'',
      //     imgSrc:A27,
      //   },
      //   {
      //     x:120,
      //     y:120,
      //     w:200,
      //     h:200,
      //     t:'测试二区',
      //     s:'',
      //     n:'',
      //     areacode:'02',
      //     t_c:'',
      //     t_c_1:'',
      //     tl:'',
      //     stand:'',
      //     imgSrc:A27,
      //   },
      ],
      adjustedItem: [],

      isElementMenuVisible: false, // 控制菜单显示
      elementMenuPosition: { x: 0, y: 0 }, // 菜单位置
@@ -190,6 +198,8 @@
      plantBoardFlag:false, // 是否画布局

      hoveredItem:{},
      deleteItem:{},
      editItem:{},

      areaVisible:false,
      areaPosition: { x: 0, y: 0 },
@@ -199,6 +209,7 @@

  mounted() {
    document.addEventListener("click", this.hideMenu);
    this.getAreaItemList();
  },
  beforeUnmount() {
    document.removeEventListener("click", this.hideMenu);
@@ -240,18 +251,27 @@
      this.y = y
      console.log(`x:${this.x},y:${this.y}`)
    },
    onDragStop: function (itemParam) {
    onDragStop: async function (itemParam) {
      console.log("停止拖拽")
      console.log(`x:${this.x},y:${this.y}`)
      console.log(itemParam)
      itemParam.x = this.x
      itemParam.y = this.y

      // TODO 需要更新元素操作
      console.log("itemParam", itemParam)
      if(this.x !=itemParam.x && this.y !=itemParam.y && this.w !=itemParam.w && this.h !=itemParam.h){
        itemParam.x = this.x
        itemParam.y = this.y
        var dto = {
          xVal: itemParam.x,
          yVal: itemParam.y,
          id: itemParam.id
        };
        //更新元素操作
        const re = await updateAreaModuleItem(dto);
        if (re.isSuccess) {
          this.$message.success("更新成功");
        }
      }
    },

    onResizeStop: function (itemParam) {

    onResizeStop: async function (itemParam) {
      console.log("停止resize")
      console.log(`x:${this.x},y:${this.y},width:${this.width},height:${this.height}`)
      console.log(itemParam)
@@ -259,10 +279,17 @@
      // itemParam.y=this.y
      itemParam.w = this.width
      itemParam.h = this.height

      // TODO 需要更新元素操作


      var dto = {
        wVal: itemParam.w,
        hVal: itemParam.h,
        id: itemParam.id
      };
      //更新元素操作
      const re = await updateAreaModuleItem(dto);
      if (re.isSuccess) {
        this.$message.success("更新成功");
        this.open = false;
      }
    },
    onActivated: function (itemParam) {

@@ -300,6 +327,9 @@
      event.stopPropagation(); // 阻止冒泡
      this.elementMenuPosition = { x: item.x + item.w, y: item.y };
      this.isElementMenuVisible = true;
      console.log("item",item);
      this.deleteItem = item;
      this.editItem = item;

      // 点击其他地方时隐藏菜单
      document.addEventListener("click", this.hideElementMenu);
@@ -313,23 +343,106 @@

    // 更新操作
    handleUpdate() {
      // TODO
      alert(`You selected:handleUpdate`);
      //编辑操作
      this.hideElementMenu();
      console.log("this.editItem",this.editItem);
      this.$refs.addAreaItem && this.$refs.addAreaItem.editConfig(this.editItem);
      this.hideMenu();
    },
    // 删除操作
    handleDel() {
      // TODO 
      alert(`You selected:handleDel`);
   async handleDel() {
      // 删除
     console.log("this.deleteItem",this.deleteItem);
     const re = await deleteAreaModuleItem(this.deleteItem.id);
     if (re.isSuccess) {
       this.$message.success("删除成功");
       this.getAreaItemList();
     }
      this.hideElementMenu();
    },
    // 新增操作
    handleAdd() {
      // TODO 
      alert(`You selected:handleAdd`);
      // this.hideElementMenu();
      this.$refs.addAreaItem && this.$refs.addAreaItem.openConfig();
      this.hideMenu();
    },
    // async getAreaItemList(){
    //   debugger;
    //   const result =  await getAreaItemData(); // 假设这是一个返回Promise的函数
    //   this.adjustedItem = result.data; // 将解决后的数据赋值给itemData
    //   console.log(" adjustedItem",   this.adjustedItem)
    //   let items = [];
    //
    //   Object.keys(this.adjustedItem).forEach(key => {
    //     switch (key) {
    //       case 'xVal':
    //         items.x = this.adjustedItem[key];
    //         break;
    //       case 'yVal':
    //         items.y = this.adjustedItem[key];
    //         break;
    //       case 'areacode':
    //         items.areacode = this.adjustedItem[key];
    //         break;
    //       case 'uRL':
    //         items.imgSrc = this.adjustedItem[key];
    //         break;
    //         // 添加其他需要转换的键值对
    //       default:
    //         // 如果不需要转换，直接赋值
    //         // items[key] = this.adjustedItem[key];
    //     }
    //   });
    //   this.items = items;
    //   console.log("  this.items",  this.items)
    // },
    async getAreaItemList() {
      const result = await getAreaItemData(); // 假设这是一个返回Promise的函数
      this.adjustedItem = result.data; // 将解决后的数据赋值给itemData
      console.log(" adjustedItem", this.adjustedItem);
      let items = [];
      this.adjustedItem.forEach((item, index) => {
        let newItem = {};
        if (item.xVal !== undefined) {
          newItem.x = parseInt(item.xVal, 10);
        }
        if (item.yVal !== undefined) {
          newItem.y = parseInt(item.yVal, 10);
        }
        if (item.areacode !== undefined) {
          newItem.areacode = item.areacode;
        }
        if (item.url !== undefined) {
          newItem.imgSrc = item.url;
        }
        if (item.id !== undefined) {
          newItem.id = item.id;
        }
        if (item.wVal !== undefined) {
          newItem.w = parseInt(item.wVal, 10);
        }
        if (item.hVal !== undefined) {
          newItem.h = parseInt(item.hVal, 10);
        }
        if (item.tVal !== undefined) {
          newItem.t = item.tVal;
        }
        newItem.areaBackGroudURL = item.areaBackGroudURL;
        newItem.areaConfigNum = item.areaConfigNum;
        newItem.moduleName = item.moduleName;
        newItem.areaBackGroudName = item.areaBackGroudName;
        newItem.s = '';
        newItem.n = '';
        newItem.t_c = '';
        newItem.t_c_1 = '';
        newItem.tl = '';
        newItem.stand = '';
        items.push(newItem);
      });

      this.items = items;
      console.log(" this.items", this.items);
    },



    evalA(string) {