提交：监控大屏 代码

package.json

@@ -42,7 +42,7 @@
     "core-js": "3.8.1",
     "cron-parser": "^3.3.0",
     "debounce": "^1.2.1",
-    "echarts": "5.0.2",
+    "echarts": "^5.3.3",
     "element-ui": "2.14.1",
     "file-saver": "2.0.4",
     "fuse.js": "6.4.3",
@@ -68,6 +68,7 @@
     "vue-cron-editor-buefy": "^0.2.17",
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"
   },

public/js/config.js

@@ -3,5 +3,6 @@ window.dasConfig = {
   ip: '192.168.10.241',
   port: 30646,
   prodApi: '/prod-api',
-  protocol: 'http://'
+  protocol: 'http://',
+  wsProtocol: 'ws://'
 }

src/components/Cards/CensusCard.vue

@@ -10,7 +10,7 @@
         <img :src="icon" />
       </div>
       <div class="bit-right">
-        <div
+        <!-- <div
           class="b_list"
           :id="'publishMain' + elementId"
           v-show="activityList && activityList.length > 0"
@@ -26,7 +26,63 @@
             </div>
           </div>
           <div :id="'publishMain2' + elementId"></div>
-        </div>
+        </div> -->
+
+        <vue-seamless-scroll
+          :data="activityList"
+          class="b_list"
+          :class-option="classOption"
+          v-show="activityList && activityList.length > 0"
+          :id="'publishMain' + elementId"
+          style="overflow: hidden"
+        >
+          <div style="width: 100%">
+            <div
+              v-for="(item, index) in activityList"
+              :key="index"
+              style="
+                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;
+              "
+            >
+              <span
+                class="b-label"
+                style="
+                  display: block;
+                  width: calc(100% - 85px);
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+                :title="item[props['label']]"
+                >{{ item[props["label"]] }}</span
+              >
+              <span
+                style="
+                  display: block;
+                  width: 80px;
+                  margin-left: 5px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  font-weight: 400;
+                  color: #00feff;
+                  font-size: 16px;
+                  text-align: center;
+                "
+                :title="item[props['value']]"
+                >{{ item[props["value"]] }}</span
+              >
+            </div>
+          </div>
+        </vue-seamless-scroll>
         <!-- <el-empty v-else :image-size="200"></el-empty> -->
         <div
           style="
@@ -45,8 +101,12 @@
   </div>
 </template>
 <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
 export default {
   name: "CensusCard",
+  components: {
+    vueSeamlessScroll,
+  },
   props: {
     icon: {
       type: String,
@@ -83,34 +143,48 @@ export default {
       elementId: "",
     };
   },
+  computed: {
+    classOption() {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: this.activityList.length < 4 ? 4 : this.activityList.length, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 100, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
+  },
   mounted() {
-    this.$nextTick(() => {
+    // this.$nextTick(() => {
-      this.rollUp();
+    //   this.rollUp();
-    });
+    // });
   },
   beforeDestroy() {
     this.timer = null;
-    clearInterval(this.timer);
+    // clearInterval(this.timer);
   },
   created() {
     this.elementId = new Date().getTime();
   },
   methods: {
-    rollUp() {
+    // rollUp() {
-      let ul1 = document.getElementById("publishMain1" + this.elementId);
+    //   let ul1 = document.getElementById("publishMain1" + this.elementId);
-      let ul2 = document.getElementById("publishMain2" + this.elementId);
+    //   let ul2 = document.getElementById("publishMain2" + this.elementId);
-      let box = document.getElementById("publishMain" + this.elementId);
+    //   let box = document.getElementById("publishMain" + this.elementId);
-      ul2.innerHTML = ul1.innerHTML;
+    //   ul2.innerHTML = ul1.innerHTML;
-      box.scrollTop = 0;
+    //   box.scrollTop = 0;
-      function rollStart() {
+    //   function rollStart() {
-        if (box.scrollTop >= ul1.scrollHeight) {
+    //     if (box.scrollTop >= ul1.scrollHeight) {
-          box.scrollTop = 0;
+    //       box.scrollTop = 0;
-        } else {
+    //     } else {
-          box.scrollTop++;
+    //       box.scrollTop++;
-        }
+    //     }
-      }
+    //   }
-      this.timer = setInterval(rollStart, 100);
+    //   this.timer = setInterval(rollStart, 100);
-    },
+    // },
   },
 };
 </script>
@@ -212,11 +286,6 @@ export default {
           }
         }
       }
-
-      .b_scroll {
-        -webkit-animation: 10s scrollTop linear infinite normal;
-        animation: 10s scrollTop linear infinite normal;
-      }
     }
   }
 }

src/components/Cards/ENavCardBigScreen.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="e-nav-big-card" :style="htmlType === 't2' ? 'margin-top: 10px;' : ''">
+    <div :class="htmlTop">{{ title }}</div>
+    <div :class="htmlCenter">
+      <slot name="mk-center"></slot>
+    </div>
+    <div :class="htmlBottom"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ENavCardBigScreen",
+  props: {
+    title: {
+      type: String,
+      defautl: "",
+    },
+    htmlType: {
+      type: String,
+      default: "t1",
+    },
+  },
+  data() {
+    return {
+      htmlTop: "",
+      htmlCenter: "",
+      htmlBottom: "",
+    };
+  },
+  created() {
+    this.returnType();
+  },
+  methods: {
+    returnType() {
+      switch (this.htmlType) {
+        case "t1":
+          this.htmlTop = "mk-top mk-top-t1";
+          this.htmlCenter = "mk-center-t1";
+          this.htmlBottom = "mk-bottom-t1";
+          break;
+
+        case "t2":
+          this.htmlTop = "mk-top mk-top-t2";
+          this.htmlCenter = "mk-center-t2";
+          this.htmlBottom = "mk-bottom-t2";
+          break;
+
+        case "t3":
+          this.htmlTop = "mk-top mk-top-t3";
+          this.htmlCenter = "mk-center-t3";
+          this.htmlBottom = "mk-bottom-t3";
+          break;
+      }
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="scss">
+.e-nav-big-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  .mk-top {
+    height: 35px;
+    width: 100%;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    font-size: 17px;
+    font-family: "Source Han Sans CN";
+    font-weight: 600;
+    color: #02d9fd;
+    padding-left: 0;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 0px;
+    align-items: center;
+    background-size: 100% 100%;
+  }
+  .mk-top-t1 {
+    background-image: url("../../../../assets/images/big/v3/boxleft-top.png");
+  }
+  .mk-top-t2 {
+    background-image: url("../../../../assets/images/big/v3/boxbottom-top.png");
+  }
+  .mk-top-t3 {
+    height: 28px;
+    background-image: url("../../../../assets/images/big/v3/boxcenter-top.png");
+  }
+  .mk-center-t1 {
+    width: 100%;
+    background-image: url("../../../../assets/images/big/v3/boxleft-center.png");
+    background-size: contain;
+    padding-top: 10px;
+    padding: 5px;
+    display: flex;
+    padding: 0 20px;
+    background-size: 100% 100%;
+  }
+
+  .mk-center-t2 {
+    width: 100%;
+    background-image: url("../../../../assets/images/big/v3/boxbottom-center.png");
+    background-size: contain;
+    padding-top: 10px;
+    padding: 5px;
+    display: flex;
+  }
+
+  .mk-center-t3 {
+    width: 100%;
+    background-image: url("../../../../assets/images/big/v3/boxcenter-center.png");
+    background-size: contain;
+    padding-top: 10px;
+    padding: 5px;
+    display: flex;
+    padding: 0 20px;
+    padding: 0;
+    height: calc(100% - 56px);
+  }
+
+  .mk-bottom-t1 {
+    height: 35px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/v3/boxleft-bottom.png");
+    background-size: 100% 100%;
+  }
+  .mk-bottom-t2 {
+    height: 35px;
+    width: 100%;
+    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/boxcenter-bottom.png");
+    background-size: 100% 100%;
+  }
+}
+</style>

src/components/Echarts/EEchartsLine.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="bigscreen-echarts-pie-t">
+  <div class="e-echarts-line">
     <div :id="eId" :style="styles"></div>
   </div>
 </template>
 <script>
 import * as echarts from "echarts";
 export default {
-  name: "echartsRadarWrap",
+  name: "EEchartsLine",
   props: {
     eId: {
       type: String
@@ -57,10 +57,10 @@ export default {
 };
 </script>
 <style lang="scss">
-.bigscreen-echarts-pie-t {
+.e-echarts-line {
   position: relative;
   height: 100%;
   top: 0px;
-  width: 95%;
+  width: 100%;
 }
 </style>

src/config/env.js

@@ -9,6 +9,8 @@ let sysWebSocket = 'ws://'
 let prodApi = window.dasConfig.ip || '/prod-api';
 let wsProtocol = 'ws://';
 let iotWebSocketAlarmBaseUrl = ''
+let bigWebSocketUrl = ''
+let port = '8899'
 
 window.dasConfig = {
   ip: 'http://192.168.10.241:32024'
@@ -24,7 +26,7 @@ let httpProtocol = 'http';
 
 if (env.NODE_ENV == 'development') {
   flowIotUrl = 'http://127.0.0.1:1880/#flow/'
-  hrefHost = "192.168.18.139"
+  hrefHost = "192.168.18.140"
 } else if(env.NODE_ENV == 'production') {
   // if (hrefHost.indexOf('.gkiiot.com') >= 0) {
   //   iotHost = 'iot.gkiiot.com'
@@ -35,9 +37,11 @@ if (env.NODE_ENV == 'development') {
   if (window.dasConfig.ip) {
     hrefHost = window.dasConfig.ip
   }
+  port = window.dasConfig.port
 } else if(env.NODE_ENV == 'test') {
 }
 iotWebSocketAlarmBaseUrl = sysWebSocket + hrefHost  + ':8899/ws/alarm/live'
+bigWebSocketUrl = sysWebSocket + hrefHost + ( port ? ':'+ port :'') + '/ws/dev/readData'
 sysWebSocket = sysWebSocket + hrefHost + prodApi;
 iotWebSocketBaseUrl = sysWebSocket + '/ws/dev/up/'
 devLiveWebSocketBaseUrl = sysWebSocket + '/ws/dev/live/'
@@ -49,5 +53,6 @@ export {
   iotWebSocketBaseUrl,
   iotWebSocketAlarmBaseUrl,
   devLiveWebSocketBaseUrl,
-  prodApi
+  prodApi,
+  bigWebSocketUrl
 }

src/utils/request.js

@@ -9,7 +9,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: process.env.NODE_ENV === "production" ?  `${window.dasConfig.protocol}${window.dasConfig.ip}:${window.dasConfig.port}` : process.env.VUE_APP_BASE_API,
+  baseURL: process.env.NODE_ENV === "production" ?  `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}` : process.env.VUE_APP_BASE_API,
   // 超时
   timeout: 10000
 })

src/views/bigScreen/v3/index.vue

@@ -11,18 +11,18 @@
     }"
   >
     <div class="main-block">
-      <head-wrap
+      <e-head
         ref="mainHead"
         :handelTile="title"
         :projectList="projectList"
         @eventFullscreen="eventFullscreen"
         @eventProjectId="eventProjectId"
         @eventRegionalismId="eventRegionalismId"
-      ></head-wrap>
+      />
       <div class="count-wrap">
         <div class="count-left">
           <div class="left-block-1">
-            <project-count-temp
+            <e-project-census-temp
               :props="{
                 label: 'spaceName',
                 key: 'spaceId',
@@ -32,10 +32,10 @@
               icon="/images/icon01.png"
               unit="（吨标准煤）"
               :tableList="projectSpaceCensusList"
-              :countNum="projectStatInfo['coal']"
+              :countNum="(projectStatInfo['coal'] / 1000).toFixed(2) || 0"
-            ></project-count-temp>
+            ></e-project-census-temp>
 
-            <project-count-temp
+            <e-project-census-temp
               :props="{
                 label: 'spaceName',
                 key: 'spaceId',
@@ -45,10 +45,12 @@
               icon="/images/icon02.png"
               unit="（万kwh）"
               :tableList="projectSpaceCensusList"
-              :countNum="projectStatInfo['ELECTRICITY_METER']"
+              :countNum="
-            ></project-count-temp>
+                (projectStatInfo['ELECTRICITY_METER'] / 10000).toFixed(2) || 0
+              "
+            ></e-project-census-temp>
 
-            <trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
+            <e-trend-census :result="actualEnergyCensus" />
           </div>
           <div
             class="map-block-1"
@@ -74,7 +76,7 @@
             ></map-wrap-personal>
 
             <div
-              style="width: 100%; display: flex; justify-content: space-between;"
+              style="width: 100%; display: flex; justify-content: space-between"
             >
               <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
 
@@ -83,41 +85,33 @@
               ></device-proportion-wrap>
             </div>
           </div>
-          <!-- <div class="bottom-block-1">
-            <alarm-table-list-wrap
-              :result="alarmInfoResult"
-              style="margin-top: -5px"
-              :projectId="projectId"
-            ></alarm-table-list-wrap>
-          </div> -->
         </div>
         <div class="right-block-1">
-          <!-- <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap> -->
+          <e-project-census-temp
-          <project-count-temp
+            :props="{
-              :props="{
+              label: 'spaceName',
-                label: 'spaceName',
+              key: 'spaceId',
-                key: 'spaceId',
+              value: 'WATER_METER',
-                value: 'WATER_METER',
+            }"
-              }"
+            title="年度用水"
-              title="年度用水"
+            icon="/images/icon03.png"
-              icon="/images/icon03.png"
+            unit="（万吨）"
-              unit="（万吨）"
+            :tableList="projectSpaceCensusList"
-              :tableList="projectSpaceCensusList"
+            :countNum="(projectStatInfo['WATER_METER'] / 10000).toFixed(2) || 0"
-              :countNum="projectStatInfo['WATER_METER']"
+          ></e-project-census-temp>
-            ></project-count-temp>
 
-          <project-count-temp
+          <e-project-census-temp
-              :props="{
+            :props="{
-                label: 'spaceName',
+              label: 'spaceName',
-                key: 'spaceId',
+              key: 'spaceId',
-                value: 'GAS_METER',
+              value: 'GAS_METER',
-              }"
+            }"
-              title="年度用气"
+            title="年度用气"
-              icon="/images/icon04.png"
+            icon="/images/icon04.png"
-              unit="（万m³）"
+            unit="（万m³）"
-              :tableList="projectSpaceCensusList"
+            :tableList="projectSpaceCensusList"
-              :countNum="projectStatInfo['GAS_METER']"
+            :countNum="(projectStatInfo['GAS_METER'] / 10000).toFixed(2) || 0"
-            ></project-count-temp>
+          ></e-project-census-temp>
 
           <type-distribution-wrap
             style="margin-top: -5px"
@@ -130,35 +124,37 @@
 </template>
 
 <script>
-import HeadWrap from "./profile/head";
+import EHead from "./profile/EHead";
 import DeviceProportionWrap from "./profile/deviceProportion";
 import WraringInfoWrap from "./profile/wraringInfo";
 import AlarmTableListWrap from "./profile/alarmTableList";
-import TodayRatioWrap from "./profile/todayRatio";
+// import ETodayRatio from "./profile/ETodayRatio";
 import TypeDistributionWrap from "./profile/typeDistribution";
-import trendWrap from "./profile/trend";
+import ETrendCensus from "./profile/ETrendCensus";
 import MapWrap from "./profile/mapWrap";
 import MapWrapPersonal from "./profile/personalCenter";
-import { iotWebSocketAlarmBaseUrl } from "@/config/env";
+import { bigWebSocketUrl } from "@/config/env";
 import Cookies from "js-cookie";
-import { NextLoading } from "@/utils/loading";
+import EProjectCensusTemp from "./profile/EProjectCensusTemp";
-import ProjectCountTemp from "./profile/projectCountTemp"
 
 import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
-import { getEnergySpaceCensusList, getEnergyCensusList } from '@/api/bigScreen/index'
+import {
+  getEnergySpaceCensusList,
+  getEnergyCensusList,
+} from "@/api/bigScreen/index";
 export default {
   name: "Device_oneself",
   components: {
-    HeadWrap,
+    EHead,
     DeviceProportionWrap,
     WraringInfoWrap,
     AlarmTableListWrap,
-    TodayRatioWrap,
+    // ETodayRatio,
     TypeDistributionWrap,
-    trendWrap,
+    ETrendCensus,
     MapWrap,
     MapWrapPersonal,
-    ProjectCountTemp
+    EProjectCensusTemp,
   },
   data() {
     return {
@@ -177,7 +173,9 @@ export default {
       socket_flag: true,
       setIntervalGetCountOpt: null,
       projectStatInfo: {},
-      projectSpaceCensusList: []
+      projectSpaceCensusList: [],
+      actualEnergyCensus: [],
+      setTimeOut_flag: null,
     };
   },
   mounted() {
@@ -218,56 +216,69 @@ export default {
     this.getProjectList();
     this.warningAnalysisList();
     this.homeCount();
-    this.getEnergyCensus()
+    this.getEnergyCensus();
-    this.getEnergySpaceCensus()
+    this.getEnergySpaceCensus();
-    // this.connection();
+    this.connection();
   },
 
   methods: {
     // 查询 能源数据状态情况
     getEnergyCensus() {
       getEnergyCensusList({
-        projectId: this.projectId
+        projectId: this.projectId,
-      }).then(res => {
+      }).then((res) => {
-        this.projectStatInfo = res.data || {}
+        this.projectStatInfo = res.data || {};
-      })
+      });
     },
     // 查询 能源数据 空间统计
     getEnergySpaceCensus() {
-      this.projectSpaceCensusList = []
+      this.projectSpaceCensusList = [];
       getEnergySpaceCensusList({
-        projectId: this.projectId
+        projectId: this.projectId,
-      }).then(res => {
+      }).then((res) => {
-        console.log(res)
+        console.log(res);
-        this.projectSpaceCensusList = res.data || []
+        this.projectSpaceCensusList = res.data || [];
-      })
+      });
     },
     // 创建一个ws 监听获取报警实时数据
     connection() {
       if (this.stompClient) {
         return;
       }
-      if (!iotWebSocketAlarmBaseUrl) {
+      if (!bigWebSocketUrl) {
         return;
       }
-      this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}`);
+      this.stompClient = new WebSocket(
+        `${bigWebSocketUrl}/${this.projectId || -1}`
+      );
       this.stompClient.onmessage = this.socket_onmsg;
       this.stompClient.onclose = this.socket_onclose;
     },
     socket_onmsg(evt) {
       console.log("wsljcg:=", evt);
+      const data = JSON.parse(evt.data);
+      this.actualEnergyCensus = data.params || {};
+      this.$forceUpdate();
     },
     socket_onclose(e) {
       this.stompClient = null;
       if (this.socket_flag) {
         this.socket_flag = false;
         let _this = this;
-        setTimeout(function () {
+        this.setTimeOut_flag = setTimeout(function () {
           _this.socket_flag = true;
           _this.connection();
         }, 10000);
       }
     },
+    closeWebscoket() {
+      if (this.stompClient) {
+        this.stompClient.close();
+      }
+      this.socket_flag = false;
+      this.stompClient = null;
+      clearTimeout(this.setTimeOut_flag);
+    },
     // 跳转路由是关闭全屏状态
     eventFullscreenMap(data) {
       this.fullscreen = data.value;
@@ -281,8 +292,10 @@ export default {
       this.projectId = data;
       this.homeCount();
       this.warningAnalysisList();
-      this.getEnergyCensus()
+      this.getEnergyCensus();
-      this.getEnergySpaceCensus()
+      this.getEnergySpaceCensus();
+      this.closeWebscoket();
+      this.connection();
     },
     eventRegionalismId(data) {
       this.regionalismId = data;
@@ -347,6 +360,7 @@ export default {
     },
   },
   destroyed() {
+    this.closeWebscoket()
     document.getElementById("app").style.background = "#fff";
     document.getElementById("con_lf_top_div").style.background = "#fff";
     document.getElementById("con_lf_top_div").style.overflow = "auto";

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

@@ -48,7 +48,7 @@ import { treeListRegionalism } from "@/api/system/regionalism";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
-  name: "bigHeadWrap",
+  name: "EHead",
   props: ["handelTile", "projectList"],
   components: {
     Treeselect

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

@@ -17,7 +17,7 @@
 import CensusCard from "@/components/Cards/CensusCard";
 import NavTemp from "./navTemp";
 export default {
-  name: "ProjectCountTemp",
+  name: "EProjectCensusTemp",
   components: {
     NavTemp,
     CensusCard,

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

@@ -31,7 +31,7 @@
 import EchartsGaugeWrap from "./echartsGauge";
 import NavTemp from "./navTemp";
 export default {
-  name: "todayRatio",
+  name: "ETodayRatio",
   components: {
     EchartsGaugeWrap,
     NavTemp,

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

@@ -1,26 +1,26 @@
 <template>
-  <div class="big-trend-wrap-v3">
+  <div class="big-e-trend-census">
     <nav-temp htmlType="t1" :title="title">
       <div class="trend-conter" slot="mk-center">
-        <echarts-line-wrap
+        <e-echarts-line
           ref="echartsLineTrend"
           :styles="echartsOption.styles"
           :colorList="echartsOption.colorList"
           :eId="echartsOption.eId"
           :option="resultOption"
-        ></echarts-line-wrap>
+        />
       </div>
     </nav-temp>
   </div>
 </template>
 <script>
-import echartsLineWrap from "./echartsLineT";
+import EEchartsLine from "@/components/Echarts/EEchartsLine";
 import * as echarts from "echarts";
 import NavTemp from "./navTemp";
 export default {
-  name: "typeDistribution",
+  name: "ETrendCensus",
   components: {
-    echartsLineWrap,
+    EEchartsLine,
     NavTemp,
   },
   props: ["result"],
@@ -28,13 +28,13 @@ export default {
     return {
       echartsOption: {
         styles: "width: 100%; height: 100%;",
-        colorList: ["#FC6A16", "#1EEEFF"],
+        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
         eId: "trendEchartsLine",
       },
       title: "实时用能分析",
       typeName: "alarm",
       resultOption: {
-        color: ["#FC6A16", "#1EEEFF"],
+        color: ["#1890FF", "#EE6666", "#FFCC00"],
         title: {
           text: "",
           show: false,
@@ -45,11 +45,12 @@ export default {
         legend: {
           top: 5,
           right: 5,
-          data: ["报警", "预警"],
+          data: ["用水", "用电", "用气"],
-          icon: "circle",
+          // icon: "circle",
           textStyle: {
             color: "#fff",
-            fontSize: 16,
+            fontSize: 12,
+            fontWeight: 400
           },
         },
         grid: {
@@ -88,21 +89,28 @@ export default {
         },
         series: [
           {
-            name: "报警",
+            name: "用水",
             type: "line",
-            smooth: true,
+            smooth: false,
-            symbolSize: 12,
+            symbolSize: 2,
-            areaStyle: {
+            // areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
+            //     {
-                  offset: 0,
+            //       offset: 0,
-                  color: "rgba(252,106,22,0.8)",
+            //       color: "rgba(252,106,22,0.8)",
-                },
+            //     },
-                {
+            //     {
-                  offset: 1,
+            //       offset: 1,
-                  color: "rgba(252,106,22,0.1)",
+            //       color: "rgba(252,106,22,0.1)",
-                },
+            //     },
-              ]),
+            //   ]),
+            // },
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
             },
             label: {
               show: false,
@@ -114,10 +122,38 @@ export default {
             data: [],
           },
           {
-            name: "预警",
+            name: "用电",
             type: "line",
             smooth: false,
-            symbolSize: 12,
+            symbolSize: 2,
+            label: {
+              show: false,
+              formatter: function (params) {
+                return echarts.format.formatTime("yyyy-MM-dd", params.value);
+              },
+              backgroundColor: "#7581BD",
+            },
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            data: [],
+          },
+          {
+            name: "用气",
+            type: "line",
+            smooth: true,
+            symbolSize: 2,
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
             data: [],
           },
         ],
@@ -127,9 +163,11 @@ export default {
   watch: {
     result: {
       handler: function (val, oldVal) {
+        console.log('result---:', val)
         this.resultOption.xAxis.data = val["name"];
-        this.resultOption.series[0].data = val["alarm"];
+        this.resultOption.series[0].data = val["ELECTRICITY_METER"];
-        this.resultOption.series[1].data = val["warning"];
+        this.resultOption.series[1].data = val["WATER_METER"];
+        this.resultOption.series[2].data = val["GAS_METER"];
         this.updateEcharts();
       },
       deep: true,
@@ -145,7 +183,7 @@ export default {
 </script>
 
 <style lang="scss">
-.big-trend-wrap-v3 {
+.big-e-trend-census {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -158,7 +196,7 @@ export default {
     justify-content: center;
     padding-top: 10px;
     background-size: contain;
-    padding: 25px 0;
+    // padding: 25px 0;
     .tabs-block {
       width: 305px;
       height: 38px;

src/views/iot/project/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container iot-project">
-    <component :is="componectVal" :sourceId="sourceId"></component>
+    <component :is="componectVal" :sourceId="sourceId" @linkToTable="linkToTable"></component>
 
     <div v-show="componectVal === ''">
       <el-form
@@ -274,9 +274,9 @@
       </div>
     </el-dialog>
 
-    <div class="to-home-wrap2" @click="toTableClick" v-show="componectVal !== ''">
+    <!-- <div class="to-home-wrap2" @click="toTableClick" v-show="componectVal !== ''">
       <el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -303,13 +303,17 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import SelectTableWrap from "@/components/SelectTable/index";
 
+/////、、、、、、、、、、、、、、、、、、、、
+import DetailsWrapNew from './profileV2/details'
+
 export default {
   name: "Project",
   components: {
     ShopLocation,
     Treeselect,
     DetailsWrap,
-    SelectTableWrap
+    SelectTableWrap,
+    DetailsWrapNew
   },
   data() {
     return {
@@ -643,10 +647,10 @@ export default {
     },
     handleDetails(row) {
       this.sourceId = row.projectId;
-      this.componectVal = "DetailsWrap";
+      this.componectVal = "DetailsWrapNew";
     },
     // 跳转详情页
-    toTableClick() {
+    linkToTable() {
       if (this.$route.query['projectId']) {
         this.$router.push('/project/project')
       }

src/views/iot/region/profile/BuildingSpace.vue

@@ -26,13 +26,12 @@
       </el-form-item>
       <el-form-item label="建筑类型" prop="buildingType">
         <el-select v-model="queryParams.buildingType" placeholder="建筑类型" clearable>
-          <!-- <el-option label="请选择字典生成" value="" /> -->
           <el-option
-            v-for="dict in spaceTypeOptions"
+              v-for="dict in buildingTypeList"
-            :key="dict.dictValue"
+              :key="dict.buildingTypeCode"
-            :label="dict.dictLabel"
+              :label="dict.buildingTypeName"
-            :value="dict.dictValue"
+              :value="dict.buildingTypeCode"
-          ></el-option>
+            ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -89,14 +88,13 @@
         <el-form-item label="建筑编码:" prop="buildingCode">
           <el-input v-model="form.buildingCode" placeholder="请输入建筑编码" />
         </el-form-item>
-        <el-form-item label="类型:" prop="buildingType">
+        <el-form-item label="建筑类型:" prop="buildingType">
-          <el-select v-model="form.buildingType" style="width: 100%;" placeholder="请选择建筑类型">
+          <el-select v-model="form.buildingType" filterable style="width: 100%;" placeholder="请选择建筑类型">
-            <!-- <el-option label="请选择字典生成" value="" /> -->
             <el-option
-              v-for="dict in spaceTypeOptions"
+              v-for="dict in buildingTypeList"
-              :key="dict.dictValue"
+              :key="dict.buildingTypeCode"
-              :label="dict.dictLabel"
+              :label="dict.buildingTypeName"
-              :value="dict.dictValue"
+              :value="dict.buildingTypeCode"
             ></el-option>
           </el-select>
         </el-form-item>
@@ -115,11 +113,10 @@
       top="10vh"
       :close-on-click-modal="false"
     >
-      <!-- <space-device-wrap
+      <building-device
         v-if="selectTableShow"
-        :sourceId="sourceId"
+        :buildingCode="buildingInfo.buildingCode"
-        :buildingCode="infoData.buildingCode"
+      ></building-device>
-      ></space-device-wrap> -->
 
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="() =>{selectTableShow = false}">确 定</el-button>
@@ -138,7 +135,10 @@ import {
   updateBuildings,
   listRegionSpaceTree
 } from "@/api/iot/regionSpace";
-// import SpaceDeviceWrap from "./spaceDevice";
+import {
+  listType
+} from "@/api/iot/buildingType";
+import BuildingDevice from "./BuildingDevice";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
@@ -146,7 +146,7 @@ export default {
   name: "Space",
   components: {
     Treeselect,
-    // SpaceDeviceWrap
+    BuildingDevice
   },
   props: ["infoData"],
   data() {
@@ -178,23 +178,31 @@ export default {
       spaceTypeOptions: [],
       querySpaceOptions: [],
       sourceId: "",
-      spaceDeviceTitle: ""
+      spaceDeviceTitle: "",
+      buildingTypeList: [],
+      buildingInfo: {}
     };
   },
   created() {
-    this.getDicts("space_type").then(response => {
-      this.spaceTypeOptions = response.data;
-    });
     this.getQueryTreeselect();
+    this.getBuildingTypeList();
     this.getList();
   },
   methods: {
     indexFormatter(val) {
       return val + 1;
     },
+    getBuildingTypeList() {
+      listType({
+        pageNum: 1,
+        pageSize: 10
+      }).then(res => {
+        this.buildingTypeList = res.rows
+      })
+    },
     // 打开厂商选择窗口 ——表格
     handleDetails(row) {
-      this.sourceId = row.spaceId;
+      this.buildingInfo = row
       this.spaceDeviceTitle = `[ ${row.buildingName} ] 建筑--设备管理`;
       this.selectTableShow = true;
     },
@@ -208,7 +216,6 @@ export default {
       this.queryParams.regionCode = this.infoData.regionCode;
       listBuildings(this.queryParams).then(response => {
         this.spaceList = this.handleTree(response.rows, "buildingCode", "parentCode");
-        console.log('----', this.spaceList)
         this.loading = false;
       });
     },
@@ -276,6 +283,7 @@ export default {
         regionCode: this.infoData.regionCode
       };
       this.getTreeselect(param);
+      this.getBuildingTypeList();
       this.open = true;
       this.title = "添加建筑";
     },
@@ -287,6 +295,7 @@ export default {
         buildingCode: row.buildingCode
       };
       this.getTreeselect(param);
+      this.getBuildingTypeList();
       if (row != null) {
         this.form.regionCode = row.regionCode;
       }

src/views/iot/region/profile/details.vue

@@ -8,23 +8,29 @@
         </div>
       </el-tab-pane>
 
-      <el-tab-pane label="区域空间" name="space">
+      <el-tab-pane label="区域建筑" name="space">
         <div class="tabs-body">
           <building-space v-if="activeName === 'space' && infoData" :infoData="infoData"></building-space>
         </div>
       </el-tab-pane>
 
+      <!-- <el-tab-pane label="设备管理" name="type">
+        <div class="tabs-body">
+          <building-type v-if="activeName === 'type' && infoData" :infoData="infoData" />
+        </div>
+      </el-tab-pane> -->
+
       <!-- <el-tab-pane label="项目租户" name="tenant">
         <div class="tabs-body">
           <tenant-wrap v-if="activeName === 'tenant'" :infoData="infoData" />
         </div>
-      </el-tab-pane>
+      </el-tab-pane> -->
 
       <el-tab-pane label="设备列表" name="allDevice">
         <div class="tabs-body">
           <device-list-wrap v-if="activeName === 'allDevice'" :sourceId="infoData.projectId" />
         </div>
-      </el-tab-pane> -->
+      </el-tab-pane> 
     </el-tabs>
   </div>
 </div>
@@ -35,12 +41,14 @@ import {
 } from "@/api/iot/region";
 import Info from './Info'
 import BuildingSpace from './BuildingSpace'
+import BuildingType from './BuildingType'
 export default {
   name: 'DetailsWrap',
   props: ['sourceKey'],
   components: {
     Info,
-    BuildingSpace
+    BuildingSpace,
+    BuildingType
   },
   data() {
     return {
@@ -50,7 +58,7 @@ export default {
   },
   created() {
     this.getInfoByProjectId()
-    this.activeName = 'space'
+    this.activeName = 'info'
   },
   methods: {
     getInfoByProjectId() {

src/views/iot/region/profile/table.vue

@@ -267,15 +267,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-
+        
-        <!-- <el-form-item label="总路设备:">
-          <el-input
-            v-model="form.projectDeviceName"
-            suffix-icon="el-icon-caret-bottom"
-            @focus="openTableSelectDialog()"
-            placeholder="请输入总路设备"
-          />
-        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm"