123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
- <template>
- <div id="equip_pro">
- <div class="title">设备实例本地名称</div>
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="属性" name="first">
- <div class="property">
- <div class="base-property">
- <div>
- <span>W</span>
- <el-input
- style="width: 74px; margin-left: 6px"
- size="mini"
- v-model="width"
- @input="changeWidth"
- placeholder="请输入内容"
- ></el-input>
- </div>
- <div>
- <span>H</span>
- <el-input
- style="width: 74px; margin-left: 6px"
- size="mini"
- v-model="height"
- @input="changeHeight"
- placeholder="请输入内容"
- ></el-input>
- </div>
- <el-upload
- class="avatar-uploader"
- action="https://jsonplaceholder.typicode.com/posts/"
- :show-file-list="false"
- >
- <i class="el-icon-link"></i>
- </el-upload>
- </div>
- <div class="base-property base-property-left">
- <div>
- <span>R</span>
- <el-input
- style="width: 74px; margin-left: 6px"
- size="mini"
- v-model="width"
- @input="changeWidth"
- placeholder="请输入内容"
- ></el-input>
- </div>
- </div>
- <div class="imgUpdate">
- <div class="img-tit">设计图</div>
- <div class="btn-list">
- <Button type="default">上传文件</Button>
- </div>
- </div>
- <div class="imgUpdate">
- <div class="img-tit">附加数据</div>
- <div class="textarea">
- <el-input type="textarea" :rows="2" placeholder="请输入内容">
- </el-input>
- </div>
- </div>
- </div>
- </el-tab-pane>
- <el-tab-pane label="信息点" name="second">
- <div class="msgPoint-box">
- <Input
- class="baseItemInput"
- :width="200"
- iconType="search"
- placeholder="搜索信息点"
- v-model="getPressMsg"
- @pressEnter="pressEnter"
- @clear="pressEnter"
- />
- <div class="msgPoint-list" v-show="!pressMsgData.length">
- <div class="type-list" v-for="(item, key) in msgData" :key="key">
- <div class="type-title" @click="clips(item)">
- <i
- v-bind:class="[
- item.showChildren ? 'caret-icon-active' : 'caret-icon',
- 'el-icon-caret-bottom',
- ]"
- ></i>
- <span>{{ item.msgType }}</span>
- </div>
- <el-collapse-transition>
- <ul class="list" v-show="item.showChildren">
- <li v-for="(a, b) in item.children" :key="'i' + b">
- <Checkbox
- :checked="a.checked ? 'checked' : 'uncheck'"
- @change="changeCheck(a)"
- />
- <p>{{ a.msgName }}</p>
- </li>
- </ul>
- </el-collapse-transition>
- </div>
- </div>
- <ul class="msgPoint-list-press" v-show="pressMsgData.length">
- <li v-for="(a, b) in pressMsgData" :key="b">
- <Checkbox
- :checked="a.checked ? 'checked' : 'uncheck'"
- @change="changeCheck(a)"
- />
- <p>{{ a.msgName }}</p>
- </li>
- </ul>
- </div>
- </el-tab-pane>
- </el-tabs>
- </div>
- </template>
- <script>
- import { msgData } from "./msgData.js";
- import { queryEquipMsg } from "@/api/editer";
- export default {
- props: ["InfoPointList", "EquipId"],
- data() {
- return {
- activeName: "first",
- width: "",
- height: "",
- checked1: "checked",
- isShow: true,
- msgData: [],
- pressMsgData: [], // 搜索后得信息点数组
- getPressMsg: "", //输入信息
- };
- },
- methods: {
- // 折叠信息点操作
- clips(item) {
- item.showChildren = !item.showChildren;
- },
- handleClick(tab, event) {
- console.log(tab, event);
- },
- changeWidth() {},
- changeHeight() {},
- eforeAvatarUpload() {},
- // 切换选中选项
- changeCheck(item) {
- item.checked = !item.checked;
- },
- // 搜索回车操作
- pressEnter() {
- const list = [];
- if (!this.getPressMsg) {
- this.pressMsgData = [];
- return;
- }
- // 对信息点相同得提取出来
- this.msgData.forEach((item) => {
- item.children.forEach((a) => {
- if (a.msgName.includes(this.getPressMsg)) {
- list.push(a);
- }
- });
- });
- this.pressMsgData = list;
- },
- },
- watch: {
- EquipId(val) {
- const data = {
- Filters: `id = '${val}'`,
- };
- queryEquipMsg(data).then((res) => {
- console.log("获取到相应的信息点数据", res);
- });
- // 模拟接口
- setTimeout(() => {
- let arr = [];
- // 勾选设备中选中的对象
- if (this.InfoPointList && this.InfoPointList.length) {
- msgData.map((item) => {
- this.InfoPointList.forEach((a) => {
- if (a.id == item.id) {
- item.checked = true;
- }
- });
- return item;
- });
- }
- // 生成二级树
- msgData.forEach((item) => {
- if (arr.length) {
- let index = -1;
- arr.forEach((aItem) => {
- if (aItem.msgTypeId == item.msgTypeId) {
- index = 1;
- aItem.children.push(item);
- aItem.number++;
- }
- });
- if (index == -1) {
- let obj = {
- msgTypeId: item.msgTypeId,
- msgType: item.msgType,
- children: [item],
- number: 1,
- showChildren: true,
- };
- arr.push(obj);
- }
- } else {
- let obj = {
- msgTypeId: item.msgTypeId,
- msgType: item.msgType,
- children: [],
- number: 1,
- showChildren: true,
- };
- obj.children.push(item);
- arr.push(obj);
- }
- });
- this.msgData = arr;
- console.log("this.msgData", this.msgData);
- }, 1000);
- },
- },
- };
- </script>
- <style lang="less" scoped>
- ul,
- li,
- p {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- #equip_pro {
- .title {
- height: 47px;
- border-bottom: 1px solid #979797;
- color: #646c73;
- font-size: 16px;
- padding-left: 12px;
- box-sizing: border-box;
- }
- .property {
- .base-property {
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
- .base-property-left {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- padding-left: 12px;
- padding-top: 12px;
- box-sizing: border-box;
- }
- .imgUpdate {
- border-top: 1px solid #e4e5e7;
- width: 100%;
- margin-bottom: 16px;
- padding: 0 12px 0 12px;
- box-sizing: border-box;
- .img-tit {
- margin: 12px 0 12px 0;
- color: #646a73;
- font-size: 12px;
- }
- }
- }
- .msgPoint-box {
- width: 100%;
- height: 100%;
- padding: 0 12px 0 12px;
- box-sizing: border-box;
- .msgPoint-list {
- margin-top: 20px;
- .type-list {
- .type-title {
- cursor: pointer;
- margin-bottom: 10px;
- span {
- margin-left: 12px;
- }
- }
- ul {
- width: 100%;
- padding-left: 28px;
- li {
- display: flex;
- height: 40px;
- align-items: center;
- justify-content: flex-start;
- cursor: pointer;
- p {
- margin-left: 12px;
- }
- &:hover {
- background: #f5f6f7;
- }
- }
- }
- }
- }
- .msgPoint-list-press {
- margin-top: 12px;
- li {
- display: flex;
- height: 40px;
- align-items: center;
- justify-content: flex-start;
- cursor: pointer;
- p {
- margin-left: 12px;
- }
- &:hover {
- background: #f5f6f7;
- }
- }
- }
- }
- .caret-icon {
- animation: nowhirling 0.2s linear forwards;
- }
- .caret-icon-active {
- animation: whirling 0.2s linear forwards;
- }
- @keyframes whirling {
- 0% {
- transform: rotate(-90deg);
- -ms-transform: rotate(-90deg); /* Internet Explorer */
- -moz-transform: rotate(-90deg); /* Firefox */
- -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
- -o-transform: rotate(-90deg); /* Opera */
- }
- 100% {
- transform: rotate(0deg);
- -ms-transform: rotate(0deg); /* Internet Explorer */
- -moz-transform: rotate(0deg); /* Firefox */
- -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
- -o-transform: rotate(0deg); /* Opera */
- }
- }
- @keyframes nowhirling {
- 0% {
- transform: rotate(0deg);
- -ms-transform: rotate(0deg); /* Internet Explorer */
- -moz-transform: rotate(0deg); /* Firefox */
- -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
- -o-transform: rotate(0deg); /* Opera */
- }
- 100% {
- transform: rotate(-90deg);
- -ms-transform: rotate(-90deg); /* Internet Explorer */
- -moz-transform: rotate(-90deg); /* Firefox */
- -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
- -o-transform: rotate(-90deg); /* Opera */
- }
- }
- }
- </style>
|