|
|
@@ -1,465 +1,465 @@
|
|
|
-<template>
|
|
|
- <div class="app-container home">
|
|
|
- <div id="main">
|
|
|
- <seHeader />
|
|
|
- <el-row class="containWrap">
|
|
|
- <el-col class="leftWrap">
|
|
|
- <energy :resData="initList[0][0]" alt="能源与环境" />
|
|
|
- <security :resData="initList[0][1]" alt="安防与消防" />
|
|
|
- <keepWatch1 :resData="initList[0][2]" alt="巡更记录" />
|
|
|
- </el-col>
|
|
|
- <el-col id="middleWrap">
|
|
|
- <iframe style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/bd3f8b27e1e50b1c9b963d43'></iframe>
|
|
|
- </el-col>
|
|
|
- <el-col class="rightWrap">
|
|
|
- <people :resData="initList[0][4]" alt="人员通行" />
|
|
|
- <car :resData="initList[0][5]" alt="车辆通行" />
|
|
|
- <keepWatch :resData="initList[0][3]" alt="巡更数据" />
|
|
|
- </el-col>
|
|
|
- <div id="loader-wrapper2" v-if="sanwei">
|
|
|
- <div id="loader2"></div>
|
|
|
- <div class="loader-section section-left"></div>
|
|
|
- <div class="loader-section section-right"></div>
|
|
|
- <div class="load_title">三维模型加载中...</div>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import axios from "axios";
|
|
|
-import seHeader from "@/components/business/seHeader"; //头部
|
|
|
-import energy from "@/components/business/energy"; //能源与环境
|
|
|
-import security from "@/components/business/security"; //能源与环境
|
|
|
-import people from "@/components/business/access/people"; //人员通行
|
|
|
-import car from "@/components/business/access/car"; //车辆通行
|
|
|
-import keepWatch from "@/components/business/keepWatch"; //巡更数据
|
|
|
-import keepWatch1 from "@/components/business/keepWatch1"; //巡更数据
|
|
|
-const data = reactive({
|
|
|
- initList: [
|
|
|
- [
|
|
|
- [
|
|
|
- {
|
|
|
- name1: "当月用电量",
|
|
|
- num: "34825kW‧h",
|
|
|
- name2: "日均用量较上月",
|
|
|
- compare: 20,
|
|
|
- },
|
|
|
- {
|
|
|
- name1: "当月用水量",
|
|
|
- num: "1285m³",
|
|
|
- name2: "日均用量较上月",
|
|
|
- compare: 3.5,
|
|
|
- },
|
|
|
- {
|
|
|
- name1: "当月制冷量",
|
|
|
- num: "19774kW‧h",
|
|
|
- name2: "日均用量较上月",
|
|
|
- compare: 6.5,
|
|
|
- },
|
|
|
- {
|
|
|
- name1: "当月发热量",
|
|
|
- num: "0kW‧h",
|
|
|
- name2: "日均用量较上月",
|
|
|
- compare: 0,
|
|
|
- },
|
|
|
- ],
|
|
|
- [
|
|
|
- [
|
|
|
- { name: "摄像头总数", num: 175 },
|
|
|
- { name: "关键监控区域", num: 113 },
|
|
|
- { name: "周界防护设备", num: 32 },
|
|
|
- ],
|
|
|
- [
|
|
|
- { value: 28, name: "已处理" },
|
|
|
- { value: 4, name: "未处理" },
|
|
|
- ],
|
|
|
- ],
|
|
|
- [
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-17 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-18 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-19 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-20 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-21 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-22 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-23 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-24 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-25 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-26 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-27 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "点位巡查",
|
|
|
- enforcer: "王茂",
|
|
|
- time: "2022-07-28 21:00:00",
|
|
|
- status: 1,
|
|
|
- },
|
|
|
- ],
|
|
|
- [
|
|
|
- [
|
|
|
- { name: "巡更点位", num: 264 },
|
|
|
- { name: "巡更任务", num: 12 },
|
|
|
- ],
|
|
|
- [
|
|
|
- { value: 12, name: "按时完成" },
|
|
|
- { value: 0, name: "延迟完成" },
|
|
|
- ],
|
|
|
- ],
|
|
|
- [
|
|
|
- [596, 593, 3],
|
|
|
- [
|
|
|
- {
|
|
|
- name: "楼内人员",
|
|
|
- type: "line",
|
|
|
- stack: "Total",
|
|
|
- smooth: true,
|
|
|
- data: [0, 0, 0, 0, 0, 0, 0, 5, 582, 5, 1, 0, 0],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "外部访客",
|
|
|
- type: "line",
|
|
|
- stack: "Total",
|
|
|
- smooth: true,
|
|
|
- data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1],
|
|
|
- },
|
|
|
- ],
|
|
|
- ["00", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11","12", "13"],
|
|
|
- ],
|
|
|
- [
|
|
|
- [48, 42, 6],
|
|
|
- [
|
|
|
- {
|
|
|
- name: "地面停车场",
|
|
|
- type: "line",
|
|
|
- stack: "Total",
|
|
|
- smooth: true,
|
|
|
- data: [0, 0, 0, 0, 0, 0, 0, 40, 2, 0, 0, 0, 0],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "地下停车场",
|
|
|
- type: "line",
|
|
|
- stack: "Total",
|
|
|
- smooth: true,
|
|
|
- data: [0, 0, 0, 0, 0, 0, 0, 2, 3, 1, 0, 0, 0],
|
|
|
- },
|
|
|
- ],
|
|
|
- ["00", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11","12", "13"],
|
|
|
- ],
|
|
|
- ],
|
|
|
- ],
|
|
|
-});
|
|
|
-
|
|
|
-const { initList } = toRefs(data);
|
|
|
-const sanwei = ref(true)
|
|
|
-setTimeout(() => {
|
|
|
- sanwei.value = false
|
|
|
- document.getElementById("middleWrap").style.zIndex = "9";
|
|
|
-}, 5000);
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
-@import "@/assets/styles/common.scss";
|
|
|
-#main {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- margin: auto;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0 10px;
|
|
|
- font-family: "MicrosoftYaHei";
|
|
|
- color: #fff;
|
|
|
- .containWrap {
|
|
|
- clear: both;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0 !important;
|
|
|
- height: 100vh;
|
|
|
- margin-top: 50px;
|
|
|
- .leftWrap {
|
|
|
- display: inline-block;
|
|
|
- width: 500px;
|
|
|
- position: absolute;
|
|
|
- z-index: 10;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- .rightWrap {
|
|
|
- position: absolute;
|
|
|
- z-index: 10;
|
|
|
- right: 0;
|
|
|
- margin-left: 28px;
|
|
|
- width: 500px;
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .mt16 {
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
- .ml16 {
|
|
|
- margin-left: 16px;
|
|
|
- }
|
|
|
-}
|
|
|
-#middleWrap {
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- width:100%;
|
|
|
- height:100vh;
|
|
|
- border: none;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- z-index: -1;
|
|
|
-}
|
|
|
-.mask {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 100;
|
|
|
-}
|
|
|
-//公共样式
|
|
|
-.modular {
|
|
|
- background: rgba(0, 0, 0, 0.4);
|
|
|
- // backdrop-filter: blur(1px);
|
|
|
- color: $white;
|
|
|
- position: relative;
|
|
|
- padding: 10px 15px;
|
|
|
- margin-top: 10px;
|
|
|
- width: 500px !important;
|
|
|
- border-radius: 2px;
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- //font-family: "MicrosoftYaHei-Bold";
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
- #loader-wrapper2 {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 200px;
|
|
|
- margin:0 calc(50vw - 100px);
|
|
|
- height: 100%;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
-
|
|
|
- #loader2 {
|
|
|
- display: block;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- margin: -75px 0 0 -75px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 3px solid transparent;
|
|
|
- border-top-color: #FFF;
|
|
|
- -webkit-animation: spin 2s linear infinite;
|
|
|
- -ms-animation: spin 2s linear infinite;
|
|
|
- -moz-animation: spin 2s linear infinite;
|
|
|
- -o-animation: spin 2s linear infinite;
|
|
|
- animation: spin 2s linear infinite;
|
|
|
- z-index: 1001;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- #loader2:before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- left: 5px;
|
|
|
- right: 5px;
|
|
|
- bottom: 5px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 3px solid transparent;
|
|
|
- border-top-color: #FFF;
|
|
|
- -webkit-animation: spin 3s linear infinite;
|
|
|
- -moz-animation: spin 3s linear infinite;
|
|
|
- -o-animation: spin 3s linear infinite;
|
|
|
- -ms-animation: spin 3s linear infinite;
|
|
|
- animation: spin 3s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
- #loader2:after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- left: 15px;
|
|
|
- right: 15px;
|
|
|
- bottom: 15px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 3px solid transparent;
|
|
|
- border-top-color: #FFF;
|
|
|
- -moz-animation: spin 1.5s linear infinite;
|
|
|
- -o-animation: spin 1.5s linear infinite;
|
|
|
- -ms-animation: spin 1.5s linear infinite;
|
|
|
- -webkit-animation: spin 1.5s linear infinite;
|
|
|
- animation: spin 1.5s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @-webkit-keyframes spin {
|
|
|
- 0% {
|
|
|
- -webkit-transform: rotate(0deg);
|
|
|
- -ms-transform: rotate(0deg);
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- -webkit-transform: rotate(360deg);
|
|
|
- -ms-transform: rotate(360deg);
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes spin {
|
|
|
- 0% {
|
|
|
- -webkit-transform: rotate(0deg);
|
|
|
- -ms-transform: rotate(0deg);
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- -webkit-transform: rotate(360deg);
|
|
|
- -ms-transform: rotate(360deg);
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- #loader-wrapper2 .loader-section {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 51%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- z-index: 0;
|
|
|
- -webkit-transform: translateX(0);
|
|
|
- -ms-transform: translateX(0);
|
|
|
- transform: translateX(0);
|
|
|
- }
|
|
|
-
|
|
|
- #loader-wrapper2 .loader-section.section-left {
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-
|
|
|
- #loader-wrapper2 .loader-section.section-right {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .loaded #loader-wrapper2 .loader-section.section-left {
|
|
|
- -webkit-transform: translateX(-100%);
|
|
|
- -ms-transform: translateX(-100%);
|
|
|
- transform: translateX(-100%);
|
|
|
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
- }
|
|
|
-
|
|
|
- .loaded #loader-wrapper2 .loader-section.section-right {
|
|
|
- -webkit-transform: translateX(100%);
|
|
|
- -ms-transform: translateX(100%);
|
|
|
- transform: translateX(100%);
|
|
|
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
- }
|
|
|
-
|
|
|
- .loaded #loader2 {
|
|
|
- opacity: 0;
|
|
|
- -webkit-transition: all 0.3s ease-out;
|
|
|
- transition: all 0.3s ease-out;
|
|
|
- }
|
|
|
-
|
|
|
- .loaded #loader-wrapper2 {
|
|
|
- visibility: hidden;
|
|
|
- -webkit-transform: translateY(-100%);
|
|
|
- -ms-transform: translateY(-100%);
|
|
|
- transform: translateY(-100%);
|
|
|
- -webkit-transition: all 0.3s 1s ease-out;
|
|
|
- transition: all 0.3s 1s ease-out;
|
|
|
- }
|
|
|
-
|
|
|
- .no-js #loader-wrapper2 {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .no-js h1 {
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- #loader-wrapper2 .load_title {
|
|
|
- font-family: 'Open Sans';
|
|
|
- color: #FFF;
|
|
|
- font-size: 19px;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- z-index: 9999999999999;
|
|
|
- position: absolute;
|
|
|
- top: 60%;
|
|
|
- opacity: 1;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- #loader-wrapper2 .load_title span {
|
|
|
- font-weight: normal;
|
|
|
- font-style: italic;
|
|
|
- font-size: 13px;
|
|
|
- color: #FFF;
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div class="app-container home">
|
|
|
+ <div id="main">
|
|
|
+ <seHeader />
|
|
|
+ <el-row class="containWrap">
|
|
|
+ <el-col class="leftWrap">
|
|
|
+ <energy :resData="initList[0][0]" alt="能源与环境" />
|
|
|
+ <security :resData="initList[0][1]" alt="安防与消防" />
|
|
|
+ <keepWatch1 :resData="initList[0][2]" alt="巡更记录" />
|
|
|
+ </el-col>
|
|
|
+ <el-col id="middleWrap">
|
|
|
+ <iframe style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/bd3f8b27e1e50b1c9b963d43'></iframe>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="rightWrap">
|
|
|
+ <people :resData="initList[0][4]" alt="人员通行" />
|
|
|
+ <car :resData="initList[0][5]" alt="车辆通行" />
|
|
|
+ <keepWatch :resData="initList[0][3]" alt="巡更数据" />
|
|
|
+ </el-col>
|
|
|
+ <div id="loader-wrapper2" v-if="sanwei">
|
|
|
+ <div id="loader2"></div>
|
|
|
+ <div class="loader-section section-left"></div>
|
|
|
+ <div class="loader-section section-right"></div>
|
|
|
+ <div class="load_title">三维模型加载中...</div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import axios from "axios";
|
|
|
+import seHeader from "@/components/business/seHeader"; //头部
|
|
|
+import energy from "@/components/business/energy"; //能源与环境
|
|
|
+import security from "@/components/business/security"; //能源与环境
|
|
|
+import people from "@/components/business/access/people"; //人员通行
|
|
|
+import car from "@/components/business/access/car"; //车辆通行
|
|
|
+import keepWatch from "@/components/business/keepWatch"; //巡更数据
|
|
|
+import keepWatch1 from "@/components/business/keepWatch1"; //巡更数据
|
|
|
+const data = reactive({
|
|
|
+ initList: [
|
|
|
+ [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name1: "当月用电量",
|
|
|
+ num: "34825kW‧h",
|
|
|
+ name2: "日均用量较上月",
|
|
|
+ compare: 20,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name1: "当月用水量",
|
|
|
+ num: "1285m³",
|
|
|
+ name2: "日均用量较上月",
|
|
|
+ compare: 3.5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name1: "当月制冷量",
|
|
|
+ num: "19774kW‧h",
|
|
|
+ name2: "日均用量较上月",
|
|
|
+ compare: 6.5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name1: "当月发热量",
|
|
|
+ num: "0kW‧h",
|
|
|
+ name2: "日均用量较上月",
|
|
|
+ compare: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ [
|
|
|
+ { name: "摄像头总数", num: 175 },
|
|
|
+ { name: "关键监控区域", num: 113 },
|
|
|
+ { name: "周界防护设备", num: 32 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { value: 28, name: "已处理" },
|
|
|
+ { value: 4, name: "未处理" },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-17 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-18 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-19 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-20 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-21 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-22 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-23 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-24 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-25 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-26 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-27 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "点位巡查",
|
|
|
+ enforcer: "王茂",
|
|
|
+ time: "2022-07-28 21:00:00",
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ [
|
|
|
+ { name: "巡更点位", num: 264 },
|
|
|
+ { name: "巡更任务", num: 12 },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { value: 12, name: "按时完成" },
|
|
|
+ { value: 0, name: "延迟完成" },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ [596, 593, 3],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: "楼内人员",
|
|
|
+ type: "line",
|
|
|
+ stack: "Total",
|
|
|
+ smooth: true,
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 5, 582, 5, 1, 0, 0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "外部访客",
|
|
|
+ type: "line",
|
|
|
+ stack: "Total",
|
|
|
+ smooth: true,
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ["00", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11","12", "13"],
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ [48, 42, 6],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: "地面停车场",
|
|
|
+ type: "line",
|
|
|
+ stack: "Total",
|
|
|
+ smooth: true,
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 40, 2, 0, 0, 0, 0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "地下停车场",
|
|
|
+ type: "line",
|
|
|
+ stack: "Total",
|
|
|
+ smooth: true,
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 2, 3, 1, 0, 0, 0],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ["00", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11","12", "13"],
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+const { initList } = toRefs(data);
|
|
|
+const sanwei = ref(true)
|
|
|
+setTimeout(() => {
|
|
|
+ sanwei.value = false
|
|
|
+ document.getElementById("middleWrap").style.zIndex = "9";
|
|
|
+}, 5000);
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+@import "@/assets/styles/common.scss";
|
|
|
+#main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-family: "MicrosoftYaHei";
|
|
|
+ color: #fff;
|
|
|
+ .containWrap {
|
|
|
+ clear: both;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 !important;
|
|
|
+ height: 100vh;
|
|
|
+ margin-top: 50px;
|
|
|
+ .leftWrap {
|
|
|
+ display: inline-block;
|
|
|
+ width: 500px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .rightWrap {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ right: 0;
|
|
|
+ margin-left: 28px;
|
|
|
+ width: 500px;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mt16 {
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .ml16 {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+#middleWrap {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ width:100%;
|
|
|
+ height:100vh;
|
|
|
+ border: none;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.mask {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+//公共样式
|
|
|
+.modular {
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ // backdrop-filter: blur(1px);
|
|
|
+ color: $white;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 500px !important;
|
|
|
+ border-radius: 2px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ //font-family: "MicrosoftYaHei-Bold";
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+ #loader-wrapper2 {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 200px;
|
|
|
+ margin:0 calc(50vw - 100px);
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader2 {
|
|
|
+ display: block;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ margin: -75px 0 0 -75px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ border-top-color: #FFF;
|
|
|
+ -webkit-animation: spin 2s linear infinite;
|
|
|
+ -ms-animation: spin 2s linear infinite;
|
|
|
+ -moz-animation: spin 2s linear infinite;
|
|
|
+ -o-animation: spin 2s linear infinite;
|
|
|
+ animation: spin 2s linear infinite;
|
|
|
+ z-index: 1001;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader2:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ border-top-color: #FFF;
|
|
|
+ -webkit-animation: spin 3s linear infinite;
|
|
|
+ -moz-animation: spin 3s linear infinite;
|
|
|
+ -o-animation: spin 3s linear infinite;
|
|
|
+ -ms-animation: spin 3s linear infinite;
|
|
|
+ animation: spin 3s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader2:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 15px;
|
|
|
+ right: 15px;
|
|
|
+ bottom: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ border-top-color: #FFF;
|
|
|
+ -moz-animation: spin 1.5s linear infinite;
|
|
|
+ -o-animation: spin 1.5s linear infinite;
|
|
|
+ -ms-animation: spin 1.5s linear infinite;
|
|
|
+ -webkit-animation: spin 1.5s linear infinite;
|
|
|
+ animation: spin 1.5s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes spin {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: rotate(360deg);
|
|
|
+ -ms-transform: rotate(360deg);
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes spin {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: rotate(360deg);
|
|
|
+ -ms-transform: rotate(360deg);
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .loader-section {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 51%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ z-index: 0;
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
+ -ms-transform: translateX(0);
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .loader-section.section-left {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .loader-section.section-right {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader-wrapper2 .loader-section.section-left {
|
|
|
+ -webkit-transform: translateX(-100%);
|
|
|
+ -ms-transform: translateX(-100%);
|
|
|
+ transform: translateX(-100%);
|
|
|
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader-wrapper2 .loader-section.section-right {
|
|
|
+ -webkit-transform: translateX(100%);
|
|
|
+ -ms-transform: translateX(100%);
|
|
|
+ transform: translateX(100%);
|
|
|
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader2 {
|
|
|
+ opacity: 0;
|
|
|
+ -webkit-transition: all 0.3s ease-out;
|
|
|
+ transition: all 0.3s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader-wrapper2 {
|
|
|
+ visibility: hidden;
|
|
|
+ -webkit-transform: translateY(-100%);
|
|
|
+ -ms-transform: translateY(-100%);
|
|
|
+ transform: translateY(-100%);
|
|
|
+ -webkit-transition: all 0.3s 1s ease-out;
|
|
|
+ transition: all 0.3s 1s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-js #loader-wrapper2 {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-js h1 {
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .load_title {
|
|
|
+ font-family: 'Open Sans';
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 19px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 9999999999999;
|
|
|
+ position: absolute;
|
|
|
+ top: 60%;
|
|
|
+ opacity: 1;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .load_title span {
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: italic;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #FFF;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+</style>
|
wangtao