edit:feat>信息点模拟数据测试

src/App.vue

@@ -6,13 +6,18 @@
 <script>
 export default {
   data() {
-    return {
-
-    }
+    return {};
   },
-}
+};
 </script>
 <style lang="less">
+div {
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
 body,
 html {
   margin: 0;

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -33,29 +33,65 @@
               <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 @click="tap" type="default">上传文件</Button>
+            </div>
+          </div>
+          <div class="imgUpdate">
+            <div class="img-tit">附加数据</div>
+            <div class="textarea">
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea"
+              >
+              </el-input>
+            </div>
+          </div>
         </div>
       </el-tab-pane>
       <el-tab-pane label="信息点" name="second">
         <div class="msgPoint-box">
           <Input
             class="baseItemInput"
-            :width="188"
+            :width="200"
             iconType="search"
-            placeholder="搜索元素名称"
+            placeholder="搜索信息点"
           />
           <div class="msgPoint-list">
-            <div class="type-list">
-              <div class="title">
-                <i v-bind:class="['el-icon-caret-bottom']"></i>
-                <!-- item.isShow ? 'caret-icon-active' : 'caret-icon', -->
-                <span>即时状态</span>
+            <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>
-              <ul class="list">
-                <li>
-                  <Checkbox :checked="checked1" @change="handleChange" />
-                  <p>xxx信息点</p>
-                </li>
-              </ul>
+              <el-collapse-transition>
+                <ul class="list" v-show="item.showChildren">
+                  <li v-for="(a, b) in item.children" :key="'i' + b">
+                    <Checkbox :checked="checked1" @change="handleChange" />
+                    <p>{{ a.msgName }}</p>
+                  </li>
+                </ul>
+              </el-collapse-transition>
             </div>
           </div>
         </div>
@@ -64,6 +100,7 @@
   </div>
 </template>
 <script>
+import { msgData } from "./msgData.js";
 export default {
   data() {
     return {
@@ -71,9 +108,15 @@ export default {
       width: "",
       height: "",
       checked1: "checked",
+      isShow: true,
+      msgData: [],
     };
   },
   methods: {
+    // 折叠信息点操作
+    clips(item) {
+      item.showChildren = !item.showChildren;
+    },
     handleClick(tab, event) {
       console.log(tab, event);
     },
@@ -85,12 +128,49 @@ export default {
       this.checked1 = v;
     },
   },
-  mounted() {},
+  mounted() {
+    let arr = [];
+    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);
+  },
 };
 </script>
 <style lang="less" scoped>
 ul,
-li {
+li,
+p {
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -110,14 +190,98 @@ li {
       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{
+  .msgPoint-box {
     width: 100%;
     height: 100%;
     padding: 0 12px 0 12px;
     box-sizing: border-box;
-    .msgPoint-list{
+    .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;
+            }
+          }
+        }
+      }
+    }
+  }
+  .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 */
     }
   }
 }

src/components/editview/rightPropertyBar/msgData.js

@@ -0,0 +1,38 @@
+export const msgData = [
+    {
+        msgType: '即时状态',
+        msgTypeId: 1,
+        id: '001',
+        msgName: '001信息点'
+    },
+    {
+        msgType: '即时状态',
+        msgTypeId: 1,
+        id: '002',
+        msgName: '002信息点'
+    },
+    {
+        msgType: '即时状态',
+        msgTypeId: 1,
+        id: '003',
+        msgName: '003信息点'
+    },
+    {
+        msgType: '累计指标',
+        msgTypeId: 2,
+        id: '004',
+        msgName: '001信息点'
+    },
+    {
+        msgType: '累计指标',
+        msgTypeId: 2,
+        id: '005',
+        msgName: '002信息点'
+    },
+    {
+        msgType: '累计指标',
+        msgTypeId: 2,
+        id: '006',
+        msgName: '003信息点'
+    }
+]

src/components/editview/rightPropertyBar/property.vue

@@ -40,7 +40,8 @@
       :Height="Height"
       v-show="itemType == 'BaseImage'"
     ></BaseImagePro>
-    <BaseEquipment v-show="itemType == 'BaseEquipment'"></BaseEquipment>
+    <BaseEquipment v-if="true"></BaseEquipment>
+    <!-- itemType == 'BaseEquipment' -->
   </div>
 </template>
 <script>

src/main.ts

@@ -6,7 +6,7 @@ import './assets/font/iconfont.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
-import { Input, Modal, Cascader, Popover, Icon, Pagination, Loading,Checkbox } from 'meri-design';
+import { Input, Modal, Cascader, Popover, Icon, Pagination, Loading,Checkbox,Button  } from 'meri-design';
 import { Select } from 'ant-design-vue';
 // 按需引入公共组件
 Vue.use(Input)
@@ -17,6 +17,7 @@ Vue.use(Popover)
 Vue.use(Icon)
 Vue.use(Pagination)
 Vue.use(Checkbox)
+Vue.use(Button)
 Vue.prototype.$loading = Loading;
 
 Vue.config.productionTip = false;