完成左侧工具栏交互

package-lock.json

@@ -2696,6 +2696,14 @@
       "integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -5842,8 +5850,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597057976909&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
-      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
-      "dev": true
+      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -12,6 +12,7 @@
     "@persagy-web/big": "2.2.1",
     "@persagy-web/draw": "2.2.1",
     "@persagy-web/graph": "2.2.1",
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
     "lodash": "^4.17.20",

src/api/httputils.ts

@@ -0,0 +1,184 @@
+import axios from "axios"
+import store from "@/store"
+import { MessageBox } from "element-ui"
+
+const CancelToken = axios.CancelToken
+let cancel
+
+// 创建axios实例
+const axiosservice = axios.create({
+    timeout: 30000, // 请求超时时间
+    retry: 4, //重新请求次数
+    retryDelay: 1000, //重新请求的间隔
+    credentials: true, // 接口每次请求会跨域携带cookie
+    cancelToken: new CancelToken(function executor(c) {
+        // executor 函数接收一个 cancel 函数作为参数
+        cancel = c
+    }),
+})
+
+axiosservice.interceptors.request.use(
+    (config) => {
+        config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
+        const token = store.getters["token"] ? store.getters["token"]:'admin:lengqiang'
+        if (config.url.indexOf('mapapp') < 0) {
+            config.headers = {
+                'sso-token': token,
+                isPreview: false, //默认false,当预览开启的时候是true
+            }
+        }
+        return config
+    },
+    (error) => {
+        return Promise.reject(error)
+    }
+)
+
+axiosservice.interceptors.response.use(
+    function(res) {
+        //在这里对返回的数据进行处理
+        //console.log('axios interceptors res = ', res.status, res)
+        const resp = res.data
+        if (resp.result === "unauthc") {
+            store.commit("logined", false)
+            MessageBox.confirm("未登陆或登陆信息已失效, 是否重新登陆?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "error",
+            })
+                .then((resp) => {
+                    //console.log('--------------------------- confirm', resp)
+                    //router.push('/login')
+                    window.location.reload()
+                })
+                .catch((error) => {
+                    //console.log('--------------------------- cancel', error)
+                    console.log("")
+                })
+        } else if (resp.result == "unauthorization") {
+            MessageBox.alert("无权操作", { title: "警告", type: "error" })
+        }
+        //console.log('axios interceptors resp2 = ', resp.success, resp.errorCode, resp.errorMessage, res)
+        return res
+    },
+    function(err) {
+        //Do something with response error
+        console.log("axios interceptors err = ", err)
+        return Promise.reject(err)
+    }
+)
+
+/* 下载方法 */
+function downFile(blob, fileName) {
+    // 非IE下载
+    if ("download" in document.createElement("a")) {
+        const link = document.createElement("a")
+        link.href = window.URL.createObjectURL(blob) // 创建下载的链接
+        link.download = fileName // 下载后文件名
+        link.style.display = "none"
+        document.body.appendChild(link)
+        link.click() // 点击下载
+        window.URL.revokeObjectURL(link.href) // 释放掉blob对象
+        document.body.removeChild(link) // 下载完成移除元素
+    } else {
+        // IE10+下载
+        window.navigator.msSaveBlob(blob, fileName)
+    }
+}
+
+export default {
+    //获取cookie
+    getCookie(name) {
+        let arr,
+            reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
+        if ((arr = document.cookie.match(reg))) {
+            return unescape(arr[2])
+        } else {
+            /* 如果没有参数，那么就获取本域下的所有cookie */
+            return document.cookie
+        }
+    },
+
+    async getJson(url, params) {
+        try {
+            const response = await axiosservice({
+                url,
+                params,
+                method: "get",
+            })
+            return response.data
+        } catch (err) {
+            throw err
+        }
+    },
+    async postJson(url, data) {
+        try {
+            const response = await axiosservice({
+                url,
+                data,
+                method: "post",
+            })
+            return response.data
+        } catch (err) {
+            throw err
+        }
+    },
+    async fetchJson(url, params, data) {
+        try {
+            const response = await axiosservice({
+                url,
+                params,
+                data,
+                method: "post",
+            })
+            return response
+        } catch (err) {
+            throw err
+        }
+    },
+    async postupload(url, data) {
+        try {
+            const response = await axiosservice({
+                url,
+                data,
+                method: "post",
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+            })
+            return response.data
+        } catch (err) {
+            throw err
+        }
+    },
+    download(url, requestData) {
+        // 响应类型：arraybuffer, blob
+        axiosservice
+            .post(url, requestData, { responseType: "blob" })
+            .then((resp) => {
+                const headers = resp.headers
+                const contentType = headers["content-type"]
+
+                console.log("响应头信息", headers)
+                if (!resp.data) {
+                    console.error("响应异常：", resp)
+                    return false
+                } else {
+                    console.log("下载文件：", resp)
+                    const blob = new Blob([resp.data], { type: contentType })
+
+                    const contentDisposition = resp.headers["content-disposition"]
+                    let fileName = "unknown"
+                    if (contentDisposition) {
+                        fileName = window.decodeURI(resp.headers["content-disposition"].split("=")[1])
+                    }
+                    console.log("文件名称：", fileName)
+                    downFile(blob, fileName)
+                }
+            })
+            .catch(function(error) {
+                console.log(error)
+            })
+    },
+    axios: axiosservice,
+}

src/components/editClass/big-edit/SBaseEditScene.ts

@@ -3,6 +3,7 @@ import { SMouseEvent, SUndoStack } from "@persagy-web/base/lib";
 import { SPoint, SFont, SColor, SRect } from '@persagy-web/draw/lib';
 import { SRectSelectItem } from '@persagy-web/big/lib';
 import { SGraphItem } from "@persagy-web/graph/";
+import { uuid } from "./until";
 export class SBaseEditScene extends SGraphEditScene {
 
     /**图例节点 */
@@ -154,7 +155,7 @@ export class SBaseEditScene extends SGraphEditScene {
         if (itemList.length) {
             itemList.forEach(t => {
                 const data = JSON.parse(JSON.stringify(t.toData()))
-                data.ID = ''
+                data.ID = uuid()
                 this.copyString.push(data)
 
             })
@@ -182,11 +183,14 @@ export class SBaseEditScene extends SGraphEditScene {
         const copyList = JSON.parse(JSON.stringify(this.copyString));
         copyList.forEach(t => {
             if (this.view) {
-                t.Pos.X += 10 / this.view.scale
-                t.Pos.Y += 10 / this.view.scale
+                t.Pos.X += 10,
+                    t.Pos.Y += 10
             }
             t.moveable = true;
+            console.log('t',t)
             this.addItem(t)
         });
+        this.view ? this.view.update() : ''
+        console.log(this.view)
     }
 }

src/components/editClass/big-edit/parsers/bigEditParse.ts

@@ -0,0 +1 @@
+import { SBaseLineEdit, SBaseTextEdit, SBaseImageEdit, SBaseExpainEdit, SBasePolygonEdit } from "./../index"

src/components/editview/leftToolBar.vue

@@ -3,20 +3,19 @@
   <div class="left-tool-bar">
     <div class="btn-list">
       <ul>
-        <li :class="{ 'btn-active': chiceStatus==1 }" @click="openTool(1)">
-          <span class="icon iconfont iconzhongxin"></span>
-        </li>
-        <li :class="{ 'btn-active': chiceStatus==2 }" @click="openTool(2)">
-          <span class="icon iconfont icongongju"></span>
-        </li>
-        <li :class="{ 'btn-active': chiceStatus==3 }" @click="openTool(3)">
-          <span class="icon iconfont iconguandao"></span>
-        </li>
-        <li :class="{ 'btn-active': chiceStatus==4 }" @click="openTool(4)">
-          <span class="icon iconfont iconkongjian"></span>
-        </li>
-        <li :class="{ 'btn-active': chiceStatus==5 }" @click="openTool(5)">
-          <span class="icon iconfont iconlouti"></span>
+        <li
+          v-for="(item,index) in leftData"
+          :key="index"
+          :class="{ 'btn-active': chiceStatus==index }"
+          @click="openTool(index)"
+        >
+          <img
+            width="20px"
+            height="20px"
+            :src="chiceStatus==index ? item.activeIcon : item.icon"
+            alt
+          />
+          <span>{{item.name}}</span>
         </li>
       </ul>
     </div>
@@ -32,11 +31,49 @@
       :before-close="handleClose"
       :wrapperClosable="false"
     >
-      <legendList></legendList>
+      <legendList :chiceStatus="chiceStatus"></legendList>
     </el-drawer>
   </div>
 </template>
 <script>
+const leftData = [
+  {
+    id: "tongyong",
+    name: "通用",
+    icon: require("./../../assets/images/leftImgs/tongyong.png"),
+    activeIcon: require("./../../assets/images/leftImgs/tongyongactive.png"),
+  },
+  {
+    id: "equipment",
+    name: "设备",
+    icon: require("./../../assets/images/leftImgs/equipment.png"),
+    activeIcon: require("./../../assets/images/leftImgs/equipmentactive.png"),
+  },
+  {
+    id: "equipList",
+    name: "设备组",
+    icon: require("./../../assets/images/leftImgs/equipList.png"),
+    activeIcon: require("./../../assets/images/leftImgs/equipListactive.png"),
+  },
+  {
+    id: "guanxian",
+    name: "管线",
+    icon: require("./../../assets/images/leftImgs/guanxian.png"),
+    activeIcon: require("./../../assets/images/leftImgs/guanxianactive.png"),
+  },
+  {
+    id: "space",
+    name: "空间",
+    icon: require("./../../assets/images/leftImgs/space.png"),
+    activeIcon: require("./../../assets/images/leftImgs/spaceactive.png"),
+  },
+  {
+    id: "same",
+    name: "同类",
+    icon: require("./../../assets/images/leftImgs/same.png"),
+    activeIcon: require("./../../assets/images/leftImgs/sameactive.png"),
+  },
+];
 import legendList from "./leftToolBar/legendList.vue";
 import { mapMutations } from "vuex";
 export default {
@@ -44,8 +81,9 @@ export default {
   data() {
     return {
       drawer: false,
-      chiceStatus: 0, //选中按钮状态
-      direction: "ltr"
+      chiceStatus: -1, //选中按钮状态
+      direction: "ltr",
+      leftData,
     };
   },
   methods: {
@@ -58,6 +96,7 @@ export default {
         this.chiceStatus = val;
         if (this.drawer) {
           this.drawer = false;
+          4;
           setTimeout(() => {
             this.drawer = true;
           }, 300);
@@ -73,8 +112,8 @@ export default {
       this.chiceStatus = 0;
       this.drawer = false;
       this.SETCHOICELEHEND("");
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -92,24 +131,32 @@ li {
   .btn-list {
     height: 100%;
     ul {
-      width: 60px;
+      width: 54px;
       height: 100%;
       border-top: 1px solid #eee;
       border-right: 1px solid #eee;
       li {
         width: 100%;
-        height: 60px;
+        height: 58px;
         border-bottom: 1px solid #eee;
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-direction: column;
         cursor: pointer;
+        span {
+          color: #8d9399;
+          font-size: 12px;
+        }
       }
       li:hover {
-        background: #E4E5E7;
+        background: #e4e5e7;
       }
       .btn-active {
         background: #e1f2ff !important;
+        span {
+          color: #0091ff;
+        }
       }
     }
   }

src/components/editview/leftToolBar/data.js

@@ -1,3 +1,4 @@
+
 export const baseEditItems = [{
     title: '基础组件',
     itemList: [{
@@ -5,22 +6,26 @@ export const baseEditItems = [{
             itemList: [{
                     name: '线条',
                     id: "EditBaseLine",
-                    icon: ''
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseLine.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseLine"+"Active"+".png")
                 },
                 {
                     name: '文本框',
                     id: "EditBasetext",
-                    icon: ''
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBasetext.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasetext"+"Active"+".png")
                 },
                 {
                     name: '图片',
                     id: "EditBaseImage",
-                    icon: ''
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseImage.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseImage"+"Active"+".png")
                 },
                 {
                     name: '批注',
                     id: "EditBasePostil",
-                    icon: ''
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBasePostil.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasePostil"+"Active"+".png")
                 }
             ]
         },
@@ -29,54 +34,72 @@ export const baseEditItems = [{
             itemList: [{
                     name: '矩形',
                     id: "EditBaseRect",
-                    icon: ''
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseRect.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseRect"+"Active"+".png")
                 },
                 {
                     name: '三角形',
                     id: "EditBaseTriangle",
-                    icon: ''
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseTriangle.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseTriangle"+"Active"+".png")
                 },
                 {
-                    name: '多边形',
-                    id: "EditBasePolygon",
-                    icon: ''
+                    name: '箭头',
+                    id: "EditBaseArrows",
+                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseArrows.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseArrows"+"Active"+".png")
+                }
+            ]
+        },
+        {
+            title: '联通方式',
+            itemList: [{
+                    name: '弯头',
+                    id: "wantou",
+                    icon:require("./../../../assets/images/leftImgs/"+"wantou.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "wantou"+"Active"+".png")
                 },
                 {
-                    name: '圆形',
-                    id: "EditBaseCircle",
-                    icon: ''
+                    name: '三通',
+                    id: "santong",
+                    icon:require("./../../../assets/images/leftImgs/"+"santong.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "santong"+"Active"+".png")
                 },
                 {
-                    name: '箭头',
-                    id: "EditBaseArrows",
-                    icon: ''
+                    name: '四通',
+                    id: "sitong",
+                    icon:require("./../../../assets/images/leftImgs/"+"sitong.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "sitong"+"Active"+".png")
                 }
             ]
         },
         {
-            title: '图标',
+            title: '动态取值',
             itemList: [{
-                    name: '锚',
-                    id: "123",
-                    icon: ''
+                    name: '公式',
+                    id: "equation",
+                    icon:require("./../../../assets/images/leftImgs/"+"equation.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "equation"+"Active"+".png")
                 },
                 {
-                    name: '矫正',
-                    id: "112",
-                    icon: ''
+                    name: '信息点',
+                    id: "infoPoint",
+                    icon:require("./../../../assets/images/leftImgs/"+"infoPoint.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "infoPoint"+"Active"+".png")
                 },
                 {
-                    name: '面积',
-                    id: "123",
-                    icon: ''
+                    name: '设备组',
+                    id: "equipList",
+                    icon:require("./../../../assets/images/leftImgs/"+"equipList.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "equipList"+"Active"+".png")
                 },
                 {
-                    name: '箭头',
-                    id: "12313",
-                    icon: ''
+                    name: '通用实例',
+                    id: "publicItem",
+                    icon:require("./../../../assets/images/leftImgs/"+"publicItem.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "publicItem"+"Active"+".png")
                 }
             ]
         },
-
     ]
 }]

src/components/editview/leftToolBar/legendList.vue

@@ -2,21 +2,31 @@
 <template>
   <div class="lengend-list">
     <!-- 基础图例 -->
-    <div class="lengend-item" v-for="(item,index) in baseEditItems" :key="index">
-      <span class="legend-title">{{item.title}}</span>
-      <div class="legend-content" v-for="(itemList,i) in item.itemList" :key="i">
-        <div class="title">{{itemList.title}}</div>
-        <ul>
-          <li
-            :class="{ 'btn-active': choiceLegend== baseItem.id }"
-            v-for="(baseItem,k) in itemList.itemList"
-            :key="k"
-            @click="drawItem(baseItem.id)"
-          >
-            <div class="icon"></div>
-            <span>{{baseItem.name}}</span>
-          </li>
-        </ul>
+    <div class="base-item-list" v-if="chiceStatus==0">
+      <Input
+        class="baseItemInput"
+        :width="188"
+        iconType="search"
+        v-model="baseItemVal"
+        @pressEnter="pressEnter"
+      />
+      <div class="lengend-item" v-for="(item,index) in baseEditItems" :key="index">
+        <span class="legend-title">{{item.title}}</span>
+        <div class="legend-content" v-for="(itemList,i) in item.itemList" :key="i">
+          <div class="title">{{itemList.title}}</div>
+          <ul>
+            <li
+              :class="{ 'btn-active': choiceLegend== baseItem.id }"
+              v-for="(baseItem,k) in itemList.itemList"
+              :key="k"
+              @click="drawItem(baseItem.id)"
+              :title="baseItem.name"
+            >
+              <img class="icon" :src="baseItem.icon" />
+              <span class="iconName">{{baseItem.name}}</span>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -25,71 +35,90 @@
 import { baseEditItems } from "./data";
 import { mapMutations, mapState } from "vuex";
 export default {
+  props: ["chiceStatus"],
   data() {
     return {
-      baseEditItems
+      baseEditItems,
+      baseItemVal:'', //基础组件搜索
       // choiceLegend: "" //选中绘制类型
     };
   },
   computed: {
-    ...mapState(["choiceLegend"])
+    ...mapState(["choiceLegend"]),
   },
   methods: {
     ...mapMutations(["SETCHOICELEHEND"]),
     drawItem(item) {
       this.SETCHOICELEHEND(item);
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="less">
 .lengend-list {
   width: 100%;
-  .lengend-item {
-    width: 100%;
-    .legend-title {
-      display: block;
-      font-size: 14px;
-      height: 14px;
-      line-height: 14px;
-      margin-left: 10px;
-      color: #8D9399;
+  .base-item-list {
+    .baseItemInput {
+      margin: 12px 0;
     }
-    .legend-content {
-      padding: 0 10 10px 10px;
-      box-sizing: border-box;
-      .title {
+    .lengend-item {
+      width: 100%;
+      .legend-title {
+        display: block;
+        font-size: 14px;
+        height: 38px;
+        line-height: 38px;
         margin-left: 10px;
-        font-weight: bold;
+        color: #8d9399;
         border-top: 1px solid #eee;
-        padding-top: 10px;
-        padding-bottom: 10px;
       }
-      ul {
-        display: flex;
-        justify-content: space-around;
-        li {
-          font-size: 12px;
-          width: 44px;
-          height: 44px;
+      .legend-content {
+        padding: 0 10 10px 10px;
+        box-sizing: border-box;
+        .title {
+          margin-left: 10px;
+          font-weight: bold;
+          color: #1f2429;
+          font-size: 14px;
+          padding-top: 16px;
+          padding-bottom: 16px;
+        }
+        ul {
           display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          padding: 4px;
-          box-sizing: border-box;
-          .icon {
-            width: 22px;
-            height: 22px;
-            background: red;
+          flex-wrap: wrap;
+          border-bottom: 1px solid #eee;
+          li {
+            font-size: 12px;
+            width: 52px;
+            height: 52px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            padding: 4px;
+            box-sizing: border-box;
+            margin: 0 10px 16px 10px;
+            .icon {
+              width: 28px;
+              height: 28px;
+              // background: red;
+            }
+            .iconName {
+              width: 100%;
+              display: flex;
+              justify-content: center;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            cursor: pointer;
+          }
+          li:hover {
+            background: #f5f6f7;
+          }
+          .btn-active {
+            background: #e1f2ff !important;
           }
-          cursor: pointer;
-        }
-        li:hover {
-          background: #e1f2ff;
-        }
-        .btn-active {
-          background: #e1f2ff;
         }
       }
     }

src/components/homeView/topoImageCard.vue

@@ -0,0 +1,25 @@
+<!--拓扑图缩略图卡片-->
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>卡片名称</span>
+      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+    </div>
+    <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
+  </el-card>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.box-card {
+  width: 260px;
+  height: 200px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+</style>

src/main.ts

@@ -6,8 +6,10 @@ import './assets/font/iconfont.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
-
-Vue.config.productionTip = false
+import { Input } from 'meri-design';
+// 按需引入公共组件
+Vue.use(Input)
+Vue.config.productionTip = false;
 new Vue({
   router,
   store,

src/views/Home.vue

@@ -19,15 +19,39 @@
       </el-aside>
       <!-- 展示部分 -->
       <el-main class="main">
-        <div class="main-head"></div>
+        <div class="main-head">
+          <el-button-group>
+            <el-button size="small">已发布</el-button>
+            <el-button size="small">未发布</el-button>
+          </el-button-group>
+          <div class="head-right">
+            <el-input size="medium" placeholder="请输入内容" v-model="input2"></el-input>
+            <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
+              <span class="drop-text">{{selText}}</span>
+            </Dropdown>
+          </div>
+        </div>
+        <div class="main-body">
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+          <topoImageCard></topoImageCard>
+        </div>
       </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script>
-import { Select, Button } from "meri-design";
+import { Select, Button, Dropdown } from "meri-design";
 import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
+import topoImageCard from "@/components/homeView/topoImageCard.vue";
 export default {
   name: "home",
   data() {
@@ -43,6 +67,15 @@ export default {
         },
         { id: "test4", name: "滑动平均滑动平均", sub: "hi" },
       ],
+      selVal: "totalEnergy",
+      selText: "总量",
+      dataSelect: [
+        { id: "totalEnergy", name: "总量" },
+        { id: "singleParty", name: "单平米" },
+        { id: "lowerLevel", name: "下级分项" },
+        { id: "average", name: "滑动平均", disabled: true },
+      ],
+      input2: "",
     };
   },
   methods: {
@@ -50,7 +83,7 @@ export default {
       console.log(data);
     },
   },
-  components: { Select, Button, leftAsideTree },
+  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
 };
 </script>
 <style lang="less" scoped>
@@ -77,6 +110,28 @@ export default {
       padding: 10px 20px;
       box-sizing: border-box;
       .main-head {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .head-right {
+          display: flex;
+          align-items: center;
+          .Dropdown {
+            min-width: 100px;
+            margin-left: 20px;
+            .drop-text {
+              font-size: 14px;
+              color: #1f2329;
+              line-height: 16px;
+            }
+          }
+        }
+      }
+      .main-body {
+        display: flex;
+        flex-wrap: wrap;
       }
     }
   }