站点分布接口对接完成

public/static/config.js

@@ -4,13 +4,14 @@ var PLATFROM_CONFIG = {};
 // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/" //超博本地
 
 if (window.location.host.indexOf('localhost') != -1 || window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
-    // PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上--->测试
-    // PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
-    // PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
+
     
-    PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
+    PLATFROM_CONFIG.baseUrl = "http://192.168.20.140:8011/" //线上--->测试
     PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
     PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
+    // PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
+    // PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
+    // PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
 
     
 

src/api/index/index.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+/**
+ * 站点状态统计
+ * @param {*} params 
+ * @returns 
+*/
+export function count(params) {
+    return request({
+        url: '/site/count',
+        method: 'GET',
+        params,
+    })
+}
+
+/**
+ * 站点撒点
+ * @param {*} params 
+ * @returns 
+*/
+export function list(params) {
+    return request({
+        url: '/site/list2',
+        method: 'GET',
+        params,
+    })
+}
+

src/assets/js/baiduMap.js

@@ -5,8 +5,8 @@
 // import bgc from "@/assets/images/business/iot/dialog-bg2.png";
 // import { timestampToTime } from "@/assets/js/dataFormate.js";
 // import { deviceType } from "@/assets/js/type";
-import mark1 from "@/assets/svg/mark1.svg";
-import mark2 from "@/assets/svg/mark2.svg";
+import mark0 from "@/assets/svg/mark0.svg"; //在线
+import mark77 from "@/assets/svg/mark77.svg"; //告警
 var map = null //地图
 var label = null //文本标注
 var num = 3 //地图缩放比例
@@ -23,13 +23,13 @@ var center = {
      */
 function initMap() {
          // 初始化地图
-        var point = new BMapGL.Point(center.longitude, center.latitude); // 创建点坐标
-        map = new window.BMapGL.Map("map"); // 初始化地图，创建Map实例。
-        map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别。
+    var point = new BMapGL.Point(center.longitude, center.latitude); // 创建点坐标
+    map = new window.BMapGL.Map("map"); // 初始化地图，创建Map实例。
+    map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别。
 
-        map.setMapType(BMAP_NORMAL_MAP);
-        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
-        map.setTilt(angleNum); //视角
+    map.setMapType(BMAP_NORMAL_MAP);
+    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
+    map.setTilt(angleNum); //视角
 }
 
 /**
@@ -52,7 +52,7 @@ function labelState(data){
         for(let i=0;i<data.length;i++){
             //文本标注
             var point = new BMapGL.Point(data[i].longitude, data[i].latitude);
-            var content = data[i].name;
+            var content = data[i].siteName;
             label = new BMapGL.Label(content, { // 创建文本标注
                 position: point,
                 offset: new BMapGL.Size(0, 10),
@@ -81,7 +81,12 @@ function markers(data) {
         for (let i = 0; i < data.length; i++) {
             let point = new BMapGL.Point(data[i].longitude, data[i].latitude);
             // 创建点标记
-            var myIcon = new BMapGL.Icon(data[i].state ? mark2 :  mark1, new BMapGL.Size(17.5, 22), { 
+            var myIcon = new BMapGL.Icon(
+                data[i].deviceStatus == 0 ? mark0 :  
+                data[i].deviceStatus == 1 ? mark77 :   
+                data[i].deviceStatus == 4 ? mark77 :  
+                data[i].deviceStatus == 77 ? mark77 :  mark77, 
+                new BMapGL.Size(17.5, 22), { 
                 // offset: new BMapGL.Size(-14, 17), //指定定位位置
                 // anchor: new BMapGL.Size(17.5, 22.5), //这里有两个数字10，30分别对应图标的一半宽度和高度
                 imageOffset: new BMapGL.Size(0, 0), //设置图片偏移,
@@ -93,13 +98,25 @@ function markers(data) {
             // 点标记点击事件（弹框）
             var content = `
                 <div class='boxs'>
-                    <div class='title'>${data[i].name}</div>
+                    <div class='title'>${data[i].siteName}</div>
                         <div class='content'>
-                            <div class='item' style='color:${data[i].state == 1 ? "#333" : "#ff0000"}'><div>站点状态</div><div>${data[i].state == 1 ? "正常" : "离线"} </div></div>
-                            <div class='item'><div>设备总数</div><div></div>${data[i].tatal}</div>
-                            <div class='item' style='color:${data[i].alert > 0 ? "#ff0000" : "#333"}'><div>告警数</div><div></div>${data[i].alert}</div>
-                            <div class='item'><div>电话</div><div></div>${data[i].tel}</div>
-                            <div class='item'><div>地址</div><div></div>${data[i].address}</div>
+                            <div class='item'><div>站点状态</div>
+                            <div style='color:${data[i].deviceStatus == 0 ? "#67C23A" : 
+                                data[i].deviceStatus == 1 ? "#909399" :
+                                data[i].deviceStatus == 4 ? "#E6A23C" :
+                                data[i].deviceStatus == 77 ? "#F56C6C" :
+                                data[i].deviceStatus == null ? "#909399" : "#909399"
+                            }'>
+                                ${data[i].deviceStatus == 0 ? "正常" : 
+                                data[i].deviceStatus == 1 ? "离线" : 
+                                data[i].deviceStatus == 4 ? "故障" : 
+                                data[i].deviceStatus == 77 ? "告警" : 
+                                data[i].deviceStatus == null ? "测试" : "--"
+                            } </div></div>
+                            <div class='item'><div>设备总数</div><div>${ data[i].tatal || "--" }</div></div>
+                            <div class='item' style='color:${ data[i].alert > 0 ? "#ff0000" : "#333" }'><div>告警数</div><div>${ data[i].alert  || "--" }</div></div>
+                            <div class='item'><div>电话</div><div>${data[i].phone}</div></div>
+                            <div class='item'><div>地址</div><div>${data[i].siteAddress}</div></div>
                         </div>
                 </div>
             `;

src/views/bulletinBoard/components/yongDian.vue

@@ -2,15 +2,19 @@
   <div>
     <div class="top">
       <img :src="time" alt="" class="time">
-      <p>{{ data.title }}<span>（{{ data.unit }}）</span></p>
+      <p>{{ data.type == 1 ? "今日用电" : "本月用电" }}<span>（kWh）</span></p>
       <img :src="dateFrame" alt="" class="date">
       <span>{{  data.date }}</span>
     </div>
     <div class="middle">
-      {{ data.num }}
+      {{ data.current }}
     </div>
     <div class="bottom">
-      <p>{{ data.compareName }}<span>{{ data.compareNum }}</span><img :src="data.proportion >= 0 ? up : down" alt=""><span :style="{'color': data.proportion >= 0 ? 'red' :'#1BCCC1'}" >{{ data.proportion }}%</span></p>
+      <p>{{ data.type == 1 ? "昨日同期" : "上月同期" }}
+        <span>{{ data.samePeriod }}</span>
+        <img :src="data.percentage >= 0 ? up : down" alt="">
+        <span :style="{'color': data.percentage >= 0 ? 'red' :'#1BCCC1'}" >{{ data.percentage }}%</span>
+      </p>
     </div>
   </div>
 </template>
@@ -32,7 +36,11 @@ const props = defineProps({
     default: null,
   },
 });
-const data = props.data
+watch(
+  () => props.data,
+  (newVal, oldVal, clear) => {
+    const data = newVal
+  })
 /*----------------------------------方法声明-----------------------------------*/
 </script>
 <style lang="scss" scoped>

src/views/bulletinBoard/index.vue

@@ -150,6 +150,7 @@ import tableD from './components/tableD'
 import yongDian from './components/yongDian'
 /*----------------------------------接口引入-----------------------------------*/
 import { ref, onMounted } from 'vue'
+import axios from 'axios'
 /*----------------------------------store引入----------------------------------*/
 /*----------------------------------公共方法引入------------------------------*/
 import dayjs from 'dayjs'
@@ -175,10 +176,10 @@ import kbTop7 from '@/assets/images/kbTop7.png'
 /*----------------------------------变量声明-----------------------------------*/
 //用电
 const yongDianDataDay = ref(
-  { title:"今日用电", unit:"kWh", num:2138.38, compareName:"昨日同期", compareNum:"2101.25", proportion:"28.32", date: "--" }
+  { current:0, samePeriod:0, type:1 }
 )
 const yongDianDataMonth = ref(
-  { title:"本月用电", unit:"kWh", num:1446789, compareName:"上月同期", compareNum:"-1070569", proportion:"-13.30", date:"--" }
+  { current:0, samePeriod:0, type:2 }
 )
 
 //用电趋势
@@ -247,12 +248,42 @@ function getDate(){
  ? "七" : month == "08" ? "八" : month == "09" ? "九" : month == "10" ? "十" : month == "11" ? "十一" : "十二"
   
 }
+function getElectric(){
+  const currentDate = dayjs().format('YYYY-MM-DD')
+  //当日
+  axios.get('https://mock.apipost.net/mock/2b03dbbac065001/electric/electric',{
+    params:{
+      apipost_id:"2e56ee2cb5f000",time:currentDate,type:1
+    }
+  }).then(res => {
+    yongDianDataDay.value = res.data
+    yongDianDataDay.value.type = 1
+    yongDianDataDay.value.date = currentDate.slice(8,10)
+    yongDianDataDay.value.percentage  = ((yongDianDataDay.value.current - yongDianDataDay.value.samePeriod) / yongDianDataDay.value.samePeriod*100).toFixed(2)
+  })
+
+  //当月
+  axios.get('https://mock.apipost.net/mock/2b03dbbac065001/electric/electric',{
+    params:{
+      apipost_id:"2e56ee2cb5f000",time:currentDate.slice(0,7),type:2
+    }
+  }).then(res => {
+    yongDianDataMonth.value = res.data
+    yongDianDataMonth.value.type = 2
+    yongDianDataMonth.value.date = currentDate.slice(5,7) == "01" ? "一" : currentDate.slice(5,7) == "02" ? "二" : currentDate.slice(5,7) == "03" 
+  ? "三" : currentDate.slice(5,7) == "04" ? "四" : currentDate.slice(5,7) == "05" ? "五" : currentDate.slice(5,7) == "06" ? "六" : currentDate.slice(5,7) == "07" 
+  ? "七" : currentDate.slice(5,7) == "08" ? "八" : currentDate.slice(5,7) == "09" ? "九" : currentDate.slice(5,7) == "10" ? "十" : currentDate.slice(5,7) == "11" ? "十一" : "十二"
+  yongDianDataMonth.value.percentage  = ((yongDianDataMonth.value.current - yongDianDataMonth.value.samePeriod) / yongDianDataMonth.value.samePeriod*100).toFixed(2)
+  })
+}
 function init(){
-  getDate()
+  // getDate()
+  getElectric()
 }
 
 onMounted(() => {
   init()
+  // axios.get('https://mock.apipost.net/mock/2b03dbbac065001/electric/TQcompare?apipost_id=2e56ee2cb5f000&time=&type=1',{time:,type:}).then(res => {})
 })
 </script>
 

src/views/dataManage/chainAnalysis/ehcarts/index.vue

@@ -192,7 +192,7 @@ export default defineComponent({
     }
 
     //监听变化
-    watch(
+    (
       () => props.echartsDataOne,
       (newVal, oldVal, clear) => {
         // 执行异步任务，并得到关闭异步任务的 id
@@ -225,7 +225,7 @@ export default defineComponent({
     padding-right: 12px;
   }
   ::v-deep(.el-card__body) {
-    padding: 12px;
+    paddwatching: 12px;
     font-size: 14px;
     line-height: 1.5715;
   }

src/views/index/index.vue

@@ -82,6 +82,7 @@
 import tableC from "./components/table"
 /*----------------------------------接口引入-----------------------------------*/
 import { ref,onMounted } from "vue";
+import { count, list } from '@/api/index/index'
 /*----------------------------------store引入----------------------------------*/
 /*----------------------------------公共方法引入--------------------------------*/
 import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
@@ -94,15 +95,15 @@ import sheBei from "@/assets/images/sheBei.png";
 const mode = ref(1)//1:列表模式 2:地图模式
 const siteState = ref([]) //true:站点显示 false:站点隐藏
 const statistics = ref([
-  { num:1, img:zhanDian, text:'站点总数', color:'#2ACDDA'},
-  { num:2, img:liXian, text:'离线站总数', color:'#AAA' }, 
-  { num:3, img:weiChuLi, text:'未处理告警数', color:'#FFB00A' },
-  { num:4, img:sheBei, text:'设备数', color:'#2FA6FF' }
+  { num:0, img:zhanDian, text:'站点总数', color:'#2ACDDA'},
+  { num:0, img:liXian, text:'离线站总数', color:'#AAA' }, 
+  { num:0, img:weiChuLi, text:'未处理告警数', color:'#FFB00A' },
+  { num:0, img:sheBei, text:'设备数', color:'#2FA6FF' }
 ])
 const  markerArray = ref([
-    { longitude:121.486647, latitude:31.220165, name:"公司名称",state:0,tatal:100,alert:4,tel:"13120222222",address:"公司地址"},
-    { longitude:121.486647, latitude:31.010165, name:"公司名称2",state:1,tatal:10,alert:2,tel:"13120222222",address:"公司地址"},
-    { longitude:121.486647, latitude:30.010165, name:"公司名称3",state:0,tatal:1,alert:0,tel:"13120222222",address:"公司地址"}
+    // { longitude:121.486647, latitude:31.220165, name:"公司名称",state:0,tatal:100,alert:4,tel:"13120222222",address:"公司地址"},
+    // { longitude:121.486647, latitude:31.010165, name:"公司名称2",state:1,tatal:10,alert:2,tel:"13120222222",address:"公司地址"},
+    // { longitude:121.486647, latitude:30.010165, name:"公司名称3",state:0,tatal:1,alert:0,tel:"13120222222",address:"公司地址"}
 ]) //点标记集
 const dian = ref([])
 
@@ -154,13 +155,14 @@ const tableData = ref([
 ])
 /*----------------------------------方法声明-----------------------------------*/
 onMounted(() => {
-  init()
+ init()
 })
 
 //初始化
 function init(){
   initMap()
-  site(1)
+  getSiteCount() //统计
+  getSaDian() //撒点
 }
 /**
  * 切换模式
@@ -186,10 +188,21 @@ function site(val){
     //站点隐现（全部/在线/告警）
     if(siteState.value.includes(1)){
       dian.value = []
-      //站点在线并告警 / 所有站点
-      if(siteState.value.includes(2) && siteState.value.includes(3) || !siteState.value.includes(2) && !siteState.value.includes(3)){
+      //所有站点
+      if(!siteState.value.includes(2) && !siteState.value.includes(3)){
         markers(markerArray.value)
       }
+      //站点在线和告警
+      if(siteState.value.includes(2) && siteState.value.includes(3)){
+        let arrN = []
+        for(let i=0;i<markerArray.value.length;i++){
+          if(markerArray.value[i].deviceStatus == 0 || markerArray.value[i].deviceStatus == 77){
+            arrN.push(markerArray.value[i])
+          }
+        }
+        console.log(arrN)
+        markers(arrN)
+      }
       //告警设备隐现(离线)
       if(siteState.value.includes(2) && !siteState.value.includes(3)){
         for(let i=0;i<markerArray.value.length;i++){
@@ -212,6 +225,7 @@ function site(val){
     if(!siteState.value.includes(1)){
       markers()
     }
+    console.log(siteState.value)
   }
   //文本标注隐现4
   if(siteState.value.includes(4)){
@@ -224,6 +238,31 @@ function site(val){
     labelState()
   }
 }
+
+
+/**
+ * 站点状态
+*/
+function getSiteCount(){
+  count().then(res => {
+    statistics.value[0].num = res.data.count
+    statistics.value[1].num = res.data.offLineCount
+    statistics.value[2].num = res.data.deviceCount
+    statistics.value[3].num = res.data.siteDeviceCount
+  })
+}
+
+/**
+ * 站点撒点
+*/
+function getSaDian(val){
+  list({ siteStatus: val}).then(res => {
+    markerArray.value = res.data
+    site(1)
+  })
+}
+
+
 </script>
 <style lang="scss" scoped>
 .SiteDistribution{
@@ -385,7 +424,6 @@ function site(val){
   box-shadow:  0px 3px 7px 0px rgba(0,0,0,0.07);
   margin-top:35px;
   margin-left:-26px;
-  // background: linear-gradient(to bottom right, #fff, #fff);
   .BMap_bubble_center,.BMap_bubble_content,.boxs{
       width:270px !important;
   }
@@ -396,6 +434,10 @@ function site(val){
         font-size: 16px;
         line-height: 40px;
         padding-left:20px;
+        width:85%;
+        white-space: nowrap; /* 确保文本不会换行 */
+        overflow: hidden; /* 隐藏超出容器的部分 */
+        text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
       }
       .content{
         padding:0 20px 4px;
@@ -410,6 +452,12 @@ function site(val){
         >div:nth-child(1){
           border-top:none;
         }
+        >div:nth-child(5){
+          div:nth-child(2){
+            width:85%;
+            text-align: right;
+          }
+        }
       }
     }
   }

src/views/largeScreen/index.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref,onMounted } from "vue";
-window.open("http://192.168.1.100:8080/login");
+window.open("https://qhome.usky.cn/dist2/#/");
 </script>
 
 <style lang="scss" scoped>

vue.config.js

@@ -64,7 +64,8 @@ module.exports = {
         // 注释掉的地方是前端配置代理访问后端的示例
         proxy: {
             './': {
-                target: 'https://qhome.usky.cn/fivapi/',
+                // target: 'https://qhome.usky.cn/fivapi/',
+                target: 'http://192.168.20.140:8011/',
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {