BaseEquipment.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. <template>
  2. <div id="equip_pro">
  3. <div class="title">设备实例本地名称</div>
  4. <el-tabs v-model="activeName" @tab-click="handleClick">
  5. <el-tab-pane label="属性" name="first">
  6. <div class="property">
  7. <div class="base-property">
  8. <div>
  9. <span>W</span>
  10. <el-input
  11. style="width: 74px; margin-left: 6px"
  12. size="mini"
  13. v-model="width"
  14. @input="changeWidth"
  15. placeholder="请输入内容"
  16. ></el-input>
  17. </div>
  18. <div>
  19. <span>H</span>
  20. <el-input
  21. style="width: 74px; margin-left: 6px"
  22. size="mini"
  23. v-model="height"
  24. @input="changeHeight"
  25. placeholder="请输入内容"
  26. ></el-input>
  27. </div>
  28. <el-upload
  29. class="avatar-uploader"
  30. action="https://jsonplaceholder.typicode.com/posts/"
  31. :show-file-list="false"
  32. >
  33. <i class="el-icon-link"></i>
  34. </el-upload>
  35. </div>
  36. <div class="base-property base-property-left">
  37. <div>
  38. <span>R</span>
  39. <el-input
  40. style="width: 74px; margin-left: 6px"
  41. size="mini"
  42. v-model="width"
  43. @input="changeWidth"
  44. placeholder="请输入内容"
  45. ></el-input>
  46. </div>
  47. </div>
  48. <div class="imgUpdate">
  49. <div class="img-tit">设计图</div>
  50. <div class="btn-list">
  51. <Button type="default">上传文件</Button>
  52. </div>
  53. </div>
  54. <div class="imgUpdate">
  55. <div class="img-tit">附加数据</div>
  56. <div class="textarea">
  57. <el-input type="textarea" :rows="2" placeholder="请输入内容">
  58. </el-input>
  59. </div>
  60. </div>
  61. </div>
  62. </el-tab-pane>
  63. <el-tab-pane label="信息点" name="second">
  64. <div class="msgPoint-box">
  65. <Input
  66. class="baseItemInput"
  67. :width="200"
  68. iconType="search"
  69. placeholder="搜索信息点"
  70. v-model="getPressMsg"
  71. @pressEnter="pressEnter"
  72. @clear="pressEnter"
  73. />
  74. <div class="msgPoint-list" v-show="!pressMsgData.length">
  75. <div class="type-list" v-for="(item, key) in msgData" :key="key">
  76. <div class="type-title" @click="clips(item)">
  77. <i
  78. v-bind:class="[
  79. item.showChildren ? 'caret-icon-active' : 'caret-icon',
  80. 'el-icon-caret-bottom',
  81. ]"
  82. ></i>
  83. <span>{{ item.msgType }}</span>
  84. </div>
  85. <el-collapse-transition>
  86. <ul class="list" v-show="item.showChildren">
  87. <li v-for="(a, b) in item.children" :key="'i' + b">
  88. <Checkbox
  89. :checked="a.checked ? 'checked' : 'uncheck'"
  90. @change="changeCheck(a)"
  91. />
  92. <p>{{ a.msgName }}</p>
  93. </li>
  94. </ul>
  95. </el-collapse-transition>
  96. </div>
  97. </div>
  98. <ul class="msgPoint-list-press" v-show="pressMsgData.length">
  99. <li v-for="(a, b) in pressMsgData" :key="b">
  100. <Checkbox
  101. :checked="a.checked ? 'checked' : 'uncheck'"
  102. @change="changeCheck(a)"
  103. />
  104. <p>{{ a.msgName }}</p>
  105. </li>
  106. </ul>
  107. </div>
  108. </el-tab-pane>
  109. </el-tabs>
  110. </div>
  111. </template>
  112. <script>
  113. import { msgData } from "./msgData.js";
  114. import { queryEquipMsg } from "@/api/editer";
  115. export default {
  116. props: ["InfoPointList", "EquipId"],
  117. data() {
  118. return {
  119. activeName: "first",
  120. width: "",
  121. height: "",
  122. checked1: "checked",
  123. isShow: true,
  124. msgData: [],
  125. pressMsgData: [], // 搜索后得信息点数组
  126. getPressMsg: "", //输入信息
  127. };
  128. },
  129. methods: {
  130. // 折叠信息点操作
  131. clips(item) {
  132. item.showChildren = !item.showChildren;
  133. },
  134. handleClick(tab, event) {
  135. console.log(tab, event);
  136. },
  137. changeWidth() {},
  138. changeHeight() {},
  139. eforeAvatarUpload() {},
  140. // 切换选中选项
  141. changeCheck(item) {
  142. item.checked = !item.checked;
  143. },
  144. // 搜索回车操作
  145. pressEnter() {
  146. const list = [];
  147. if (!this.getPressMsg) {
  148. this.pressMsgData = [];
  149. return;
  150. }
  151. // 对信息点相同得提取出来
  152. this.msgData.forEach((item) => {
  153. item.children.forEach((a) => {
  154. if (a.msgName.includes(this.getPressMsg)) {
  155. list.push(a);
  156. }
  157. });
  158. });
  159. this.pressMsgData = list;
  160. },
  161. },
  162. watch: {
  163. EquipId(val) {
  164. const data = {
  165. Filters: `id = '${val}'`,
  166. };
  167. queryEquipMsg(data).then((res) => {
  168. console.log("获取到相应的信息点数据", res);
  169. });
  170. // 模拟接口
  171. setTimeout(() => {
  172. let arr = [];
  173. // 勾选设备中选中的对象
  174. if (this.InfoPointList && this.InfoPointList.length) {
  175. msgData.map((item) => {
  176. this.InfoPointList.forEach((a) => {
  177. if (a.id == item.id) {
  178. item.checked = true;
  179. }
  180. });
  181. return item;
  182. });
  183. }
  184. // 生成二级树
  185. msgData.forEach((item) => {
  186. if (arr.length) {
  187. let index = -1;
  188. arr.forEach((aItem) => {
  189. if (aItem.msgTypeId == item.msgTypeId) {
  190. index = 1;
  191. aItem.children.push(item);
  192. aItem.number++;
  193. }
  194. });
  195. if (index == -1) {
  196. let obj = {
  197. msgTypeId: item.msgTypeId,
  198. msgType: item.msgType,
  199. children: [item],
  200. number: 1,
  201. showChildren: true,
  202. };
  203. arr.push(obj);
  204. }
  205. } else {
  206. let obj = {
  207. msgTypeId: item.msgTypeId,
  208. msgType: item.msgType,
  209. children: [],
  210. number: 1,
  211. showChildren: true,
  212. };
  213. obj.children.push(item);
  214. arr.push(obj);
  215. }
  216. });
  217. this.msgData = arr;
  218. console.log("this.msgData", this.msgData);
  219. }, 1000);
  220. },
  221. },
  222. };
  223. </script>
  224. <style lang="less" scoped>
  225. ul,
  226. li,
  227. p {
  228. margin: 0;
  229. padding: 0;
  230. list-style-type: none;
  231. }
  232. #equip_pro {
  233. .title {
  234. height: 47px;
  235. border-bottom: 1px solid #979797;
  236. color: #646c73;
  237. font-size: 16px;
  238. padding-left: 12px;
  239. box-sizing: border-box;
  240. }
  241. .property {
  242. .base-property {
  243. display: flex;
  244. align-items: center;
  245. justify-content: space-around;
  246. }
  247. .base-property-left {
  248. display: flex;
  249. align-items: center;
  250. justify-content: flex-start;
  251. padding-left: 12px;
  252. padding-top: 12px;
  253. box-sizing: border-box;
  254. }
  255. .imgUpdate {
  256. border-top: 1px solid #e4e5e7;
  257. width: 100%;
  258. margin-bottom: 16px;
  259. padding: 0 12px 0 12px;
  260. box-sizing: border-box;
  261. .img-tit {
  262. margin: 12px 0 12px 0;
  263. color: #646a73;
  264. font-size: 12px;
  265. }
  266. }
  267. }
  268. .msgPoint-box {
  269. width: 100%;
  270. height: 100%;
  271. padding: 0 12px 0 12px;
  272. box-sizing: border-box;
  273. .msgPoint-list {
  274. margin-top: 20px;
  275. .type-list {
  276. .type-title {
  277. cursor: pointer;
  278. margin-bottom: 10px;
  279. span {
  280. margin-left: 12px;
  281. }
  282. }
  283. ul {
  284. width: 100%;
  285. padding-left: 28px;
  286. li {
  287. display: flex;
  288. height: 40px;
  289. align-items: center;
  290. justify-content: flex-start;
  291. cursor: pointer;
  292. p {
  293. margin-left: 12px;
  294. }
  295. &:hover {
  296. background: #f5f6f7;
  297. }
  298. }
  299. }
  300. }
  301. }
  302. .msgPoint-list-press {
  303. margin-top: 12px;
  304. li {
  305. display: flex;
  306. height: 40px;
  307. align-items: center;
  308. justify-content: flex-start;
  309. cursor: pointer;
  310. p {
  311. margin-left: 12px;
  312. }
  313. &:hover {
  314. background: #f5f6f7;
  315. }
  316. }
  317. }
  318. }
  319. .caret-icon {
  320. animation: nowhirling 0.2s linear forwards;
  321. }
  322. .caret-icon-active {
  323. animation: whirling 0.2s linear forwards;
  324. }
  325. @keyframes whirling {
  326. 0% {
  327. transform: rotate(-90deg);
  328. -ms-transform: rotate(-90deg); /* Internet Explorer */
  329. -moz-transform: rotate(-90deg); /* Firefox */
  330. -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
  331. -o-transform: rotate(-90deg); /* Opera */
  332. }
  333. 100% {
  334. transform: rotate(0deg);
  335. -ms-transform: rotate(0deg); /* Internet Explorer */
  336. -moz-transform: rotate(0deg); /* Firefox */
  337. -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
  338. -o-transform: rotate(0deg); /* Opera */
  339. }
  340. }
  341. @keyframes nowhirling {
  342. 0% {
  343. transform: rotate(0deg);
  344. -ms-transform: rotate(0deg); /* Internet Explorer */
  345. -moz-transform: rotate(0deg); /* Firefox */
  346. -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
  347. -o-transform: rotate(0deg); /* Opera */
  348. }
  349. 100% {
  350. transform: rotate(-90deg);
  351. -ms-transform: rotate(-90deg); /* Internet Explorer */
  352. -moz-transform: rotate(-90deg); /* Firefox */
  353. -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
  354. -o-transform: rotate(-90deg); /* Opera */
  355. }
  356. }
  357. }
  358. </style>