创建项目，静态页面完成

package.json

@@ -9,15 +9,26 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "echarts": "^5.1.2",
+    "element-ui": "^2.4.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.13",
+    "@vue/cli-plugin-vuex": "^4.5.13",
     "@vue/cli-service": "~4.5.0",
+    "axios": "^0.18.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.9.2",
+    "sass-loader": "^7.0.3",
+    "vue-cli-plugin-axios": "0.0.4",
+    "vue-cli-plugin-element": "~1.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -1,28 +1,61 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <header-view class="headerView" v-if="$store.state.typeFire === 0"></header-view>
+    <header-view-af class="headerView-af" v-else></header-view-af>
+    <router-view :class="$store.state.typeFire === 0 ? 'content' : 'content-AF'" />
+    
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import headerView from './components/SD-school/header-view'
+import headerViewAf from './components/AF-exhibition/header-view'
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+  components:{headerView,headerViewAf},
+  data() {
+    return {
+      resizeTime: true,
+    };
+  },
+  mounted() {
+    window.addEventListener("resize", () => this.resizeTimeActions(), true);
+  },
+  methods: {
+    resizeTimeActions() {
+      if (!this.resizeTime) return;
+      this.resizeTime = false;
+      setTimeout(() => {
+        this.resizeTime = true;
+        this.$store.commit("changClient",  document.documentElement.clientWidth + document.documentElement.clientHeight);
+      }, 300);
+    },
+  },
+};
 </script>
 
-<style>
+<style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  width: 100%;
+  height: 100%;
+  background: url('./assets/image/bg.jpg');
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  .content{
+    width: 100%;
+    height: calc(100% - 60px);
+  }
+  .content-AF{
+    width: 100%;
+    height: calc(100% - 85px);
+  }
+  .headerView{
+    width: 100%;
+    height: 60px;
+  }
+  .headerView-af{
+    width: 100%;
+    height: 85px;
+  }
 }
 </style>

src/assets/common.scss

@@ -0,0 +1,243 @@
+body,
+div,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+table,
+tr,
+td,
+form,
+hr,
+fieldset,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+img,
+input {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+}
+
+.el-row {
+    &::before {
+        display: none;
+    }
+    &::after {
+        display: none;
+    }
+}
+
+// 表格样式修改
+.transparentTableRow {
+    background: transparent !important;
+    th.gutter {
+        display: table-cell !important;
+    }
+    table {
+        flex-shrink: 0;
+        width: 100% !important;
+    }
+    table {
+        font-size: 14px;
+        tr,
+        td {
+            padding: 0;
+            background: rgba(0, 251, 251, .051) !important;
+            color: #FFF;
+            border-color: rgba(0, 250, 251, 0.20);
+        }
+        .death {
+            // color: red !important;
+        }
+        tr {
+            margin-bottom: 1px;
+        }
+        th {
+            color: #FFF;
+            background: rgba(0, 250, 251, 0.20);
+            border-color: transparent;
+            .cell {
+                padding: 0;
+            }
+        }
+        thead {
+            th {
+                padding: 0;
+                height: 34px;
+                border-color: rgba(0, 250, 251, 0.20) !important;
+            }
+        }
+    }
+    .el-table__header-wrapper {
+        display: inline-table;
+        width: 100%;
+        table {
+            display: contents;
+        }
+    }
+    .el-table__expanded-cell {
+        padding: 10px;
+    }
+    .el-table__expand-icon {
+        color: #FFF;
+    }
+    .cell {
+        padding: 0 10px;
+    }
+    .name-wrapper {
+        white-space: nowrap;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+    }
+    .el-table__body-wrapper {
+        scrollbar-width: none;
+        /* firefox */
+        -ms-overflow-style: none;
+        /* IE 10+ */
+        overflow-x: hidden;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            display: none;
+            // opacity: 0;
+            /* Chrome Safari */
+        }
+    }
+}
+
+.yellow {
+    color: #FDC51A;
+}
+
+.blue {
+    color: #1AF3FD;
+}
+
+.green {
+    color: #0DC94F;
+}
+
+.el-table {
+    // border-radius: 10px;
+    &::before {
+        height: 0;
+    }
+}
+
+.mianBox {
+    width: 100%;
+    height: 100%;
+    padding: 20px 30px 30px 15px;
+    display: flex;
+    flex-direction: column;
+    .headerBox {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 30px;
+        width: 100%;
+        color: #FFF;
+        .el-col {
+            width: auto;
+            height: 100%;
+            line-height: 100%;
+            text-align: center;
+        }
+        .title {
+            color: #38E7EE;
+            line-height: 21px;
+            font-weight: bold;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 17px;
+                height: 17px;
+                margin-right: 10px;
+            }
+        }
+        .btn {
+            display: flex;
+            align-items: center;
+            span {
+                cursor: pointer;
+                background: #00115d;
+                border: 1px solid #3573fc;
+                padding: 7px 13px;
+            }
+            .clickBtn {
+                background: #3573fc;
+                border: 1px solid #3573fc;
+            }
+        }
+    }
+}
+
+// form表单样式
+.el-form {
+    .el-form-item {
+        color: #17CECC;
+        .el-form-item__label {
+            color: #17CECC;
+            font-size: 14px;
+            line-height: 28px;
+            padding: 0 12px 0 0;
+        }
+        .el-form-item__content {
+            line-height: 28px;
+            font-size: 14px;
+        }
+    }
+    .el-form-item--mini {
+        margin-bottom: 18px;
+        margin-right: 10px;
+    }
+}
+
+// select 下拉框样式修改
+.el-select {
+    color: #17CECC;
+    .el-input__inner {
+        color: #17CECC;
+        background: transparent;
+        border-color: #17CECC;
+        font-size: 14px;
+        padding-right: 30px;
+        padding-left: 15px;
+        &::-webkit-input-placeholder {
+            font-size: 14px;
+            line-height: 28px;
+            color: #17CECC;
+        }
+    }
+    .el-input__suffix .el-input__suffix-inner .el-input__icon {
+        color: #17CECC;
+        line-height: 28px;
+        font-size: 14px;
+    }
+    .el-input--mini {
+        font-size: 14px;
+        line-height: 28px;
+        .el-input__inner {
+            height: 28px;
+            line-height: 28px;
+        }
+    }
+}

src/assets/font/index.scss

@@ -0,0 +1,27 @@
+@font-face {
+    font-family: "DS";
+    src: url(./DS-DIGI.TTF);
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "DS-B";
+    src: url(./DS-DIGIB.TTF);
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "DS-BB";
+    src: url(./DS-DIGII.TTF);
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "DS-BS";
+    src: url(./DS-DIGITS.TTF);
+    font-weight: normal;
+    font-style: normal;
+}

src/components/AF-exhibition/header-view/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <header>
+    <el-row class="headerRowBox">
+      <el-col>{{ dateDay }}</el-col>
+      <el-col class="time">{{ dataTime }}</el-col>
+      <el-col class="weather">
+        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
+        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
+        <img src="../../../assets/image/header-AF.png" alt="" />
+      </el-col>
+      <el-col>多云 23℃</el-col>
+    </el-row>
+    <el-row class="headerCenterBox">永天科技-智能安防系统数据看板</el-row>
+    <el-row class="headerRowBox">
+    </el-row>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateDay: "",
+      dataTime: "",
+      timeArea: "",
+      weatherObj: {},
+      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getData();
+    setInterval(() => {
+      let day = new Date();
+      this.dateDay =
+        day.getFullYear() +
+        "年" +
+        (day.getMonth() + 1 < 10
+          ? "0" + (day.getMonth() + 1)
+          : "" + (day.getMonth() + 1)) +
+        "月" +
+        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate()) +
+        "日  " +
+        " 星期" +
+        this.dataWeekList[day.getDay()];
+      this.dataTime =
+        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
+        ":" +
+        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
+        ":" +
+        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
+    }, 1000);
+  },
+  methods: {
+    async getData() {
+
+    },
+    async getWeather() {
+      let res = await this.$axios.get("/aliWeather");
+      if (res.showapi_res_code === 0) {
+        this.weatherObj = res.showapi_res_body.now;
+      }
+    },
+  },
+  };
+</script>
+
+<style lang="scss" scoped>
+  header {
+    width: 100%;
+    padding: 0 20px;
+    display: flex;
+    background: url("../../../assets/image/header-AF.png");
+    background-size: 100% 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+    .headerRowBox {
+      width: 34%;
+      display: flex;
+      padding-top: 12px;
+      height: 100%;
+      &::before{
+        display: none;
+      }
+      .el-col {
+        flex: none;
+        width: auto;
+        height: auto;
+        margin-right: 20px;
+        line-height: 30px;
+        span{
+          font-size: 20px;
+          color: #F6D311;
+          margin-left: 10px;
+        }
+      }
+      .time {
+        margin-left: 10px;
+        font-size: 28px;
+        width: 90px;
+        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+      }
+      .weather {
+        display: flex;
+        img {
+          width: 28px;
+          height: 28px;
+          display: block;
+        }
+      }
+    }
+    .headerCenterBox{
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+      font-weight: 700;
+      letter-spacing: 1px;
+      background-image:-webkit-linear-gradient(top,#fafeff,#59c8ff,); 
+      -webkit-background-clip:text; 
+      -webkit-text-fill-color:transparent; 
+    }
+    // .headerRightBox {
+    //   width: 34%;
+    //   display: flex;
+    //   align-items: center;
+    //   height: 100%;
+    //   .el-col {
+    //     flex: none;
+    //     width: auto;
+    //     height: auto;
+    //     margin-right: 30px;
+    //   }
+    // }
+  }
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/SD-school/access-control/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        门禁出入统计
+      </el-col>
+    </el-row>
+    <el-row class="threeBox">
+      <div class="flexBoxE">
+        <el-row>
+          <el-col style="margin-bottom: 50px;">
+            <span>挂牌督办</span>
+            <div class="progress">
+              <div class="percentage" :style="{width:'20%', background: `linear-gradient(to right, #C41825 0%,#E4AB33 100%)`}"></div>
+              <span class="percentageValue">222</span>
+            </div>
+          </el-col>
+          <el-col>
+            <span>存在隐患</span>
+            <div class="progress">
+              <div class="percentage" :style="{width:'20%', background: `linear-gradient(to right, #1C2AB0 0%,#33B8E4 100%)`}"></div>
+              <span class="percentageValue">222</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+    };
+  },
+  mounted() {},
+  methods: {
+    format(percentage) {
+      return percentage === 100 ? "满" : `${percentage}%`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
+  .threeBox {
+    width: 100%;
+    flex: 1;
+    padding: 0 20px;
+    box-sizing: border-box;
+    & > .flexBoxE {
+      width: 100%;
+      height: 100%;
+      & > .el-row {
+        width: 100%;
+        height: 100%;
+        font-size: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .el-col {
+          display: flex;
+          span {
+            margin-right: 10px;
+            color: #00FCF9;
+          }
+          .progress {
+            flex: 1;
+            height: 25px;
+            display: flex;
+            .percentage{
+              height: 100%;
+            }
+            .percentageValue{
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/SD-school/conference-room/echart.js

@@ -0,0 +1,91 @@
+import * as echarts from "echarts";
+
+export default function getData(params = .23) {
+    console.log(params || '')
+    return {
+        title: {
+            show: true,
+            text: "总数",
+            left: "center",
+            right: "center",
+            bottom: "center",
+            top: "52%",
+            center: 20,
+            textStyle: {
+                color: "#FFF",
+                fontSize: 18,
+                align: "center",
+                fontWeight: "100",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+            },
+        },
+        series: [{
+            type: "gauge",
+            radius: document.body.clientHeight > 1000 ? '90%' : "100%",
+            // center: ["50%","70%"],
+            splitNumber: 5, //刻度数量
+            startAngle: -260, //开始角度 左侧角度
+            endAngle: 100, //结束角度 右侧
+            z: 4,
+            axisLine: {
+                show: true,
+                // roundCap: true,
+                lineStyle: {
+                    width: document.body.clientHeight > 1000 ? 20 : 15,
+                    color: [
+                        [1, "#1AF3FD"],
+                        [
+                            params > 1 ? 1 : params,
+                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: "#ecc242" },
+                                { offset: 1, color: "#FDC51A" },
+                            ]),
+                        ],
+                    ],
+                },
+            },
+            //分隔线样式。
+            splitLine: {
+                show: false,
+            },
+            axisLabel: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            pointer: {
+                show: false,
+                length: "70%",
+                width: "2%",
+            },
+            title: {
+                show: false,
+                offsetCenter: [0, 0], // x, y，单位px
+                textStyle: {
+                    fontWeight: "100",
+                    color: "#0ab7ff",
+                    fontSize: 30,
+                },
+            },
+            //仪表盘详情，用于显示数据。
+            detail: {
+                show: true,
+                offsetCenter: [0, "-20%"],
+                color: "#ffffff",
+                textStyle: {
+                    fontSize: 36,
+                    color: "#FF3A05",
+                    fontWeight: "500",
+                    fontFamily: 'Impact Regular, Impact Regular-Regular',
+                },
+                formatter: function(v) {
+                    return v * 100 + "%";
+                },
+            },
+            data: [{
+                value: params,
+            }, ],
+        }, ]
+    }
+}

src/components/SD-school/conference-room/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        会议室统计
+      </el-col>
+    </el-row>
+    <el-row class="roomLine">
+      <div ref="echartD" style="width: 50%; height: 100%"></div>
+      <el-row class="roomNumber">
+        <el-col>
+          <el-col>在用数</el-col>
+          <el-col class="yellow">222</el-col>
+        </el-col>
+        <el-col>
+          <el-col>空闲数</el-col>
+          <el-col class="blue">222</el-col>
+        </el-col>
+      </el-row>
+    </el-row>
+    <el-row class="roomTable">
+      <el-table
+        :data="dataMap"
+        class="transparentTableRow"
+        height="100%"
+        style="width: 100%; margin: 0 auto"
+      >
+        <!-- min-width="20" -->
+        <el-table-column
+          show-overflow-tooltip
+          v-for="item in headerData"
+          :key="item.prop"
+          :prop="item.prop"
+          align="center"
+          :label="item.name"
+        ></el-table-column>
+      </el-table>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartsGet from "./echart";
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+      dataMap: [
+        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
+        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
+        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
+      ],
+      headerData: [
+        { name: "会议室名称", prop: "name" },
+        { name: "会议名称", prop: "nameF" },
+        { name: "起止时间", prop: "time" },
+      ],
+    };
+  },
+  mounted() {
+    echarts.init(this.$refs.echartD).setOption(echartsGet());
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.dispose(this.$refs.echartD)
+      echarts.init(this.$refs.echartD).setOption(echartsGet())
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
+  .roomLine {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    .roomNumber {
+      font-family: Impact Regular, Impact Regular-Regular;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      // padding: 10px 30px;
+      align-items: flex-start;
+      justify-content: center;
+      & > .el-col {
+        display: flex;
+        height: 50px;
+        width: 160px;
+        box-shadow: inset 0 0 16px 1px #3573fc;
+        border: 1px solid transparent;
+        line-height: 50px;
+        text-align: center;
+        font-size: 16px;
+        & > .el-col:last-child {
+          font-size: 25px;
+        }
+      }
+      & > .el-col:first-child {
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .roomTable {
+    height: 90px;
+    padding: 10px 0 0;
+    width: 100%;
+  }
+}
+</style>

src/components/SD-school/give-an-alarm/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        综合告警列表
+      </el-col>
+    </el-row>
+    <el-form ref="form" :model="form" inline label-width="40px">
+      <el-form-item label="时间">
+          <el-date-picker
+          v-model="valueTime"
+          class="dataComponent"
+          type="daterange"
+          align="right"
+          range-separator="~"
+          size="small"
+          prefix-icon
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="dateTimeChange"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select v-model="form.region" placeholder="请选择类型" size="mini">
+          <el-option label="类型一" value="shanghai"></el-option>
+          <el-option label="类型二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-row class="threeBox">
+      <el-table :data="dataMap" class="transparentTableRow" height="100%" style="width: 100%; margin: 0 auto">
+        <!-- min-width="20" -->
+        <el-table-column show-overflow-tooltip v-for="item in headerData" :key="item.prop" :prop="item.prop" align="center" :label="item.name"></el-table-column>
+      </el-table>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+      form:{
+        region:''
+      },
+      valueTime: [],
+      dataMap: [
+        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
+        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
+        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
+      ],
+      headerData: [
+        { name: "点位", prop: "name" },
+        { name: "起止时间", prop: "time" },
+        { name: "类型", prop: "nameF" },
+        { name: "内容详情", prop: "nameFF" },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {
+    format(percentage) {
+      return percentage === 100 ? "满" : `${percentage}%`;
+    },
+    dateTimeChange() {
+      
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
+  .threeBox {
+    flex: 1;
+    width: 100%;
+    height: inherit;
+    display: flex;
+  }
+  .el-form{
+    height: 40px;
+    width: 100%;
+    .el-select{
+      width: 110px;
+    }
+  }
+  /deep/.dataComponent {
+    height: 26px;
+    width: 230px;
+    background: transparent;
+    color: #fff;
+    border: 1px solid;
+    border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
+    border-radius: 10px;
+    padding: 5px;
+    font-size: 14px;
+    // .el-icon-date{
+    // display: none;
+    // }
+    i,
+    span {
+      line-height: 100%;
+      color: #fff;
+      font-size: 14px;
+    }
+    input {
+      width: 40%;
+      font-size: 14px;
+      background: transparent;
+      color: #fff;
+    }
+  }
+}
+</style>

src/components/SD-school/header-view/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <header>
+    <el-row class="headerRowBox">
+      <el-col>{{ dateDay }}</el-col>
+      <el-col class="time">{{ dataTime }}</el-col>
+      <el-col class="weather">
+        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
+        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
+        <img src="../../../assets/image/header.png" alt="" />
+      </el-col>
+      <el-col>多云23℃</el-col>
+      <el-col>东风三级</el-col>
+      <el-col>PM2.5<span>53</span></el-col>
+    </el-row>
+    <el-row class="headerCenterBox">山东IOT物联网平台</el-row>
+    <el-row class="headerRowBox">
+      <el-col>照度/感光度：16000LUX</el-col>
+      <el-col>相对湿度：78%</el-col>
+    </el-row>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateDay: "",
+      dataTime: "",
+      timeArea: "",
+      weatherObj: {},
+      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getData();
+    setInterval(() => {
+      let day = new Date();
+      this.dateDay =
+        day.getFullYear() +
+        "/" +
+        (day.getMonth() + 1 < 10
+          ? "0" + (day.getMonth() + 1)
+          : "" + (day.getMonth() + 1)) +
+        "/" +
+        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate());
+      this.dataTime =
+        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
+        ":" +
+        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
+        ":" +
+        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
+    }, 1000);
+  },
+  methods: {
+    async getData() {
+
+    },
+    async getWeather() {
+      let res = await this.$axios.get("/aliWeather");
+      if (res.showapi_res_code === 0) {
+        this.weatherObj = res.showapi_res_body.now;
+      }
+    },
+  },
+  };
+</script>
+
+<style lang="scss" scoped>
+  header {
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    display: flex;
+    background: url("../../../assets/image/header.png");
+    background-size: 100% 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+    .headerRowBox {
+      width: 34%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 100%;
+      &::before{
+        display: none;
+      }
+      .el-col {
+        flex: none;
+        width: auto;
+        height: auto;
+        // margin-right: 30px;
+        span{
+          font-size: 20px;
+          color: #F6D311;
+          margin-left: 10px;
+        }
+      }
+      .time {
+        margin-left: 10px;
+      }
+      .weather {
+        display: flex;
+        img {
+          width: 28px;
+          display: block;
+        }
+      }
+    }
+    .headerCenterBox{
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1e9dff;
+      font-size: 30px;
+      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
+      font-weight: 700;
+      text-align: center;
+      color: #00e6ff;
+      letter-spacing: 1px;
+    }
+    // .headerRightBox {
+    //   width: 34%;
+    //   display: flex;
+    //   align-items: center;
+    //   height: 100%;
+    //   .el-col {
+    //     flex: none;
+    //     width: auto;
+    //     height: auto;
+    //     margin-right: 30px;
+    //   }
+    // }
+  }
+</style>

src/components/SD-school/info/echart.js

@@ -0,0 +1,53 @@
+export default function getData(params) {
+    console.log(params || '')
+    let data = [
+        { value: 1048, name: '搜索引擎' },
+        { value: 735, name: '直接访问' },
+        { value: 580, name: '邮件营销' },
+        { value: 484, name: '联盟广告' },
+        { value: 300, name: '视频广告' }
+    ]
+    return {
+        title: {
+            show: false,
+            text: '某站点用户访问来源',
+            subtext: '纯属虚构',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 0,
+            top: 20,
+            itemGap: 15,
+            formatter: function(param) {
+                console.log(param)
+                return param + '    ' + data.find(val => val.name === param).value;
+            },
+            tooltip: {
+                show: true
+            },
+            textStyle: {
+                color: "#FFF"
+            }
+        },
+        series: [{
+            // name: '访问来源',
+            type: 'pie',
+            radius: '90%',
+            center: ["30%", "50%"],
+            label: {
+                position: 'inner',
+                fontSize: 14,
+                align: "right",
+                overflow: "truncate",
+                baseline: "middle",
+                color: '#FFF'
+            },
+            data: data,
+            left: 1,
+        }]
+    }
+}

src/components/SD-school/info/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        综合信息统计
+      </el-col>
+      <el-col class="btn">
+        <span :class="{'clickBtn':isCheck === 'info'}" @click="isCheck = 'info'">告警信息</span>
+        <span :class="{'clickBtn':isCheck === 'work'}" @click="isCheck = 'work'">设备工况</span>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+        <div ref="echartD" style="width:100%;height:100%;"></div>
+    </el-row>
+    <el-row class="bot">
+        <el-col class="leftBot">
+            <el-col>160</el-col>
+            <el-col>已处理</el-col>
+        </el-col>
+        <el-col class="rightBot">
+            <el-col>160</el-col>
+            <el-col>待处理</el-col>
+        </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartsGet from './echart'
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+    };
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+  mounted(){
+    echarts.init(this.$refs.echartD).setOption(echartsGet())
+  },
+  methods:{
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view1.png") no-repeat;
+  background-size: 100% 100%;
+  .el-row {
+    flex: none;
+  }
+  .content {
+    flex: 1;
+    width: 100%;
+  }
+  .bot {
+    height: 90px;
+    width: 100%;
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    & > .el-col {
+      width: 45%;
+      color: #FFF;
+      background: url("../../../assets/image/box1.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .el-col{
+          width: auto;
+      }
+    }
+    .leftBot{
+        &>.el-col:first-child{
+            color: #00FE24;
+            font-size: 28px;
+            font-family: Impact Regular, Impact Regular-Regular;
+        }
+        &>.el-col:last-child{
+            font-size: 16px;
+        }
+    }
+    .rightBot{
+        &>.el-col:first-child{
+            color: #FF7112;
+            font-size: 28px;
+            font-family: Impact Regular, Impact Regular-Regular;
+        }
+        &>.el-col:last-child{
+            font-size: 16px;
+        }
+    }
+  }
+}
+</style>

src/components/SD-school/monitor/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        视频监控
+      </el-col>
+    </el-row>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="区域位置">
+        <el-select v-model="form.region" placeholder="请选择区域位置" size="mini">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-row class="threeBox" :gutter="10">
+      <el-col>
+        <img src="../../../assets/image/test1.png" alt="">
+      </el-col>
+      <el-col>
+        <img src="../../../assets/image/test1.png" alt="">
+      </el-col>
+      <el-col>
+        <img src="../../../assets/image/test1.png" alt="">
+      </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+      form:{
+        region:''
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    format(percentage) {
+      return percentage === 100 ? "满" : `${percentage}%`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
+  .threeBox {
+    flex: 1;
+    width: 100%;
+    height: inherit;
+    display: flex;
+    .el-col{
+      height: 100%;
+      flex: 1;
+      img{
+        display: block;
+        width: inherit;
+        height: inherit;
+        margin: 0 auto;
+      }
+    }
+  }
+  .el-form{
+    height: 40px;
+    width: 100%;
+    .el-select{
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/SD-school/parking-lot/echart.js

@@ -0,0 +1,75 @@
+import * as echarts from "echarts";
+
+export default function getData(params) {
+    console.log(params || '')
+    let data = [10, 34, 82, 93, 91, 133, 120]
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+        grid: {
+            top: 10,
+            left: 0,
+            right: 10,
+            bottom: 0,
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['09', '10', '11', '12', '13', '14', '15'],
+            axisLabel: {
+                color: "#CCC",
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: true
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: "#CCC",
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: "#CCC",
+                },
+            },
+            splitLine: {
+                show: false,
+                lineStyle: {
+                    color: "#CCC",
+                },
+            },
+        },
+        series: [{
+            data: data,
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+                width: 1
+            },
+            areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(73, 185, 245,1)'
+                }, {
+                    offset: 1,
+                    color: 'rgba(73, 185, 245,.1)'
+                }])
+            },
+        }]
+    }
+}

src/components/SD-school/parking-lot/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        停车场统计
+      </el-col>
+    </el-row>
+    <el-row class="carNumber">
+      <el-col class="carLot">
+        <el-col>
+          <img src="../../../assets/image/car2.png" alt="" />
+        </el-col>
+        <el-col class="carNumbderLot">
+          <span class="green">300</span>
+          <span>车位总数</span>
+        </el-col>
+      </el-col>
+      <el-col class="carLot">
+        <el-col>
+          <img src="../../../assets/image/car1.png" alt="" />
+        </el-col>
+        <el-col class="carNumbderLot">
+          <span class="yellow">300</span>
+          <span>车位总数</span>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="carLine">
+      <div ref="echartD" style="width:100%;height:100%;"></div>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartsGet from './echart'
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+    };
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+  mounted(){
+    echarts.init(this.$refs.echartD).setOption(echartsGet())
+  },
+  methods: {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
+  font-family: Impact Regular, Impact Regular-Regular;
+  .carLine {
+    flex: 1;
+    width: 100%;
+  }
+  .carNumber {
+    height: 90px;
+    padding: 10px 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & > .el-col {
+      flex: 1;
+      height: 100%;
+    }
+    .carLot {
+      display: flex;
+      justify-content: center;
+      .el-col {
+        width: auto;
+      }
+      .carNumbderLot {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        margin-left: 10px;
+        span {
+          display: block;
+        }
+        & span:first-child{
+          font-size: 28px;
+        }
+        & span:last-child{
+          font-size: 16px;
+          color: #DEF1FF;
+        }
+      }
+    }
+  }
+}
+</style>

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -1,8 +1,17 @@
 import Vue from 'vue'
+import './plugins/axios'
 import App from './App.vue'
+import './plugins/element.js'
+import router from './router'
+import './assets/common.scss'
+import querystring from 'querystring';
+import store from './store'
+import './assets/font/index.scss'
 
 Vue.config.productionTip = false
-
+Vue.prototype.$qs = querystring
 new Vue({
-  render: h => h(App),
-}).$mount('#app')
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')

src/plugins/axios.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import Vue from 'vue';
+import axios from "axios";
+
+// Full config:  https://github.com/axios/axios#request-config
+axios.defaults.baseURL = 'http://120.55.70.156:80/api';
+// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || 'http://120.55.70.156:80/api';
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+let config = {
+    // baseURL: process.env.baseURL || process.env.apiUrl || "",
+    // timeout: 60 * 1000, // Timeout
+    // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+    function(config) {
+        // Do something before request is sent
+        return config;
+    },
+    function(error) {
+        // Do something with request error
+        return Promise.reject(error);
+    }
+);
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+    function(response) {
+        // Do something with response data
+        return response;
+    },
+    function(error) {
+        // Do something with response error
+        return Promise.reject(error);
+    }
+);
+
+Plugin.install = function(Vue, options) {
+    console.log(options)
+    Vue.axios = _axios;
+    window.axios = _axios;
+    Object.defineProperties(Vue.prototype, {
+        axios: {
+            get() {
+                return _axios;
+            }
+        },
+        $axios: {
+            get() {
+                return _axios;
+            }
+        },
+    });
+};
+
+Vue.use(Plugin)
+
+export default Plugin;

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+
+Vue.use(Element)

src/router/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [{
+    path: '/',
+    name: 'Home',
+    component: () =>
+        import ( /* webpackChunkName: "about" */ '../views/Home.vue')
+}, ]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: '/bulehelp/',
+    routes
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        windowWidth: 0,
+        typeFire: 1,
+    },
+    mutations: {
+        changClient(state, val) {
+            state.windowWidth = val
+        },
+        changTypeFire(state, val) {
+            state.typeFire = val
+        }
+    },
+    actions: {},
+    modules: {}
+})

src/views/Home.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="home home-AF">
+    <el-row class="contentClass contnetLift">
+      <info class="info"></info>
+      <access-control class="accessControl"></access-control>
+      <monitor class="monitor"></monitor>
+    </el-row>
+    <el-row class="contnetCenter"> </el-row>
+    <el-row class="contentClass contnetRight">
+      <parking-lot class="parkingLot"></parking-lot>
+      <conference-room class="conferenceRoom"></conference-room>
+      <give-an-alarm class="giveAnAlarm"></give-an-alarm>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import info from "../components/SD-school/info"; // 综合信息统计
+import accessControl from "../components/SD-school/access-control"; // 门进出入统计
+import monitor from "../components/SD-school/monitor"; // 视频监控
+import parkingLot from "../components/SD-school/parking-lot"; // 停车场统计
+import conferenceRoom from "../components/SD-school/conference-room"; // 会议室统计
+import giveAnAlarm from "../components/SD-school/give-an-alarm"; // 综合告警列表
+export default {
+  name: "Home",
+  components: {
+    info,
+    accessControl,
+    monitor,
+    parkingLot,
+    conferenceRoom,
+    giveAnAlarm,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+  .contentClass {
+    width: 25%;
+    min-width: 500px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .info {
+    width: 100%;
+    height: 44%;
+  }
+  .accessControl {
+    width: 100%;
+    height: 28%;
+  }
+  .monitor {
+    width: 100%;
+    height: 28%;
+  }
+  .parkingLot,
+  .conferenceRoom,
+  .giveAnAlarm {
+    width: 100%;
+    // height: 33%;
+    flex: 1;
+  }
+}
+
+.home-AF{
+  padding: 0 30px 30px;
+}
+</style>

vue.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+    publicPath: '/bulehelp/', //部署路径后缀
+    assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
+    indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
+    filenameHashing: true, // 文件名hash，默认
+    lintOnSave: false, // 开发环境下通过 eslint-loader 在每次保存时 lint 代码
+    productionSourceMap: false, // 关闭生产环境的 source map
+    devServer: {
+        overlay: {
+            // 让浏览器 overlay 同时显示警告和错误
+            warnings: true,
+            errors: true
+        },
+        host: 'localhost',
+        port: 8080, // 端口号
+        // https: false, // https:{type:Boolean}
+        open: true, // 配置自动启动浏览器
+        hotOnly: true, // 热更新
+        proxy: {
+            // 配置多个跨域
+            '/': {
+                target: 'http://172.16.120.155:8083/', //跨域接口的地址
+                changeOrigin: false,
+                pathRewrite: {
+                    '': '/'
+                }
+            }
+        },
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+        }
+    }
+};