From 7530519aecf3d1b5e663cf89cb80c3b772b5d703 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期三, 20 十一月 2024 17:46:26 +0800
Subject: [PATCH] 1.画板布局
---
package-lock.json | 35 ++
src/main.js | 4
yarn.lock | 12
package.json | 1
src/views/screen1/itm-map-plant-board.vue | 716 +++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/screen1/main-container.vue | 23 +
6 files changed, 785 insertions(+), 6 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6795c9f..71ad36c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
"sass-loader": "^13.3.2",
"scss": "^0.2.4",
"vue": "^2.6.14",
+ "vue-draggable-resizable-gorkys": "^2.4.8",
"vue-router": "3",
"vuex": "3.1.0",
"yarn": "^1.22.22"
@@ -11732,6 +11733,25 @@
"csstype": "^3.1.0"
}
},
+ "node_modules/vue-draggable-resizable-gorkys": {
+ "version": "2.4.8",
+ "resolved": "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz",
+ "integrity": "sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw==",
+ "dependencies": {
+ "core-js": "^2.6.11"
+ },
+ "engines": {
+ "node": ">= 4.0.0",
+ "npm": ">= 3.0.0"
+ }
+ },
+ "node_modules/vue-draggable-resizable-gorkys/node_modules/core-js": {
+ "version": "2.6.12",
+ "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+ "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+ "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+ "hasInstallScript": true
+ },
"node_modules/vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -20777,6 +20797,21 @@
"csstype": "^3.1.0"
}
},
+ "vue-draggable-resizable-gorkys": {
+ "version": "2.4.8",
+ "resolved": "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz",
+ "integrity": "sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw==",
+ "requires": {
+ "core-js": "^2.6.11"
+ },
+ "dependencies": {
+ "core-js": {
+ "version": "2.6.12",
+ "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+ "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+ }
+ }
+ },
"vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/package.json b/package.json
index 66d382f..9d4eb27 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"sass-loader": "^13.3.2",
"scss": "^0.2.4",
"vue": "^2.6.14",
+ "vue-draggable-resizable-gorkys": "^2.4.8",
"vue-router": "3",
"vuex": "3.1.0",
"yarn": "^1.22.22"
diff --git a/src/main.js b/src/main.js
index 9eee526..3703e0f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,6 +26,10 @@
// import self_base from './utils/self_base.js'
// Vue.use(self_base);
+import vdr from 'vue-draggable-resizable-gorkys'
+// 导入默认样式
+import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
+Vue.component('vdr', vdr)
new Vue({
render: h => h(App),
diff --git a/src/views/screen1/itm-map-plant-board.vue b/src/views/screen1/itm-map-plant-board.vue
new file mode 100644
index 0000000..702b3a5
--- /dev/null
+++ b/src/views/screen1/itm-map-plant-board.vue
@@ -0,0 +1,716 @@
+<template>
+ <div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)"
+ :style="{
+ background: plantBoardFlag ? 'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px' : ''
+ }"
+ >
+ <!-- v-for="(item, index) in itmmapdatas" -->
+ <!-- backgroundSize: 'cover', -->
+ <vdr :grid=[20,20] :min-width="minWidth" :min-height="minHeight" :resizable="plantBoardFlag"
+ :draggable="plantBoardFlag" v-for="(item, index) in items" :w="item.w" :h="item.h" :x="item.x" :y="item.y"
+ @dragging="onDrag" z-index="0" @resizing="onResize" :parent="true" @dragstop="onDragStop(item)"
+ @resizestop="onResizeStop(item)" @activated="onActivated(item)" @deactivated="onDeactivated(item)"
+
+ :scale-ratio="0.7"
+
+ :style="{
+ backgroundImage: `url(${imgSrc})`,
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ backgroundRepeat: 'no-repeat',
+ }"
+
+ class="itm-map-item"
+ :class="[
+ item?.s ? '' : 'd',
+ item?.n == 'r' ? 'error r' : '',
+ item?.n == 'y' ? 'error y' : '',
+ item?.areacode ? 'areacode' : '',
+ ]" :key="index">
+ <div style="width:100%;height:100%;" @click="toAreaDetail(item)" @contextmenu="showElementMenu($event,item)" @mouseenter="onMouseEnter(item,$event)" @mouseleave="onMouseLeave" >
+ <div v-if="item.t" class="t" v-html="item.t" :class="[item.t_c_1, item.stand, item.t_c, item.tl]"></div>
+ <div v-if="item.s" :class="[
+ item.s ? 'itm-svg-' + item.s : '',
+ item.n == 'r' ? 'r' : '',
+ item.n == 'y' ? 'y' : '',
+ ]" :style="{
+ width: item.w && item.w != '0' ? item.w + 'rem' : '',
+ height: item.h && item.h != '0' ? item.h + 'rem' : '',
+ }"></div>
+ <div v-if="false">{{ index }}</div>
+ <!-- -->
+
+ </div>
+ </vdr>
+
+
+ <div v-if="areaVisible" :style="{ top: `${areaPosition.y}px`, left: `${areaPosition.x}px` }" class="area-context-menu">
+ <div >
+ <div class="title flex">
+ <div class="dot"></div>
+ <div>{{ getMsg(hoveredItem.t) }}</div>
+ </div>
+ <div class="title flex">
+ <div class="dot"></div>
+ <div>所属区域:{{ hoveredItem.areacode }}区</div>
+ </div>
+ </div>
+ <div v-if="hoveredItem.n == 'r'" >
+ <div class="title flex">
+ <div class="dot"></div>
+ <div>{{ getMsg(hoveredItem.t) }}</div>
+ </div>
+ <div class="desc">预警情况：红色预警</div>
+ <div class="desc">详细信息：一小时后磁盘满</div>
+ </div>
+ <div v-if="hoveredItem.n == 'y'" >
+ <div class="title flex">
+ <div class="dot"></div>
+ <div>{{ getMsg(hoveredItem.t) }}</div>
+ </div>
+ <div class="desc">预警情况：黄色预警</div>
+ <div class="desc">详细信息：一小时后磁盘满</div>
+ </div>
+ </div>
+
+ <ul v-if="menuVisible" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }" class="context-menu"
+ @click="menuVisible = false">
+ <li @click="handlePlantBoard()" v-show="!plantBoardFlag">布局</li>
+ <li @click="handlePlantBoardEnd()" v-show="plantBoardFlag">布局结束</li>
+ <li @click="handleAdd()">新增</li>
+ </ul>
+
+ <!-- 子组件右键菜单 -->
+ <ul v-if="isElementMenuVisible" :style="{ top: `${elementMenuPosition.y}px`, left: `${elementMenuPosition.x}px` }"
+ class="context-menu">
+ <li @click="handleUpdate()">编辑</li>
+ <li @click="handleDel()">删除</li>
+ </ul>
+
+ </div>
+</template>
+
+<script>
+import A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
+import { itmmapdata } from "./itm-map.js";
+
+
+export default {
+ props: {
+ no: {
+ type: Number,
+ default() {
+ return 0;
+ },
+ },
+ },
+ data() {
+ return {
+ // itmmapdatas: itmmapdata,
+ width: 0,
+ height: 0,
+ x: 0,
+ y: 0,
+ imgSrc: A27,
+ vLine: [],
+ 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,
+ },
+ ],
+
+ isElementMenuVisible: false, // 控制菜单显示
+ elementMenuPosition: { x: 0, y: 0 }, // 菜单位置
+
+ menuVisible:false,
+ menuPosition: { x: 0, y: 0 },
+
+ minWidth:20, // 设置元素最小的宽
+ minHeight:20, // 设置元素最小的高
+
+ plantBoardFlag:false, // 是否画布局
+
+ hoveredItem:{},
+
+ areaVisible:false,
+ areaPosition: { x: 0, y: 0 },
+
+ };
+ },
+
+ mounted() {
+ document.addEventListener("click", this.hideMenu);
+ },
+ beforeUnmount() {
+ document.removeEventListener("click", this.hideMenu);
+ },
+
+ methods: {
+ // 判断当前悬停项
+ onMouseEnter(item,event) {
+ this.hoveredItem = item;
+ this.areaVisible=true;
+ this.areaPosition = { x: item.x+item.w/2, y: item.y+item.h/2 };
+ console.log(this.hoveredItem)
+ },
+ // 清除悬停项
+ onMouseLeave() {
+ this.hoveredItem = null;
+ this.areaVisible=false;
+ },
+
+ // 默认进来不可以修改
+ handlePlantBoard(){
+ this.plantBoardFlag=true
+ },
+ handlePlantBoardEnd(){
+ this.plantBoardFlag=false
+ },
+
+ onResize: function (x, y, width, height) {
+ console.log("onResize")
+ this.x = x
+ this.y = y
+ this.width = width
+ this.height = height
+ console.log(`x:${this.x},y:${this.y},w:${this.width},h:${this.height}`)
+ },
+ onDrag: function (x, y) {
+ console.log("onDrag")
+ this.x = x
+ this.y = y
+ console.log(`x:${this.x},y:${this.y}`)
+ },
+ onDragStop: function (itemParam) {
+ console.log("停止拖拽")
+ console.log(`x:${this.x},y:${this.y}`)
+ console.log(itemParam)
+ itemParam.x = this.x
+ itemParam.y = this.y
+
+ // TODO 需要更新元素操作
+ },
+
+ onResizeStop: function (itemParam) {
+
+ console.log("停止resize")
+ console.log(`x:${this.x},y:${this.y},width:${this.width},height:${this.height}`)
+ console.log(itemParam)
+ // itemParam.x=this.x
+ // itemParam.y=this.y
+ itemParam.w = this.width
+ itemParam.h = this.height
+
+ // TODO 需要更新元素操作
+
+
+ },
+ onActivated: function (itemParam) {
+
+ console.log('元素被激活')
+ console.log(itemParam)
+ // 元素初始化
+ this.x = itemParam.x;
+ this.y = itemParam.y;
+ this.width = itemParam.w
+ this.height = itemParam.h
+
+ },
+
+ onDeactivated: function (itemParam) {
+ console.log('元素失活')
+ console.log(itemParam)
+
+ },
+
+
+ hideMenu() {
+ this.menuVisible = false;
+ },
+ showMenu(event) {
+ event.preventDefault();
+ this.menuPosition = { x: event.clientX, y: event.clientY };
+ this.menuVisible = true;
+ this.hideElementMenu()
+ },
+
+
+ // 显示组件右键菜单
+ showElementMenu(event, item) {
+ event.preventDefault(); // 禁用默认右键菜单
+ event.stopPropagation(); // 阻止冒泡
+ this.elementMenuPosition = { x: item.x + item.w, y: item.y };
+ this.isElementMenuVisible = true;
+
+ // 点击其他地方时隐藏菜单
+ document.addEventListener("click", this.hideElementMenu);
+ this.hideMenu()
+ },
+ // 隐藏右键菜单
+ hideElementMenu() {
+ this.isElementMenuVisible = false;
+ document.removeEventListener("click", this.hideElementMenu);
+ },
+
+ // 更新操作
+ handleUpdate() {
+ // TODO
+ alert(`You selected:handleUpdate`);
+ this.hideElementMenu();
+ },
+ // 删除操作
+ handleDel() {
+ // TODO
+ alert(`You selected:handleDel`);
+ this.hideElementMenu();
+ },
+ // 新增操作
+ handleAdd() {
+ // TODO
+ alert(`You selected:handleAdd`);
+ // this.hideElementMenu();
+ this.hideMenu();
+ },
+
+
+ evalA(string) {
+ return eval(string);
+ },
+ getMsg(t) {
+ if (t) {
+ return t
+ .replace(" ", " ")
+ .replace(" ", " ")
+ .replace(" ", " ")
+ .replace("<br/>", " ")
+ .replace("<br/>", " ");
+ }
+ return "";
+
+ },
+ toAreaDetail(itemParam) {
+ if (itemParam?.areacode) {
+ this.$router.push({
+ path: "/area",
+ query: { code: itemParam?.areacode },
+ });
+ }
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+$width-screen1: 174.17rem;
+$width-screen1: 214.17rem;
+
+@import "../../common/itm_svg3d.scss";
+
+.itm-map-vr {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ width: calc($width-screen1 - 11rem);
+ height: 88.3rem;
+ margin: 0 auto;
+ /* margin-left: calc(-9.1rem * 0.9 - 11rem*0.9 - 1rem); */
+ margin-left: 50%;
+ transform: translate(-50%, 0%);
+ zoom: 0.8;
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 10rem;
+ // background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
+
+
+}
+
+.itm-map-item {
+ position: absolute;
+ min-width: 20px;
+ min-height: 20px;
+
+ .itm-svg-A41 {
+ background-size: 100% 100%;
+ }
+
+ .t {
+ position: absolute;
+ left: 50%; //起始是在body中，横向距左50%的位置
+ top: 50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
+ transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式
+ font-size: 1.2rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #ffffff;
+ color: rgba(1, 43, 94, 1);
+ line-height: 1.4rem;
+ }
+
+ .t.w {
+ color: #ffffff;
+ }
+
+ .t.l {
+ /* left: unset; */
+ /* right: 2rem; */
+ left: 30%;
+ transform: translate(-50%, 0%);
+ }
+
+ .t.t_c_1 {
+ font-size: 2.33rem;
+ /* font-weight: 400; */
+ }
+
+ .t.stand {
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ }
+
+ .t.t_c_2 {
+ font-size: 2.33rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #8ba7c7;
+ }
+
+ .tip-msg {
+ display: none;
+ position: absolute;
+ left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
+ top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
+ min-width: 21rem;
+ height: 9.6rem;
+ background: #f1f9ff;
+ box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
+ border-radius: 0.6rem;
+ z-index: 2000;
+ padding: 1.3rem;
+
+ .title {
+ font-size: 2.5rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #012b5e;
+ line-height: 3.6rem;
+ text-align: left;
+ margin-bottom: 1rem;
+ text-overflow: ellipsis;
+ /* width: 10rem; */
+ overflow: hidden;
+ word-break: break-all;
+ white-space: nowrap;
+
+ .dot {
+ width: 1.6rem;
+ height: 1.6rem;
+ min-width: 1.6rem;
+ min-height: 1.6rem;
+ /* background: #e20505; */
+ border-radius: 50%;
+ margin-top: 1rem;
+ margin-right: 0.5rem;
+ }
+ }
+
+ .desc {
+ font-size: 1.4rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #666666;
+ line-height: 2rem;
+ text-align: left;
+ margin-left: 2.1rem;
+ margin-top: 0.5rem;
+ }
+ }
+}
+
+.itm-map-item.d {
+ /* background-color: rgba(209, 227, 247, 1); */
+}
+
+.itm-map-item.error {
+ cursor: pointer;
+
+ .tip-msg {
+ /* display: unset; */
+ }
+}
+
+.itm-map-item.error.r::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ content: "";
+ background-color: #e2050593;
+}
+
+.itm-map-item.error.y::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ content: "";
+ background: rgba(236, 193, 93, 0.6);
+}
+
+.itm-map-item.error.r .tip-msg .title .dot {
+ background: #e20505;
+}
+
+.itm-map-item.error.y .tip-msg .title .dot {
+ background: rgba(236, 193, 93, 1);
+}
+
+.itm-map-item.error:hover {
+ .tip-msg {
+ display: unset;
+ }
+}
+
+.itm-map-item:hover {
+ .tip-msg {
+ display: unset;
+ }
+}
+
+.itm-map-item.areacode:hover::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ content: "";
+ background-color: #059ce293;
+
+}
+
+
+// .tip-msg {
+// display: none;
+// position: absolute;
+// left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
+// top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
+// min-width: 21rem;
+// height: 9.6rem;
+// background: #f1f9ff;
+// box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
+// border-radius: 0.6rem;
+// z-index: 2000;
+// padding: 1.3rem;
+
+// .title {
+// font-size: 2.5rem;
+// font-family: PingFangSC-Semibold, PingFang SC;
+// font-weight: 600;
+// color: #012b5e;
+// line-height: 3.6rem;
+// text-align: left;
+// margin-bottom: 1rem;
+// text-overflow: ellipsis;
+// /* width: 10rem; */
+// overflow: hidden;
+// word-break: break-all;
+// white-space: nowrap;
+
+// .dot {
+// width: 1.6rem;
+// height: 1.6rem;
+// min-width: 1.6rem;
+// min-height: 1.6rem;
+// /* background: #e20505; */
+// border-radius: 50%;
+// margin-top: 1rem;
+// margin-right: 0.5rem;
+// }
+// }
+
+// .desc {
+// font-size: 1.4rem;
+// font-family: PingFangSC-Regular, PingFang SC;
+// font-weight: 400;
+// color: #666666;
+// line-height: 2rem;
+// text-align: left;
+// margin-left: 2.1rem;
+// margin-top: 0.5rem;
+// }
+// }
+</style>
+
+<style>
+.vdr {
+ touch-action: none;
+ border: none !important;
+}
+</style>
+
+<style scoped>
+.container {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ background-color: #f0f0f0;
+}
+
+.context-menu {
+ position: absolute;
+ /* background-color: #F1F9FF; */
+ /* border: 1px solid #ccc; */
+ /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
+ list-style: none;
+ padding: 5px 0;
+ margin: 0;
+ z-index: 999;
+ min-width: 18rem;
+ height: 15.5rem;
+ background: #f1f9ff;
+ box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
+ border-radius: 0.6rem;
+}
+
+.context-menu li {
+ padding: 8px 16px;
+ cursor: pointer;
+ font-size: 2.5rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 400;
+ color: #012b5e;
+ line-height: 3.6rem;
+ text-align: left;
+ text-overflow: ellipsis;
+ /* width: 10rem; */
+ overflow: hidden;
+ word-break: break-all;
+ white-space: nowrap;
+}
+
+.context-menu li:hover {
+ background-color: #eee;
+}
+
+
+</style>
+<style scoped>
+.area-context-menu {
+
+ position: absolute;
+ list-style: none;
+ padding: 5px 0;
+ margin: 0;
+ z-index: 999;
+ min-width: 21rem;
+ height: 9.6rem;
+ background: #f1f9ff;
+ box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
+ border-radius: 0.6rem;
+ padding: 1.3rem;
+
+ .title {
+ font-size: 2.5rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #012b5e;
+ line-height: 3.6rem;
+ text-align: left;
+ margin-bottom: 1rem;
+ text-overflow: ellipsis;
+ /* width: 10rem; */
+ overflow: hidden;
+ word-break: break-all;
+ white-space: nowrap;
+
+ .dot {
+ width: 1.6rem;
+ height: 1.6rem;
+ min-width: 1.6rem;
+ min-height: 1.6rem;
+ /* background: #e20505; */
+ border-radius: 50%;
+ margin-top: 1rem;
+ margin-right: 0.5rem;
+ }
+ }
+
+ .desc {
+ font-size: 1.4rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #666666;
+ line-height: 2rem;
+ text-align: left;
+ margin-left: 2.1rem;
+ margin-top: 0.5rem;
+ }
+
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/screen1/main-container.vue b/src/views/screen1/main-container.vue
index 5bc7659..ea603e3 100644
--- a/src/views/screen1/main-container.vue
+++ b/src/views/screen1/main-container.vue
@@ -1,16 +1,20 @@
<template>
<div class="main-container" :style="{ zoom: zoom_main }" id="screencontent">
<div class="screen1-place" v-if="false"></div>
- <div class="itm-map" @click="toArea01">
+
+ <itm-map-plant-board @click="toArea01"></itm-map-plant-board>
+
+
+
+ <!-- <div class="itm-map" @click="toArea01">
<itm-map-item
v-for="(item, index) in itmmapdatas"
:item="item"
:key="index"
:no="index"
></itm-map-item>
-
- <!-- v-if="item_show" -->
- </div>
+
+ </div> -->
<div class="chart-itm">
<itm
v-if="areas && !chartclose1"
@@ -52,8 +56,10 @@
import itmMapItem from "./itm-map-item.vue";
import {getAreaTjData, getSwitchStatusStatic, getSwitchInfoStatic} from "@/api/area";
+import itmMapPlantBoard from "./itm-map-plant-board.vue";
+
export default {
- components: {itmMapItem, itm, itmLeft},
+ components: {itmMapItem, itm, itmLeft,itmMapPlantBoard},
props: {
item_show: true,
item1_show: false,
@@ -79,9 +85,14 @@
this.zoom_main = parseFloat(zoom);
}
this.getList();
+
+ console.log("itmmapdatas")
+ console.log(this.itmmapdatas)
+
},
methods: {
+
getList() {
getAreaTjData().then((res) => {
// console.log('areas',res.switchAreaInfo || [])
@@ -160,7 +171,7 @@
height: 88.3rem;
background-image: url("../../assets/screen/screen1/screen-place.png");
}
-
+
.itm-map {
position: relative;
width: 100%;
diff --git a/yarn.lock b/yarn.lock
index c57970a..6702742 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2551,6 +2551,11 @@
"resolved" "http://218.4.170.235:54873/core-js/-/core-js-2.6.12.tgz"
"version" "2.6.12"
+"core-js@^2.6.11":
+ "integrity" "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+ "resolved" "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz"
+ "version" "2.6.12"
+
"core-js@^3.8.3":
"integrity" "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw=="
"resolved" "https://registry.npmmirror.com/core-js/-/core-js-3.33.0.tgz"
@@ -6131,6 +6136,13 @@
"resolved" "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz"
"version" "1.1.2"
+"vue-draggable-resizable-gorkys@^2.4.8":
+ "integrity" "sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw=="
+ "resolved" "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz"
+ "version" "2.4.8"
+ dependencies:
+ "core-js" "^2.6.11"
+
"vue-eslint-parser@^8.0.1":
"integrity" "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g=="
"resolved" "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz"
--
Gitblit v1.9.3