123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- <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: 93%;">
- <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">
- <!-- 建议使用这个 -->
- <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :needObj="needObj" :fatX="fatX"
- :fatY="fatY" :nowLook="nowLook" :needId="needId" :needName="needName" :coolObj="coolObj"
- @backxy="backxy"></DrawDesigns>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { ref, onMounted, toRefs, watch } from 'vue';
- import { ElMessage } from 'element-plus';
- import cid from '@/api/cid/cid'
- 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
- import { now } from 'moment';
- export default {
- props: {
- tfType: {
- type: null || Number,
- required: true
- },
- insideNeed: {
- type: Object,
- required: true
- },
- lineId: {
- type: Number || String,
- required: true
- },
- setName: {
- type: String,
- required: true
- },
- setId: {
- type: Object,
- required: true
- }
- },
- setup(props, { emit }) {
- let moduleList = ref([])
- let lineMenuColor = ref('#255CE7')
- let designsRef = ref(null)
- let fatX = ref()
- let fatY = ref()
- let result = props.tfType
- let nowLook = ref(null)
- let needObj = ref({})
- let needId = ref('')
- let needName = ref('')
- let coolObj = ref({})
- watch(() => props.tfType, (newVal) => {
- nowLook.value = newVal
- })
- watch(() => props.insideNeed, (newVal) => {
- needObj.value = newVal
- })
- watch(() => props.lineId, (newVal) => {
- needId.value = newVal
- })
- watch(() => props.setName, (newVal) => {
- needName.value = newVal
- })
- watch(() => props.setId, (newVal) => {
- coolObj.value = newVal
- })
- function searchModule() {
- needObj.value = props.insideNeed
- needId.value = props.lineId
- nowLook.value = result
- needName.value = props.setName
- coolObj.value = props.setId//模型整个数据
- }
- 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,
- nowLook,
- result,
- needObj,
- needId,
- needName,
- coolObj,
- }
- },
- 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: 100%;
- overflow-y: auto;
- background-color: #F7F8FB;
- padding: 0;
- margin: 0;
- }
- :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>
|