提交：新版本监控大屏，初步结果

package.json

@@ -52,11 +52,13 @@
     "js-cookie": "2.2.1",
     "js-md5": "^0.7.3",
     "jsencrypt": "3.0.0-rc.1",
+    "moment": "^2.29.4",
+    "node-sass": "^4.9.0",
     "nprogress": "0.2.0",
     "qrcodejs2": "^0.0.2",
     "quill": "1.3.7",
-    "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
+    "save": "^2.5.0",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
@@ -75,13 +77,13 @@
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
     "chalk": "4.1.0",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.0.1",
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
+    "node-sass": "^4.9.0",
     "runjs": "4.4.2",
+    "sass-loader": "^7.0.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
     "vue-template-compiler": "2.6.12"

public/index.html

@@ -9,12 +9,17 @@
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css">
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/iconfont.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_9w119og75cs.css">
+
+
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_9xrjupanl8d.css">
+
     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=aabc97a5e095102787d405719847ecf0"></script>
     <script src="<%= BASE_URL %>js/config.js"></script>
 
     <script src="https://webapi.amap.com/maps?v=1.4.15&key=aabc97a5e095102787d405719847ecf0&plugin=AMap.PlaceSearch"></script>
     <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=aabc97a5e095102787d405719847ecf0&plugin=AMap.Geocoder"></script>
+    <script type="text/javascript" src="<%= BASE_URL %>cdn/js/jessibuca/jessibuca.js"></script>
     <title><%= webpackConfig.name %></title>
 	  <style>
     html,

src/api/bigScreen/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 查询能源 统计
+export function getEnergyCensusList(query) {
+    return request({
+        url: '/sys/device/projectstat',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询能源 空间 统计
+export function getEnergySpaceCensusList(query) {
+  return request({
+      url: '/sys/device/spacestat',
+      method: 'get',
+      params: query
+  })
+}

src/assets/icons/svg/A_yuanjiaodian.svg

@@ -0,0 +1 @@
+<svg t="1660026423955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2946" width="200" height="200"><path d="M0 236.307692m196.923077 0l315.076923 0q196.923077 0 196.923077 196.923077l0 315.076923q0 196.923077-196.923077 196.923077l-315.076923 0q-196.923077 0-196.923077-196.923077l0-315.076923q0-196.923077 196.923077-196.923077Z" fill="#1890FF" p-id="2947"></path><path d="M827.076923 787.692308h-118.153846v-354.461539c9.609846-103.739077-92.278154-196.923077-157.538462-196.923077H315.076923c0-108.740923 88.182154-157.538462 196.923077-157.538461h315.076923a196.923077 196.923077 0 0 1 196.923077 196.923077v315.076923a196.923077 196.923077 0 0 1-196.923077 196.923077z" fill="#1890FF" opacity=".3" p-id="2948"></path></svg>

src/basedata/typeParams.js

@@ -114,7 +114,7 @@ const VIDEO_CONTROLLER = [
     "paramName": "站点id",
     "canModify": true
   },
-  
+
   {
     "paramKey": "video_protocol",
     "paramVal": "",

src/components/Amap/components/bigscLocation/indexV_2.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="amap-bigsc-location">
-    <div id="container" style="width:100%; height:100%"></div>
+    <div id="container" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 <script>
@@ -20,21 +20,21 @@ export default {
       default: {
         lng: 116.397428,
         lat: 39.90923,
-        address: ""
-      }
+        address: "",
+      },
     },
     zoom: {
       type: [String, Number],
-      default: 10
+      default: 10,
     },
     draggable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     projectList: {
       type: Array,
-      default: []
-    }
+      default: [],
+    },
   },
   data() {
     return {
@@ -42,10 +42,10 @@ export default {
       pointResult: {
         lng: 119.275254,
         lat: 26.028928,
-        address: ""
+        address: "",
       },
       theme: "6c31a547eb9387caefc013b7809e9d21",
-      infoWindow: null
+      infoWindow: null,
     };
   },
   mounted() {
@@ -53,7 +53,7 @@ export default {
   },
   watch: {
     projectList: {
-      handler: function(list, oldVal) {
+      handler: function (list, oldVal) {
         // 创建设备定位的点
         if (this.aMap) {
           this.aMap.clearMap();
@@ -62,8 +62,8 @@ export default {
         // console.log("map_projectList: ", list);
         // this.textFu();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   methods: {
     overview() {
@@ -78,7 +78,7 @@ export default {
         center: [this.mapCenter.lng, this.mapCenter.lat],
         resizeEnable: true,
         // zoom: this.zoom,
-        mapStyle: "amap://styles/" + this.theme
+        mapStyle: "amap://styles/" + this.theme,
       });
       this.createMarker();
       // this.textFu();
@@ -89,7 +89,7 @@ export default {
       this.infoWindow = new AMap.InfoWindow({
         isCustom: true, //使用自定义窗体
         content: "",
-        offset: new AMap.Pixel(-3, -9)
+        offset: new AMap.Pixel(-3, -9),
       });
     },
     // 地图标点 点击事件
@@ -106,7 +106,7 @@ export default {
       let marker = new AMap.Marker({
         position: [116.4224009776628, 39.93482727239599],
         icon: markerIcon,
-        offset: new AMap.Pixel(-13, -30)
+        offset: new AMap.Pixel(-13, -30),
       });
       var content = [];
       content.push(
@@ -151,14 +151,17 @@ export default {
           let marker = new AMap.Marker({
             position: [
               this.projectList[i].projectLng,
-              this.projectList[i].projectLat
+              this.projectList[i].projectLat,
             ],
             // map: this.aMap,
-            icon: this.projectList[i].tenantIndexVo['unProcessed']　> 0 ? markerAlarmIcon : markerIcon,
-            offset: new AMap.Pixel(-13, -30)
+            icon:
+              this.projectList[i].tenantIndexVo["unProcessed"] > 0
+                ? markerAlarmIcon
+                : markerIcon,
+            offset: new AMap.Pixel(-13, -30),
           });
           var content = [];
-          window['amapObj'] = this.aMap;
+          window["amapObj"] = this.aMap;
           content.push(
             `<div class="info-block">
               <span class="info-title">报警提醒</span>
@@ -166,19 +169,27 @@ export default {
               <img class="info-top" src="${infoTopIcon}" />
               <div class="info-wrap">
                 <div class="info-item"><span class="info-lable">项目：</span>
-                  <span class="info-value">${this.projectList[i].projectName}</span></div>
+                  <span class="info-value">${
+                    this.projectList[i].projectName
+                  }</span></div>
                 <div class="info-item"><span class="info-lable">地址：</span>
                   <marquee style="margin: 0; width:calc(100% - 80px);" behavior="alternate" scrollamount="1" width="calc(100% - 40px)">
-                    <span class="info-value">${this.projectList[i].projectAddress}</span>
+                    <span class="info-value">${
+                      this.projectList[i].projectAddress
+                    }</span>
                   </marquee>
                 </div>
                 <div class="info-item"><span class="info-lable">报警总数：</span>
-                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].tenantIndexVo?.unProcessed}</span></div>
+                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${
+                    this.projectList[i].tenantIndexVo?.unProcessed
+                  }</span></div>
                 <div class="alarm-icon-block">
                   <img class="alarm-icon" src="${infoAlarmIcon}"/>
                 </div>
                 <div class="list-device">
-                  ${this.resultDeviceListStr(this.projectList[i].deviceAlarmSimpleVoList || [])}
+                  ${this.resultDeviceListStr(
+                    this.projectList[i].deviceAlarmSimpleVoList || []
+                  )}
                  </div>
               </div>
               <img class="info-bottom" src="${infoBotIcon}">
@@ -193,20 +204,26 @@ export default {
       this.aMap.setFitView();
     },
     resultDeviceListStr(list) {
-      var resultStr = '';
+      var resultStr = "";
       var _this = this;
-      window['_this'] = this;
+      window["_this"] = this;
       if (list && list.length > 0) {
-        list.forEach(v => {
+        list.forEach((v) => {
           // if (v.unProcessAlarmTotal > 0) {
-            resultStr = resultStr +  `
+          resultStr =
+            resultStr +
+            `
               <div class="item-device" onclick="${_this}">
                 <img class="d-img" src="${infoDeviceIcon}" />
                 <span class="device-info" name="${v.deviceId}"
-                onclick="window['_this'].$router.push({ name:'systemDevice', params: { 'deviceId': ${v.deviceId}, 'tempType': 'details' } })"
-                style="${v.unProcessAlarmTotal > 0 ? 'color: #ff3739;':''}">${v.deviceName}</span>
+                onclick="window['_this'].$router.push({ name:'systemDevice', params: { 'deviceId': ${
+                  v.deviceId
+                }, 'tempType': 'details' } })"
+                style="${v.unProcessAlarmTotal > 0 ? "color: #ff3739;" : ""}">${
+              v.deviceName
+            }</span>
               </div>
-            `
+            `;
           // }
         });
       }
@@ -234,10 +251,10 @@ export default {
       var _this = this;
       // console.log("经度："+lng+"纬度"+lat);
       var lnglatXY = [lng, lat]; // 地图上所标点的坐标
-      AMap.service("AMap.Geocoder", function() {
+      AMap.service("AMap.Geocoder", function () {
         // 回调函数
         var geocoder = new AMap.Geocoder({});
-        geocoder.getAddress(lnglatXY, function(status, result) {
+        geocoder.getAddress(lnglatXY, function (status, result) {
           if (status === "complete" && result.info === "OK") {
             // console.log(result.regeocode.formattedAddress);
             var address = result.regeocode.formattedAddress;
@@ -258,8 +275,8 @@ export default {
     showInfoM(e) {
       this.pointResult["lat"] = e.lnglat.lat;
       this.pointResult["lng"] = e.lnglat.lng;
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -411,5 +428,6 @@ export default {
     top: 25px;
     z-index: 1;
   }
+
 }
 </style>

src/components/Amap/components/bigscLocation/indexV_3.vue

@@ -77,7 +77,7 @@ export default {
       this.aMap = new AMap.Map("container", {
         center: [this.mapCenter.lng, this.mapCenter.lat],
         resizeEnable: true,
-        viewMode: '3D',
+        viewMode: "3D",
         // zoom: this.zoom,
         mapStyle: "amap://styles/" + this.theme,
       });
@@ -162,8 +162,8 @@ export default {
             // map: this.aMap,
             icon:
               this.projectList[i].tenantIndexVo["unProcessed"] > 0
-                    ? markerAlarmIcon
-                    : markerIcon,
+                ? markerAlarmIcon
+                : markerIcon,
             // icon:
             //   new AMap.Icon({
             //     image: this.projectList[i].tenantIndexVo["unProcessed"] > 0
@@ -417,12 +417,12 @@ export default {
     align-items: center;
   }
   div.list-device {
-    width: 100%;
+    width: calc(100% - 10px);
     padding-left: 30px;
     display: flex;
     flex-wrap: wrap;
     height: auto;
-    padding-right: 30px;
+    padding-right: 20px;
     max-height: 150px;
     overflow: auto;
     // justify-content: space-between;
@@ -461,5 +461,19 @@ export default {
     top: 25px;
     z-index: 1;
   }
+  div.list-device::-webkit-scrollbar {
+    width: 6px; //对垂直方向滚动条
+    height: 6px; //对水平方向滚动条
+  }
+  //滚动的滑块
+  div.list-device::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: #00f7f8//滚动条的颜色;
+  }
+  //内层滚动槽
+  div.list-device::-webkit-scrollbar-track-piece {
+    background-color: #00f7f800;
+  }
 }
+
 </style>

src/components/Cards/CensusCard.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="census-card">
+    <div class="block-top">
+      <span class="count-num">{{ countNum || 0 }}</span>
+      <span class="count-unit"> {{ countUnit || "（吨标准煤）" }} </span>
+    </div>
+    <div class="block-dividing"></div>
+    <div class="block-content">
+      <div class="bit-left">
+        <img :src="icon" />
+      </div>
+      <div class="bit-right">
+        <div
+          class="b_list"
+          :id="'publishMain' + elementId"
+          v-show="activityList && activityList.length > 0"
+        >
+          <div :id="'publishMain1' + elementId">
+            <div class="b_item" v-for="(item, idx) in activityList" :key="idx">
+              <span class="b-label" :title="item[props['label']]">{{
+                item[props["label"]]
+              }}</span>
+              <span class="b-value" :title="item[props['value']]">{{
+                item[props["value"]]
+              }}</span>
+            </div>
+          </div>
+          <div :id="'publishMain2' + elementId"></div>
+        </div>
+        <!-- <el-empty v-else :image-size="200"></el-empty> -->
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          v-show="!(activityList && activityList.length > 0)"
+        >
+          暂无数据
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CensusCard",
+  props: {
+    icon: {
+      type: String,
+      default: () => {
+        return "/images/icon01.png";
+      },
+    },
+    props: {
+      typd: Object,
+      default: {
+        label: "label",
+        key: "key",
+        value: "value",
+      },
+    },
+    countNum: {
+      type: [String, Number],
+      require: true,
+    },
+    countUnit: {
+      type: String,
+    },
+    activityList: {
+      type: Array,
+      require: true,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      elementId: "",
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.rollUp();
+    });
+  },
+  beforeDestroy() {
+    this.timer = null;
+    clearInterval(this.timer);
+  },
+  created() {
+    this.elementId = new Date().getTime();
+  },
+  methods: {
+    rollUp() {
+      let ul1 = document.getElementById("publishMain1" + this.elementId);
+      let ul2 = document.getElementById("publishMain2" + this.elementId);
+      let box = document.getElementById("publishMain" + this.elementId);
+      ul2.innerHTML = ul1.innerHTML;
+      box.scrollTop = 0;
+      function rollStart() {
+        if (box.scrollTop >= ul1.scrollHeight) {
+          box.scrollTop = 0;
+        } else {
+          box.scrollTop++;
+        }
+      }
+      this.timer = setInterval(rollStart, 100);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.census-card {
+  width: 100%;
+  height: 100%;
+  .block-top {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    padding-right: 0;
+    align-items: center;
+    width: 100%;
+    .count-num {
+      height: 30px;
+      font-size: 24px;
+      font-family: "Source Han Sans CN";
+      font-weight: 600;
+      color: #ffcc00;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: calc(100% - 100px);
+    }
+    .count-unit {
+      height: 16px;
+      font-size: 16px;
+      font-family: "Source Han Sans CN";
+      font-weight: 400;
+      color: #00feff;
+    }
+  }
+  .block-dividing {
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 255, 241, 0) 0%,
+      rgba(0, 255, 241, 0.97) 48%,
+      rgba(0, 255, 241, 0) 100%
+    );
+  }
+  .block-content {
+    width: 100%;
+    height: 170px;
+    display: flex;
+    .bit-left {
+      width: 140px;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .bit-right {
+      width: calc(100% - 140px);
+      height: 100%;
+      padding: 10px 5px;
+      @keyframes scrollTop {
+        0% {
+          -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+        }
+        100% {
+          -webkit-transform: translate3d(0, -300px, 0);
+          transform: translate3d(0, -300px, 0);
+        }
+      }
+      .b_list {
+        overflow: hidden;
+        height: 100%;
+        .b_item {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          height: 35px;
+          font-size: 14px;
+          font-family: "Source Han Sans CN";
+          font-weight: 400;
+          color: #89ffff;
+          line-height: 37px;
+          .b-label {
+            display: block;
+            width: calc(100% - 80px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .b-value {
+            display: block;
+            width: 80px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-weight: 400;
+            color: #00feff;
+            font-size: 16px;
+          }
+        }
+      }
+
+      .b_scroll {
+        -webkit-animation: 10s scrollTop linear infinite normal;
+        animation: 10s scrollTop linear infinite normal;
+      }
+    }
+  }
+}
+</style>

src/components/Edescriptions/style.scss

@@ -0,0 +1,83 @@
+.el-descriptions {
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #303133;
+}
+.margin-top {
+  margin-top: 20px;
+}
+.el-descriptions__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.el-descriptions__title {
+  font-size: 16px;
+  font-weight: 700;
+}
+.el-descriptions__extra {
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #303133;
+}
+.el-descriptions__body {
+  color: #606266;
+  background-color: #fff;
+}
+.el-descriptions__table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.is-bordered {
+  table-layout: auto;
+}
+
+.el-descriptions-row {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.el-descriptions .el-descriptions-item__cell {
+  padding-bottom: 12px;
+}
+.el-descriptions .el-descriptions-item__cell {
+  padding-bottom: 12px
+}
+.el-descriptions-row {}
+
+.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
+  box-sizing: border-box;
+  text-align: left;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.el-descriptions-item__container {
+  display: flex;
+}
+.el-descriptions-item__label {
+  margin-right: 10px;
+}
+.el-descriptions-item__container .el-descriptions-item__content, .el-descriptions-item__container .el-descriptions-item__label {
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.el-descriptions .is-bordered .el-descriptions-item__cell {
+  border: 1px solid #ebeef5;
+  padding: 12px 10px;
+}
+
+.el-descriptions-item__label.is-bordered-label {
+  font-weight: 700;
+  color: #909399;
+  background: #fafafa;
+}
+
+.el-descriptions__body .el-descriptions__table {
+  border-collapse: collapse;
+  width: 100%;
+}

src/views/bigScreen/v3/index.vue

@@ -22,12 +22,33 @@
       <div class="count-wrap">
         <div class="count-left">
           <div class="left-block-1">
-            <device-proportion-wrap
-              :projectId="projectId"
-            ></device-proportion-wrap>
-            <today-ratio-wrap
-              :result="resultInfo.warningAnalysisStatisticsVo || []"
-            ></today-ratio-wrap>
+            <project-count-temp
+              :props="{
+                label: 'spaceName',
+                key: 'spaceId',
+                value: 'coal',
+              }"
+              title="年度能耗"
+              icon="/images/icon01.png"
+              unit="（吨标准煤）"
+              :tableList="projectSpaceCensusList"
+              :countNum="projectStatInfo['coal']"
+            ></project-count-temp>
+
+            <project-count-temp
+              :props="{
+                label: 'spaceName',
+                key: 'spaceId',
+                value: 'ELECTRICITY_METER',
+              }"
+              title="年度用电"
+              icon="/images/icon02.png"
+              unit="（万kwh）"
+              :tableList="projectSpaceCensusList"
+              :countNum="projectStatInfo['ELECTRICITY_METER']"
+            ></project-count-temp>
+
+            <trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
           </div>
           <div
             class="map-block-1"
@@ -38,9 +59,11 @@
               tempUserType="userLoginType"
               :fullscreen="fullscreen"
               :countResult="alarmInfoResult"
+              :result="alarmInfoResult"
               @eventFullscreen="eventFullscreenMap"
               :projectList="projectList"
             ></map-wrap>
+
             <map-wrap-personal
               v-else
               :fullscreen="fullscreen"
@@ -49,18 +72,53 @@
               @eventFullscreen="eventFullscreenMap"
               :projectList="projectList"
             ></map-wrap-personal>
+
+            <div
+              style="width: 100%; display: flex; justify-content: space-between;"
+            >
+              <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
+
+              <device-proportion-wrap
+                :projectId="projectId"
+              ></device-proportion-wrap>
+            </div>
           </div>
-          <div class="bottom-block-1">
+          <!-- <div class="bottom-block-1">
             <alarm-table-list-wrap
               :result="alarmInfoResult"
               style="margin-top: -5px"
               :projectId="projectId"
             ></alarm-table-list-wrap>
-          </div>
+          </div> -->
         </div>
         <div class="right-block-1">
-          <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
-          <trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
+          <!-- <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap> -->
+          <project-count-temp
+              :props="{
+                label: 'spaceName',
+                key: 'spaceId',
+                value: 'WATER_METER',
+              }"
+              title="年度用水"
+              icon="/images/icon03.png"
+              unit="（万吨）"
+              :tableList="projectSpaceCensusList"
+              :countNum="projectStatInfo['WATER_METER']"
+            ></project-count-temp>
+
+          <project-count-temp
+              :props="{
+                label: 'spaceName',
+                key: 'spaceId',
+                value: 'GAS_METER',
+              }"
+              title="年度用气"
+              icon="/images/icon04.png"
+              unit="（万m³）"
+              :tableList="projectSpaceCensusList"
+              :countNum="projectStatInfo['GAS_METER']"
+            ></project-count-temp>
+
           <type-distribution-wrap
             style="margin-top: -5px"
             :result="resultInfo.alarmCategoriesList || []"
@@ -83,9 +141,11 @@ import MapWrap from "./profile/mapWrap";
 import MapWrapPersonal from "./profile/personalCenter";
 import { iotWebSocketAlarmBaseUrl } from "@/config/env";
 import Cookies from "js-cookie";
-import { NextLoading } from '@/utils/loading';
+import { NextLoading } from "@/utils/loading";
+import ProjectCountTemp from "./profile/projectCountTemp"
 
 import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
+import { getEnergySpaceCensusList, getEnergyCensusList } from '@/api/bigScreen/index'
 export default {
   name: "Device_oneself",
   components: {
@@ -98,6 +158,7 @@ export default {
     trendWrap,
     MapWrap,
     MapWrapPersonal,
+    ProjectCountTemp
   },
   data() {
     return {
@@ -115,6 +176,8 @@ export default {
       stompClient: null,
       socket_flag: true,
       setIntervalGetCountOpt: null,
+      projectStatInfo: {},
+      projectSpaceCensusList: []
     };
   },
   mounted() {
@@ -155,10 +218,30 @@ export default {
     this.getProjectList();
     this.warningAnalysisList();
     this.homeCount();
+    this.getEnergyCensus()
+    this.getEnergySpaceCensus()
     // this.connection();
   },
 
   methods: {
+    // 查询 能源数据状态情况
+    getEnergyCensus() {
+      getEnergyCensusList({
+        projectId: this.projectId
+      }).then(res => {
+        this.projectStatInfo = res.data || {}
+      })
+    },
+    // 查询 能源数据 空间统计
+    getEnergySpaceCensus() {
+      this.projectSpaceCensusList = []
+      getEnergySpaceCensusList({
+        projectId: this.projectId
+      }).then(res => {
+        console.log(res)
+        this.projectSpaceCensusList = res.data || []
+      })
+    },
     // 创建一个ws 监听获取报警实时数据
     connection() {
       if (this.stompClient) {
@@ -198,6 +281,8 @@ export default {
       this.projectId = data;
       this.homeCount();
       this.warningAnalysisList();
+      this.getEnergyCensus()
+      this.getEnergySpaceCensus()
     },
     eventRegionalismId(data) {
       this.regionalismId = data;
@@ -282,7 +367,8 @@ export default {
   height: calc(100vh - 0px);
   display: flex;
   justify-content: center;
-  background-image: url("../../../assets/images/big/v3/bg.jpg");
+  // background-image: url("../../../assets/images/big/v3/bg.jpg");
+  background-color: #051832;
   cursor: default;
   .main-block {
     width: 100%;
@@ -296,20 +382,23 @@ export default {
       flex-wrap: wrap;
       color: #fff;
       background: #1531f508;
-      padding: 0px 20px;
+      padding: 0px 10px;
       .count-left {
         display: flex;
         flex-wrap: wrap;
         width: calc(100% - 400px);
         height: calc(100%);
         // padding-left: 20px;
+        padding: 0 10px;
         .left-block-1 {
           width: 400px;
           height: calc(100% - 300px);
+          padding: 0 10px;
         }
         .map-block-1 {
           width: calc(100% - 405px);
           height: calc(100% - 320px);
+          padding-left: 10px;
         }
 
         .bottom-block-1 {
@@ -321,6 +410,7 @@ export default {
         width: 400px;
         height: calc(100%);
         position: relative;
+        padding: 0 10px;
       }
     }
   }

src/views/bigScreen/v3/profile/censusTempB.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="census-temp-a" :style="`color: ${icolor};`">
+    <div class="census-cneter">
+      <icon :class="`iconfont ${icons} icon-t`"></icon>
+    </div>
+
+    <div class="census-right">
+      <span class="census-top">{{ value }}</span>
+      <div class="census-title">{{ title }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CensusTmepA",
+  props: {
+    icolor: {
+      type: String,
+    },
+    icons: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    value: {
+      type: [String, Number],
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.census-temp-a {
+  width: 105px;
+  height: 70px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  .census-cneter {
+    width: 80px;
+    background-image: url("../../../../assets/images/big/v3/censusTempA.png");
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    .icon-t {
+      font-size: 30px;
+      margin-top: 12px;
+    }
+  }
+  .census-right {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: calc(100% - 60px);
+    padding-left: 15px;
+    .census-top {
+      width: 100%;
+      display: flex;
+      justify-content: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      position: relative;
+      top: 5px;
+      font-size: 20px;
+      font-family: 'Source Han Sans CN';
+      font-weight: bold;
+      align-items: center;
+    }
+    .census-title {
+      width: 100%;
+      height: 20px;
+      font-size: 14px;
+      font-family: "Source Han Sans CN";
+      font-weight: 500;
+      color: #ffffff;
+      display: flex;
+      justify-content: left;
+    }
+  }
+}
+</style>

src/views/bigScreen/v3/profile/deviceProportion.vue

@@ -4,7 +4,7 @@
       <echarts-radar-wrap
         slot="mk-center"
         class="count-info"
-        :styles="'width: 100%; height: 240px;'"
+        :styles="'width: 100%; height: 200px;'"
         eId="echartsGaugeDP"
         :option="radarOption"
       />
@@ -77,11 +77,11 @@ export default {
 </script>
 <style lang="scss">
 .big-device-proportion-wrap {
-  width: 100%;
-  height: 300px;
+  width: calc((100% - 20px) / 2);
+  height: 190px;
   .count-info {
     width: 100%;
-    height: 240px;
+    height: 190px;
     // background-image: url("../../../../assets/images/big/boxleft-center.png");
     // background-size: contain;
     padding-top: 10px;

src/views/bigScreen/v3/profile/head.vue

@@ -132,7 +132,7 @@ export default {
   height: 72px;
   width: 100%;
   display: flex;
-  background-image: url("../../../../assets/images/big/head_v2.png");
+  background-image: url("../../../../assets/images/big/v3/head.png");
   background-size: cover;
   .left-wrap {
     width: 20%;
@@ -191,6 +191,11 @@ export default {
     letter-spacing: 2px;
     justify-content: center;
     align-items: center;
+    font-size: 36px;
+    /* font-weight: bold; */
+    color: #66FFFF;
+    line-height: 18px;
+    letter-spacing: 8px;
   }
   .right-wrap {
     width: 20%;
@@ -212,12 +217,13 @@ export default {
       border-radius: 5px 0;
       padding-top: 6px;
       font-size: 16px;
+      color: #00f7f8;
       .el-icon-setting {
         font-weight: 600;
       }
     }
     .el-button--text：hover {
-      background: transparent;
+      background-color: transparent !important;
     }
   }
 }

src/views/bigScreen/v3/profile/mapWrap.vue

@@ -2,12 +2,25 @@
   <div class="big-map-wrap">
     <nav-temp htmlType="t3" title="">
       <div class="center-wrap" slot="mk-center">
+        <div class="alarm-census-wrap">
+            <div class="census-block">
+              <img src="@/assets/images/big/v3/iconG.png" />
+              已处理：
+              <span style="color: #0cff00">{{result['processed']}}</span>
+            </div>
+            <div class="census-block image-twinkle">
+              <img src="@/assets/images/big/v3/iconR.png" />
+              未处理：
+              <span style="color: red">{{result['unProcessed']}}</span>
+            </div>
+          </div>
         <amap-wrap
           :mapCenter="{
             lng: 116.397428,
             lat: 39.90923,
             address: '',
           }"
+          style="position: relative;top: -45px;"
           ref="bigscLocationMap"
           :projectList="projectList"
         ></amap-wrap>
@@ -26,7 +39,7 @@ export default {
     amapWrap,
     NavTemp,
   },
-  props: ["countResult", "projectList", "fullscreen"],
+  props: ["countResult", "projectList", "fullscreen", 'result'],
   data() {
     return {
       imgs,
@@ -198,6 +211,46 @@ export default {
         }
       }
     }
+    .alarm-census-wrap {
+        display: flex;
+        width: 100%;
+        color: #fff;
+        align-items: center;
+        padding-left: 20px;
+        z-index: 999;
+        height: 46px;
+        position: relative;
+        background: rgba(0,0,0,0.5000);
+        .census-block {
+          // width: 50%;
+          display: flex;
+          align-items: end;
+          justify-content: flex-start;
+          flex-wrap: nowrap;
+          font-size: 16px;
+          letter-spacing: 1px;
+          margin-right: 10px;
+          > img {
+            margin-right: 5px;
+          }
+          > span {
+            font-size: 18px;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            color: #0cff00;
+            line-height: 26px;
+          }
+        }
+        .image-twinkle {
+          > img {
+            animation-name: light;
+            animation-duration: 1.25s;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+            animation-direction: alternate;
+          }
+        }
+      }
   }
 
   .botton-top-wrap-1 {

src/views/bigScreen/v3/profile/navTemp.vue

@@ -63,7 +63,7 @@ export default {
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  margin-top: 15px;
+  margin-top: 20px;
   .mk-top {
     height: 35px;
     width: 100%;
@@ -71,9 +71,9 @@ export default {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
-    font-size: 16px;
+    font-size: 17px;
     font-family: "Source Han Sans CN";
-    font-weight: 400;
+    font-weight: 600;
     color: #02d9fd;
     padding-left: 0;
     -webkit-box-align: end;
@@ -81,7 +81,7 @@ export default {
     padding-bottom: 0px;
     letter-spacing: 1px;
     background-size: cover;
-    padding-top: 5px;
+    padding-top: 0px;
     align-items: center;
     background-size: 100% 100%;
   }
@@ -89,11 +89,11 @@ export default {
     background-image: url("../../../../assets/images/big/v3/boxleft-top.png");
   }
   .mk-top-t2 {
-    background-image: url("../../../../assets/images/big/v3/boxgao-t.png");
+    background-image: url("../../../../assets/images/big/v3/boxbottom-top.png");
   }
   .mk-top-t3 {
     height: 28px;
-    background-image: url("../../../../assets/images/big/v3/boxmap-t.png");
+    background-image: url("../../../../assets/images/big/v3/boxcenter-top.png");
   }
   .mk-center-t1 {
     width: 100%;
@@ -108,7 +108,7 @@ export default {
 
   .mk-center-t2 {
     width: 100%;
-    background-image: url("../../../../assets/images/big/v3/boxgao-c.png");
+    background-image: url("../../../../assets/images/big/v3/boxbottom-center.png");
     background-size: contain;
     padding-top: 10px;
     padding: 5px;
@@ -117,7 +117,7 @@ export default {
 
   .mk-center-t3 {
     width: 100%;
-    background-image: url("../../../../assets/images/big/v3/boxmap-c.png");
+    background-image: url("../../../../assets/images/big/v3/boxcenter-center.png");
     background-size: contain;
     padding-top: 10px;
     padding: 5px;
@@ -136,14 +136,14 @@ export default {
   .mk-bottom-t2 {
     height: 35px;
     width: 100%;
-    background-image: url("../../../../assets/images/big/v3/boxgao-b.png");
+    background-image: url("../../../../assets/images/big/v3/boxbottom-bottom.png");
     background-size: 100% 100%;
   }
   .mk-bottom-t3 {
     height: 35px;
     height: 28px;
     width: 100%;
-    background-image: url("../../../../assets/images/big/v3/boxmap-b.png");
+    background-image: url("../../../../assets/images/big/v3/boxcenter-bottom.png");
     background-size: 100% 100%;
   }
 }

src/views/bigScreen/v3/profile/projectCountTemp.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="big-project-count">
+    <nav-temp htmlType="t1" :title="title">
+      <div slot="mk-center" style="height: 220px; width: 100%">
+        <census-card
+          :activityList="tableList"
+          :countNum="countNum"
+          :countUnit="unit"
+          :props="props"
+          :icon="icon"
+        ></census-card>
+      </div>
+    </nav-temp>
+  </div>
+</template>
+<script>
+import CensusCard from "@/components/Cards/CensusCard";
+import NavTemp from "./navTemp";
+export default {
+  name: "ProjectCountTemp",
+  components: {
+    NavTemp,
+    CensusCard,
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    tableList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    unit: {
+      type: String,
+      default: ''
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          lebel: "label",
+          key: "key",
+          value: "value",
+        }
+      }
+    },
+    countNum: {
+      type: [String,Number],
+      default: () => {
+        return 0
+      }
+    },
+    icon: {
+      type: String,
+      default: () => {
+        return '/static/img/icon01.08d77e5b.png'
+      }
+    }
+  },
+  data() {
+    return {
+      countNum: 3456.7,
+      icons: '/static/img/icon01.08d77e5b.png',
+      prop: {
+        lebel: "label",
+        key: "key",
+        value: "value",
+      },
+      countUnit: "（吨标准煤）",
+      list: [
+        {
+          value: "112-55656",
+          label: "子項目名稱B",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱A",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱B",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱A",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱B",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱A",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱V",
+        },
+        {
+          value: "112-5565",
+          label: "子項目名稱A",
+        },
+      ],
+    };
+  },
+  watch: {
+    projectId(val) {
+      this.getDeviceProportionList();
+    },
+  },
+  created() {
+    this.getDeviceProportionList();
+  },
+  methods: {
+    getDeviceProportionList() {},
+  },
+};
+</script>
+<style lang="scss">
+.big-project-count {
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 2px;
+  .count-info {
+    width: 100%;
+    height: 240px;
+    padding-top: 10px;
+  }
+}
+</style>

src/views/bigScreen/v3/profile/trend.vue

@@ -31,7 +31,7 @@ export default {
         colorList: ["#FC6A16", "#1EEEFF"],
         eId: "trendEchartsLine",
       },
-      title: "报警预警趋势",
+      title: "实时用能分析",
       typeName: "alarm",
       resultOption: {
         color: ["#FC6A16", "#1EEEFF"],
@@ -147,14 +147,12 @@ export default {
 <style lang="scss">
 .big-trend-wrap-v3 {
   width: 100%;
-  // height: 300px;
   display: flex;
   flex-wrap: wrap;
-  // margin-top: 10px;
 
   .trend-conter {
     width: 100%;
-    height: 260px;
+    height: 280px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;

src/views/bigScreen/v3/profile/typeDistribution.vue

@@ -170,7 +170,7 @@ export default {
   flex-wrap: wrap;
   .conter-block {
     width: 100%;
-    height: 208px;
+    height: 288px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;

src/views/bigScreen/v3/profile/wraringInfo.vue

@@ -2,28 +2,28 @@
   <div class="big-wraring-info-wrap">
     <nav-temp htmlType="t1" :title="title">
       <div class="conter-block" slot="mk-center">
-        <census-temp-a
+        <census-temp-b
           v-for="(item, idx) in radarOption2"
           :key="idx"
           :icolor="item.icolor"
           :title="item.title"
           :value="result[item.key] || 0"
           :icons="item.icons"
-        ></census-temp-a>
+          style="width: calc((100% - 20px) / 2)"
+        ></census-temp-b>
       </div>
     </nav-temp>
   </div>
 </template>
 <script>
-import EchartsBarWrap from "./echartsBar";
 import NavTemp from "./navTemp";
 import CensusTempA from "./censusTempA";
+import censusTempB from "./censusTempB"
 export default {
   name: "wraringInfoWrap",
   components: {
-    EchartsBarWrap,
     NavTemp,
-    CensusTempA,
+    censusTempB,
   },
   props: ["result", 'countResult'],
   data() {
@@ -45,13 +45,6 @@ export default {
           value: "456",
           key: 'pwTotal'
         },
-        {
-          icolor: "#F1E156",
-          icons: "iconfugaidq",
-          title: "覆盖地区(个)",
-          value: "456",
-          key: 'projectTotal'
-        },
         {
           icolor: "#4FFFFF",
           icons: "iconqunchengyuan",
@@ -66,6 +59,13 @@ export default {
           value: "456",
           key: 'deviceTotal'
         },
+        {
+          icolor: "#F1E156",
+          icons: "iconfugaidq",
+          title: "覆盖地区(个)",
+          value: "456",
+          key: 'projectTotal'
+        },
         {
           icolor: "#00FF48",
           icons: "iconshebei",
@@ -98,11 +98,11 @@ export default {
 </script>
 <style lang="scss">
 .big-wraring-info-wrap {
-  width: 400px;
-  height: 350px;
+  height: 190px;
+  width: calc((100% - 20px) / 2);
   .conter-block {
     width: 100%;
-    height: 290px;
+    height: 190px;
     background-size: contain;
     padding-top: 10px;
     padding: 5px;
@@ -110,6 +110,8 @@ export default {
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
+    align-items: center;
+    padding: 5px 35px;
     .count-block {
       width: calc(100% - 40px);
       height: 180px;