提交

.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip
+/.history

src/App.vue

@@ -1,23 +1,25 @@
 <template>
-  <div id="app">
+  <div id="app" :style="{background:$store.state.typeFire === 0 ? '#002976' :''}">
     <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'" />
-    
+    <footer-view-af v-if="$store.state.typeFire === 1" class="footerViewAf"></footer-view-af>
   </div>
 </template>
 
 <script>
 import headerView from './components/SD-school/header-view'
 import headerViewAf from './components/AF-exhibition/header-view'
+import footerViewAf from './components/AF-exhibition/footer'
 export default {
-  components:{headerView,headerViewAf},
+  components:{headerView,headerViewAf,footerViewAf},
   data() {
     return {
       resizeTime: true,
     };
   },
   mounted() {
+    this.getWeater()
     window.addEventListener("resize", () => this.resizeTimeActions(), true);
   },
   methods: {
@@ -29,6 +31,14 @@ export default {
         this.$store.commit("changClient",  document.documentElement.clientWidth + document.documentElement.clientHeight);
       }, 300);
     },
+    async getWeater(){
+        let res = await this.$axios.get('/top/listWeather?'+this.$qs.stringify({
+        area: '上海市'
+      }))
+      if(res.success){
+        this.$store.commit("changWeater", res.data.showapi_res_body.now);
+      }
+    }
   },
 };
 </script>
@@ -47,7 +57,8 @@ export default {
   }
   .content-AF{
     width: 100%;
-    height: calc(100% - 85px);
+    height: calc(100% - 245px);
+    padding-bottom: 0px;
   }
   .headerView{
     width: 100%;
@@ -57,5 +68,10 @@ export default {
     width: 100%;
     height: 85px;
   }
+  .footerViewAf{
+    width: 100%;
+    height: 160px;
+    padding: 10px 30px 20px;
+  }
 }
 </style>

src/assets/common.scss

@@ -134,6 +134,10 @@ body {
     color: #0DC94F;
 }
 
+.red {
+    color: #FF0000;
+}
+
 .el-table {
     // border-radius: 10px;
     &::before {
@@ -141,6 +145,7 @@ body {
     }
 }
 
+// 党校
 .mianBox {
     width: 100%;
     height: 100%;
@@ -190,6 +195,48 @@ body {
     }
 }
 
+// 安防
+.mianBox-af {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    // display: flex;
+    // flex-direction: column;
+    background: url("../assets/image-af/bg.png") no-repeat;
+    background-size: 100% 100%;
+    .headerBox {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 50px;
+        width: 100%;
+        color: #FFF;
+        background: url("../assets/image-af/title.png") no-repeat;
+        background-position: bottom;
+        .el-col {
+            width: auto;
+            height: 100%;
+            line-height: 100%;
+            text-align: center;
+        }
+        .title {
+            color: #F1F1F1;
+            font-weight: bold;
+            line-height: 50px;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 49px;
+                height: 49px;
+            }
+        }
+    }
+    .contentBox {
+        height: calc(100% - 50px);
+    }
+}
+
 // form表单样式
 .el-form {
     .el-form-item {

src/components/AF-exhibition/current-state/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-row class="mianBox-af">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image-af/title5.png" alt="" />
+        当前实时状态
+      </el-col>
+    </el-row>
+    <el-row class="contentBox">
+        <el-col>
+          <span>设备名称: </span>
+          <span>电梯运行监控#7</span>
+        </el-col>
+        <el-col>
+          <span>设备状态: </span>
+          <span class="red">异常关闭</span>
+        </el-col>
+        <el-col>
+          <span>状态: </span>
+          <span class="green">在线</span>
+        </el-col>
+        <el-col>
+          <span>电量: </span>
+          <span class="green">正常</span>
+        </el-col>
+        <el-col>
+          <span>联系方式: </span>
+          <span> 1398981221（张三）</span>
+        </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkList: [],
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox-af {
+  .contentBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    box-sizing: border-box;
+    padding: 10px 15px;
+    font-size: 16px;
+    .el-col{
+      &>span:first-child{
+        display: inline-block;
+        width: 70px;
+        text-align: right;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+</style>

src/components/AF-exhibition/equipment/echart.js

@@ -0,0 +1,98 @@
+import * as echarts from "echarts";
+
+export default function getData(params = .23, color = ['#0099ff', '#00d5ff'], name = '处置率') {
+    return {
+        // backgroundColor:{
+        //       type: 'radial',
+        //       x: 0.5,
+        //       y: 0.5,
+        //       r: 0.5,
+        //       colorStops: [
+        //         { offset: 0,color: "#122c7a",},
+        //         { offset: 0.9,color: "#122c7a",},
+        //         { offset: 0.9,color: "#0b1f61",},
+        //         { offset: 1,color: "#0b1f61",},
+        //         { offset: 1,color: "transparent",},
+        //       ],
+        //       global: true // 缺省为 false
+        // },
+        title: {
+            show: true,
+            text: name,
+            left: "center",
+            right: "center",
+            bottom: "center",
+            top: "52%",
+            center: 20,
+            textStyle: {
+                color: "#FFF",
+                fontSize: 14,
+                align: "center",
+                fontWeight: "100",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+            },
+        },
+        series: [{
+            type: "gauge",
+            radius: "90%",
+            // center: ["50%","70%"],
+            startAngle: 225, //开始角度 左侧角度
+            endAngle: -135, //结束角度 右侧
+            z: 4,
+            axisLine: {
+                show: true,
+                roundCap: true,
+                lineStyle: {
+                    width: 10,
+                    color: [
+                        [1,
+                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: color[2] },
+                                { offset: 1, color: color[0] },
+                            ]),
+                        ],
+                        [
+                            params > .5 ? params : 1 - params, color[1]
+                        ],
+                    ],
+                },
+            },
+            //分隔线样式。
+            splitLine: {
+                show: false,
+            },
+            axisLabel: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            pointer: {
+                show: false,
+                length: "70%",
+                width: "2%",
+            },
+            title: {
+                show: false,
+            },
+            //仪表盘详情，用于显示数据。
+            detail: {
+                show: true,
+                offsetCenter: [0, "-20%"],
+                color: "#ffffff",
+                textStyle: {
+                    fontSize: 26,
+                    color: color[2],
+                    fontWeight: "500",
+                    fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+                },
+                formatter: function(v) {
+                    return v * 100 + "%";
+                },
+            },
+            data: [{
+                value: params,
+            }, ],
+        }, ],
+    }
+}

src/components/AF-exhibition/equipment/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-row class="mianBox-af">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image-af/title1.png" alt="" />
+        设备工况
+      </el-col>
+    </el-row>
+    <el-row class="contentBox">
+      <el-col>
+        <div ref="echartD1" class="echartD"></div>
+        <div class="equipmentNumber greenNumber">1280</div>
+        <div class="equipmentName">设备总数</div>
+      </el-col>
+      <el-col>
+        <div ref="echartD2" class="echartD"></div>
+        <div class="equipmentNumber yellowNumber">1280</div>
+        <div class="equipmentName">告警次数</div>
+      </el-col>
+      <el-col>
+        <div ref="echartD3" class="echartD"></div>
+        <div class="equipmentNumber blueNumber">1280</div>
+        <div class="equipmentName">离线总数</div>
+      </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,
+    };
+  },
+  mounted() {
+    echarts.init(this.$refs.echartD1).setOption(echartsGet(.2, ['rgba(47,255,91,0)',`rgba(47,255,91,.4)`,'rgba(47,255,91,1)',],'处置率'));
+    echarts.init(this.$refs.echartD2).setOption(echartsGet(.8, ['rgba(225,199,47,0)','rgba(225,199,47,.4)','rgba(225,199,47,1)',],'告警率'));
+    echarts.init(this.$refs.echartD3).setOption(echartsGet(.4, ['rgba(5,60,125,0)','rgba(47,174,225,.4)', 'rgba(47,174,225,1)'],'离线率'));
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD1).resize();
+      echarts.init(this.$refs.echartD2).resize();
+      echarts.init(this.$refs.echartD3).resize();
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox-af {
+  .contentBox{
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    overflow: hidden;
+    .el-col{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      .echartD{
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        min-height: 95px;
+      }
+      .equipmentNumber{
+        width: 115px;
+        height: 35px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #FFF;
+        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+        text-align: center;
+        line-height: 35px;
+      }
+      .equipmentName{
+        font-size: 14px;
+      }
+      .equipmentNumber.greenNumber{
+        border-bottom: 2px solid #2FFF5B;
+        background: linear-gradient(to bottom, transparent  0%,#2fff5b5c 100%);
+      }
+      .equipmentNumber.yellowNumber{
+        border-bottom: 2px solid #FFC72F;
+        background: linear-gradient(to bottom, transparent  0%,#e1c72f66 100%);
+      }
+      .equipmentNumber.blueNumber{
+        border-bottom: 2px solid #2FAEFF;
+        background: linear-gradient(to bottom, transparent  0%,#2faee166 100%);
+      }
+    }
+  }
+}
+</style>

src/components/AF-exhibition/footer/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-row class="mainBox">
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">烟感探测</span>
+      <el-row class="contentInfo">
+        <el-col>36℃</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">电器火灾监控</span>
+      <el-row class="contentInfo fontBox">
+        <el-col>36℃</el-col>
+        <el-col>220V</el-col>
+        <el-col>36A</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">门体开启状态探测</span>
+      <el-row class="contentInfo">
+        <el-col>关闭</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">紧急求助</span>
+      <el-row class="contentInfo">
+        <el-col>正常</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">地磁车辆检测</span>
+      <el-row class="contentInfo">
+        <el-col>车位变空</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">窨井盖探测</span>
+      <el-row class="contentInfo">
+        <el-col>井盖关闭</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
+      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
+      <span class="boxName">可燃气体探测器</span>
+      <el-row class="contentInfo">
+        <el-col>无可燃气体</el-col>
+      </el-row>
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/test1.png" alt="" class="videoBox">
+    </el-col>
+    <el-col>
+      <img src="../../../assets/image-af/test1.png" alt="" class="videoBox">
+      <img src="../../../assets/image-af/red.png" alt="" class="redImage">
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.mainBox{
+    display: flex;
+    justify-content: space-between;
+    &>.el-col{
+      width: 10.5%;
+      height: 100%;
+      background: url('../../../assets/image-af/bg2.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      font-size: 16px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .signal{
+        position: absolute;
+        left: 15px;
+        top: 15px;
+        width: 16px;
+        height: 16px;
+      }
+      .electric{
+        position: absolute;
+        right: 15px;
+        top: 15px;
+        width: 23px;
+        height: 14px;
+      }
+      .boxName{
+        position: absolute;
+        bottom: 10px;
+        text-align: center;
+        left: 0;
+        right: 0;
+      }
+      .contentInfo{
+        text-align: center;
+        font-size: 22px;
+        font-weight: 700;
+        color: #24FF00;
+      }
+      .fontBox{
+        font-size: 18px;
+      }
+      .videoBox{
+        width: 100%;
+        height: 100%;
+      }
+      .redImage{
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        margin: auto;
+        width: 100%;
+        height: 100%;
+        background: #ff000042;
+      }
+    }
+}
+</style>

src/components/AF-exhibition/give-an-alarm/echart.js

@@ -0,0 +1,111 @@
+import * as echarts from "echarts";
+
+export default function getData(params = [1, 2, 3, 4, 5, 6, 7, ]) {
+    return {
+        color: [
+            "rgba(62,175,64,.8)",
+            "rgba(239,107,61,.8)",
+        ],
+        title: {
+            show: false,
+            text: "渐变堆叠面积图",
+        },
+        tooltip: {
+            trigger: "axis",
+            textStyle: {
+                color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+        },
+        legend: {
+            show: true,
+            top: 0,
+            right: 10,
+            itemGap: 20,
+            textStyle: {
+                color: "#FFF",
+            },
+        },
+        // toolbox: {},
+        grid: {
+            top: 30,
+            left: 10,
+            right: 15,
+            bottom: 10,
+            containLabel: true,
+        },
+        xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+            ],
+            axisLabel: {
+                color: "#FFFFFF",
+                // rotate: 50,
+            },
+            axisTick: {
+                show: false,
+            },
+        },
+        yAxis: {
+            type: "value",
+            axisLabel: {
+                color: "#FFFFFF",
+            },
+            splitLine: {
+                lineStyle: {
+                    color: "#ccc",
+                },
+            },
+        },
+        series: [{
+                name: "告警数",
+                type: "line",
+                smooth: true,
+                showSymbol: true,
+                areaStyle: {
+                    opacity: 0.8,
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: "rgba(62,175,64)",
+                        },
+                        {
+                            offset: 1,
+                            color: "rgba(62,175,64,.1)",
+                        },
+                    ]),
+                },
+                data: [12, 13, 15, 17, 19, 10, 123] || params,
+            },
+            {
+                name: "离线数",
+                type: "line",
+                smooth: true,
+                showSymbol: true,
+                areaStyle: {
+                    opacity: 0.8,
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: "rgba(62, 175, 64,1)",
+                        },
+                        {
+                            offset: 1,
+                            color: "rgba(62, 175, 64,.1)",
+                        },
+                    ]),
+                },
+                data: [21, 31, 51, 71, 91, 110, 213],
+            },
+        ],
+    }
+}

src/components/AF-exhibition/give-an-alarm/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-row class="mianBox-af">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image-af/title2.png" alt="" />
+        设备告警情况
+      </el-col>
+    </el-row>
+    <el-row class="contentBox">
+        <div ref="echartD" class="echartD"></div>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartsGet from "./echart";
+export default {
+  data() {
+    return {
+      isCheck: "info",
+      option: null,
+    };
+  },
+  mounted() {
+    echarts.init(this.$refs.echartD).setOption(echartsGet(.4));
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox-af {
+  background: url("../../../assets/image-af/bg.png") no-repeat;
+  background-size: 100% 100%;
+  .contentBox{
+    width: 100%;
+    display: flex;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .echartD{
+      width: 100%;
+      height: calc(100% + 15px);
+      transform: translateY(-15px); 
+    }
+  }
+}
+</style>

src/components/AF-exhibition/header-view/index copy.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/AF-exhibition/header-view/index.vue

@@ -10,7 +10,7 @@
       </el-col>
       <el-col>多云 23℃</el-col>
     </el-row>
-    <el-row class="headerCenterBox">永天科技-智能安防系统数据看板</el-row>
+    <el-row class="headerCenterBox">永天科技-智能物联网设备</el-row>
     <el-row class="headerRowBox">
     </el-row>
   </header>
@@ -70,7 +70,7 @@ export default {
     width: 100%;
     padding: 0 20px;
     display: flex;
-    background: url("../../../assets/image/header-AF.png");
+    background: url("../../../assets/image/header.png");
     background-size: 100% 100%;
     font-size: 14px;
     box-sizing: border-box;

src/components/AF-exhibition/monitor-info/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-row class="mianBox-af">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image-af/title6.png" alt="" />
+        异常监控信息
+      </el-col>
+    </el-row>
+    <el-row class="contentBox" :gutter="10">
+        <el-col>
+          <img src="../../../assets/image-af/monitor.png" alt="">
+        </el-col>
+        <el-col>
+          <img src="../../../assets/image-af/monitor.png" alt="">
+        </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkList: [],
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox-af {
+  .contentBox {
+    width: 100%;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    padding: 10px 15px;
+    font-size: 16px;
+    .el-col{
+      width: 100%;
+      height: 100%;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/components/AF-exhibition/screen-equipment/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-row class="mianBox-af">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image-af/title4.png" alt="" />
+        设备筛选
+      </el-col>
+    </el-row>
+    <el-row class="contentBox">
+      <el-row style="width: 100%; height: 100%">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox label="复选框 A"></el-checkbox>
+          <el-checkbox label="复选框 B"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+        </el-checkbox-group>
+      </el-row>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkList: [],
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox-af {
+  .contentBox {
+    width: 100%;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 5px 15px;
+    &::-webkit-scrollbar {
+      display: none; /* Chrome Safari */
+    }
+    .el-checkbox {
+      width: 50%;
+      margin-right: 0;
+      color: #f1f1f1;
+      font-size: 16px;
+      margin: 5px 0;
+      /deep/ .el-checkbox__inner {
+        border-color: #1666c7;
+        background-color: #012149;
+      }
+      /deep/ .el-checkbox__label {
+        color: #f1f1f1 !important;
+      }
+      /deep/ .is-checked {
+        .el-checkbox__inner {
+          background-color: #1666c7;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/AF-exhibition/warning-info/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-row class="mianBox-af">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image-af/title3.png" alt="" />
+        告警信息
+      </el-col>
+    </el-row>
+    <el-row class="contentBox">
+      <el-row style="width: 100%;height: 100%; margin: 0 auto">
+      <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>
+  </el-row>
+</template>
+
+<script>
+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" },
+        { 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" },
+        { 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: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox-af {
+  .contentBox{
+    width: 100%;
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    
+  }
+}
+</style>

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

@@ -3,24 +3,34 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        门禁出入统计
+         {{resInfo.typeName || ''}}
       </el-col>
     </el-row>
     <el-row class="threeBox">
       <div class="flexBoxE">
         <el-row>
           <el-col style="margin-bottom: 50px;">
-            <span>挂牌督办</span>
+            <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 class="percentage" 
+              :style="{
+                width: (resList.length > 0 && resList.reduce((a, b) => a + b.into, 0) / resList.reduce((a, b) => a + b.into + b.out, 0) * 100 || 0) + '%', 
+                background: `linear-gradient(to right, #C41825 0%,#E4AB33 100%)`
+                }"></div>
+              <span class="percentageValue">{{resList.length > 0 && resList.reduce((a, b) => a + b.into, 0) || 0}}</span>
             </div>
           </el-col>
           <el-col>
-            <span>存在隐患</span>
+            <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 class="percentage" 
+              :style="{
+                width: (resList.length > 0 && resList.reduce((a, b) => a + b.out, 0) / resList.reduce((a, b) => a + b.into + b.out, 0) * 100 || 0) + '%', 
+                background: `linear-gradient(to right, #1C2AB0 0%,#33B8E4 100%)`
+              }"></div>
+              <span class="percentageValue">
+                {{resList.length > 0 && resList.reduce((a, b) => a + b.out, 0) || 0}}
+              </span>
             </div>
           </el-col>
         </el-row>
@@ -31,16 +41,28 @@
 
 <script>
 export default {
+  props:['resInfo'],
   data() {
     return {
-      isCheck: "info",
-      option: null,
+      resList:[]
     };
   },
-  mounted() {},
+  watch: {
+    resInfo(){
+      this.getData()
+    }
+  },
+  mounted(){
+    this.getData()
+  },
   methods: {
-    format(percentage) {
-      return percentage === 100 ? "满" : `${percentage}%`;
+    async getData(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode
+      }))
+      if(res.success){
+        this.resList = res.data
+      }
     },
   },
 };

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

@@ -1,7 +1,6 @@
 import * as echarts from "echarts";
 
-export default function getData(params = .23) {
-    console.log(params || '')
+export default function getData(params) {
     return {
         title: {
             show: true,
@@ -33,14 +32,14 @@ export default function getData(params = .23) {
                 lineStyle: {
                     width: document.body.clientHeight > 1000 ? 20 : 15,
                     color: [
-                        [1, "#1AF3FD"],
                         [
-                            params > 1 ? 1 : params,
+                            (params.using / params.toatl).toFixed(8) > 1 ? 1 : params.using / params.toatl.toFixed(8),
                             new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                 { offset: 0, color: "#ecc242" },
                                 { offset: 1, color: "#FDC51A" },
                             ]),
                         ],
+                        [1, "#1AF3FD"],
                     ],
                 },
             },
@@ -79,8 +78,8 @@ export default function getData(params = .23) {
                     fontWeight: "500",
                     fontFamily: 'Impact Regular, Impact Regular-Regular',
                 },
-                formatter: function(v) {
-                    return v * 100 + "%";
+                formatter: function() {
+                    return params.toatl;
                 },
             },
             data: [{

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

@@ -3,7 +3,7 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        会议室统计
+        {{resInfo.typeName || ''}}
       </el-col>
     </el-row>
     <el-row class="roomLine">
@@ -11,11 +11,11 @@
       <el-row class="roomNumber">
         <el-col>
           <el-col>在用数</el-col>
-          <el-col class="yellow">222</el-col>
+          <el-col class="yellow">{{resList && resList.using || 0}}</el-col>
         </el-col>
         <el-col>
           <el-col>空闲数</el-col>
-          <el-col class="blue">222</el-col>
+          <el-col class="blue">{{resList && resList.toatl - resList.using || 0}}</el-col>
         </el-col>
       </el-row>
     </el-row>
@@ -44,32 +44,50 @@
 import * as echarts from "echarts";
 import echartsGet from "./echart";
 export default {
+  props:['resInfo'],
   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" },
-      ],
+      resList: null,
+      dataMap: [],
       headerData: [
-        { name: "会议室名称", prop: "name" },
-        { name: "会议名称", prop: "nameF" },
-        { name: "起止时间", prop: "time" },
+        { name: "会议室名称", prop: "meetingRoomName" },
+        { name: "会议名称", prop: "meetingTheme" },
+        { name: "开始时间", prop: "meetIngStartTime" },
+        { name: "截止时间", prop: "meetingEndTime" },
       ],
     };
   },
-  mounted() {
-    echarts.init(this.$refs.echartD).setOption(echartsGet());
-  },
   watch: {
     "$store.state.windowWidth"() {
       echarts.dispose(this.$refs.echartD)
       echarts.init(this.$refs.echartD).setOption(echartsGet())
     },
+    resInfo(){
+      this.getData()
+    }
+  },
+  mounted() {
+    this.getData()
   },
-  methods: {},
+  methods:{
+    async getData(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode
+      }))
+      this.resList = res.pageList
+      this.dataMap = res.pageList.list.map((val)=>{
+        return {
+          ...val,
+          meetIngStartTime: new Date(val.meetIngStartTime).Format("yyyy-MM-dd hh:mm:ss").split(' ')[1],
+          meetingEndTime: new Date(val.meetingEndTime).Format("yyyy-MM-dd hh:mm:ss").split(' ')[1]
+        }
+      })
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  }
 };
 </script>
 

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

@@ -3,13 +3,13 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        综合告警列表
+         {{resInfo.typeName || ''}}
       </el-col>
     </el-row>
-    <el-form ref="form" :model="form" inline label-width="40px">
+    <el-form ref="form" :model="form" inline label-width="40px" v-if="false">
       <el-form-item label="时间">
           <el-date-picker
-          v-model="valueTime"
+          v-model="form.valueTime"
           class="dataComponent"
           type="daterange"
           align="right"
@@ -30,7 +30,7 @@
       </el-form-item>
     </el-form>
     <el-row class="threeBox">
-      <el-table :data="dataMap" class="transparentTableRow" height="100%" style="width: 100%; margin: 0 auto">
+      <el-table :data="resList" 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>
@@ -40,36 +40,82 @@
 
 <script>
 export default {
+  props:['resInfo'],
   data() {
     return {
-      isCheck: "info",
-      option: null,
+      ws: null,
       form:{
-        region:''
+        region:'',
+        valueTime: [],
       },
-      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" },
-      ],
+      resList: [],
       headerData: [
-        { name: "点位", prop: "name" },
-        { name: "起止时间", prop: "time" },
-        { name: "类型", prop: "nameF" },
-        { name: "内容详情", prop: "nameFF" },
+        { name: "点位", prop: "alarmDeviceName" },
+        { name: "告警时间", prop: "alarmTime" },
+        { name: "类型", prop: "deviceType" },
+        { name: "内容详情", prop: "alarmContent" },
       ],
     };
   },
-  mounted() {},
+  watch: {
+    resInfo(){
+      this.getData()
+    }
+  },
+  mounted(){
+    this.getData()
+  },
   methods: {
-    format(percentage) {
-      return percentage === 100 ? "满" : `${percentage}%`;
+    async getData(){
+      if ("WebSocket" in window) {
+        this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + this.resInfo.apiAddr);
+        this.ws.onopen =  ()=> {
+          console.log("websocket连接成功");
+          this.sendWs({aa:22});
+        };
+
+        this.ws.onmessage = (res) => {
+          this.resList.unshift(...JSON.parse(res.data).data).slice(0,100)
+        };
+
+        this.ws.onclose = ()=> {
+          // 关闭 websocket
+          console.log("连接已关闭...");
+
+          //断线重新连接
+          setTimeout(() => {
+            this.getData();
+          }, 2000);
+        };
+      } else {
+        // 浏览器不支持 WebSocket
+        console.log("您的浏览器不支持 WebSocket!");
+      }
+      //  let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+      //   applicationCode: this.resInfo.applicationCode
+      // }))
+      // if(res.success){
+      //   this.resList = res.data
+      // }
+    },
+    sendWs(val){
+      if (this.ws && this.ws.readyState == 1) {
+        this.ws.send(JSON.stringify(val));
+        console.log('发送成功')
+      } else {
+        setTimeout(() => {
+          this.sendWs(val);
+        }, 100);
+      }
     },
     dateTimeChange() {
       
     },
   },
+  destroyed(){
+    // this.ws.close()
+    // this.ws = null
+  }
 };
 </script>
 

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

@@ -6,16 +6,16 @@
       <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="" />
+        <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
       </el-col>
-      <el-col>多云23℃</el-col>
-      <el-col>东风三级</el-col>
-      <el-col>PM2.5<span>53</span></el-col>
+      <el-col>{{$store.state.weaterRes.weather || ''}}{{$store.state.weaterRes.temperature || ''}}</el-col>
+      <el-col>{{$store.state.weaterRes.wind_direction || ''}}{{$store.state.weaterRes.wind_power || ''}}</el-col>
+      <el-col>PM2.5<span>{{$store.state.weaterRes.aqiDetail && $store.state.weaterRes.aqiDetail.pm2_5 || ''}}</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-col>空气质量：{{$store.state.weaterRes.aqi || ''}}</el-col>
+      <el-col>相对湿度：{{$store.state.weaterRes.sd || ''}}</el-col>
     </el-row>
   </header>
 </template>
@@ -80,7 +80,7 @@ export default {
       width: 34%;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      // justify-content: space-between;
       height: 100%;
       &::before{
         display: none;
@@ -89,7 +89,7 @@ export default {
         flex: none;
         width: auto;
         height: auto;
-        // margin-right: 30px;
+        margin-right: 30px;
         span{
           font-size: 20px;
           color: #F6D311;

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

@@ -1,12 +1,13 @@
-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: '视频广告' }
-    ]
+export default function getData(data, type) {
+    let totle = data.reduce((a, b) => {
+        return a + b.normal
+    }, 0)
+    let params = data.map(val => {
+        return {
+            value: (val.normal / totle).toFixed(4) * 100,
+            name: val.deviceType
+        }
+    })
     return {
         title: {
             show: false,
@@ -15,7 +16,8 @@ export default function getData(params) {
             left: 'center'
         },
         tooltip: {
-            trigger: 'item'
+            trigger: 'item',
+            formatter: '{b}  {d}%',
         },
         legend: {
             orient: 'vertical',
@@ -23,8 +25,7 @@ export default function getData(params) {
             top: 20,
             itemGap: 15,
             formatter: function(param) {
-                console.log(param)
-                return param + '    ' + data.find(val => val.name === param).value;
+                return param + '    ' + params.find(val => val.name === param).value + '%';
             },
             tooltip: {
                 show: true
@@ -36,17 +37,18 @@ export default function getData(params) {
         series: [{
             // name: '访问来源',
             type: 'pie',
-            radius: '90%',
+            radius: type === 'alarm' ? '90%' : ['50%', '90%'],
             center: ["30%", "50%"],
             label: {
+                show: type === 'alarm',
                 position: 'inner',
                 fontSize: 14,
                 align: "right",
                 overflow: "truncate",
                 baseline: "middle",
-                color: '#FFF'
+                color: '#FFF',
             },
-            data: data,
+            data: params,
             left: 1,
         }]
     }

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

@@ -3,11 +3,11 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        综合信息统计
+        {{resInfo.typeName || ''}}
       </el-col>
       <el-col class="btn">
-        <span :class="{'clickBtn':isCheck === 'info'}" @click="isCheck = 'info'">告警信息</span>
-        <span :class="{'clickBtn':isCheck === 'work'}" @click="isCheck = 'work'">设备工况</span>
+        <span :class="{'clickBtn':isCheck === 'alarm'}" @click="enidCheck('alarm')">告警信息</span>
+        <span :class="{'clickBtn':isCheck === 'deviceStatus'}" @click="enidCheck('deviceStatus')">设备工况</span>
       </el-col>
     </el-row>
     <el-row class="content">
@@ -15,11 +15,11 @@
     </el-row>
     <el-row class="bot">
         <el-col class="leftBot">
-            <el-col>160</el-col>
+            <el-col>{{annormalNumber}}</el-col>
             <el-col>已处理</el-col>
         </el-col>
         <el-col class="rightBot">
-            <el-col>160</el-col>
+            <el-col>{{totleNumber}}</el-col>
             <el-col>待处理</el-col>
         </el-col>
     </el-row>
@@ -30,21 +30,42 @@
 import * as echarts from "echarts";
 import echartsGet from './echart'
 export default {
+  props:['resInfo'],
   data() {
     return {
-      isCheck: "info",
-      option: null,
+      isCheck: "alarm",
+      resList:{alarm:[],deviceStatus:[]},
+      totleNumber:0,
+      annormalNumber:0,
     };
   },
   watch: {
     "$store.state.windowWidth"() {
       echarts.init(this.$refs.echartD).resize();
     },
+    resInfo(){
+      this.getData()
+    }
   },
   mounted(){
-    echarts.init(this.$refs.echartD).setOption(echartsGet())
+    this.getData()
   },
   methods:{
+    async getData(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode
+      }))
+      if(res.success){
+        this.resList = res.data
+        this.enidCheck()
+      }
+    },
+    enidCheck(val){
+      val && (this.isCheck = val)
+      this.totleNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.normal, 0) || 0;
+      this.annormalNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.annormal, 0) || 0;
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList[this.isCheck],this.isCheck))
+    },
     resize() {
       echarts.init(this.$refs.echartD).resize();
     },

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

@@ -3,25 +3,18 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        视频监控
+          {{resInfo.typeName || ''}}
       </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 v-model="form.region" filterable placeholder="请选择区域位置" size="mini" @change="selectRegion">
+          <el-option :label="item.buildName + '-' + item.floorName" :value="item.floorUuid" v-for="item in selectList" :key="item.floorUuid"></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>
+      <el-col v-for="item in equipmentList" :key="item.id">
         <img src="../../../assets/image/test1.png" alt="">
       </el-col>
     </el-row>
@@ -30,20 +23,43 @@
 
 <script>
 export default {
+  props:['resInfo'],
   data() {
     return {
-      isCheck: "info",
-      option: null,
       form:{
-        region:''
-      }
+        region:'',
+      },
+      resList:[],
+      selectList:[],
+      equipmentList:[],
     };
   },
-  mounted() {},
+  watch: {
+    resInfo(){
+      this.getData()
+    }
+  },
+  mounted(){
+    this.getData()
+  },
   methods: {
-    format(percentage) {
-      return percentage === 100 ? "满" : `${percentage}%`;
+    async getData(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode,
+        pageSize:10000
+      }))
+      // if(res.success){
+        this.resList = res.pageList
+        this.selectList =  res.pageList.reduce((pre,cur)=>{
+            return !pre.some(val=>val.floorUuid === cur.floorUuid) ? pre.concat(cur) : pre
+        },[])
+        this.form.region = this.selectList[0].floorUuid
+        this.selectRegion()
+      // }
     },
+    selectRegion(){
+      this.equipmentList = this.resList.filter(val=> val.floorUuid === this.form.region)
+    }
   },
 };
 </script>
@@ -55,15 +71,27 @@ export default {
   .threeBox {
     flex: 1;
     width: 100%;
-    height: inherit;
+    overflow: hidden auto;
     display: flex;
+    flex-wrap: wrap;
+    scrollbar-width: none;
+    /* firefox */
+    -ms-overflow-style: none;
+    /* IE 10+ */
+    overflow-x: hidden;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        display: none;
+        // opacity: 0;
+        /* Chrome Safari */
+    }
     .el-col{
-      height: 100%;
-      flex: 1;
+      height: auto;
+      width: 33.33%;
+      padding: 0 10px 10px;
       img{
+        width: 100%;
         display: block;
-        width: inherit;
-        height: inherit;
         margin: 0 auto;
       }
     }

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

@@ -1,8 +1,12 @@
 import * as echarts from "echarts";
 
 export default function getData(params) {
-    console.log(params || '')
-    let data = [10, 34, 82, 93, 91, 133, 120]
+    let resList = params.map(val => {
+        return {
+            ...val,
+            creatTime: new Date(val.creatTime).getDate()
+        }
+    }).reverse()
     return {
         tooltip: {
             trigger: 'axis',
@@ -23,7 +27,7 @@ export default function getData(params) {
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['09', '10', '11', '12', '13', '14', '15'],
+            data: resList.map(val => val.creatTime),
             axisLabel: {
                 color: "#CCC",
             },
@@ -47,13 +51,13 @@ export default function getData(params) {
             },
             splitLine: {
                 show: false,
-                lineStyle: {
-                    color: "#CCC",
-                },
+                //     lineStyle: {
+                //         color: "#CCC",
+                //     },
             },
         },
         series: [{
-            data: data,
+            data: resList.map(val => val.totalUsingNum),
             type: 'line',
             smooth: true,
             showSymbol: false,

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

@@ -3,7 +3,7 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        停车场统计
+         {{resInfo.typeName || ''}}
       </el-col>
     </el-row>
     <el-row class="carNumber">
@@ -12,7 +12,7 @@
           <img src="../../../assets/image/car2.png" alt="" />
         </el-col>
         <el-col class="carNumbderLot">
-          <span class="green">300</span>
+          <span class="green">{{resList[0] && resList[0].totalNum || ''}}</span>
           <span>车位总数</span>
         </el-col>
       </el-col>
@@ -21,8 +21,8 @@
           <img src="../../../assets/image/car1.png" alt="" />
         </el-col>
         <el-col class="carNumbderLot">
-          <span class="yellow">300</span>
-          <span>车位总数</span>
+          <span class="yellow">{{resList[0] && resList[0].tiatlFreeNum || ''}}</span>
+          <span>空闲车位总数</span>
         </el-col>
       </el-col>
     </el-row>
@@ -36,22 +36,37 @@
 import * as echarts from "echarts";
 import echartsGet from './echart'
 export default {
+  props:['resInfo'],
   data() {
     return {
-      isCheck: "info",
-      option: null,
+      resList: [],
     };
   },
   watch: {
     "$store.state.windowWidth"() {
       echarts.init(this.$refs.echartD).resize();
     },
+    resInfo(){
+      this.getData()
+    }
   },
   mounted(){
-    echarts.init(this.$refs.echartD).setOption(echartsGet())
-  },
-  methods: {
+    this.getData()
   },
+  methods:{
+    async getData(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode
+      }))
+      if(res.success){
+        this.resList = res.data
+        echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
+      }
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  }
 };
 </script>
 

src/main.js

@@ -8,6 +8,23 @@ import querystring from 'querystring';
 import store from './store'
 import './assets/font/index.scss'
 
+Date.prototype.Format = function(fmt) {
+    let o = {
+        'M+': this.getMonth() + 1, // 月份
+        'd+': this.getDate(), // 日
+        'h+': this.getHours(), // 小时
+        'm+': this.getMinutes(), // 分
+        's+': this.getSeconds(), // 秒
+        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
+        'S': this.getMilliseconds() // 毫秒
+    };
+    if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)); }
+    for (let k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); }
+    }
+    return fmt;
+};
+
 Vue.config.productionTip = false
 Vue.prototype.$qs = querystring
 new Vue({

src/plugins/axios.js

@@ -4,7 +4,7 @@ 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 = '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';
@@ -32,7 +32,7 @@ _axios.interceptors.request.use(
 _axios.interceptors.response.use(
     function(response) {
         // Do something with response data
-        return response;
+        return response.data;
     },
     function(error) {
         // Do something with response error

src/router/index.js

@@ -12,7 +12,7 @@ const routes = [{
 
 const router = new VueRouter({
     mode: 'history',
-    base: '/bulehelp/',
+    base: '/',
     routes
 })
 

src/store/index.js

@@ -6,7 +6,9 @@ Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
         windowWidth: 0,
-        typeFire: 1,
+        typeFire: 0,
+        wsUrl: '172.16.120.92:8081',
+        weaterRes: {}
     },
     mutations: {
         changClient(state, val) {
@@ -14,6 +16,10 @@ export default new Vuex.Store({
         },
         changTypeFire(state, val) {
             state.typeFire = val
+        },
+        changWeater(state, val) {
+            state.weaterRes = val
+            console.log(state.weaterRes)
         }
     },
     actions: {},

src/views/Home.vue

@@ -1,26 +1,71 @@
 <template>
-  <div class="home home-AF">
+  <div class="home" v-if="$store.state.typeFire === 0">
+    <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe> 
     <el-row class="contentClass contnetLift">
-      <info class="info"></info>
-      <access-control class="accessControl"></access-control>
-      <monitor class="monitor"></monitor>
+      <template v-for="item in resList.slice(0,3)">
+        <info class="info" v-if="item.styleValue === 1" :key="item.styleValue" :resInfo="item"></info>
+        <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control>
+        <monitor class="monitor" v-else-if="item.styleValue === 3" :key="item.styleValue" :resInfo="item"></monitor>
+        <parking-lot class="parkingLot" v-else-if="item.styleValue === 4" :key="item.styleValue" :resInfo="item"></parking-lot>
+        <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
+        <give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm>
+      </template>
     </el-row>
-    <el-row class="contnetCenter"> </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>
+      <template v-for="item in resList.slice(3)">
+        <info class="info" v-if="item.styleValue === 1" :key="item.styleValue" :resInfo="item"></info>
+        <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control>
+        <monitor class="monitor" v-else-if="item.styleValue === 3" :key="item.styleValue" :resInfo="item"></monitor>
+        <parking-lot class="parkingLot" v-else-if="item.styleValue === 4" :key="item.styleValue" :resInfo="item"></parking-lot>
+        <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
+        <give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm>
+      </template>
     </el-row>
   </div>
+  <div class="home home-AF" v-else>
+    <div class="contentBox">
+        <!-- <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe>  -->
+      <el-collapse-transition>
+        <el-row class="contentClass contnetLift" v-show="isLeft">
+          <equipment class="equipment"></equipment>
+          <give-an-alarm-af class="giveAnAlarmAf"></give-an-alarm-af>
+          <warning-info class="warningInfo"></warning-info>
+        </el-row>
+      </el-collapse-transition>
+      <el-row class="contnetCenter">
+        <img src="../assets/image-af/left-icon.png" alt="" class="leftIcon" @click="roomBox('left')">
+        <img src="../assets/image-af/right-icon.png" alt="" class="rightIcon" @click="roomBox('right')">
+      </el-row>
+      <el-collapse-transition>
+        <el-row class="contentClass contnetRight" v-show="isRight">
+          <screen-equipment class="screenEquipment"></screen-equipment>
+          <current-state class="currentState"></current-state>
+          <monitor-info class="monitorInfo"></monitor-info>
+        </el-row>
+      </el-collapse-transition>
+    </div>
+  </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"; // 综合告警列表
+
+// 安防
+import equipment from "../components/AF-exhibition/equipment"; // 设备工况
+import giveAnAlarmAf from "../components/AF-exhibition/give-an-alarm"; // 设备告警情况
+import warningInfo from "../components/AF-exhibition/warning-info"; // 告警信息
+import screenEquipment from "../components/AF-exhibition/screen-equipment"; // 设备筛选
+import currentState from "../components/AF-exhibition/current-state"; // 当前实时状态
+import monitorInfo from "../components/AF-exhibition/monitor-info"; // 异常监控信息
+
+
 export default {
   name: "Home",
   components: {
@@ -30,13 +75,40 @@ export default {
     parkingLot,
     conferenceRoom,
     giveAnAlarm,
+
+    equipment,
+    giveAnAlarmAf,
+    warningInfo,
+    screenEquipment,
+    currentState,
+    monitorInfo,
   },
   data() {
-    return {};
+    return {
+      isLeft: true,
+      isRight: true,
+      resList:[]
+    };
+  },
+  created() {
+    this.getData()
+  },
+  mounted() {
+
+  },
+  methods: {
+    async getData(){
+      let res = await this.$axios.get('/top/listTopConfig?'+this.$qs.stringify({
+        applicationCode: this.$store.state.typeFire === 0 ? 'SD' : 'AF'
+      }))
+      if(res.success){
+        this.resList = res.data
+      }
+    },
+    roomBox(val){
+      val === 'left' ? this.isLeft = !this.isLeft : (this.isRight = !this.isRight)
+    }
   },
-  created() {},
-  mounted() {},
-  methods: {},
 };
 </script>
 <style lang="scss" scoped>
@@ -47,13 +119,31 @@ export default {
   justify-content: space-between;
   padding: 20px;
   box-sizing: border-box;
+  position: relative;
+  iframe{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .contentBox{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
   .contentClass {
     width: 25%;
     min-width: 500px;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    position: relative;
+  }
+  .contnetCenter{
+    flex: 1;
+    z-index: -1;
   }
   .info {
     width: 100%;
@@ -69,14 +159,37 @@ export default {
   }
   .parkingLot,
   .conferenceRoom,
-  .giveAnAlarm {
+  .giveAnAlarm,
+  .equipment,
+  .giveAnAlarmAf,
+  .warningInfo,
+  .screenEquipment,
+  .currentState,
+  .monitorInfo {
     width: 100%;
-    // height: 33%;
-    flex: 1;
+    height: 33.33%;
+    overflow: hidden;
+    // flex: 1;
   }
 }
 
 .home-AF{
-  padding: 0 30px 30px;
+  padding: 0 30px;
 }
+  .leftIcon{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    margin: auto;
+    z-index: 9;
+  }
+  .rightIcon{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right:  -10px;
+    margin: auto;
+    z-index: 9;
+  }
 </style>

vue.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    publicPath: '/bulehelp/', //部署路径后缀
+    publicPath: '/', //部署路径后缀
     assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
     indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
     filenameHashing: true, // 文件名hash，默认
@@ -11,7 +11,7 @@ module.exports = {
             warnings: true,
             errors: true
         },
-        host: 'localhost',
+        host: '172.16.120.200',
         port: 8080, // 端口号
         // https: false, // https:{type:Boolean}
         open: true, // 配置自动启动浏览器
@@ -19,12 +19,12 @@ module.exports = {
         proxy: {
             // 配置多个跨域
             '/': {
-                target: 'http://172.16.120.155:8083/', //跨域接口的地址
+                target: 'http://172.16.120.92:8081/', //跨域接口的地址
                 changeOrigin: false,
                 pathRewrite: {
                     '': '/'
                 }
-            }
+            },
         },
         headers: {
             'Access-Control-Allow-Origin': '*',