From 0390f5ab4b062a9146cd7d92bdd91954a052e13d Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期五, 22 十一月 2024 14:58:09 +0800
Subject: [PATCH] add： 区域配置
---
src/api/addareaitem.js | 39 +++
src/views/screen1/itm-map-plant-board.vue | 275 ++++++++++++++++------
src/components/add-area-item.vue | 300 +++++++++++++++++++++++++
src/components/device-info.vue | 67 ++++
4 files changed, 592 insertions(+), 89 deletions(-)
diff --git a/src/api/addareaitem.js b/src/api/addareaitem.js
new file mode 100644
index 0000000..6c1c639
--- /dev/null
+++ b/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 }
+ })
+}
diff --git a/src/components/add-area-item.vue b/src/components/add-area-item.vue
new file mode 100644
index 0000000..e579647
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/device-info.vue b/src/components/device-info.vue
index 68cb85c..07c9b5c 100644
--- a/src/components/device-info.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/screen1/itm-map-plant-board.vue b/src/views/screen1/itm-map-plant-board.vue
index 702b3a5..b02feee 100644
--- a/src/views/screen1/itm-map-plant-board.vue
+++ b/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) {
--
Gitblit v1.9.3