Ver código fonte

feat:第一次提交,完成脚手架

YaolongHan 4 anos atrás
commit
ff78b79fb0
70 arquivos alterados com 15332 adições e 0 exclusões
  1. 2 0
      .browserslistrc
  2. 17 0
      .eslintrc.js
  3. 21 0
      .gitignore
  4. 29 0
      README.md
  5. 4 0
      babel.config.js
  6. 11788 0
      package-lock.json
  7. 31 0
      package.json
  8. BIN
      public/favicon.ico
  9. 21 0
      public/index.html
  10. 150 0
      src/App.vue
  11. BIN
      src/assets/images/back.jpg
  12. BIN
      src/assets/images/close.png
  13. BIN
      src/assets/images/icon_arrow.png
  14. BIN
      src/assets/images/icon_legend.png
  15. BIN
      src/assets/images/icon_menu_red.png
  16. BIN
      src/assets/images/icon_menu_white.png
  17. BIN
      src/assets/images/icon_password.png
  18. BIN
      src/assets/images/icon_room_red.png
  19. BIN
      src/assets/images/icon_room_white.png
  20. BIN
      src/assets/images/icon_username.png
  21. BIN
      src/assets/images/login_back.png
  22. BIN
      src/assets/images/login_icon.png
  23. BIN
      src/assets/images/matter_ball.png
  24. BIN
      src/assets/images/matter_floorB2.png
  25. BIN
      src/assets/images/matter_floorF1.png
  26. BIN
      src/assets/images/matter_lists.png
  27. BIN
      src/assets/images/matter_pop1.png
  28. BIN
      src/assets/images/matter_pop2.png
  29. BIN
      src/assets/images/matter_pop3.png
  30. BIN
      src/assets/images/meue_back.png
  31. BIN
      src/assets/images/survey_company.png
  32. BIN
      src/assets/images/survey_map.png
  33. BIN
      src/assets/images/survey_overlook.png
  34. BIN
      src/assets/images/survey_pop1.png
  35. BIN
      src/assets/images/survey_pop2.png
  36. BIN
      src/assets/images/survey_project_btn.png
  37. BIN
      src/assets/images/survey_project_data.png
  38. BIN
      src/assets/images/topbar1.png
  39. BIN
      src/assets/images/topbar2.png
  40. 88 0
      src/components/menuList.vue
  41. 11 0
      src/main.js
  42. 55 0
      src/router/index.js
  43. 15 0
      src/store/index.js
  44. 449 0
      src/views/Device/Dnav.vue
  45. 809 0
      src/views/Device/FilterModal.vue
  46. 310 0
      src/views/Device/Modal.vue
  47. 362 0
      src/views/Device/index.vue
  48. 8 0
      src/views/equipment/index.vue
  49. 8 0
      src/views/floorFunc/index.vue
  50. 604 0
      src/views/flooraction/index.vue
  51. 370 0
      src/views/flooraction/selector.vue
  52. 53 0
      src/views/index.vue
  53. 109 0
      src/views/login.vue
  54. 8 0
      src/views/other/index.vue
  55. 10 0
      src/views/overview/index.vue
  56. BIN
      static/device/active.png
  57. BIN
      static/device/bg1.png
  58. BIN
      static/device/bg2.png
  59. BIN
      static/device/bg3.png
  60. BIN
      static/device/bg4.png
  61. BIN
      static/device/icon1.png
  62. BIN
      static/device/icon2.png
  63. BIN
      static/device/icon3.png
  64. BIN
      static/device/icon4.png
  65. BIN
      static/device/icon5.png
  66. BIN
      static/device/icon6.png
  67. BIN
      static/device/icon7.png
  68. BIN
      static/device/icon8.png
  69. BIN
      static/device/icon9.png
  70. BIN
      static/device/nav-bg.png

+ 2 - 0
.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

+ 17 - 0
.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

+ 21 - 0
.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

+ 29 - 0
README.md

@@ -0,0 +1,29 @@
+# wandaspecificationofsanming
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 4 - 0
babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    presets: ['@vue/cli-plugin-babel/preset'],
+    plugins: []
+}

Diferenças do arquivo suprimidas por serem muito extensas
+ 11788 - 0
package-lock.json


+ 31 - 0
package.json

@@ -0,0 +1,31 @@
+{
+    "name": "wandaspecificationofsanming",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve --open",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "ant-design-vue": "^1.4.10",
+        "core-js": "^3.4.4",
+        "vue": "^2.6.10",
+        "vue-router": "^3.1.3",
+        "vuex": "^3.1.2"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^4.1.0",
+        "@vue/cli-plugin-eslint": "^4.1.0",
+        "@vue/cli-plugin-router": "^4.1.0",
+        "@vue/cli-plugin-vuex": "^4.1.0",
+        "@vue/cli-service": "^4.1.0",
+        "babel-eslint": "^10.0.3",
+        "babel-plugin-component": "^1.1.1",
+        "eslint": "^5.16.0",
+        "eslint-plugin-vue": "^5.0.0",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "vue-template-compiler": "^2.6.10"
+    }
+}

BIN
public/favicon.ico


+ 21 - 0
public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>三明万达广场报告</title>
+</head>
+
+<body>
+    <noscript>
+    <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please enable
+      it to continue.</strong>
+  </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+</body>
+
+</html>

+ 150 - 0
src/App.vue

@@ -0,0 +1,150 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="less">
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+  font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+
+address,
+cite,
+dfn,
+var,
+em,
+i,
+u {
+  font-style: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+img {
+  border: none;
+  vertical-align: middle;
+}
+
+:focus {
+  outline: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* 滚动条样式 */
+
+body ::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+body ::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 3px;
+}
+
+body ::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
+}
+
+body ::-webkit-scrollbar-thumb:vertical:hover {
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
+}
+
+.clearfix::after {
+  content: '.';
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.clearfix {
+  zoom: 1;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  // min-width: 1920px;
+  background: url('./assets/images/back.jpg') no-repeat;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>

BIN
src/assets/images/back.jpg


BIN
src/assets/images/close.png


BIN
src/assets/images/icon_arrow.png


BIN
src/assets/images/icon_legend.png


BIN
src/assets/images/icon_menu_red.png


BIN
src/assets/images/icon_menu_white.png


BIN
src/assets/images/icon_password.png


BIN
src/assets/images/icon_room_red.png


BIN
src/assets/images/icon_room_white.png


BIN
src/assets/images/icon_username.png


BIN
src/assets/images/login_back.png


BIN
src/assets/images/login_icon.png


BIN
src/assets/images/matter_ball.png


BIN
src/assets/images/matter_floorB2.png


BIN
src/assets/images/matter_floorF1.png


BIN
src/assets/images/matter_lists.png


BIN
src/assets/images/matter_pop1.png


BIN
src/assets/images/matter_pop2.png


BIN
src/assets/images/matter_pop3.png


BIN
src/assets/images/meue_back.png


BIN
src/assets/images/survey_company.png


BIN
src/assets/images/survey_map.png


BIN
src/assets/images/survey_overlook.png


BIN
src/assets/images/survey_pop1.png


BIN
src/assets/images/survey_pop2.png


BIN
src/assets/images/survey_project_btn.png


BIN
src/assets/images/survey_project_data.png


BIN
src/assets/images/topbar1.png


BIN
src/assets/images/topbar2.png


+ 88 - 0
src/components/menuList.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="menu">
+    <div class="home" @click="$emit('update:modelNum', 0)"></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>
+</template>
+
+<script>
+export default {
+  props: ["modelNum"],
+  data() {
+    return {
+      list: [
+        { name: "项目概况", state: false, route: "overview" },
+        { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
+        { name: "设备设施", state: false, route: "equipment" }, //设备设施
+        { name: "其他事项", state: false, route: "other" } //其他
+      ]
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {
+    modelNum(val) {
+      this.list = this.list.map((item, index) => {
+        if (val == index + 1) {
+          item.state = true;
+        } else {
+          item.state = false;
+        }
+        return item;
+      });
+    }
+  },
+  methods: {
+    clickEventAcitve(item) {
+      this.list.forEach(ele => {
+        ele.state = false;
+      });
+      item.state = true;
+      this.$router.push({ path: `/home/${item.route}` });
+    }
+  },
+  components: {}
+};
+</script>
+
+<style scoped lang="less">
+.menu {
+  height: 42px;
+  padding-top: 33px;
+  padding-left: 500px;
+  color: #fff;
+  font-size: 16px;
+  position: relative;
+  .home {
+    width: 430px;
+    height: 75px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+  }
+  & > div:nth-of-type(2) {
+    & > div {
+      line-height: 42px;
+      text-align: center;
+      background: url("../assets/images/topbar1.png") no-repeat;
+      float: left;
+      width: 132px;
+      height: 42px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .is-active {
+      background: url("../assets/images/topbar2.png") no-repeat;
+    }
+  }
+}
+</style>

+ 11 - 0
src/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+Vue.config.productionTip = false
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')

+ 55 - 0
src/router/index.js

@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [
+    // 登陆页面
+    {
+        path: '/',
+        name: 'login',
+        component: () =>
+            import('../views/login')
+    },
+    // home
+    {
+        path: '/home',
+        name: 'home',
+        component: () =>
+            import('../views/index'),
+        children: [
+            //概览
+            {
+                path: 'overview',
+                component: () =>
+                    import('../views/overview')
+            },
+            // 楼层功能
+            {
+                path: 'floorFunc',
+                component: () =>
+                    import('../views/floorFunc')
+            },
+            // 设备设施
+            {
+                path: 'equipment',
+                component: () =>
+                    import('../views/equipment')
+            },
+            // 其他功能
+            {
+                path: 'other',
+                component: () =>
+                    import('../views/other')
+            },
+        ]
+    },
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})
+
+export default router

+ 15 - 0
src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

+ 449 - 0
src/views/Device/Dnav.vue

@@ -0,0 +1,449 @@
+<template>
+  <div>
+    <div class="nav">
+      <div
+        v-for="(item,index) in navList"
+        :key="index"
+        class="nav-item"
+        :class='{"icon-active":active[index]}'
+        @click="handleClick(item,index)"
+      >
+        <img
+          class="icon"
+          :src="item.src"
+        />
+        <span class="nav-text">{{item.text}}</span>
+        <div
+          class="nav-sec"
+          v-if="index==2 && isGeneralShow"
+        >
+          <div
+            class="nav-item "
+            v-for="(item,i) in generalList"
+            :class='{"sec-active":secActive[i]}'
+            :key="i"
+            @click="handleOpen(item.name)"
+            @mouseover="handSecMouseOver(i,2)"
+            @mouseleave="handSecMouseLeave"
+          >
+            <span class="nav-radio"></span>
+            <span class="nav-text">{{item.text}}</span>
+
+          </div>
+
+        </div>
+        <div
+          class="nav-sec"
+          v-if="index==3 && isFireShow"
+        >
+          <div
+            class="nav-item "
+            v-for="(item,i) in fireList"
+            :class='{"sec-active":secActive[i]}'
+            :key="i"
+            @click="handleOpen(item.name)"
+            @mouseover="handSecMouseOver(i,1)"
+            @mouseleave="handSecMouseLeave"
+          >
+            <span class="nav-radio"></span>
+            <span class="nav-text">{{item.text}}</span>
+
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <img
+      v-show="isFireShow||isGeneralShow"
+      src="../../assets/images/device/nav-bg.png"
+      alt="nav-bg"
+      class="nav-bg"
+    >
+  </div>
+
+</template>
+<script>
+export default {
+  name: "Dnav",
+  props: {
+    routerName: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      navList: [
+        {
+          text: "全部",
+          src: require("../../assets/images/device/icon1.png")
+        },
+        {
+          text: "供电系统",
+          src: require("../../assets/images/device/icon2.png")
+        },
+        {
+          text: "暖通系统",
+          src: require("../../assets/images/device/icon3-active.png")
+        },
+        {
+          text: "消防系统",
+          src: require("../../assets/images/device/icon4.png")
+        },
+        {
+          text: "弱电系统",
+          src: require("../../assets/images/device/icon5.png")
+        },
+        {
+          text: "给排水",
+          src: require("../../assets/images/device/icon6.png")
+        },
+        {
+          text: "电梯系统",
+          src: require("../../assets/images/device/icon7.png")
+        },
+        {
+          text: "燃气系统",
+          src: require("../../assets/images/device/icon8.png")
+        },
+        {
+          text: "土建系统",
+          src: require("../../assets/images/device/icon9.png")
+        }
+      ],
+      fireList: [
+        {
+          text: "消防系统原理图",
+          name: "fire-system"
+        },
+        {
+          text: "主要设备清单",
+          name: "fire-mainlist"
+        },
+        {
+          text: "维修维保事项(内)",
+          name: "fire-inner"
+        },
+        {
+          text: "维修维保事项(外)",
+          name: "fire-outer"
+        },
+        {
+          text: "专项维修及其他事项",
+          name: "fire-other"
+        }
+      ],
+      generalList: [
+        {
+          text: "空调系统原理图",
+          name: "air-system"
+        },
+        {
+          text: "分水器支路分布明细",
+          name: "water-layout"
+        },
+        {
+          text: "主要设备清单",
+          name: "main-list"
+        },
+        {
+          text: "维修维保事项(内)",
+          name: "maintain-inner"
+        },
+        {
+          text: "维修维保事项(外)",
+          name: "maintain-outer"
+        },
+        {
+          text: "专项维修及其他事项",
+          name: "maintain-other"
+        }
+      ],
+      active: [false, false, true, false, false, false, false, false],
+      secActive: [],
+      isFireShow: false,
+      isGeneralShow: true
+    };
+  },
+  mounted() {},
+  methods: {
+    handleOpen(name) {
+      if (
+        name == "air-system" ||
+        name == "buseiness" ||
+        name == "main-list" ||
+        name == "buseiness" ||
+        name == "fire-system" ||
+        name == "buseiness" ||
+        name == "buseiness"
+      ) {
+        this.$emit("handleEmit", { show: true, src: name, istab: true });
+      } else {
+        this.$emit("handleEmit", { show: true, src: name, istab: false });
+      }
+    },
+    mouseOver(index) {
+      this.navList = [
+        {
+          text: "全部",
+          src: require("../../assets/images/device/icon1.png")
+        },
+        {
+          text: "供电系统",
+          src: require("../../assets/images/device/icon2.png")
+        },
+        {
+          text: "暖通系统",
+          src: require("../../assets/images/device/icon3.png")
+        },
+        {
+          text: "消防系统",
+          src: require("../../assets/images/device/icon4.png")
+        },
+        {
+          text: "弱电系统",
+          src: require("../../assets/images/device/icon5.png")
+        },
+        {
+          text: "给排水",
+          src: require("../../assets/images/device/icon6.png")
+        },
+        {
+          text: "电梯系统",
+          src: require("../../assets/images/device/icon7.png")
+        },
+        {
+          text: "燃气系统",
+          src: require("../../assets/images/device/icon8.png")
+        },
+        {
+          text: "土建系统",
+          src: require("../../assets/images/device/icon9.png")
+        }
+      ];
+      this.isFireShow = false;
+      this.isGeneralShow = false;
+      this.active = [false, false, false, false, false, false, false, false];
+      this.navList = this.navList.map((item, i) => {
+        if (i == index) {
+          item = {
+            text: item.text,
+            src: require("../../assets/images/device/icon" +
+              (index + 1) +
+              "-active.png")
+          };
+        }
+        return item;
+      });
+      this.$set(this.active, index, true);
+      if (index == 2) {
+        this.isGeneralShow = true;
+      }
+      if (index == 3) {
+        this.isFireShow = true;
+      }
+    },
+
+    handSecMouseOver(i, type) {
+      if (type == 2) {
+        this.secActive = this.generalList.map((item, index) => {
+          if (index == i) {
+            return true;
+          }
+          return false;
+        });
+      }
+      this.secActive = this.fireList.map((item, index) => {
+        if (index == i) {
+          return true;
+        }
+        return false;
+      });
+    },
+    handSecMouseLeave() {
+      this.secActive = [];
+    },
+    handleNav(index) {
+      this.navList = this.navList.map((item, i) => {
+        if (i == index) {
+          item = {
+            text: item.text,
+            src: require("../../assets/images/device/icon" +
+              (index + 1) +
+              "-active.png")
+          };
+        }
+        return item;
+      });
+      this.$set(this.active, index, true);
+    },
+    handleClick(item, index) {
+      this.navList = [
+        {
+          text: "全部",
+          src: require("../../assets/images/device/icon1.png")
+        },
+        {
+          text: "供电系统",
+          src: require("../../assets/images/device/icon2.png")
+        },
+        {
+          text: "暖通系统",
+          src: require("../../assets/images/device/icon3.png")
+        },
+        {
+          text: "消防系统",
+          src: require("../../assets/images/device/icon4.png")
+        },
+        {
+          text: "弱电系统",
+          src: require("../../assets/images/device/icon5.png")
+        },
+        {
+          text: "给排水",
+          src: require("../../assets/images/device/icon6.png")
+        },
+        {
+          text: "电梯系统",
+          src: require("../../assets/images/device/icon7.png")
+        },
+        {
+          text: "燃气系统",
+          src: require("../../assets/images/device/icon8.png")
+        },
+        {
+          text: "土建系统",
+          src: require("../../assets/images/device/icon9.png")
+        }
+      ];
+      this.isFireShow = false;
+      this.isGeneralShow = false;
+      this.active = [false, false, false, false, false, false, false, false];
+      this.navList = this.navList.map((item, i) => {
+        if (i == index) {
+          item = {
+            text: item.text,
+            src: require("../../assets/images/device/icon" +
+              (index + 1) +
+              "-active.png")
+          };
+        }
+        return item;
+      });
+      this.$set(this.active, index, true);
+      if (index == 2) {
+        this.isGeneralShow = true;
+      }
+      if (index == 3) {
+        this.isFireShow = true;
+      }
+      if (item.text == "消防系统") {
+        this.$emit("handleEmit", { show: true, src: "Fire", istab: true });
+      }
+      if (item.text == "暖通系统") {
+        this.$emit("handleEmit", { show: true, src: "General", istab: true });
+      }
+    }
+  },
+  watch: {
+    routerName(val) {
+      if (val == "device") {
+        this.handleClick(
+          {
+            text: "暖通系统",
+            src: require("../../assets/images/device/icon3-active.png")
+          },
+          2
+        );
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.nav {
+  position: absolute;
+  top: 188px;
+  left: 0;
+  z-index: 1000;
+  // border: 1px solid yellow;
+  .nav-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding-right: 40px;
+    font-size: 16px;
+    color: #fff;
+
+    .nav-text {
+      margin-left: 22px;
+    }
+  }
+}
+.nav-bg {
+  position: absolute;
+  top: 62px;
+  left: 0;
+}
+.nav-sec {
+  position: absolute;
+  width: 244px;
+  z-index: 1000;
+  // border: 1px solid red;
+  top: 0;
+  left: 100%;
+  // display: none;
+  // border: 1px solid blue;
+  .nav-radio {
+    width: 5px;
+    height: 5px;
+    background: red;
+    border-radius: 50%;
+  }
+  .nav-item {
+    font-size: 14px;
+    margin-bottom: 25px;
+    padding-right: 0;
+    &:nth-child(1) {
+      margin-left: 36px;
+    }
+    &:nth-child(2) {
+      margin-left: 54px;
+    }
+    &:nth-child(3) {
+      margin-left: 60px;
+    }
+    &:nth-child(4) {
+      margin-left: 58px;
+    }
+    &:nth-child(5) {
+      margin-left: 48px;
+    }
+    &:nth-child(6) {
+      margin-left: 28px;
+    }
+    .nav-text {
+      margin-left: 12px;
+    }
+  }
+  .sec-active {
+    font-size: 16px;
+    color: #fff;
+    .nav-radio {
+      width: 8px;
+      height: 8px;
+    }
+  }
+}
+
+.icon {
+  width: 18px;
+  height: 14px;
+  margin-left: 30px;
+}
+.icon-active {
+  background: url("../../assets/images/device/active.png");
+}
+</style>

+ 809 - 0
src/views/Device/FilterModal.vue

@@ -0,0 +1,809 @@
+<template>
+  <div class="mytable">
+
+    <div>
+      <el-input
+        class="search"
+        placeholder="请输入内容"
+        v-model="search"
+        style="width:200px"
+        size="mini"
+        suffix-icon="el-icon-search"
+        @input="handleSearch"
+      >
+
+      </el-input>
+      <el-select
+        class="select"
+        v-model="value"
+        placeholder="请选择"
+        size="mini"
+        @change="handleChange"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          style="font-size:14px;"
+        >
+        </el-option>
+      </el-select>
+
+      <el-table
+        ref="filterTable"
+        :data="list"
+        :border="true"
+        style="width:100%"
+        :header-cell-style="{background:'#081444',color:'#d9dde9'}"
+        :row-class-name="tableRowClassName"
+        :row-style='{height:"56px"}'
+        @row-click="handleClick"
+      >
+        <el-table-column
+          prop="index"
+          label="序号"
+          width="102"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="设备名称"
+          width="196"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="model"
+          label="品牌"
+          width="120"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="size"
+          label="型号"
+          width="380"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="floor"
+          label="楼层"
+          width="124"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="local"
+          label="安装位置"
+          width="160"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="number"
+          label="数量"
+          width="180"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="genergy"
+          label="生产厂商"
+          align="center"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+
+  </div>
+</template>
+<script>
+export default {
+  name: "mytable",
+  props: {
+    type: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      search: null,
+      options: [
+        { label: "全部楼层", value: "全部楼层" },
+        { label: "B2", value: "B2" },
+        { label: "F2", value: "F2" }
+      ],
+      value: "全部楼层",
+      srcList: [
+        {
+          index: "1",
+          name: "离心式冷水机组 ",
+          model: "格力",
+          size: "LSBLX1300SE(制冷量USRT:1300)",
+          floor: "B2",
+          local: "制冷机房",
+          number: "3",
+          genergy: "格力"
+        },
+        {
+          index: "2",
+          name: "螺杆式冷水机组 ",
+          model: "格力",
+          size: "LSBLG1480HE/Nb(制冷量USRT:420)",
+          floor: "B2",
+          local: "制冷机房",
+          number: "1",
+          genergy: "格力"
+        },
+        {
+          index: "3",
+          name: "冷冻泵",
+          model: "中航",
+          size: "350S-26   ",
+          floor: "B2",
+          local: "制冷机房",
+          number: "3",
+          genergy: "中航"
+        },
+        {
+          index: "4",
+          name: "冷却泵",
+          model: "中航",
+          size: "350S-26  ",
+          floor: "B2",
+          local: "制冷机房",
+          number: "3",
+          genergy: "中航"
+        },
+        {
+          index: "5",
+          name: "冷冻泵",
+          model: "中航",
+          size: "ZHSW200-150-400C",
+          floor: "B2",
+          local: "制冷机房",
+          number: "2",
+          genergy: "中航"
+        },
+        {
+          index: "6",
+          name: "冷却泵",
+          model: "中航",
+          size: "ZHSW200-150-400C",
+          floor: "B2",
+          local: "制冷机房",
+          number: "2",
+          genergy: "中航"
+        },
+        {
+          name: ""
+        },
+        {
+          name: ""
+        },
+        {
+          name: ""
+        }
+      ],
+
+      list: []
+    };
+  },
+  mounted() {
+    this.list = this.srcList;
+  },
+  methods: {
+    handleOpen() {
+      this.$props.obj.show = false;
+    },
+    tableRowClassName({ rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return "row1";
+      }
+      return "row2";
+    },
+    handleChange(val) {
+      if (val == "全部楼层") {
+        this.list = this.srcList;
+      } else {
+        const isList = this.srcList.filter(item => {
+          return item.floor == val;
+        });
+        let noList = [];
+        const length = this.srcList.length - isList.length;
+        for (var i = 0; i < length; i++) {
+          noList.push({});
+        }
+        this.list = isList.concat(noList);
+      }
+    },
+    handleSearch(val) {
+      const isList = this.srcList.filter(item => {
+        return item.name.includes(val);
+      });
+
+      let noList = [];
+      const length = this.srcList.length - isList.length;
+      for (var i = 0; i < length; i++) {
+        noList.push({});
+      }
+      this.list = isList.concat(noList);
+    },
+    handleClick(row) {
+      if (row.name) {
+        this.$emit("handleModal", true);
+      }
+    }
+  },
+  watch: {
+    type(val) {
+      // console.log(val);
+      if (val == "floor-main") {
+        this.srcList = [
+          {
+            index: "1",
+            name: "冷却塔",
+            model: "大连斯频德",
+            size: "DX-M3657-E ",
+            floor: "4F",
+            local: "屋面",
+            number: "3",
+            genergy: "大连斯频德"
+          },
+          {
+            index: "2",
+            name: "冷却塔",
+            model: "大连斯频德",
+            size: "DX-M2543-D ",
+            floor: "4F",
+            local: "屋面",
+            number: "1",
+            genergy: "大连斯频德"
+          },
+          {
+            index: "3",
+            name: "新风机组",
+            model: "格力",
+            size: "GZK2420/GZK2816/GZK2820",
+            floor: "4F",
+            local: "屋面",
+            number: "8",
+            genergy: "格力"
+          },
+          {
+            index: "4",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK1010/GZK1616/GZK1610/",
+            floor: "5F",
+            local: "影城",
+            number: "11",
+            genergy: "格力"
+          },
+
+          {
+            index: "5",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2816 ",
+            floor: "3F",
+            local: "古德菲力/大玩家",
+            number: "4",
+            genergy: "格力"
+          },
+          {
+            index: "6",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2416",
+            floor: "2F",
+            local: "国美/永辉",
+            number: "2",
+            genergy: "格力"
+          },
+          {
+            index: "7",
+            name: "空调机组",
+            model: "格力",
+            size: " GZK2416/2816",
+            floor: "1F",
+            local: "宝贝王/BISJA/优衣库/美邦",
+            number: "8",
+            genergy: "格力"
+          },
+          {
+            index: "8",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2820",
+            floor: "B1",
+            local: "大风车",
+            number: "1",
+            genergy: "格力"
+          },
+          {
+            index: "9",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2020",
+            floor: "B2",
+            local: "负一层中庭",
+            number: "1",
+            genergy: "格力"
+          }
+          // {
+          //   index: "10",
+          //   name: "吊柜",
+          //   model: "格力",
+          //   size: "G-2WDI/E、G-3WDI/E、",
+          //   floor: "B1-3F",
+          //   local: "公区",
+          //   number: "107",
+          //   genergy: "格力"
+          // },
+          // {
+          //   index: "",
+          //   name: "",
+          //   model: "",
+          //   size: "G-4WDI/E、G-5WDI/E、",
+          //   floor: "",
+          //   local: "",
+          //   number: "",
+          //   genergy: ""
+          // },
+          // {
+          //   index: "",
+          //   name: "",
+          //   model: "",
+          //   size: "G-6WDI/E、G-8WDI/E、",
+          //   floor: "",
+          //   local: "",
+          //   number: "",
+          //   genergy: ""
+          // },
+          // {
+          //   index: "11",
+          //   name: "新风机组",
+          //   model: "格力",
+          //   size: "G-2WDXI/B、G-4WDXI/B、",
+          //   floor: "4F、5F",
+          //   local: "商管办公室",
+          //   number: "7",
+          //   genergy: "格力"
+          // },
+          // {
+          //   index: "",
+          //   name: "",
+          //   model: "",
+          //   size: "G-10WDXI/E ",
+          //   floor: "",
+          //   local: "",
+          //   number: "",
+          //   genergy: ""
+          // },
+          // {
+          //   index: "12",
+          //   name: "风机盘管",
+          //   model: "格力",
+          //   size: "风机盘管",
+          //   floor: "B1-5F",
+          //   local: "步行街商铺",
+          //   number: "1346",
+          //   genergy: "格力"
+          // }
+        ];
+        this.list = [
+          {
+            index: "1",
+            name: "冷却塔",
+            model: "大连斯频德",
+            size: "DX-M3657-E ",
+            floor: "4F",
+            local: "屋面",
+            number: "3",
+            genergy: "大连斯频德"
+          },
+          {
+            index: "2",
+            name: "冷却塔",
+            model: "大连斯频德",
+            size: "DX-M2543-D ",
+            floor: "4F",
+            local: "屋面",
+            number: "1",
+            genergy: "大连斯频德"
+          },
+          {
+            index: "3",
+            name: "新风机组",
+            model: "格力",
+            size: "GZK2420/GZK2816/GZK2820",
+            floor: "4F",
+            local: "屋面",
+            number: "8",
+            genergy: "格力"
+          },
+          {
+            index: "4",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK1010/GZK1616/GZK1610/",
+            floor: "5F",
+            local: "影城",
+            number: "11",
+            genergy: "格力"
+          },
+
+          {
+            index: "5",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2816 ",
+            floor: "3F",
+            local: "古德菲力/大玩家",
+            number: "4",
+            genergy: "格力"
+          },
+          {
+            index: "6",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2416",
+            floor: "2F",
+            local: "国美/永辉",
+            number: "2",
+            genergy: "格力"
+          },
+          {
+            index: "7",
+            name: "空调机组",
+            model: "格力",
+            size: " GZK2416/2816",
+            floor: "1F",
+            local: "宝贝王/BISJA/优衣库/美邦",
+            number: "8",
+            genergy: "格力"
+          },
+          {
+            index: "8",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2820",
+            floor: "B1",
+            local: "大风车",
+            number: "1",
+            genergy: "格力"
+          },
+          {
+            index: "9",
+            name: "空调机组",
+            model: "格力",
+            size: "GZK2020",
+            floor: "B2",
+            local: "负一层中庭",
+            number: "1",
+            genergy: "格力"
+          }
+          // {
+          //   index: "10",
+          //   name: "吊柜",
+          //   model: "格力",
+          //   size: "G-2WDI/E、G-3WDI/E、",
+          //   floor: "B1-3F",
+          //   local: "公区",
+          //   number: "107",
+          //   genergy: "格力"
+          // },
+          // {
+          //   index: "",
+          //   name: "",
+          //   model: "",
+          //   size: "G-4WDI/E、G-5WDI/E、",
+          //   floor: "",
+          //   local: "",
+          //   number: "",
+          //   genergy: ""
+          // },
+          // {
+          //   index: "",
+          //   name: "",
+          //   model: "",
+          //   size: "G-6WDI/E、G-8WDI/E、",
+          //   floor: "",
+          //   local: "",
+          //   number: "",
+          //   genergy: ""
+          // },
+          // {
+          //   index: "11",
+          //   name: "新风机组",
+          //   model: "格力",
+          //   size: "G-2WDXI/B、G-4WDXI/B、",
+          //   floor: "4F、5F",
+          //   local: "商管办公室",
+          //   number: "7",
+          //   genergy: "格力"
+          // },
+          // {
+          //   index: "",
+          //   name: "",
+          //   model: "",
+          //   size: "G-10WDXI/E ",
+          //   floor: "",
+          //   local: "",
+          //   number: "",
+          //   genergy: ""
+          // },
+          // {
+          //   index: "12",
+          //   name: "风机盘管",
+          //   model: "格力",
+          //   size: "风机盘管",
+          //   floor: "B1-5F",
+          //   local: "步行街商铺",
+          //   number: "1346",
+          //   genergy: "格力"
+          // }
+        ];
+      } else {
+        this.list = [
+          {
+            index: "1",
+            name: "离心式冷水机组 ",
+            model: "格力",
+            size: "LSBLX1300SE(制冷量USRT:1300)",
+            floor: "B2",
+            local: "制冷机房",
+            number: "3",
+            genergy: "格力"
+          },
+          {
+            index: "2",
+            name: "螺杆式冷水机组 ",
+            model: "格力",
+            size: "LSBLG1480HE/Nb(制冷量USRT:420)",
+            floor: "B2",
+            local: "制冷机房",
+            number: "1",
+            genergy: "格力"
+          },
+          {
+            index: "3",
+            name: "冷冻泵",
+            model: "中航",
+            size: "350S-26   ",
+            floor: "B2",
+            local: "制冷机房",
+            number: "3",
+            genergy: "中航"
+          },
+          {
+            index: "4",
+            name: "冷却泵",
+            model: "中航",
+            size: "350S-26  ",
+            floor: "B2",
+            local: "制冷机房",
+            number: "3",
+            genergy: "中航"
+          },
+          {
+            index: "5",
+            name: "冷冻泵",
+            model: "中航",
+            size: "ZHSW200-150-400C",
+            floor: "B2",
+            local: "制冷机房",
+            number: "2",
+            genergy: "中航"
+          },
+          {
+            index: "6",
+            name: "冷却泵",
+            model: "中航",
+            size: "ZHSW200-150-400C",
+            floor: "B2",
+            local: "制冷机房",
+            number: "2",
+            genergy: "中航"
+          },
+          {
+            name: ""
+          },
+          {
+            name: ""
+          },
+          {
+            name: ""
+          }
+        ];
+        this.srcList = [
+          {
+            index: "1",
+            name: "离心式冷水机组 ",
+            model: "格力",
+            size: "LSBLX1300SE(制冷量USRT:1300)",
+            floor: "B2",
+            local: "制冷机房",
+            number: "3",
+            genergy: "格力"
+          },
+          {
+            index: "2",
+            name: "螺杆式冷水机组 ",
+            model: "格力",
+            size: "LSBLG1480HE/Nb(制冷量USRT:420)",
+            floor: "B2",
+            local: "制冷机房",
+            number: "1",
+            genergy: "格力"
+          },
+          {
+            index: "3",
+            name: "冷冻泵",
+            model: "中航",
+            size: "350S-26   ",
+            floor: "B2",
+            local: "制冷机房",
+            number: "3",
+            genergy: "中航"
+          },
+          {
+            index: "4",
+            name: "冷却泵",
+            model: "中航",
+            size: "350S-26  ",
+            floor: "B2",
+            local: "制冷机房",
+            number: "3",
+            genergy: "中航"
+          },
+          {
+            index: "5",
+            name: "冷冻泵",
+            model: "中航",
+            size: "ZHSW200-150-400C",
+            floor: "B2",
+            local: "制冷机房",
+            number: "2",
+            genergy: "中航"
+          },
+          {
+            index: "6",
+            name: "冷却泵",
+            model: "中航",
+            size: "ZHSW200-150-400C",
+            floor: "B2",
+            local: "制冷机房",
+            number: "2",
+            genergy: "中航"
+          },
+          {
+            name: ""
+          },
+          {
+            name: ""
+          },
+          {
+            name: ""
+          }
+        ];
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.table {
+  color: #fff;
+}
+.mytable {
+  width: 1500px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  //   z-index: 11000;
+}
+/deep/ .row1 {
+  td {
+    background: #081444;
+    color: #d9dde9;
+    font-size: 18px;
+  }
+}
+/deep/ .row2 {
+  td {
+    background: #08184b;
+    color: #d9dde9;
+    font-size: 18px;
+  }
+}
+.select {
+  margin-left: 10px;
+  margin-bottom: 14px;
+}
+.search {
+  margin-bottom: 14px;
+}
+/deep/ .el-table td,
+.el-table th.is-leaf,
+.el-table--border,
+.el-table--group {
+  border-color: #0c2e75;
+}
+/deep/ .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background-color: #0c2e75;
+}
+/deep/ .el-input--mini {
+  border: 1px solid #1060d1;
+  border-radius: 2px;
+  input {
+    border: none;
+  }
+  .el-input__inner {
+    background: #0a1b52;
+    color: #fff;
+    font-size: 14px;
+  }
+}
+/deep/ .el-table tbody tr:hover > td {
+  background-color: #0c2e75 !important;
+  cursor: pointer;
+}
+/deep/ .el-select-dropdown__list {
+  background-color: #0a1b52;
+}
+/deep/ .el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: #0c2e75;
+}
+/deep/ .el-select-dropdown {
+  border: none;
+}
+/deep/ .el-popper .popper__arrow {
+  display: none;
+}
+/deep/ .el-select-dropdown__item {
+  color: #fff;
+}
+/deep/ .el-table th,
+.el-table tr {
+  background: none;
+}
+/deep/ .el-table--border,
+.el-table--group {
+  border: 1px solid #0c2e75;
+}
+/deep/ .el-table--border th,
+.el-table__fixed-right-patch {
+  border: 1px solid #0c2e75;
+}
+/deep/ .el-table th,
+.el-table tr {
+  font-size: 18px;
+}
+</style>
+<style >
+.el-select-dropdown__list {
+  background-color: #0a1b52;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: #0c2e75;
+}
+.el-select-dropdown {
+  border: none;
+}
+.el-popper .popper__arrow {
+  display: none;
+}
+.el-select-dropdown__item {
+  color: #fff;
+}
+</style>

+ 310 - 0
src/views/Device/Modal.vue

@@ -0,0 +1,310 @@
+<template>
+  <div
+    class="modal"
+    v-show="obj.show"
+    :class="{'modal1':obj.src=='room-layout'}"
+  >
+
+    <img :src="require(`../../assets/images/device/${src}.png`)" />
+    <filterModel
+      v-if="obj.src=='main-list'"
+      @handleModal="handleModal"
+      :type="src"
+    />
+    <div
+      class="fileter-modal"
+      v-show="isFilterModal"
+    >
+      <img
+        src="../../assets/images/device/device-detail.png"
+        alt=""
+      >
+      <div class="btn">
+        <div
+          class="close"
+          @click="isFilterModal = false"
+        ></div>
+      </div>
+    </div>
+    <div class="btn">
+      <div
+        v-show="obj.src=='room-layout'"
+        class="go"
+        @click="handleGo"
+        @mouseover="mouseover"
+        @mouseleave="mouseleave"
+      ></div>
+      <div
+        class="close"
+        @click="handleClose"
+      ></div>
+      <div
+        class="msg"
+        v-show="(obj.src=='room-layout')&&isHover"
+      >{{msg}}</div>
+    </div>
+    <div
+      class="issue"
+      :class="{'fire-left':src.includes('fire'),'fire-other':src=='fire-other'}"
+      @click="handleIssue"
+      v-show="isIssue"
+    ></div>
+    <div
+      class="tabs"
+      v-show="obj.istab"
+    >
+      <div
+        class="tab "
+        v-for="(item,index) in tabs"
+        :key="index"
+        :class="{'nav-active':index==isindex}"
+        @click="handleTabs(item.name,index)"
+      >
+        {{item.text}}
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import filterModel from "../Device/FilterModal";
+export default {
+  name: "Dnav",
+  props: {
+    obj: {
+      type: Object
+    },
+    routerName: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      // src: require("../../assets/images/device/bg2.png")
+      // src: this.$props.obj.src,
+      // src: require("../../../static/device/bg3.png")
+      // msg: "跳转到楼层功能查看",
+      isFilterModal: false,
+      isIssue: false,
+      isHover: false,
+      src: "",
+      isindex: 1,
+      tabs: [
+        { name: "buesiness", text: "大商业系统原理图" },
+        { name: "air-system", text: "超市空调系统原理图" }
+        // { name: "maintenance-log", text: "冷热源机房内主要" }
+      ]
+    };
+  },
+  created() {
+    this.src = this.$props.obj.src;
+  },
+  computed: {
+    msg() {
+      let data = "";
+      this.routerName.includes("floor")
+        ? (data = "跳转到设备功能查看")
+        : (data = "跳转到楼层功能查看");
+      return data;
+    }
+  },
+  mounted() {},
+  methods: {
+    handleClose() {
+      this.$props.obj.show = false;
+    },
+
+    handleTabs(name, index) {
+      this.src = name;
+      this.isindex = index;
+    },
+    handleGo() {
+      if (this.routerName.includes("floor")) {
+        this.$emit("handlerouterName", "device");
+      }
+      if (this.routerName.includes("device")) {
+        this.$emit("handlerouterName", "floor");
+      }
+    },
+    handleIssue() {
+      this.src = this.src + "-issue";
+      this.isIssue = false;
+    },
+    mouseover() {
+      // console.log(1);
+      this.isHover = true;
+    },
+    mouseleave() {
+      // console.log(2);
+      this.isHover = false;
+    },
+    handleModal(val) {
+      this.isFilterModal = val;
+    }
+  },
+  watch: {
+    obj(val) {
+      // console.log(val);
+      if (
+        val.src.includes("inner") ||
+        val.src.includes("outer") ||
+        val.src.includes("other")
+      ) {
+        this.isIssue = true;
+      }
+      if (val.src == "main-list") {
+        this.tabs = [
+          { name: "main-list", text: "冷热源机房内主要设备" },
+          { name: "floor-main", text: "楼层末端主要设备清单" }
+        ];
+        this.isindex = 0;
+      }
+      if (val.src == "air-system") {
+        this.tabs = [
+          { name: "buesiness", text: "大商业系统原理图" },
+          { name: "air-system", text: "超市空调系统原理图" }
+        ];
+        this.isindex = 1;
+      }
+      if (val.src == "fire-system") {
+        this.tabs = [
+          { name: "fire-system", text: "消防电原理示意图" },
+          { name: "fire-water", text: "消防喷淋系统示意图" },
+          { name: "fire-window", text: "消防窗喷系统示意图" },
+          { name: "fire-box", text: "消防栓系统示意图" }
+        ];
+        this.isindex = 0;
+      }
+      if (val.src == "room-layout") {
+        this.tabs = [
+          { name: "room-main", text: "冷热源机房内主要设备清单" },
+          { name: "room-layout", text: "冷热源机房内平面布置图" },
+          { name: "room-maintain", text: "维修记录" },
+          { name: "room-maintenance", text: "维保记录" }
+        ];
+        this.isindex = 1;
+      }
+      this.src = val.src;
+    }
+  },
+  components: {
+    filterModel
+  }
+};
+</script>
+<style lang="less" scoped>
+.modal {
+  z-index: 2000;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  // border: 1px solid red;
+
+  .btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1200;
+    display: flex;
+
+    .close {
+      width: 50px;
+      height: 50px;
+      margin-left: 5px;
+      background: url("../../assets/images/close.png");
+      cursor: pointer;
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+    .go {
+      width: 50px;
+      height: 50px;
+      background: url("../../assets/images/device/go.png");
+      cursor: pointer;
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+  .msg {
+    position: absolute;
+    width: 140px;
+    top: -30px;
+    font-size: 14px;
+    text-align: center;
+    background: #000;
+    padding: 6px 0;
+    opacity: 0.7;
+    right: -10px;
+    color: #fff;
+  }
+  .tabs {
+    position: absolute;
+    display: flex;
+    z-index: 1200;
+    top: 44px;
+    right: 118px;
+    border-width: 1px;
+    border-color: rgb(22, 73, 206);
+    border-style: solid;
+    border-radius: 4px;
+    background-color: rgba(22, 73, 206, 0.22);
+    opacity: 0.702;
+    .tab {
+      font-size: 18px;
+      height: 56px;
+      line-height: 56px;
+      padding: 0 14px;
+      // border: 1px solid red;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+}
+.modal1 {
+  z-index: 11000;
+}
+.table {
+  color: #fff;
+}
+.nav-active {
+  border-width: 1px;
+  border-color: rgb(0, 174, 232);
+  border-style: solid;
+  border-radius: 4px;
+  background-color: rgba(0, 174, 232, 0.502);
+
+  // background: url("../../assets/images/device/nav-active.png");
+}
+
+.issue {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 38px;
+  left: 446px;
+  cursor: pointer;
+  // background: red;
+}
+.fire-left {
+  left: 600px;
+}
+.fire-other {
+  left: 310px;
+}
+/deep/ .el-select-dropdown {
+  z-index: 10001 !important;
+}
+.fileter-modal {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  // border: 1px solid red;
+  background: #000;
+  z-index: 4000;
+}
+</style>

+ 362 - 0
src/views/Device/index.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="device">
+
+    <Dnav
+      @handleEmit="handleEmit"
+      :routerName="routerName"
+    />
+
+    <Modal
+      :obj="
+      obj"
+      :routerName="routerName"
+      @handlerouterName="handlerouterName"
+    />
+    <div class="baseimg">
+      <img
+        class="floor"
+        :src="require(`../../assets/images/device/${src}.png`)"
+        alt="bg"
+      />
+      <!-- 机房 -->
+      <div
+        v-show="src == 'B2'"
+        class="basebtn"
+        @click="handleModal"
+      >
+        <!-- <img
+          src="../../assets/images/device/B2-hover.png"
+          alt=""
+        > -->
+      </div>
+    </div>
+    <img
+      class="tip"
+      :src="require(`../../assets/images/device/floor${src}.png`)"
+      alt=""
+    />
+    <!--楼层分布-->
+    <div class="floor-switch">
+      <div class="floor-switch-btn">
+        <div
+          v-show="type == 'Fire'"
+          class="fire-legend"
+        >
+          <img
+            class="legend"
+            @click="isLegendDetailShow = !isLegendDetailShow"
+            src="../../assets/images/device/legend-fire.png"
+          />
+        </div>
+
+        <div>
+          <img
+            class="legend"
+            @click="isLegendShow = !isLegendShow"
+            src="../../assets/images/icon_legend.png"
+          />
+        </div>
+
+        <ul>
+          <li><img src="../../assets/images/icon_arrow.png" /></li>
+          <li
+            v-for="(item, index) in floorLists.data"
+            :key="index"
+            :class="{ active: index === floorLists.curIndex }"
+            @click="handleTab(item.name, index, item.type)"
+          >
+            {{ item.name }}
+          </li>
+          <li>
+            <img
+              src="../../assets/images/icon_arrow.png"
+              class="icon-arrow-down"
+            />
+          </li>
+        </ul>
+        <div
+          class="map"
+          v-show="isLegendShow"
+          :style="{ top: type == 'Fire' ? '80px' : '0px' }"
+        >
+          <img
+            :src="require(`../../assets/images/device/${ledgentSrc}.png`)"
+            alt=""
+          />
+        </div>
+
+        <div
+          class="map1"
+          v-show="isLegendDetailShow"
+        >
+          <img
+            src="../../assets/images/device/legend-detail.png"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="mask"
+      v-show="obj.show"
+    ></div>
+  </div>
+</template>
+<script>
+import Dnav from "./Dnav";
+import Modal from "./Modal";
+export default {
+  props: {
+    routerName: {
+      type: String
+    }
+  },
+  name: "device",
+  mounted() {
+    // console.log(this.$props.routerName, 111);
+  },
+  data() {
+    return {
+      obj: {
+        show: false,
+        src: "main-list"
+      },
+      isLegendShow: false,
+      isFireLegend: false,
+      isLegendDetailShow: false,
+      src: "B2",
+      ledgentSrc: "legend-left",
+      floorLists: {
+        data: [
+          {
+            name: "F2",
+            type: ""
+          },
+          {
+            name: "F1",
+            type: ""
+          },
+          {
+            name: "B1",
+            type: ""
+          },
+          {
+            name: "B2",
+            type: ""
+          }
+        ],
+        curIndex: 3
+      },
+      type: "General"
+    };
+  },
+  methods: {
+    handleEmit(val) {
+      // console.log(val)
+      if (val.src.includes("Fire")) {
+        const data = [
+          {
+            name: "F2",
+            type: "fire"
+          },
+          {
+            name: "F1",
+            type: "fire"
+          },
+          {
+            name: "B1",
+            type: "fire"
+          },
+          {
+            name: "B2",
+            type: "fire"
+          }
+        ];
+        this.$set(this.floorLists, "data", data);
+        this.handleTab("B2", 3, "fire");
+        this.type = "Fire";
+        this.ledgentSrc = "legend-fire-left";
+        this.isLegendShow = false;
+        this.isLegendDetailShow = false;
+      } else if (val.src.includes("General")) {
+        const data = [
+          {
+            name: "F2",
+            type: ""
+          },
+          {
+            name: "F1",
+            type: ""
+          },
+          {
+            name: "B1",
+            type: ""
+          },
+          {
+            name: "B2",
+            type: ""
+          }
+        ];
+
+        this.$set(this.floorLists, "data", data);
+        this.handleTab("B2", 3, "");
+        this.type = "General";
+        this.ledgentSrc = "legend-left";
+        this.isLegendShow = false;
+        this.isLegendDetailShow = false;
+      } else {
+        // console.log(1111)
+        this.obj = val;
+      }
+    },
+    handleTab(name, index, type) {
+      this.floorLists.curIndex = index;
+      if (name.includes("F1") || name.includes("B2")) {
+        this.src = type + name;
+      }
+    },
+    handleModal() {
+      this.obj = {
+        show: true,
+        src: "room-layout",
+        istab: true
+      };
+    },
+    handlerouterName(val) {
+      this.$emit("handlerouterName", val);
+      // console.log(val);
+      // this.$emit("handlerouterName", val);
+      // this.$set(this.obj, "show", false);
+    }
+  },
+  components: {
+    Dnav,
+    Modal
+  },
+  watch: {
+    routerName: {
+      immediate: true,
+      handler: function(val) {
+        if (val == "device1") {
+          this.handleModal();
+        } else {
+          this.obj = {
+            show: false,
+            src: "room-layout",
+            istab: true
+          };
+        }
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.device {
+  width: 100%;
+  height: 100%;
+  // height: 960px;
+  // border: 1px solid red;
+}
+.baseimg {
+  padding-top: 120px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  // z-index: 20000;
+  .basebtn {
+    position: absolute;
+    width: 304px;
+    height: 121px;
+    top: 145px;
+    left: 649px;
+    cursor: pointer;
+    &:hover {
+      background: url("../../assets/images/device/B2-hover.png");
+    }
+  }
+}
+.floor-switch {
+  position: relative;
+  color: #fff;
+  padding-top: 94px;
+  flex: 1;
+
+  .floor-switch-image {
+    position: relative;
+    right: 134px;
+    &.floor-switch-image-b2 {
+      right: 116px;
+    }
+  }
+
+  .floor-switch-btn {
+    position: absolute;
+    top: 94px;
+    right: 20px;
+    width: 61px;
+
+    ul {
+      border: 1px solid rgb(22, 73, 206);
+      border-radius: 4px;
+      background-color: rgba(22, 73, 206, 0.22);
+      margin-top: 11px;
+
+      li {
+        margin: 0 auto;
+        width: 42px;
+        height: 42px;
+        line-height: 42px;
+        text-align: center;
+        cursor: pointer;
+
+        &.active {
+          border: 1px solid rgb(0, 174, 232);
+          border-radius: 4px;
+          background-color: rgba(0, 174, 232, 0.502);
+        }
+
+        .icon-arrow-down {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    .fire-legend {
+      margin-bottom: 11px;
+    }
+    .map {
+      position: absolute;
+      right: 80px;
+      top: 0;
+    }
+    .map1 {
+      position: absolute;
+      right: 80px;
+      top: 0;
+    }
+    .legend {
+      cursor: pointer;
+    }
+  }
+}
+.tip {
+  width: 256px;
+  height: 40px;
+  position: fixed;
+  top: 162px;
+  left: 516px;
+}
+.floor {
+  // height: 695px;
+}
+.mask {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  z-index: 1100;
+  opacity: 0.8;
+}
+</style>

+ 8 - 0
src/views/equipment/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="equipment">设备设施</div>
+</template>
+<style lang="less">
+#equipment {
+  color: #fff;
+}
+</style>

+ 8 - 0
src/views/floorFunc/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="floorFunc">楼层功能</div>
+</template>
+<style lang="less">
+#floorFunc {
+  color: #fff;
+}
+</style>

+ 604 - 0
src/views/flooraction/index.vue

@@ -0,0 +1,604 @@
+<template>
+  <div class="floor-container">
+    <div class="png">
+      <div
+        class="f1"
+        v-show="imgShow"
+      >
+        <div>
+          <img
+            src="../../assets/images/flooraction/one.png"
+            alt=""
+          />
+        </div>
+        <div>
+          <img
+            :class="{ 'is-lucency': stateStatus }"
+            src="../../assets/images/flooraction/F1.png"
+            alt=""
+          />
+        </div>
+      </div>
+
+      <div
+        class="b2"
+        v-show="!imgShow"
+      >
+        <div>
+          <img
+            src="../../assets/images/flooraction/undergroundtwo.png"
+            alt=""
+          />
+        </div>
+        <div>
+          <img
+            v-show="shebeifang"
+            class="dashangye"
+            src="../../assets/images/flooraction/dashangye.png"
+            alt=""
+          />
+          <img
+            v-show="shebeifang"
+            class="caoshi"
+            src="../../assets/images/flooraction/caoshi.png"
+            alt=""
+          />
+          <img
+            v-show="shebeifang"
+            class="caoshishenghuo"
+            src="../../assets/images/flooraction/caoshishenghuo.png"
+            alt=""
+          />
+          <img
+            v-show="shebeifang"
+            class="xiaofang"
+            src="../../assets/images/flooraction/xiaofang.png"
+            alt=""
+          />
+          <img
+            v-show="shebeifang"
+            class="dashangyeshuiben"
+            src="../../assets/images/flooraction/dashangyeshuiben.png"
+            alt=""
+          />
+          <div
+            class="tongdao"
+            v-show="tongdao"
+          >
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+            <div>
+              <img
+                src="../../assets/images/flooraction/tongdao.png"
+                alt=""
+              />
+              X2
+            </div>
+          </div>
+          <div
+            class="futi"
+            v-show="futi"
+          >
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfuti.webp"
+                alt=""
+              />
+              X2
+            </div>
+            <!-- @click="$emit('update:shebeisheshiShow', true)" -->
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfuti.webp"
+                alt=""
+              />
+              X2
+            </div>
+          </div>
+          <div
+            class="huoti"
+            v-show="huoti"
+          >
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
+                alt=""
+              />
+              X2
+            </div>
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
+                alt=""
+              />
+              X2
+            </div>
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
+                alt=""
+              />
+              X2
+            </div>
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
+                alt=""
+              />
+              X2
+            </div>
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
+                alt=""
+              />
+              X2
+            </div>
+          </div>
+          <div
+            class="weishengjian"
+            v-show="weishengjian"
+          >
+            <div>
+              <img
+                src="../../assets/images/flooraction/weishengjian.png"
+                alt=""
+              />
+              X2
+            </div>
+          </div>
+          <div
+            class="keti"
+            v-show="keti"
+          >
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/diandongfuti.webp"
+                alt=""
+              />
+              X2
+            </div>
+            <div style="cursor: pointer; z-index: 9998;">
+              <img
+                src="../../assets/images/flooraction/diandongfuti.webp"
+                alt=""
+              />
+              X2
+            </div>
+          </div>
+          <img
+            :class="{ 'is-lucency': stateStatus }"
+            src="../../assets/images/flooraction/B2.png"
+            alt=""
+          />
+        </div>
+        <div
+          class="hover-img"
+          @click="handleGoRoute"
+        >
+          <img
+            src="../../assets/images/flooraction/hover.png"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="select">
+      <selector-model
+        ref="child"
+        @childDataArrEvent="childDataArrEvent"
+        :imgShow.sync="imgShow"
+        :stateStatus.sync="stateStatus"
+      ></selector-model>
+    </div>
+    <Modal
+      :obj="obj"
+      :routerName="routerName"
+      @handlerouterName="handlerouterName"
+    />
+    <div
+      class="mask"
+      v-show="obj.show"
+    ></div>
+  </div>
+</template>
+
+<script>
+import selectorModel from "./selector.vue";
+import Modal from "../Device/Modal";
+export default {
+  props: ["routerName"],
+  data() {
+    return {
+      imgShow: false,
+      stateStatus: false,
+      childDataArr: [],
+      shebeifang: true,
+      tongdao: true,
+      weishengjian: true,
+      huoti: true,
+      keti: true,
+      futi: true,
+      obj: {
+        show: false,
+        src: "main-list"
+      }
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {
+    routerName: {
+      immediate: true,
+      handler: function(val) {
+        if (val == "floor1") {
+          this.handleModal();
+        } else {
+          this.obj = {
+            show: false,
+            src: "room-layout",
+            istab: true
+          };
+        }
+      }
+    }
+  },
+  methods: {
+    handleGoRoute() {
+      this.$emit("handlerouterName", "floor1");
+      this.handleModal();
+    },
+    childDataArrEvent(arr) {
+      this.childDataArr = arr;
+      // console.log(this.childDataArr)
+      this.shebeifang =
+        this.childDataArr.indexOf("主要设备房") == -1 ? false : true;
+      this.tongdao = this.childDataArr.indexOf("疏散通道") == -1 ? false : true;
+      this.weishengjian =
+        this.childDataArr.indexOf("卫生间") == -1 ? false : true;
+      this.futi = this.childDataArr.indexOf("扶梯/坡梯") == -1 ? false : true;
+      this.keti = this.childDataArr.indexOf("客梯") == -1 ? false : true;
+      this.huoti = this.childDataArr.indexOf("货梯") == -1 ? false : true;
+
+      if (this.childDataArr.length == 0) {
+        this.shebeifang = true;
+        this.tongdao = true;
+        this.weishengjian = true;
+        this.futi = true;
+        this.keti = true;
+        this.huoti = true;
+      }
+    },
+    handleModal() {
+      this.obj = {
+        show: true,
+        src: "room-layout",
+        istab: true
+      };
+    },
+    handlerouterName(val) {
+      this.$emit("handlerouterName", val);
+      // console.log(val);
+      // this.$emit("handlerouterName", val);
+      // this.$set(this.obj, "show", false);
+    }
+  },
+  components: { selectorModel, Modal }
+};
+</script>
+
+<style scoped lang="less">
+.floor-container {
+  position: relative;
+  height: 100%;
+  color: #fff;
+
+  .png {
+    height: 100%;
+    .is-lucency {
+      opacity: 0.4;
+      // position: relative;
+      // z-index: 0;
+    }
+    & > div {
+      height: 100%;
+      position: relative;
+      & > div:nth-child(1) {
+        // height: 100%;
+        position: absolute;
+        left: 59px;
+        top: 50px;
+      }
+      & > div:nth-child(2) {
+        height: 100%;
+        padding-top: 60px;
+        box-sizing: border-box;
+        text-align: center;
+        position: relative;
+        .dashangye {
+          z-index: 100;
+          position: absolute;
+          top: 140px;
+          left: 910px;
+        }
+        .caoshi {
+          z-index: 99;
+          position: absolute;
+          top: 141px;
+          left: 707px;
+        }
+        .caoshishenghuo {
+          z-index: 99;
+          position: absolute;
+          top: 326px;
+          left: 1547px;
+        }
+        .xiaofang {
+          z-index: 99;
+          position: absolute;
+          top: 225px;
+          left: 1437px;
+        }
+        .dashangyeshuiben {
+          z-index: 99;
+          position: absolute;
+          top: 254px;
+          left: 1503px;
+        }
+        .tongdao {
+          // z-index: 100;
+          width: 100%;
+          height: ~"calc(100% - 60px)";
+          position: absolute;
+          left: 0;
+          top: 0;
+          & > div {
+            position: absolute;
+            font-size: 16px;
+            z-index: 99;
+            img {
+              vertical-align: bottom;
+            }
+          }
+          & > div:nth-of-type(1) {
+            left: 491px;
+            top: 156px;
+          }
+          & > div:nth-of-type(2) {
+            left: 798px;
+            top: 142px;
+          }
+          & > div:nth-of-type(3) {
+            left: 1218px;
+            top: 169px;
+          }
+          & > div:nth-of-type(4) {
+            left: 595px;
+            top: 323px;
+          }
+          & > div:nth-of-type(5) {
+            left: 1006px;
+            top: 376px;
+          }
+          & > div:nth-of-type(6) {
+            left: 332px;
+            top: 747px;
+          }
+          & > div:nth-of-type(7) {
+            left: 790px;
+            top: 730px;
+          }
+          & > div:nth-of-type(8) {
+            left: 1286px;
+            top: 667px;
+          }
+          & > div:nth-of-type(9) {
+            left: 1520px;
+            top: 467px;
+          }
+        }
+        .futi {
+          // z-index: 30;
+          width: 100%;
+          height: ~"calc(100% - 60px)";
+          position: absolute;
+          left: 0;
+          top: 0;
+          & > div {
+            z-index: 99;
+            position: absolute;
+            font-size: 16px;
+            img {
+              vertical-align: bottom;
+              width: 46px;
+            }
+          }
+          & > div:nth-of-type(1) {
+            left: 435px;
+            top: 258px;
+          }
+          & > div:nth-of-type(2) {
+            left: 1191px;
+            top: 601px;
+          }
+        }
+        .huoti {
+          // z-index: 30;
+          width: 100%;
+          height: ~"calc(100% - 60px)";
+          position: absolute;
+          left: 0;
+          top: 0;
+          & > div {
+            z-index: 99;
+            position: absolute;
+            font-size: 16px;
+            img {
+              vertical-align: bottom;
+              width: 46px;
+            }
+          }
+          & > div:nth-of-type(1) {
+            left: 544px;
+            top: 365px;
+          }
+          & > div:nth-of-type(2) {
+            left: 600px;
+            top: 350px;
+          }
+          & > div:nth-of-type(3) {
+            left: 951px;
+            top: 372px;
+          }
+          & > div:nth-of-type(4) {
+            left: 295px;
+            top: 713px;
+          }
+          & > div:nth-of-type(5) {
+            left: 1494px;
+            top: 496px;
+          }
+        }
+        .weishengjian {
+          // z-index: 30;
+          width: 100%;
+          height: ~"calc(100% - 60px)";
+          position: absolute;
+          left: 0;
+          top: 0;
+          & > div {
+            z-index: 99;
+            position: absolute;
+            font-size: 16px;
+            left: 1018px;
+            top: 323px;
+            img {
+              vertical-align: bottom;
+            }
+          }
+        }
+        .keti {
+          // z-index: 30;
+          width: 100%;
+          height: ~"calc(100% - 60px)";
+          position: absolute;
+          left: 0;
+          top: 0;
+          & > div {
+            z-index: 99;
+            position: absolute;
+            font-size: 16px;
+            img {
+              vertical-align: bottom;
+              width: 46px;
+            }
+          }
+          & > div:nth-of-type(1) {
+            top: 725px;
+            left: 1046px;
+          }
+          & > div:nth-of-type(2) {
+            top: 315px;
+            left: 1335px;
+          }
+        }
+      }
+      .hover-img {
+        position: absolute;
+        top: 140px;
+        left: 917px;
+        width: 168px;
+        height: 105px;
+        z-index: 101;
+        img {
+          cursor: pointer;
+          margin-left: -7px;
+          display: none;
+        }
+      }
+
+      .hover-img:hover {
+        img {
+          display: block;
+        }
+      }
+    }
+    .b2 {
+      position: relative;
+    }
+  }
+  .select {
+    position: absolute;
+    right: 20px;
+    top: 35%;
+    transform: translateY(-50%);
+    z-index: 10000;
+  }
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #000;
+    width: 100%;
+    height: 100%;
+    z-index: 2000;
+    opacity: 0.8;
+  }
+}
+</style>

+ 370 - 0
src/views/flooraction/selector.vue

@@ -0,0 +1,370 @@
+<template>
+  <div>
+    <div>
+      <div style="cursor: pointer; position: relative;">
+        <img
+          @click="clickEventShow"
+          src="../../assets/images/flooraction/legend.png"
+          alt=""
+        />
+        <el-collapse-transition>
+          <div class="sele-legend" v-show="legendShow">
+            <div>
+              <div class="sign">
+                <img
+                  src="../../assets/images/flooraction/sanjiao2.png"
+                  alt=""
+                />
+              </div>
+              <div class="title">
+                <div>
+                  <el-checkbox
+                    v-model="allState"
+                    @change="allChange"
+                  ></el-checkbox>
+                </div>
+                <div>项目</div>
+                <div>数量</div>
+                <div>单位</div>
+                <div>图例</div>
+              </div>
+              <div class="table">
+                <ul>
+                  <li
+                    v-for="(item, index) in legend"
+                    :key="index"
+                    :class="{ 'is-status': item.state }"
+                  >
+                    <div>
+                      <el-checkbox
+                        v-model="item.state"
+                        @change="itemChange(item)"
+                      ></el-checkbox>
+                    </div>
+                    <div>{{ item.name }}</div>
+                    <div>{{ item.count }}</div>
+                    <div>{{ item.unit }}</div>
+                    <div>
+                      <span v-if="item.name == '建筑面积'">--</span>
+                      <span v-else-if="item.name == '机动车位'">--</span>
+                      <span v-else-if="item.name == '防火分区'">--</span>
+                      <img
+                        v-else-if="item.name == '主要设备房'"
+                        src="../../assets/images/flooraction/sebei.png"
+                        alt=""
+                      />
+                      <img
+                        v-else-if="item.name == '疏散通道'"
+                        src="../../assets/images/flooraction/tongdao.png"
+                        alt=""
+                      />
+                      <img
+                        v-else-if="item.name == '卫生间'"
+                        src="../../assets/images/flooraction/weishengjian.png"
+                        alt=""
+                      />
+                      <img
+                        v-else-if="item.name == '扶梯/坡梯'"
+                        src="../../assets/images/flooraction/futi.png"
+                        alt=""
+                      />
+                      <img
+                        v-else-if="item.name == '客梯'"
+                        src="../../assets/images/flooraction/keti.png"
+                        alt=""
+                      />
+                      <img
+                        v-else-if="item.name == '货梯'"
+                        src="../../assets/images/flooraction/huoti.png"
+                        alt=""
+                      />
+                      <img
+                        v-else
+                        src="../../assets/images/flooraction/liantongkou.png"
+                        alt=""
+                      />
+                    </div>
+                  </li>
+                </ul>
+                <div class="text">
+                  <p style="padding-left: 2px;">
+                    注: 1.主要设备房包括:制冷机房、生活水泵房、消防泵房
+                  </p>
+                  <p>2.图例后的数字,代表此位置的数量</p>
+                  <p>3.-B2-1至-B2-8为防火分区编号</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-collapse-transition>
+      </div>
+      <div class="select-floor">
+        <span>
+          <img src="../../assets/images/flooraction/sanjiao.png" alt="" />
+        </span>
+        <span>F2</span>
+        <span @click="isActive" :class="{ 'is-active': state }">
+          <span>F1</span>
+        </span>
+        <span>B1</span>
+        <span @click="isActive2" :class="{ 'is-active': !state }"
+          ><span>B2</span></span
+        >
+        <span
+          ><img src="../../assets/images/flooraction/sanjiao.png" alt=""
+        /></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['imgShow', 'stateStatus'],
+  data() {
+    return {
+      legendShow: false,
+      state: false,
+      allState: false,
+      legend: [
+        { name: '建筑面积', count: 18500, unit: '㎡', state: false },
+        { name: '主要设备房', count: 5, unit: '处', state: false },
+        { name: '机动车位', count: 556, unit: '个', state: false },
+        { name: '疏散通道', count: 18, unit: '个', state: false },
+        { name: '卫生间', count: 1, unit: '处', state: false },
+        { name: '扶梯/坡梯', count: 4, unit: '部', state: false },
+        { name: '客梯', count: 5, unit: '部', state: false },
+        { name: '货梯', count: 10, unit: '部', state: false },
+        { name: '防火分区', count: 8, unit: '个', state: false },
+        { name: '连通口', count: 0, unit: '处', state: false }
+      ],
+      legendArr: []
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {
+    legend: {
+      handler(newValue) {
+        newValue.forEach(item => {
+          if (item.state) {
+            this.$emit('update:stateStatus', true)
+          }
+        })
+        let arr = newValue.filter(item => {
+          if (!item.state) {
+            return item
+          }
+        })
+        if (arr.length != newValue.length) {
+          this.$emit('update:stateStatus', true)
+        } else {
+          this.$emit('update:stateStatus', false)
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    allChange() {
+      if (this.allState) {
+        this.legend.forEach(item => {
+          item.state = true
+          this.legendArr.push(item.name)
+        })
+      } else {
+        this.legend.forEach(item => {
+          item.state = false
+          this.legendArr = []
+        })
+      }
+      this.legendArr = [...new Set(this.legendArr)]
+      this.$emit('childDataArrEvent', this.legendArr)
+    },
+    itemChange(ele) {
+      // console.log(e)
+      let arr = this.legend.filter(item => {
+        if (item.state) {
+          return item
+        }
+      })
+      if (arr.length == this.legend.length) {
+        this.allState = true
+      } else {
+        this.allState = false
+      }
+      if (ele.state) {
+        this.legendArr.push(ele.name)
+      } else {
+        let num = this.legendArr.indexOf(ele.name)
+        if (num != -1) {
+          this.legendArr.splice(num, 1)
+        }
+      }
+      this.legendArr = [...new Set(this.legendArr)]
+      this.$emit('childDataArrEvent', this.legendArr)
+    },
+    clickEventShow() {
+      this.legendShow = !this.legendShow
+    },
+    isActive() {
+      this.state = true
+      this.$emit('update:imgShow', true)
+    },
+    isActive2() {
+      this.state = false
+      this.$emit('update:imgShow', false)
+    }
+  },
+  components: {}
+}
+</script>
+
+<style scoped lang="less">
+.sele-legend {
+  width: 421px;
+  height: 572px;
+  position: absolute;
+  right: 75px;
+  top: 0;
+  transition: 0.5s all;
+  & > div {
+    background: #0a1b51;
+    opacity: 0.95;
+    border: 1px solid #0a397f;
+    width: 406px;
+    height: 100%;
+    position: relative;
+    .sign {
+      position: absolute;
+      right: -13px;
+      top: -1px;
+    }
+    .title {
+      width: 100%;
+      height: 42px;
+      background: #1649ce;
+      line-height: 42px;
+      display: flex;
+      font-size: 16px;
+      box-sizing: border-box;
+      padding-left: 12px;
+      padding-right: 10px;
+      & > div:nth-child(1) {
+        flex: 0.6;
+      }
+      & > div:nth-child(2) {
+        flex: 3;
+      }
+      & > div {
+        flex: 2;
+      }
+      /deep/ .el-checkbox__inner {
+        background: none;
+        border: 1px solid #033a8c;
+      }
+      /deep/ .el-checkbox .is-checked {
+        .el-checkbox__inner {
+          background: #005daa !important;
+        }
+      }
+    }
+    .table {
+      padding-right: 10px;
+      box-sizing: border-box;
+      ul {
+        li {
+          color: #8c90ae;
+          box-sizing: border-box;
+          padding-left: 12px;
+          line-height: 40px;
+          display: flex;
+          border: 1px solid #0a1b51;
+          & > div:nth-child(1) {
+            flex: 0.6;
+          }
+          & > div:nth-child(2) {
+            flex: 3;
+          }
+          & > div {
+            flex: 2;
+          }
+          /deep/ .el-checkbox__inner {
+            background: none;
+            border: 1px solid #033a8c;
+          }
+          /deep/ .el-checkbox .is-checked {
+            .el-checkbox__inner {
+              background: #005daa !important;
+            }
+          }
+        }
+        li:nth-child(even) {
+          background: #0c1555;
+          border: 1px solid #0d1a5f;
+        }
+        .is-status {
+          background: #102982 !important;
+          border: 1px solid #143db3 !important;
+        }
+      }
+      .text {
+        margin-top: 12px;
+        margin-left: 38px;
+        line-height: 22px;
+        color: #4a89b0;
+        p:nth-child(2) {
+          text-indent: 2em;
+        }
+        p:nth-child(3) {
+          text-indent: 2em;
+        }
+      }
+    }
+  }
+}
+.select-floor {
+  font-size: 16px;
+  margin-top: 10px;
+  width: 61px;
+  height: 260px;
+  border: 1px solid #00aee8;
+  background: #0f2967;
+  border-radius: 3px;
+  color: #00cce8;
+  & > span {
+    cursor: pointer;
+    text-align: center;
+    line-height: 40px;
+    height: 16.5%;
+    width: 100%;
+    display: block;
+    transition: 0.5s all;
+    // padding: 5px;
+    & > span {
+      border: 1px solid #0f2967;
+      box-sizing: border-box;
+      display: block;
+      height: 43px;
+      border-radius: 3px;
+      line-height: 43px;
+    }
+  }
+  & > span:nth-child(1) {
+    line-height: 40px;
+    img {
+      transform: rotate(180deg);
+    }
+  }
+  .is-active {
+    & > span {
+      border: 1px solid #00cce8;
+      color: #fff;
+      background: #047ca6;
+      width: 70%;
+      margin: 0 auto 0;
+    }
+  }
+}
+</style>

+ 53 - 0
src/views/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="#home">
+    <menu-list :modelNum.sync="modelNum" @handlerouterName="handlerouterName"></menu-list>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import menuList from "@/components/menuList.vue";
+
+export default {
+  props: [],
+  data() {
+    return {
+      modelNum: 0,
+      // shebeisheshiShow: false,
+      routerName: "aa",
+      imgSrcNum: 1,
+      tanchuanShow: false
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {
+    // tanchuanShow(newVal) {
+    //   console.log(newVal)
+    // }
+  },
+  methods: {
+    handlerouterName(val) {
+      // console.log(val);
+      this.routerName = val;
+      if (val == "device") {
+        this.modelNum = 3;
+      } else if (val == "floor") {
+        this.modelNum = 2;
+      }
+    }
+  },
+  components: {
+    menuList
+  }
+};
+</script>
+
+<style scoped lang="less">
+#home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

+ 109 - 0
src/views/login.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="box">
+        <div class="box-login">
+            <div class="login-content-icon">
+                <img src="../assets/images/login_icon.png" alt="">
+            </div>
+            <div class="login-input">
+                <div class="login-input-item" :class="{'focus':activeInput == 'username'}">
+                    <img src="../assets/images/icon_username.png" class="icon">
+                    <input type="text" placeholder="username" @focus="activeInput = 'username'" autofocus @keyup.enter="$router.push('./index')">
+                </div>
+                <div class="login-input-item" :class="{'focus':activeInput == 'password'}">
+                    <img src="../assets/images/icon_password.png" class="icon">
+                    <input type="password" placeholder="password" @focus="activeInput = 'password'" @keyup.enter="$router.push('./index')">
+                </div>
+                <router-link to="./home" class="login-btn">Login</router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'login',
+        data() {
+            return {
+                activeInput: 'username'
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .box {
+        width: 100%;
+        height: 100%;
+        background: url("../assets/images/login_back.png");
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .box-login {
+            width: 676px;
+            height: 640px;
+            background: rgba(0, 18, 46, .61);
+            border-radius: 2px;
+
+            .login-content-icon {
+                width: 100%;
+            }
+
+            .login-input {
+                margin: 116px 118px;
+
+                .login-input-item {
+                    border: 1px solid rgba(0, 0, 0, 0);
+                    border-radius: 2px;
+                    background-color: rgb(0, 18, 46);
+                    width: 440px;
+                    height: 70px;
+                    padding: 10px;
+                    box-sizing: border-box;
+                    margin-bottom: 55px;
+                    color: #fff;
+
+                    .icon {
+                        vertical-align: text-bottom;
+                        margin: 0 10px;
+                    }
+
+                    input {
+                        background: none;
+                        height: 50px;
+                        padding-left: 10px;
+                        border: none;
+                        color: #fff;
+                        font-size: 24px;
+
+                        &::-webkit-input-placeholder {
+                            color: rgba(255, 255, 255, .3);
+                        }
+                    }
+
+                    &.focus {
+                        border: 1px solid rgb(0, 104, 177);
+                    }
+                }
+
+                .login-btn {
+                    display: block;
+                    line-height: 64px;
+                    text-align: center;
+                    border-radius: 4px;
+                    background-color: rgb(0, 104, 177);
+                    width: 440px;
+                    height: 64px;
+                    font-size: 20px;
+                    color: #fff;
+                    cursor: pointer;
+
+                    &:hover {
+                        opacity: .9;
+                        text-decoration: none;
+                    }
+                }
+            }
+        }
+    }
+</style>

+ 8 - 0
src/views/other/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="other_thing">其他事项</div>
+</template>
+<style lang="less">
+#other_thing {
+  color: #fff;
+}
+</style>

+ 10 - 0
src/views/overview/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <div id="overview">
+        项目概况
+    </div>
+</template>
+<style lang="less">
+    #overview{
+        color: #fff
+    }
+</style>

BIN
static/device/active.png


BIN
static/device/bg1.png


BIN
static/device/bg2.png


BIN
static/device/bg3.png


BIN
static/device/bg4.png


BIN
static/device/icon1.png


BIN
static/device/icon2.png


BIN
static/device/icon3.png


BIN
static/device/icon4.png


BIN
static/device/icon5.png


BIN
static/device/icon6.png


BIN
static/device/icon7.png


BIN
static/device/icon8.png


BIN
static/device/icon9.png


BIN
static/device/nav-bg.png