InsideModule.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <template>
  2. <div>
  3. <div class="bigBox">
  4. <div style="text-align: center;">
  5. <h2 style="font-size: 20px;">装置关联模型管理</h2>
  6. </div>
  7. <div style="display: flex;justify-content: flex-start;align-items: center;height: 93%;">
  8. <div style="height: 100%;width: calc(100% - 0px);position: relative;">
  9. <div class="setBox">
  10. <div style="width: 70%;display: flex;justify-content: flex-start;align-items: center;">
  11. <div style="width: calc(50%);">
  12. <span style="font-size: 20px;color: #7484AB;">连接线:</span>
  13. <span class="sv" @click="svClick">SV</span>
  14. <span class="goose" @click="gooseClick">GOOSE</span>
  15. </div>
  16. <div style="display: flex;width: calc(30%);">
  17. <span style="font-size: 20px;color: #7484AB;margin-left: 20px;">操作:</span>
  18. <div class="cutPoint">
  19. <!-- <img style="width: 22px;height: 22px;display: block;"
  20. src="../../../assets/icon/iorn_pen.png" alt="">
  21. <span style="display: block;">控点</span> -->
  22. </div>
  23. <div class="deletePoint" @click="delClick">
  24. <img style="width: 22px;height: 22px;display: block;"
  25. src="../../../assets/icon/cut_knief.png" alt="">
  26. <span style="display: block;">删除</span>
  27. </div>
  28. </div>
  29. <div style="display: flex;width: 20%;">
  30. <div>
  31. <span>X:</span>
  32. <el-input class="coord" v-model="fatX" @input="limitNumX" @change="xChange"></el-input>
  33. </div>
  34. <div>
  35. <span>Y:</span>
  36. <el-input class="coord" v-model="fatY" @input="limitNumY" @change="yChange"></el-input>
  37. </div>
  38. </div>
  39. </div>
  40. <div style="width: calc(30%);">
  41. <div style="width: calc(100%);">
  42. <el-button type="primary" @click="cleanAll" plain>取消</el-button>
  43. <el-button type="primary" @click="saveMap">保存</el-button>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="tableBox">
  48. <!-- 建议使用这个 -->
  49. <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor" :needObj="needObj" :fatX="fatX"
  50. :fatY="fatY" :nowLook="nowLook" :needId="needId" :needName="needName" :coolObj="coolObj"
  51. @backxy="backxy"></DrawDesigns>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. import { ref, onMounted, toRefs, watch } from 'vue';
  60. import { ElMessage } from 'element-plus';
  61. import cid from '@/api/cid/cid'
  62. import FeelLoad from '@/pages/feelLoad/FeelLoad.vue'//bmnp
  63. import FatherMap from '@/pages/mapLoad/FatherMap.vue';//jsplumb
  64. import DrawDesigns from '@/pages/components/draw/DrawDesigns.vue';//logicflow
  65. import { now } from 'moment';
  66. export default {
  67. props: {
  68. tfType: {
  69. type: null || Number,
  70. required: true
  71. },
  72. insideNeed: {
  73. type: Object,
  74. required: true
  75. },
  76. lineId: {
  77. type: Number || String,
  78. required: true
  79. },
  80. setName: {
  81. type: String,
  82. required: true
  83. },
  84. setId: {
  85. type: Object,
  86. required: true
  87. }
  88. },
  89. setup(props, { emit }) {
  90. let moduleList = ref([])
  91. let lineMenuColor = ref('#255CE7')
  92. let designsRef = ref(null)
  93. let fatX = ref()
  94. let fatY = ref()
  95. let result = props.tfType
  96. let nowLook = ref(null)
  97. let needObj = ref({})
  98. let needId = ref('')
  99. let needName = ref('')
  100. let coolObj = ref({})
  101. watch(() => props.tfType, (newVal) => {
  102. nowLook.value = newVal
  103. })
  104. watch(() => props.insideNeed, (newVal) => {
  105. needObj.value = newVal
  106. })
  107. watch(() => props.lineId, (newVal) => {
  108. needId.value = newVal
  109. })
  110. watch(() => props.setName, (newVal) => {
  111. needName.value = newVal
  112. })
  113. watch(() => props.setId, (newVal) => {
  114. coolObj.value = newVal
  115. })
  116. function searchModule() {
  117. needObj.value = props.insideNeed
  118. needId.value = props.lineId
  119. nowLook.value = result
  120. needName.value = props.setName
  121. coolObj.value = props.setId//模型整个数据
  122. }
  123. function svClick() {
  124. lineMenuColor.value = '#255CE7'
  125. designsRef.value.blue()//切换为sv
  126. }
  127. function gooseClick() {
  128. lineMenuColor.value = 'orange'
  129. designsRef.value.orange()//切换为goose
  130. }
  131. function delClick() {
  132. designsRef.value.delLine()//删除连接线
  133. }
  134. function saveMap() {
  135. designsRef.value.saveLine()//保存为图片
  136. }
  137. function cleanAll() {
  138. designsRef.value.cleanMap()//清除画布
  139. }
  140. function limitNumX(e) {//强制转换为数字
  141. let types = e.replace(/\D/g, '');
  142. fatX.value = types - 0
  143. }
  144. function limitNumY(e) {//强制转换为数字
  145. let types = e.replace(/\D/g, '');
  146. fatY.value = types - 0
  147. }
  148. function xChange(e) {
  149. fatX.value = e - 0
  150. designsRef.value.momal()
  151. }
  152. function yChange(e) {
  153. fatY.value = e - 0
  154. designsRef.value.momal()
  155. }
  156. function backxy(x, y) {
  157. fatX.value = x
  158. fatY.value = y
  159. }
  160. onMounted(() => {
  161. searchModule()
  162. })
  163. return {
  164. moduleList,
  165. searchModule,
  166. lineMenuColor,
  167. svClick,
  168. gooseClick,
  169. designsRef,
  170. delClick,
  171. saveMap,
  172. cleanAll,
  173. fatX,
  174. fatY,
  175. backxy,
  176. xChange,
  177. yChange,
  178. limitNumX,//只能输入数字
  179. limitNumY,
  180. nowLook,
  181. result,
  182. needObj,
  183. needId,
  184. needName,
  185. coolObj,
  186. }
  187. },
  188. components: {
  189. FeelLoad,
  190. FatherMap,
  191. DrawDesigns
  192. }
  193. }
  194. </script>
  195. <style scoped>
  196. .bigBox {
  197. width: 100%;
  198. height: calc(100vh - 150px);
  199. border: 1px solid blue;
  200. }
  201. .tableBox {
  202. width: 100%;
  203. height: calc(100% - 10%);
  204. }
  205. .setBox {
  206. width: calc(100% - 14%);
  207. height: calc(100% - 90%);
  208. border: 1px solid #A3ADE0;
  209. position: absolute;
  210. top: 0px;
  211. left: calc(100% - 86.5%);
  212. z-index: 1;
  213. background-color: #F7F8FB;
  214. line-height: calc(600%);
  215. display: flex;
  216. justify-content: space-around;
  217. align-items: center;
  218. /* margin-top: 1px; */
  219. }
  220. .moduleBox {
  221. width: 10%;
  222. height: 100%;
  223. border: 1px solid green;
  224. }
  225. .sv {
  226. display: inline-block;
  227. width: calc(100% - 82%);
  228. height: 24px;
  229. text-align: center;
  230. line-height: 24px;
  231. border-top: 2px solid #255CE7;
  232. font-size: 20px;
  233. margin-right: 5px;
  234. cursor: pointer;
  235. }
  236. .goose {
  237. display: inline-block;
  238. width: 75px;
  239. height: 24px;
  240. text-align: center;
  241. line-height: 24px;
  242. border-top: 2px solid #FF7C03;
  243. font-size: 20px;
  244. cursor: pointer;
  245. }
  246. .cutPoint {
  247. display: flex;
  248. justify-content: space-around;
  249. align-items: center;
  250. font-size: 20px;
  251. text-align: center;
  252. margin-right: 10px;
  253. cursor: pointer;
  254. }
  255. .deletePoint {
  256. display: flex;
  257. justify-content: space-around;
  258. align-items: center;
  259. font-size: 20px;
  260. text-align: center;
  261. cursor: pointer;
  262. }
  263. :deep(.lf-dndpanel) {
  264. height: 100%;
  265. overflow-y: auto;
  266. background-color: #F7F8FB;
  267. padding: 0;
  268. margin: 0;
  269. }
  270. :deep(.lf-dnd-shape) {
  271. display: none;
  272. }
  273. :deep(.lf-dnd-text) {
  274. width: calc(100% - 8px);
  275. height: 42px;
  276. border: 1px solid #255CE7;
  277. margin-left: 2px;
  278. color: #255CE7;
  279. text-align: center;
  280. line-height: 22px;
  281. }
  282. .coord {
  283. width: 50px;
  284. height: 30px;
  285. background-color: transparent;
  286. border: none;
  287. }
  288. </style>