scd_tools_ui/src/pages/system/components/InsideModule.vue

<template>
    <div>
        <div class="bigBox">
            <div style="text-align: center;">
                <h2 style="font-size: 20px;">装置关联模型管理</h2>
            </div>
            <div style="display: flex;justify-content: flex-start;align-items: center;height: 100%;">
                <div style="height: 100%;width: calc(100% - 0px);position: relative;">
                    <div class="setBox">
                        <div style="width: 70%;display: flex;justify-content: flex-start;align-items: center;">
                            <div style="width: calc(50%);">
                                <span style="font-size: 20px;color: #7484AB;">连接线:</span>
                                <span class="sv" @click="svClick">SV</span>
                                <span class="goose" @click="gooseClick">GOOSE</span>
                            </div>
                            <div style="display: flex;width: calc(30%);">
                                <span style="font-size: 20px;color: #7484AB;margin-left: 20px;">操作:</span>
                                <div class="cutPoint">
                                    <!-- <img style="width: 22px;height: 22px;display: block;"
                                        src="../../../assets/icon/iorn_pen.png" alt="">
                                    <span style="display: block;">控点</span> -->
                                </div>
                                <div class="deletePoint" @click="delClick">
                                    <img style="width: 22px;height: 22px;display: block;"
                                        src="../../../assets/icon/cut_knief.png" alt="">
                                    <span style="display: block;">删除</span>
                                </div>
                            </div>
                            <div style="display: flex;width: 20%;">
                                <div>
                                    <span>X:</span>
                                    <el-input class="coord" v-model="fatX" @input="limitNumX" @change="xChange"></el-input>
                                </div>
                                <div>
                                    <span>Y:</span>
                                    <el-input class="coord" v-model="fatY" @input="limitNumY" @change="yChange"></el-input>
                                </div>
                            </div>
                        </div>
                        <div style="width: calc(30%);">
                            <div style="width: calc(100%);">
                                <el-button type="primary" @click="cleanAll" plain>取消</el-button>
                                <el-button type="primary" @click="saveMap">保存</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="tableBox">
                        <!-- <FeelLoad></FeelLoad> -->
                        <!-- <FatherMap></FatherMap> -->
                        <!-- 建议使用这个 -->
                        <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :fatX="fatX" :fatY="fatY"
                            @backxy="backxy"></DrawDesigns>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue';
import { ElMessage } from 'element-plus';
import FeelLoad from '@/pages/feelLoad/FeelLoad.vue'//bmnp
import FatherMap from '@/pages/mapLoad/FatherMap.vue';//jsplumb
import DrawDesigns from '@/pages/components/draw/DrawDesigns.vue';//logicflow
export default {
    setup() {
        let moduleList = ref([])
        let lineMenuColor = ref('#255CE7')
        let designsRef = ref(null)
        let fatX = ref()
        let fatY = ref()
        function searchModule() {

        }
        function svClick() {
            lineMenuColor.value = '#255CE7'
            designsRef.value.blue()//切换为sv
        }
        function gooseClick() {
            lineMenuColor.value = 'orange'
            designsRef.value.orange()//切换为goose
        }
        function delClick() {
            designsRef.value.delLine()//删除连接线
        }
        function saveMap() {
            designsRef.value.saveLine()//保存为图片
        }
        function cleanAll() {
            designsRef.value.cleanMap()//清除画布
        }
        function limitNumX(e) {//强制转换为数字
            let types = e.replace(/\D/g, '');
            fatX.value = types - 0
        }
        function limitNumY(e) {//强制转换为数字
            let types = e.replace(/\D/g, '');
            fatY.value = types - 0
        }
        function xChange(e) {
            fatX.value = e - 0
            designsRef.value.momal()
        }
        function yChange(e) {
            fatY.value = e - 0
            designsRef.value.momal()
        }
        function backxy(x, y) {
            fatX.value = x
            fatY.value = y
        }
        onMounted(() => {
            searchModule()
        })
        return {
            moduleList,
            searchModule,
            lineMenuColor,
            svClick,
            gooseClick,
            designsRef,
            delClick,
            saveMap,
            cleanAll,
            fatX,
            fatY,
            backxy,
            xChange,
            yChange,
            limitNumX,//只能输入数字
            limitNumY,
        }
    },
    components: {
        FeelLoad,
        FatherMap,
        DrawDesigns
    }
}
</script>

<style scoped>
.bigBox {
    width: 100%;
    height: calc(100vh - 150px);
    border: 1px solid blue;
}

.tableBox {
    width: 100%;
    height: calc(100% - 10%);
}

.setBox {
    width: calc(100% - 14%);
    height: calc(100% - 90%);
    border: 1px solid #A3ADE0;
    position: absolute;
    top: 0px;
    left: calc(100% - 86.5%);
    z-index: 1;
    background-color: #F7F8FB;
    line-height: calc(600%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* margin-top: 1px; */
}

.moduleBox {
    width: 10%;
    height: 100%;
    border: 1px solid green;
}

.sv {
    display: inline-block;
    width: calc(100% - 82%);
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-top: 2px solid #255CE7;
    font-size: 20px;
    margin-right: 5px;
    cursor: pointer;
}

.goose {
    display: inline-block;
    width: 75px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-top: 2px solid #FF7C03;
    font-size: 20px;
    cursor: pointer;
}

.cutPoint {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.deletePoint {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}

:deep(.lf-dndpanel) {
    height: auto;
    overflow-y: auto;
    background-color: #F7F8FB;
}

:deep(.lf-dnd-shape) {
    display: none;
}

:deep(.lf-dnd-text) {
    width: calc(100% - 8px);
    height: 42px;
    border: 1px solid #255CE7;
    margin-left: 2px;
    color: #255CE7;
    text-align: center;
    line-height: 22px;
}

.coord {
    width: 50px;
    height: 30px;
    background-color: transparent;
    border: none;
}
</style>