guoxiaohuan 4 anni fa
parent
commit
c33106da18
1 ha cambiato i file con 229 aggiunte e 241 eliminazioni
  1. 229 241
      src/components/menuList.vue

+ 229 - 241
src/components/menuList.vue

@@ -1,277 +1,265 @@
 <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 @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>
+            <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>
-  </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
-      }
-    };
-  },
-  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);
+    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
+            }
+        }
     },
-    handleRoute(newRouter) {
-      if (!newRouter) {
-        return false;
-      }
-      const { path } = newRouter;
-      let router = path.split("home/")[1];
-      this.modelNum(this.dict[router]);
+    computed: {
+        ...mapGetters(['plazas', 'plazaId'])
     },
-    formatter(str, arrv) {
-      if (str && arrv) {
-        const Objs = arrv.find(e => e && e.plazaid == str);
-        return Objs ? Objs.plazaname : "--";
-      } else {
-        return "";
-      }
+    watch: {
+        $route: 'handleRoute'
     },
-    modelNum(val) {
-      this.list = this.list.map((item, index) => {
-        if (val == index + 1) {
-          item.state = true;
-        } else {
-          item.state = false;
-        }
-        return item;
-      });
+    created() {
+        this.currentTime()
     },
-    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}` });
+    mounted() {
+        window.vm = this
+        this.handleRoute(this.$route)
     },
+    methods: {
+        //入草稿箱
+        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)
+        },
+        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)
         }
-    },
-    //入草稿箱
-    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;
-    // 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;
+    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;
+                }
+            }
         }
-      }
-    }
-  }
-  & > 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%
-      );
+    & > 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-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;
+    .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;
+            }
+        }
     }
-    .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;
     }
-  }
-  .span1,
-  .span2 {
-    padding: 0 6px 0 3px;
-  }
 
-  .span3 {
-    padding-left: 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>