YaolongHan 4 anni fa
parent
commit
9ec933e841
1 ha cambiato i file con 245 aggiunte e 227 eliminazioni
  1. 245 227
      src/components/menuList.vue

+ 245 - 227
src/components/menuList.vue

@@ -1,258 +1,276 @@
 <template>
-    <!-- 顶部路由 -->
-    <div class='menu'>
-        <div class='home' @click='$emit("update:modelNum", 0)'>
-            <div class='downright'></div>
-            <div class='home-box'>
-                <img src='@/assets/imgs/logo.png' alt />
-                <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
-            </div>
-        </div>
-        <div>
-            <div
-                v-for='(item, index) in list'
-                :key='index'
-                :class='{ "is-active": item.state }'
-                @click='clickEventAcitve(item, index)'
-            >{{ item.name }}</div>
-        </div>
-        <div class='home-right'>
-            <span @click='dumpLegend'>
-                <img class='img1' src='../assets/imgs/scj.png' alt />
-                <span class='span1'>图例库</span>
-            </span>
+  <!-- 顶部路由 -->
+  <div class="menu">
+    <div class="home" @click="$emit('update:modelNum', 0)">
+      <div class="downright"></div>
+      <div class="home-box">
+        <img src="@/assets/imgs/logo.png" alt />
+        <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
+      </div>
+    </div>
+    <div>
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{ 'is-active': item.state }"
+        @click="clickEventAcitve(item, index)"
+      >{{ item.name }}</div>
+    </div>
+    <div class="home-right">
+      <span @click="dumpLegend">
+        <img class="img1" src="../assets/imgs/scj.png" alt />
+        <span class="span1">图例库</span>
+      </span>
 
-            <span class='span-out'>
-                <img class='img2' src='../assets/imgs/cgx.png' alt />
-                <span class='span2'>草稿箱</span>
-                <span class='span2-num' v-if='value<=99'>{{value}}</span>
-                <span class='span2-num' style='line-height:10px' v-else>...</span>
-            </span>
-            <span>
-                <img class='img3' src='../assets/imgs/clock.png' alt />
-                <span class='span3'>{{times}}</span>
-            </span>
-        </div>
+      <span @click="toDrafts" class="span-out">
+        <img class="img2" src="../assets/imgs/cgx.png" alt />
+        <span class="span2">草稿箱</span>
+        <span class="span2-num" v-if="value<=99">{{value}}</span>
+        <span class="span2-num" style="line-height:10px" v-else>...</span>
+      </span>
+      <span>
+        <img class="img3" src="../assets/imgs/clock.png" alt />
+        <span class="span3">{{times}}</span>
+      </span>
     </div>
+  </div>
 </template>
 
 <script>
-import { formatTime } from '@/utils/format.js'
-import { mapGetters } from 'vuex'
-import moment from 'moment'
+import { formatTime } from "@/utils/format.js";
+import { mapGetters } from "vuex";
+import moment from "moment";
 export default {
-    data() {
-        return {
-            state: '',
-            list: [
-                { name: '首页', state: false, route: 'first' },
-                { name: '项目概况', state: false, route: 'overview' },
-                { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
-                { name: '设备设施', state: false, route: 'equipment' }, //设备设施
-                { name: '其他事项', state: false, route: 'other' }, //其他
-                { name: '分析 | 报表', state: false, route: 'analysis' }
-            ],
-            times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
-                new Date().getHours()
-            )}:${formatTime(new Date().getMinutes())}`,
-            value: 190,
-            // 路由词典
-            dict: {
-                first: 1,
-                overview: 2,
-                floorFunc: 3,
-                equipment: 4,
-                other: 5,
-                analysis: 6
-            }
-        }
+  data() {
+    return {
+      state: "",
+      list: [
+        { name: "首页", state: false, route: "first" },
+        { name: "项目概况", state: false, route: "overview" },
+        { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
+        { name: "设备设施", state: false, route: "equipment" }, //设备设施
+        { name: "其他事项", state: false, route: "other" }, //其他
+        { name: "分析 | 报表", state: false, route: "analysis" }
+      ],
+      times: `${new Date().getFullYear()}.${formatTime(
+        new Date().getMonth() + 1
+      )}.${formatTime(new Date().getDate())} ${formatTime(
+        new Date().getHours()
+      )}:${formatTime(new Date().getMinutes())}`,
+      value: 190,
+      // 路由词典
+      dict: {
+        first: 1,
+        overview: 2,
+        floorFunc: 3,
+        equipment: 4,
+        other: 5,
+        analysis: 6
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(["plazas", "plazaId"])
+  },
+  watch: {
+    $route: "handleRoute"
+  },
+  created() {
+    this.currentTime();
+  },
+  mounted() {
+    window.vm = this;
+    this.handleRoute(this.$route);
+  },
+  methods: {
+    currentTime() {
+      this.times = moment().format("YYYY.MM.DD HH:mm");
+      setTimeout(this.currentTime, 1000);
     },
-    computed: {
-        ...mapGetters(['plazas', 'plazaId'])
+    handleRoute(newRouter) {
+      if (!newRouter) {
+        return false;
+      }
+      const { path } = newRouter;
+      let router = path.split("home/")[1];
+      this.modelNum(this.dict[router]);
     },
-    watch: {
-        $route: 'handleRoute'
+    formatter(str, arrv) {
+      if (str && arrv) {
+        const Objs = arrv.find(e => e && e.plazaid == str);
+        return Objs ? Objs.plazaname : "--";
+      } else {
+        return "";
+      }
     },
-    created() {
-        this.currentTime()
+    modelNum(val) {
+      this.list = this.list.map((item, index) => {
+        if (val == index + 1) {
+          item.state = true;
+        } else {
+          item.state = false;
+        }
+        return item;
+      });
     },
-    mounted() {
-        window.vm = this
-        this.handleRoute(this.$route)
+    clickEventAcitve(item) {
+      if (item.name == "楼层功能") {
+        this.$cookie.set("categoryId", "LCGN", 3);
+      } else {
+        this.$cookie.set("categoryId", "GDXT", 3);
+      }
+      this.list.forEach(ele => {
+        ele.state = false;
+      });
+      item.state = true;
+      this.state = item.state;
+      this.$router.push({ path: `/home/${item.route}` });
     },
-    methods: {
-        currentTime() {
-            this.times = moment().format('YYYY.MM.DD HH:mm')
-            setTimeout(this.currentTime, 1000)
-        },
-        handleRoute(newRouter) {
-            if (!newRouter) {
-                return false
-            }
-            const { path } = newRouter
-            let router = path.split('home/')[1]
-            this.modelNum(this.dict[router])
-        },
-        formatter(str, arrv) {
-            if (str && arrv) {
-                const Objs = arrv.find(e => e && e.plazaid == str)
-                return Objs ? Objs.plazaname : '--'
-            } else {
-                return ''
-            }
-        },
-        modelNum(val) {
-            this.list = this.list.map((item, index) => {
-                if (val == index + 1) {
-                    item.state = true
-                } else {
-                    item.state = false
-                }
-                return item
-            })
-        },
-        clickEventAcitve(item) {
-            if (item.name == '楼层功能') {
-                this.$cookie.set('categoryId', 'LCGN', 3)
-            } else {
-                this.$cookie.set('categoryId', 'GDXT', 3)
-            }
-            this.list.forEach(ele => {
-                ele.state = false
-            })
-            item.state = true
-            this.state = item.state
-            this.$router.push({ path: `/home/${item.route}` })
-        },
 
-        dumpLegend() {
-            const { conf } = window.__systemConf,
-                { wandaBmGuideUrl } = conf
-            window.open(`${wandaBmGuideUrl}/home/legendLibrary`, true)
-        }
+    dumpLegend() {
+      const { conf } = window.__systemConf,
+        { wandaBmGuideUrl } = conf;
+      window.open(`${wandaBmGuideUrl}/home/legendLibrary`, true);
     },
-    components: {}
-}
+    //入草稿箱
+    toDrafts() {
+      const { conf } = window.__systemConf,
+        { editerUrl } = conf;
+      let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`;
+      let url = editerUrl + "drafts?" + encodeURIComponent(data);
+      window.open(url, true);
+    }
+  },
+  components: {}
+};
 </script>
 
 <style scoped lang="less">
 .menu {
+  height: 48px;
+  min-width: 1366px;
+  color: #1f2429;
+  font-size: 16px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
+  overflow: hidden;
+  .home {
+    width: 265px;
     height: 48px;
-    min-width: 1366px;
-    color: #1f2429;
-    font-size: 16px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
-    overflow: hidden;
-    .home {
-        width: 265px;
-        height: 48px;
-        // line-height: 48px;
-        text-align: center;
-        cursor: pointer;
-        color: #ffffff;
-        float: left;
-        margin-right: 83px;
-        // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-        position: relative;
-        .downright {
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-left: 20px solid transparent;
-            border-bottom: 48px solid #fff;
-            right: 0px;
-            top: 0;
-        }
-        .home-box {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            img {
-                width: 28px;
-                height: 28px;
-                margin-left: 20px;
-                margin-right: 24px;
-                margin-top: -3px;
-            }
-            span {
-                font-size: 20px;
-                font-family: MicrosoftYaHei;
-                height: 27px;
-                line-height: 27px;
-                margin-top: -4px;
-                &:after {
-                    content: '|';
-                    position: absolute;
-                    left: 60px;
-                }
-            }
-        }
+    // line-height: 48px;
+    text-align: center;
+    cursor: pointer;
+    color: #ffffff;
+    float: left;
+    margin-right: 83px;
+    // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(54, 156, 247, 1) 0%,
+      rgba(2, 91, 170, 1) 100%
+    );
+    position: relative;
+    .downright {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 20px solid transparent;
+      border-bottom: 48px solid #fff;
+      right: 0px;
+      top: 0;
     }
-    & > div:nth-of-type(2) {
-        & > div {
-            line-height: 48px;
-            text-align: center;
-            //background: url('../assets/images/topbar1.png') no-repeat;
-            float: left;
-            width: 80px;
-            height: 48px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .is-active {
-            color: #025baa;
-            font-weight: bolder;
-            border-bottom: 2px solid #025baa;
-            background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+    .home-box {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      img {
+        width: 28px;
+        height: 28px;
+        margin-left: 20px;
+        margin-right: 24px;
+        margin-top: -3px;
+      }
+      span {
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+        height: 27px;
+        line-height: 27px;
+        margin-top: -4px;
+        &:after {
+          content: "|";
+          position: absolute;
+          left: 60px;
         }
+      }
     }
-    .home-right {
-        float: right;
-        margin-right: 20px;
-        line-height: 48px;
-        color: #646c73;
-        font-size: 14px;
-        cursor: pointer;
-        display: flex;
-        align-content: center;
-        img {
-            margin-top: -2px;
-        }
-        .span-out {
-            position: relative;
-            margin: 0 16px;
-            .span2-num {
-                position: absolute;
-                right: -5px;
-                top: 5px;
-                display: inline-block;
-                width: 18px;
-                height: 18px;
-                background: red;
-                border-radius: 90px;
-                font-size: 12px;
-                text-align: center;
-                line-height: 18px;
-                color: #ffffff;
-            }
-        }
+  }
+  & > div:nth-of-type(2) {
+    & > div {
+      line-height: 48px;
+      text-align: center;
+      //background: url('../assets/images/topbar1.png') no-repeat;
+      float: left;
+      width: 80px;
+      height: 48px;
+      cursor: pointer;
+      transition: all 0.2s;
     }
-    .span1,
-    .span2 {
-        padding: 0 6px 0 3px;
+    .is-active {
+      color: #025baa;
+      font-weight: bolder;
+      border-bottom: 2px solid #025baa;
+      background: linear-gradient(
+        180deg,
+        rgba(2, 91, 170, 0) 0%,
+        rgba(2, 91, 170, 0.2) 100%
+      );
     }
-
-    .span3 {
-        padding-left: 3px;
+  }
+  .home-right {
+    float: right;
+    margin-right: 20px;
+    line-height: 48px;
+    color: #646c73;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-content: center;
+    img {
+      margin-top: -2px;
     }
+    .span-out {
+      position: relative;
+      margin: 0 16px;
+      .span2-num {
+        position: absolute;
+        right: -5px;
+        top: 5px;
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        background: red;
+        border-radius: 90px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 18px;
+        color: #ffffff;
+      }
+    }
+  }
+  .span1,
+  .span2 {
+    padding: 0 6px 0 3px;
+  }
+
+  .span3 {
+    padding-left: 3px;
+  }
 }
 </style>
 <style lang="less">
 .menu {
-    .el-badge__content.is-fixed {
-        top: 10px;
-    }
+  .el-badge__content.is-fixed {
+    top: 10px;
+  }
 }
 </style>