完善数据看板

package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-vue": "^9.0.0",
     "filemanager-webpack-plugin": "^6.1.3",
     "image-webpack-loader": "^8.1.0",
+    "json-server": "^1.0.0-beta.3",
     "less": "^4.1.1",
     "less-loader": "^10.2.0",
     "lint-staged": "^10.5.3",

src/assets/css/font.scss

@@ -0,0 +1,20 @@
+/* 标题、着重展示 */
+@font-face {
+    /*给字体命名*/
+    font-family: 'Alibaba-PuHuiTi-Medium';
+    /*引入字体文件*/
+    src: url('@/assets/font/Alibaba-PuHuiTi-Medium.ttf');
+    src: url('@/assets/font/Alibaba-PuHuiTi-Medium.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+/* 内容展示 */
+@font-face {
+    /*给字体命名*/
+    font-family: 'Alibaba-PuHuiTi-Regular';
+    /*引入字体文件*/
+    src: url('@/assets/font/Alibaba-PuHuiTi-Regular.ttf');
+    src: url('@/assets/font/Alibaba-PuHuiTi-Regular.otf');
+    font-weight: normal;
+    font-style: normal;
+}

src/main.js

@@ -15,13 +15,12 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import * as echarts from 'echarts';
 
 import '@/assets/icons'
+import '@/assets/css/font.scss'
 import SvgIcon from "@/components/SvgIcon"
 
 import 'video.js/dist/video-js.css'
 import './permissions.js'
-
 const app = createApp(App)
-
 app.config.globalProperties.$echarts = echarts
 
 app.use(router)

src/store/modules/routes.js

@@ -51,14 +51,6 @@ const actions = {
             store.state.auth = 1
         }
 
-        data.unshift({
-            path: 'external-link',
-            component: 'Layout',
-            children: [{
-                path: '/home',
-                meta: { title: '首页', icon: 'home', }
-            }]
-        },)
         data.forEach(function (item) {
             if (item.children.length > 1) {
                 item.children.forEach(function (i) {

src/views/bulletinBoard/components/chart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+import dayjs from 'dayjs'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+let lineChartBanlance = ref(null)
+// 读取数据 func
+const loading = ref(true)
+function echarts2(){
+  let myChart = echarts.init(lineChartBanlance.value)
+  // 绘制图表
+  myChart.setOption(option)
+  loading.value = false
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
+var option 
+option = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: props.data.type,
+    bottom:"0"
+  },
+  grid: {
+    top:'10%',
+    left: '3%',
+    right: '3%',
+    bottom: '6%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      show: false, // 隐藏坐标轴
+    },
+    {
+      boundaryGap: false,
+      position: 'bottom', // 坐标轴位置
+      axisPointer: { type: 'none' }, // 坐标轴指示器，隐藏
+      data: props.data.xAxis,
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: { // 轴线
+        show: true, // 是否显示
+        lineStyle: { // 轴线的样式
+            color: '#333',
+            width: 1
+        }
+      },
+    }
+  ],
+  
+};
+var series = []
+for (let i = 0; i < props.data.type.length; i++) {
+  series.push({
+    name: props.data.type[i],
+    type: 'line',
+    stack: 'Total',
+    // areaStyle: {},
+  
+    data: props.data.data[i],
+    markPoint: {
+      data: [
+        { type: 'max', name: 'Max' },
+        { type: 'min', name: 'Min' }
+      ]
+    },
+  })
+}
+option.series = series
+onMounted(() => {
+  echarts2()
+})
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:250px;
+}
+</style>

src/views/index/components/pie.vue → src/views/bulletinBoard/components/pie.vue

@@ -48,6 +48,9 @@ const props = defineProps({
       }
     ]
   };
+  if(props.data.type == 2){
+    option.legend = { bottom:"0" }
+  }
   function initChart(){
     let myChart = echarts.init(lineChartBanlance.value)
     // 绘制图表
@@ -64,6 +67,6 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .chart{
-  height:292px;
+  height:250px;
 }
 </style>

src/views/bulletinBoard/components/tableD.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-table :data="tableData" border  height="260" style="overflow-y: auto;overflow-x: hidden;width:100% !important">
+    <el-table-column prop="time" label="时间" />
+    <el-table-column prop="name" label="事件" />
+    <el-table-column prop="deviceName" label="设备" />
+    <el-table-column prop="statue" label="状态">
+      <template #default="scope">
+        <span v-if="scope.row.statue !=1">自动恢复</span>
+        <span style="color: #409eff;cursor: pointer;" @click.prevent="Update(scope.row)" v-if="scope.row.statue == 1">确定</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/bulletinBoard/components/yongDian.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div class="top">
+      <img :src="time" alt="" class="time">
+      <p>{{ data.title }}<span>（{{ data.unit }}）</span></p>
+      <img :src="dateFrame" alt="" class="date">
+      <span>{{  data.date }}</span>
+    </div>
+    <div class="middle">
+      {{ data.num }}
+    </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>
+    </div>
+  </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+import dateFrame from '@/assets/images/dateFrame.png'
+import time from '@/assets/images/time.png'
+import up from '@/assets/images/up.png'
+import down from '@/assets/images/down.png'
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const data = props.data
+/*----------------------------------方法声明-----------------------------------*/
+</script>
+<style lang="scss" scoped>
+  .top{
+    position: relative;
+    padding:15px;
+    font-family: "Alibaba-PuHuiTi-Medium";
+    .time{
+      width:14px;
+      margin-right:10px;
+      display: inline-block;
+    }
+    p{
+      font-size: 14px;
+      display: inline-block;
+      span{
+        font-size: 12px;
+      }
+    }
+    .date{
+      position: absolute;
+      width:40px;
+      top:15px;
+      right:15px;
+    }
+    >span{
+      position: absolute;
+      width:40px;
+      height:40px;
+      line-height: 47px;
+      top:15px;
+      right:15px;
+      font-size: 14px;
+      text-align: center;
+      color:#48A4FF;
+    }
+  }
+  .middle{
+    font-size:18px;
+    color:#10aaeb;
+    padding:5px 15px 10px 15px;
+    border-bottom:2px solid #eee;
+    font-family: "Alibaba-PuHuiTi-Medium";
+  }
+  .bottom{
+    padding:15px 15px 0px 15px;
+    color:rgba(0,0,0,0.65);
+    p{
+      font-family: "Alibaba-PuHuiTi-Regular";
+      
+      span{
+        vertical-align: top;
+      }
+      span:nth-child(1){
+        margin-left:10px;
+      }
+      span:nth-child(3){
+        float: right;
+      }
+      img{
+        width:8px;
+        margin-left:10px;
+        margin-top:1.5px;
+        vertical-align: top;
+        float: right;
+      }
+    }
+  }
+</style>

src/views/bulletinBoard/index.vue

@@ -0,0 +1,501 @@
+<template>
+  <div class="app-container bulletinBoard" style="background: #f0f2f5 !important;padding-bottom:12px !important;">
+      <div class="base height1 component1">
+        <div class="type type1">
+          <p class="color1">上海永天科技</p>
+          <img :src="kbTop1" alt="">
+          <p class="desc">站点名称</p>
+        </div>
+      </div>
+      <div class="base height1 component1">
+        <div class="type type1">
+          <p class="color2">金园八路500号</p>
+          <img :src="kbTop2" alt="">
+          <p class="desc">地址</p>
+        </div>
+      </div>
+      <div class="base height1 component2">
+        <div class="type type1">
+          <p class="color3">1028天</p>
+          <img :src="kbTop3" alt="">
+          <p class="desc">运行天数</p>
+        </div>
+      </div>
+      <div class="base height1 component2">
+        <div class="type type1">
+          <p class="color4">2500kVA</p>
+          <img :src="kbTop4" alt="">
+          <p class="desc">额定容量</p>
+        </div>
+      </div>
+      <div class="base height1 component2">
+        <div class="type type1">
+          <p class="color5">1085.700kW</p>
+          <img :src="kbTop5" alt="">
+          <p class="desc">实时负荷</p>
+        </div>
+      </div>
+      <div class="base height1 component2">
+        <div class="type type1">
+          <p class="color6">0.989</p>
+          <img :src="kbTop6" alt="">
+          <p class="desc">实时功率因数</p>
+        </div>
+      </div>
+      <div class="base height1 component21">
+        <div class="left">
+          <p class="color7">0.98  <span>/0.88</span></p>
+          <p class="">平均功率因数</p>
+          <p class="">2025年7月2日 起</p>
+        </div>
+        <div class="right">
+          <img :src="kbTop7" alt="">
+        </div>
+      </div>
+      <div class="base height1 component3">
+        <div class="type2">
+          <img :src="alarmImg" alt="">
+          <div class="title color5">告警</div>
+          <p class="desc2">平均功率因数</p>
+        </div>
+      </div>
+      <div class="base height1 component3">
+        <div class="type2">
+          <img :src="wifi" alt="">
+          <div class="title color1">在线</div>
+          <p class="desc2">站点通讯状态</p>
+        </div>
+      </div>
+      <div class="base rightNone height1 component3">
+        <div class="type2">
+          <img :src="maintenance" alt="">
+          <div class="title color1">正常</div>
+          <p class="desc2">站点故障状态</p>
+        </div>
+      </div>
+      <div class="base height2 component4">
+        <yongDian :data="yongDianDataDay" />
+      </div>
+      <div class="base height2 component4" style="display: inline-block;">
+        <yongDian :data="yongDianDataMonth" />
+      </div>
+      <div class="base height3 component5 echarts" style="margin-top:-145px;width:calc(56% - 12px);">
+        <div class="top">
+          <img :src="kb1" alt="">
+          <span>今日用电趋势</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="base rightNone height3 component6 echarts" style="margin-top:-145px;width:calc(28% - 12px);">
+        <div class="top">
+          <img :src="kb2" alt="">
+          <span>告警处理统计</span>
+        </div>
+        <pie :data="alarm"/>
+      </div>
+      <div class="base height3 component7 echarts" style="width:calc(50% - 6px);">
+        <div class="top">
+          <img :src="kb8" alt="">
+          <span>支路用能占比</span>
+        </div>
+        <div class="time">
+          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">月</div>
+          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">年</div>
+        </div>
+        <pie :data="zlydzb"/>
+      </div>
+      <div class="base rightNone height3 component7 echarts" style="width:calc(50% - 6px);">
+        <div class="top">
+          <img :src="kb3" alt="">
+          <span>事件告警列表</span>
+        </div>
+        <tableD :data="eventList" class="tableD"/>
+      </div>
+      <div class="base height3 echarts" style="width:calc(50% - 6px)">
+        <div class="top">
+          <img :src="kb4" alt="">
+          <span>有功功率</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="base rightNone height3 component5 echarts" style="width:calc(50% - 6px)">
+        <div class="top">
+          <img :src="kb5.png" alt="">
+          <span>有功功率同比分析</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="base height3 echarts" style="width:calc(50% - 6px)">
+        <div class="top">
+          <img :src="kb6" alt="">
+          <span>功率因数</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="base rightNone height3 echarts" style="width:calc(50% - 6px)">
+        <div class="top">
+          <img :src="kb7" alt="">
+          <span>环境温湿度</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+  </div>
+</template>
+
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+import chart from './components/chart'
+import pie from './components/pie'
+import tableD from './components/tableD'
+import yongDian from './components/yongDian'
+/*----------------------------------接口引入-----------------------------------*/
+import { ref, onMounted } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+import dayjs from 'dayjs'
+/*----------------------------------常量声明-----------------------------------*/
+import kb1 from '@/assets/images/kb1.png'
+import kb2 from '@/assets/images/kb2.png'
+import kb3 from '@/assets/images/kb3.png'
+import kb4 from '@/assets/images/kb4.png'
+import kb5 from '@/assets/images/kb5.png'
+import kb6 from '@/assets/images/kb6.png'
+import kb7 from '@/assets/images/kb7.png'
+import kb8 from '@/assets/images/kb8.png'
+import wifi from '@/assets/images/wifi.png'
+import alarmImg from '@/assets/images/alarm.png'
+import maintenance from '@/assets/images/maintenance.png'
+import kbTop1 from '@/assets/images/kbTop1.png'
+import kbTop2 from '@/assets/images/kbTop2.png'
+import kbTop3 from '@/assets/images/kbTop3.png'
+import kbTop4 from '@/assets/images/kbTop4.png'
+import kbTop5 from '@/assets/images/kbTop5.png'
+import kbTop6 from '@/assets/images/kbTop6.png'
+import kbTop7 from '@/assets/images/kbTop7.png'
+/*----------------------------------变量声明-----------------------------------*/
+//用电
+const yongDianDataDay = ref(
+  { title:"今日用电", unit:"kWh", num:2138.38, compareName:"昨日同期", compareNum:"2101.25", proportion:"28.32", date: "--" }
+)
+const yongDianDataMonth = ref(
+  { title:"本月用电", unit:"kWh", num:1446789, compareName:"上月同期", compareNum:"-1070569", proportion:"-13.30", date:"--" }
+)
+
+//用电趋势
+const ydqs = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", ""],
+  type:["总有功功率（kW）","A相有功功率（kW）","B相有功功率（kW）","C相有功功率（kW）"],
+  color:["#9677DF","#EF7E9C","#6BC1DD","#13CF5A"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32,5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32,100,89,101,110,99,94,45,89,99,100,110,102,11,8,33,22,11,66,22,8,13,8,46,16],
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32,5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32,100,89,101,110,99,94,45,89,99,100,110,102,11,8,33,22,11,66,22,8,13,8,46,16],
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32,5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32,100,89,101,110,99,94,45,89,99,100,110,102,11,8,33,22,11,66,22,8,13,8,46,16],
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32,5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32,100,89,101,110,99,94,45,89,99,100,110,102,11,8,33,22,11,66,22,8,13,8,46,16],
+  ],
+  unit:""
+})
+//告警统计
+const alarm = ref({
+  data:[
+    {name: '未确认', value: 126},
+    {name: '已确认', value: 245 },
+  ],
+  color:["red","#10aaeb"],
+  type:"1"
+})
+//支路用电占比
+const zlydzb = ref({
+  data:[
+    {name: '路灯照明', value: 3856},
+    {name: '站内用电', value: 6384 },
+    {name: '站外用电', value: 1524 },
+  ],
+  color:["red","#10aaeb","#FF691C"],
+  type:"2"
+})
+const dateType = ref(1)
+//事件告警列表
+const eventList = ref([
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"0" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"0" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+  { name:"A相电压]227.561 越上限恢复", time:"2025-08-15 02:15:23", deviceName:"AA1柜公共电压单元", statue:"1" },
+])
+/*----------------------------------方法声明-----------------------------------*/
+/**
+ * 日期类型切换
+ * @param type 
+ */
+function dateSwitch(type){
+  dateType.value = type
+}
+/**
+ * 获取日期
+ */
+function getDate(){
+ const day = dayjs().format('DD');
+ const month = dayjs().format('MM');
+ yongDianDataDay.value.date = day
+ yongDianDataMonth.value.date = month == "01" ? "一" : month == "02" ? "二" : month == "03" 
+ ? "三" : month == "04" ? "四" : month == "05" ? "五" : month == "06" ? "六" : month == "07" 
+ ? "七" : month == "08" ? "八" : month == "09" ? "九" : month == "10" ? "十" : month == "11" ? "十一" : "十二"
+  
+}
+function init(){
+  getDate()
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<style lang="scss" scoped>
+
+.bulletinBoard{
+  padding:0;
+  .base{
+    margin:12px 12px 0 0;
+    display: inline-block;
+    border-radius: 4px;
+    background: #fff;
+  }
+  .rightNone{
+    margin-right:0 !important;
+  }
+  .height1{
+    height:110px;
+    margin:0px 12px 0 0;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    .type{
+      padding:21px 13px;
+      img{
+        width:35px;
+      }
+      >p:nth-child(1){
+        font-size: 18px;
+        font-family: "Alibaba-PuHuiTi-Medium";
+      }
+      >p:nth-child(2){
+        font-size: 14px;
+        font-family: "Alibaba-PuHuiTi-Regular";
+      }
+    }
+    .type1{
+      img{
+        position: absolute;
+        right:8px;;
+        top:25px;
+      }
+      .desc{
+        position: absolute;
+        bottom:7px;
+        color:#333;
+      }
+      .desc2{
+        position: absolute;
+        width:100%;
+        bottom:15px;
+        background: red;
+        height:20px;
+      }
+      .time{
+        position: absolute;
+        bottom:-5px;
+        font-size: 12px;
+        color:#333;
+      }
+    }
+  }
+  .height1:last-child{
+    margin-right:0 !important;
+  }
+  .height2{
+    height:145px;
+    vertical-align: top;
+  }
+  .height3{
+    height:302px;
+  }
+  .component1{
+    width:calc(13% - 14px);
+    img{
+      width:82px !important;
+      top:21px !important;
+      right:13px !important;
+    }
+  }
+  .component2{
+    width:calc(10% - 10px);
+    img{
+      width:12px !important;
+      top:21px !important;
+      right:13px !important;
+    }
+  }
+  .component21{
+    width:calc(10% - 10px);
+    padding:21px 13px;
+    position: relative;
+    >div{
+      display: inline-block;
+    }
+    .left{
+      width:100%;
+      text-align: left;
+      font-size: 18px;
+      font-family: "Alibaba-PuHuiTi-Medium";
+      span{
+        font-size: 14px;
+        color:#333;
+        font-family: "Alibaba-PuHuiTi-Regular";
+      }
+      p:nth-child(2){
+        margin-top:16px !important;
+        font-size: 14px;
+        font-family: "Alibaba-PuHuiTi-Regular";
+      }
+      p:nth-child(3){
+        margin-top:-8px !important;
+        font-size:12px;
+        color:#666;
+        font-family: "Alibaba-PuHuiTi-Regular";
+      }
+    }
+    .right{
+      width:25px;
+      img{
+        width:12px !important;
+        position: absolute;
+        z-index: 0;
+        top:21px;
+        right:13px;
+      }
+    }
+  }
+  .component3{
+    width:calc(8% - 10px);
+    background: #fff;
+    text-align: center;
+    position: relative;
+    img{
+      width:35px;
+      margin:13px auto;
+    }
+    .title{
+      margin:-4px 0 0;
+      font-size: 16px;
+      font-family: "Alibaba-PuHuiTi-Medium";
+    }
+    p{
+      margin-top:6px;
+      font-size: 14px;
+      color:#333;
+      font-family: "Alibaba-PuHuiTi-Regular";
+    }
+    
+  }
+  .component4{
+    width:16%;
+    display: block;
+  }
+  .component7{
+    position: relative;
+    .time{
+      position: absolute;
+      top:6px;
+      right:7px;
+      .switch{
+        width:36px;
+        height:26px;
+        line-height: 26px;
+        text-align: center;
+        font-size: 14px;
+        color:rgba(0,0,0,0.65);
+        font-family: "Alibaba-PuHuiTi-Medium";
+        border: 1px solid #ccc;
+        border-radius: 4px 0px 0px 4px;
+        display: inline-block;
+        cursor: pointer;
+      }
+      .switch:nth-child(1){
+        border-radius: 4px 0px 0px 4px;
+        border-right: none !important;
+      }
+      .switch:nth-child(2){
+        border-radius: 0px 4px 4px 0px;
+        border-left: none !important;
+      }
+      .active{
+        background: #6c7fff;
+        color:#fff;
+      }
+    }
+    .tableD{
+      padding:0px 15px 15px !important;
+    }
+  }
+}
+.echarts{
+  vertical-align: top;
+  .top{
+    padding:13px 16px;
+    img{
+      width:14px;
+    }
+    img,span{
+      display: inline-block;
+      vertical-align: middle;
+    }
+    span{
+      margin-left:10px;
+      font-size: 14px;
+      font-family: "Alibaba-PuHuiTi-Medium";
+    }
+  }
+}
+.color1{
+  color:#1BCCC1;
+}
+.color2{
+  color:#FF691C;
+}
+.color3{
+  color:#8942F5;
+}
+.color4{
+  color:#FDA84C ;
+}
+.color5{
+  color:#1ACCC1 ;
+}
+.color6{
+  color:#0383F4 ;
+}
+.color7{
+  color:#FF397F ;
+}
+.color4{
+  color:#FDA84C ;
+}
+.color4{
+  color:#FDA84C ;
+}
+
+
+// span{
+//     color:#333;
+//     margin-left:10px;
+//   }
+// .color5{
+//   color:red
+// }
+</style>

src/views/index/components/chart.vue

@@ -1,115 +0,0 @@
-<template>
-  <div  v-loading="loading">
-    <div class="chart" ref="lineChartBanlance" />
-  </div>
-</template>
-<script setup>
-import {  defineComponent, onMounted, ref, watch } from 'vue'
-import * as echarts from 'echarts'
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-});
-
-    let lineChartBanlance = ref(null)
-    const electricChart=ref({})
-    const xData= [ "00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00" ]
-    const dataType= [ "IA(A)", "IB(A)", "IC(A)" ]
-    const data2 = [
-      [120, 132, 101, 134, 90, 230, 210, 1, 45, 56, 78, 8],
-      [10, 12, 11, 14, 9, 30, 21, 100, 245, 156, 378, 568],
-      [1200, 1312, 1, 1304, 900, 2300, 20, 105, 45, 16, 708, 68]
-    ]
-    // 读取数据 func
-    const loading = ref(true)
-    function echarts2(){
-      let myChart = echarts.init(lineChartBanlance.value)
-      // 绘制图表
-      myChart.setOption(option)
-      loading.value = false
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-    }
-    
-    var option 
-    option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'cross',
-          label: {
-            backgroundColor: '#6a7985'
-          }
-        }
-      },
-      legend: {
-        data: dataType,
-        bottom:"0"
-      },
-      toolbox: {
-        feature: {
-          saveAsImage: {}
-        }
-      },
-      grid: {
-        top:'14%',
-        left: '3%',
-        right: '4%',
-        bottom: '10%',
-        containLabel: true
-      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          data: props.data.xAxis,
-        }
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          axisLine: { // 轴线
-            show: true, // 是否显示
-            lineStyle: { // 轴线的样式
-                color: '#333',
-                width: 1
-            }
-          },
-        }
-      ],
-      
-    };
-    var series = []
-    for (let i = 0; i < props.data.type.length; i++) {
-      series.push({
-        name: props.data.type[i],
-        type: 'line',
-        stack: 'Total',
-        // areaStyle: {},
-      
-        data: props.data.data[i],
-        markPoint: {
-          data: [
-            { type: 'max', name: 'Max' },
-            { type: 'min', name: 'Min' }
-          ]
-        },
-        // markLine: {
-        //   data: [{ type: 'average', name: 'Avg' }]
-        // }
-      })
-    }
-    option.series = series
-    onMounted(() => {
-      echarts2()
-    })
-
-</script>
-<style lang="scss" scoped>
-.chart{
-  height:306px;
-}
-</style>

src/views/index/components/tableD.vue

@@ -1,32 +0,0 @@
-<template>
-    <el-table :data="tableData" border stripe  height="335" style="overflow-y: auto;">
-        <el-table-column prop="time" label="时间" width="100">
-            <template #default="scope">
-              {{ scope.row.time ? scope.row.time.slice(10, 19) : '' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="事件" width="150"></el-table-column>
-        <el-table-column prop="deviceName" label="设备" width="200"></el-table-column>
-        <el-table-column prop="statue" label="状态" width="100">
-          <template #default="scope">
-            <span v-if="scope.row.statue !=1">自动恢复</span>
-            <el-button type="text"  style="color: #409eff" @click.prevent="Update(scope.row)" v-if="scope.row.statue == 1">
-              确定
-            </el-button>
-          </template>
-        </el-table-column>
-    </el-table>
-</template>
-<script setup>
-import {  defineComponent, onMounted, ref, watch } from 'vue'
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-});
-const tableData = ref(props.data)
-</script>
-<style lang="scss" scoped>
-
-</style>

src/views/index/index.vue

@@ -1,424 +1,452 @@
 <template>
-  <div class="app-container bulletinBoard" style="background: #f0f2f5 !important;height:90vw">
-      <div class="height100 component1" style="margin-left:10px;">
-        <div class="type type1">
-          <p class="color1">上海永天科技</p>
-          <img src="@/assets/images/logo1.png" alt="">
-          <p class="desc">站点名称</p>
-        </div>
-      </div>
-      <div class="height100 component2">
-        <div class="left">
-          <p class="color2">0.98  <span>/0.88</span></p>
-        </div>
-        <div class="right">
-          <p class="">平均功率因数</p>
-          <p class="">2025年7月2日 起</p>
-        </div>
-      </div>
-      <div class="height100 component1">
-        <div class="type type1">
-          <p class="color3">1023</p>
-          <img src="@/assets/images/logo1.png" alt="">
-          <p class="desc">运行天数</p>
-        </div>
-      </div>
-      <div class="height100 component3" >
-        <div class="type">
-          <img src="@/assets/images/logo1.png" alt="">
-          <div class="title color5">告警</div>
-          <p class="desc3">平均功率因数</p>
-        </div>
-      </div>
-      <div class="height100 component3">
-        <div class="type">
-          <img src="@/assets/images/logo1.png" alt="">
-          <div class="title color1">在线</div>
-          <p class="desc3">站点通讯状态</p>
-        </div>
-      </div>
-      <div class="height100 component3">
-        <div class="type">
-          <img src="@/assets/images/logo1.png" alt="">
-          <div class="title color1">正常</div>
-          <p class="desc3">站点故障状态</p>
-        </div>
-      </div>
-        <div class="height190 component4" style="margin-left:8px;">
-            <div class="top">
-              <p>今日用电<span>（kWh）</span></p>
-              <img src="@/assets/images/day/31.png" alt="">
-            </div>
-            <div class="middle">
-              1968
-            </div>
-            <div class="bottom">
-              <p>昨日同期<span>2775</span></p>
-              <p><span>28.32%</span><span></span></p>
-            </div>
-        </div>
-        <div class="height190 component4" style="display: inline-block;">
-          <div class="top">
-            <p>本月用电<span>（kWh）</span></p>
-            <img src="@/assets/images/month/7.png" alt="">
-          </div>
-          <div class="middle">
-            247605
+  <div class="app-container SiteDistribution" style="padding:0">
+    <div class="top">
+      <div class="statistics" v-if="mode == 1">
+        <div class="item" v-for="(item, index) in statistics" :key="index">
+          <img :src="item.img" alt="">
+          <div class="text">
+            <span :style="{ color: item.color }">{{ item.num }}</span>
+            <span>{{ item.text }}</span>
           </div>
-          <div class="bottom">
-            <p>上月同期<span>1322913</span></p>
-            <p><span>28.32%</span><span></span></p>
-          </div>
-        </div>
-      <div class="height190 component5 echarts" style="margin-top:-185px;width:62%;">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>今日用电趋势</span>
         </div>
-        <chart :data="ydqs"/>
       </div>
-      <div class="height190 component6 echarts" style="margin-top:-185px;height:380px;">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>告警处理统计</span>
-        </div>
-        <pie :data="alarm"/>
+      <div class="query" v-if="mode == 2">
+        <a-tree-select
+            v-model:value="city"
+            :tree-data="cityArray"
+            placeholder="请选择城市"
+            tree-default-expand-all
+            class="citySelect"
+            style="width:120px;margin-right:10px;"
+          >
+        </a-tree-select>
+        <a-select
+          v-model:value="siteSlect"
+          placeholder=""
+          :options="siteArray"
+          @change="handleChange"
+          class="state"
+        >
+        </a-select>
+        <a-input-search
+          v-model:value="siteName"
+          placeholder="站点名称"
+          enter-button
+          @search="onSearch"
+          class="siteName"
+        />
       </div>
-      <div class="height190 component7 echarts" style="margin-left:10px;" >
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>支路用能占比</span>
+      <div class="modeSwitching">
+        <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+          <img src="@/assets/svg/map.svg" alt="">
         </div>
-        <div class="time">
-          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">月</div>
-          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">年</div>
+        <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+          <img src="@/assets/svg/menu.svg" alt="">
         </div>
-        <pie :data="zlydzb"/>
       </div>
-      <div class="height190 component7 echarts" style="height:375px;width:28.3%;">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>事件告警列表</span>
-        </div>
-        <tableD :data="eventList"/>
+      <div class="city">
+
       </div>
-      <div class="height190 component5 echarts" style="height:375px !important;width:calc(50% - 23px)">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>有功功率</span>
-        </div>
-        <chart :data="ydqs"/>
+    </div>
+    <div class="middle">
+      <div  id="map" ref="map" style="width:100%;height:100%;" v-if="mode == 1"></div>
+      <div class="table" v-if="mode == 2">
+        <tableC :data="tableData" />
       </div>
-      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>有功功率同比分析</span>
+    </div>
+    <div class="bottom" v-if="mode == 1">
+      <div class="itemWrap">
+        <div class="item" @click="site(4)" :class="{ active: siteState.includes(4) }" v-if="siteState.includes(1)">
+          <img src="@/assets/svg/name.svg" alt="">
+          <p>名称</p>
         </div>
-        <chart :data="ydqs"/>
-      </div>
-      <div class="height190 component5 echarts" style="width:calc(50% - 23px)">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>功率因数</span>
+        <div class="item" @click="site(3)" :class="{ active: siteState.includes(3) }" v-if="siteState.includes(1)">
+          <img src="@/assets/svg/wifi.svg" alt="">
+          <p>在线</p>
         </div>
-        <chart :data="ydqs"/>
-      </div>
-      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
-        <div class="top">
-          <img src="@/assets/images/logo1.png" alt="">
-          <span>环境温湿度</span>
+        <div class="item" @click="site(2)" :class="{ active: siteState.includes(2) }" v-if="siteState.includes(1)">
+          <img src="@/assets/svg/alerm.svg" alt="">
+          <p>告警</p>
         </div>
-        <chart :data="ydqs"/>
       </div>
+      <div class="item" @click="site(1)" :class="{ active: siteState.includes(1) }">
+         <img src="@/assets/svg/site.svg" alt="">
+         <p>站点</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import chart from './components/chart'
-import pie from './components/pie'
-import tableD from './components/tableD'
-import { ref } from 'vue'
-
-//用电趋势
-const ydqs = ref({
-  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
-  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
-  data:[
-    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
-    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
-    [100,89,101,110,99,94,45,89,99,100,110,102],
-    [11,8,33,22,11,66,22,8,13,8,46,16],
-    [50,51,15,20,45,35,35,40,45,20,15,6]
-  ],
-  unit:""
-})
-//告警统计
-const alarm = ref({
-  data:[
-    {name: '未确认', value: 3},
-    {name: '已确认', value: 3 },
-  ],
-  color:["red","#10aaeb"],
-  type:"1"
-})
-//支路用电占比
-const zlydzb = ref({
-  data:[
-    {name: '路灯照明', value: 3},
-    {name: '站内用电', value: 4 },
-    {name: '站外用电', value: 5 },
-  ],
-  color:["red","#10aaeb","#FF691C"],
-  type:"2"
-})
-const dateType = ref(1)
-
+/*----------------------------------组件引入-----------------------------------*/
+import tableC from "./components/table"
+/*----------------------------------接口引入-----------------------------------*/
+import { ref,onMounted } from "vue";
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入--------------------------------*/
+import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
+/*----------------------------------常量声明-----------------------------------*/
+import zhanDian from "@/assets/images/zhanDian.png";
+import liXian from "@/assets/images/liXian.png";
+import weiChuLi from "@/assets/images/weiChuLi.png";
+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' }
+])
+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:"公司地址"}
+]) //点标记集
+const dian = ref([])
 
-//事件告警列表
-const eventList = ref([
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"0" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
-  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+// 表格数据
+const cityArray = ref([
+  { 
+    value: '1',
+    label: '上海',
+    children: [
+      {
+        value: '11',
+        label: '青浦',
+      },
+      {
+        value: '12',
+        label: '松江',
+      },
+    ]
+  },
+  { 
+    value: '2',
+    label: '全部',
+  },
+  
 ])
+const city = ref(1)
+const siteSlect = ref("")
+const siteArray = ref([
+  { value:"", label:"全部" },
+  { value:"1", label:"在线" },
+  { value:"0", label:"离线" },
+])
+const siteName = ref("")
+const total = ref(100)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const tableData = ref([
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+])
+/*----------------------------------方法声明-----------------------------------*/
+onMounted(() => {
+  init()
+})
 
-function dateSwitch(type){
-  dateType.value = type
+//初始化
+function init(){
+  initMap()
+  site(1)
+}
+/**
+ * 切换模式
+ * @param {Number} val 1:列表模式 2:地图模式
+ */
+function switchMode(val) {
+  mode.value = val
+  if(val == 1){
+    setTimeout(() => {
+      init()
+      site(1)
+    })
+  }
 }
-</script>
 
-<style lang="scss" scoped>
-.bulletinBoard{
-  padding:0;
-  .height100{
-    height:100px;
-    margin-top:10px;
-    margin-right:10px;
-    border-radius: 6px;
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
-    .type{
-      padding:10px 8px;
-    }
-    .type1{
-      img{
-        position: absolute;
-        right:8px;;
-        top:25px;
-      }
-      p:nth-child(1){
-        font-size: 24px;
-      }
-      
-      .desc{
-        position: absolute;
-        bottom:-5px;
-        color:#fff;
+/**
+ * 站点隐、显控制
+*/
+function site(val){
+  //站点隐现其他项
+  siteState.value = siteState.value.includes(val) ? siteState.value.filter(item => item!== val) : [...siteState.value, val]
+  if(val == 1 || val == 2 || val == 3) {
+    //站点隐现（全部/在线/告警）
+    if(siteState.value.includes(1)){
+      dian.value = []
+      //站点在线并告警 / 所有站点
+      if(siteState.value.includes(2) && siteState.value.includes(3) || !siteState.value.includes(2) && !siteState.value.includes(3)){
+        markers(markerArray.value)
       }
-      .desc2{
-        position: absolute;
-        bottom:15px;
+      //告警设备隐现(离线)
+      if(siteState.value.includes(2) && !siteState.value.includes(3)){
+        for(let i=0;i<markerArray.value.length;i++){
+          if(!markerArray.value[i].state){
+            dian.value.push(markerArray.value[i])
+          }
+        }
+        markers(dian.value)
       }
-      .time{
-        position: absolute;
-        bottom:-5px;
-        font-size: 12px;
-        color:#333;
+      //在线设备隐现
+      if(!siteState.value.includes(2) && siteState.value.includes(3)){
+        for(let i=0;i<markerArray.value.length;i++){
+          if(markerArray.value[i].state){
+            dian.value.push(markerArray.value[i])
+          }
+        }
+        markers(dian.value)
       }
     }
+    if(!siteState.value.includes(1)){
+      markers()
+    }
   }
-  .component1{
-    width:24.3%;
-    background: linear-gradient(to right bottom, rgb(56, 148, 190), rgb(80, 227, 194));
+  //文本标注隐现4
+  if(siteState.value.includes(4)){
+    if(siteState.value.includes(1)){
+      labelState(dian.value.length == 0 ? markerArray.value : dian.value)
+    }else{
+      labelState()
+    }
+  }else{
+    labelState()
   }
-  .component2{
-    width:24.3%;
-    background:linear-gradient(to right bottom, rgb(27, 40, 52), rgb(27, 40, 52));
-    >div{
-      width:50%;
-      display: inline-block;
+}
+</script>
+<style lang="scss" scoped>
+.SiteDistribution{
+  position: relative;
+  overflow: hidden;
+  .top{
+    .statistics{
+      position: absolute;
+      z-index: 1;
+      top:20px;
+      left:20px;
+      width:40%;
+      height:78px;
+      display: flex;
+      flex-direction: row;
+      
+      .item{
+        width:100%;
+        height:100%;
+        background: #fff;
+        padding:14px 0 3% 3%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        img{
+          vertical-align: middle;
+          margin-right:10px;
+          width:50px;
+          height:50px;
+        }
+        >div{
+          display: flex;
+          flex-direction: column;
+          color:#333;
+          font-size: 14px;
+          margin-top:2px;
+          span:nth-child(1){
+            font-weight: bold;
+            font-size: 16px;
+            margin-bottom:10px;
+          }
+        }
+      }
     }
-    .left{
-      font-size: 40px;
-      color:rgb(80, 227, 194);
-      text-align: center;
-      vertical-align: middle;
-      margin-top:25px;
-      span{
-        font-size: 14px;
-        color:rgb(126, 147, 166);
-        vertical-align: top;
-        margin-top:10px;
+    .modeSwitching{
+      position: absolute;
+      z-index: 1;
+      top:20px;
+      right:20px;
+      width: 68px;
+      height: 32px;
+      display: flex;
+      border-radius: 2px;
+      background: #fff;
+      font-size: 22px;
+      cursor: pointer;
+      box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
+      >div{
+        width:50%;
+        height:100%;
+        line-height: 115%;;
         display: inline-block;
+        background: none;
+        text-align: center;
+        img{
+          width:16px;
+          transform: translateX(80px);
+          filter: drop-shadow(#333 -80px 1px 0px);
+        }
+      }
+      .active{
+        background: #48A4FF;
+        img{
+          width:16px;
+          transform: translateX(80px);
+          filter: drop-shadow(#fff -80px 1px 0px);
+        }
       }
     }
-    .right{
-      color:rgb(126, 147, 166);
-
-      vertical-align: middle;
-
+    .query{
+      position: absolute;
+      right:100px;
+      top:20px;
+      z-index: 1;
+      >div{
+        display: inline-block;
+        margin-right:10px;
+      }
+      .state{
+        width:80px;
+      }
+      .siteName{
+        width:200px;
+      }
     }
   }
-  .component3{
-    width:7.5%;
-    background: #fff;
-    text-align: center;
-    .title{
-      font-weight: 600;
-      margin:6px 0;
+  .middle{
+    width:100%;
+    height:100%;
+    position: absolute;
+    z-index: 0;
+    .table{
+      padding:20px;
+      margin-top:40px;
     }
-    
   }
-  .height100:last-child{
-    margin-right:0;
-  }
-  .component4{
-    width:15%;
-    height:185px;
-    margin-top:10px;
-    margin-right:10px;
-    margin-left:10px;
-    background: #fff;
-    // display: inline-block;
-    >div{
-      height: 50px;
-    }
-    .top{
-      position: relative;
-      padding:15px;
-      p{
-        font-size: 20px;
-        span{
-          font-size: 12px;
-        }
-      }
+  .bottom{
+    position: absolute;
+    z-index: 1;
+    bottom:20px;
+    right:20px;
+    .item{
+      padding:4px 8px 2px;
+      text-align: center;
+      border-bottom:1px solid #eee;
+      background: #fff;
+      cursor: pointer;
       img{
-        position: absolute;
-        width:40px;
-        top:15px;
-        right:15px;
+        font-size: 14px;
+        transform: translateX(80px);
+        filter: drop-shadow(#333 -80px 1px 0px);
+      }
+      >p{
+        font-size: 12px;
+        color:#333;
+        margin:6px 0 0px;
       }
     }
-    .middle{
-      font-size:34px;
-      color:#10aaeb;
-      padding:15px 15px 40px 15px;
-      border-bottom:2px solid #eee;
+    .item:last-child(1){
+      border-bottom:none;
     }
-    .bottom{
-      padding:15px;
-      color:rgba(0,0,0,0.65);
-      p:nth-child(1){
-        span:nth-child(1){
-          margin-left:10px;
-        }
-      }
-      p:nth-child(2){
-        span{
-          vertical-align: middle;
-        }
-        span:nth-child(1){
-          color:#1BCCC1;
-        }
-        span:nth-child(2){
-          margin-left:10px;
-          margin-top:-4px;
-          display: inline-block;
+    .active{
+        background: #48A4FF;
+        img{
+          transform: translateX(80px);
+          filter: drop-shadow(#fff -80px 1px 0px);
         }
-        span:nth-child(2)::after{
-          display: inline-block;
-          content: ""; /* 伪元素不包含内容 */
-          width: 0; /* 必须设置为0，因为我们不显示宽度 */
-          height: 0; /* 必须设置为0，因为我们不显示高度 */
-          margin-left: -5px; /* 根据需要调整，这里是让箭头中心对齐 */
-          margin-top:-10px;
-          border-left: 5px solid transparent; /* 左边框透明 */
-          border-right: 5px solid transparent; /* 右边框透明 */
-          border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
+        p{
+          color:#fff;
         }
       }
-    }
-  }
-  .component5{
-    width:49%;
-    height:380px !important;
-    display: inline-block;
-    vertical-align: top;
   }
-  .component6{
-    width:20%;
+}
+
+</style>
+<style>
+
+.BMap_copCtrl,.anchorBL{
+  display: none;
+  
+}
+
+</style>
+<style lang="scss">
+.BMap_bubble_pop{
+  width:270px !important;
+  padding:0 !important;
+  border-radius: 4px !important;
+  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;
   }
-  .component7{
-    width:20%;
-    .time{
-      margin:6px;
-      .switch{
-        width:40px;
-        height:30px;
-        line-height: 26px;
-        text-align: center;
-        margin-right:6px;
-        padding:2px;
-        color:rgba(0,0,0,0.65);
-        border: 1px solid #ccc;
-        display: inline-block;
-        cursor: pointer;
+  .BMap_bubble_center{
+    margin-top:-30px;
+    .boxs{
+      .title{
+        font-size: 16px;
+        line-height: 40px;
+        padding-left:20px;
       }
-      .active{
-        background: #6c7fff;
-        color:#fff;
+      .content{
+        padding:0 20px 4px;
+        border-top: 1px solid #E9E9F3;
+        >div{
+          border-top: 1px solid #E9E9F3;
+          height:40px;
+          line-height: 40px;
+          display: flex;
+          justify-content: space-between;
+        }
+        >div:nth-child(1){
+          border-top:none;
+        }
       }
     }
   }
-}
-.echarts{
-  margin-top:10px;
-  margin-right:10px;
-  display: inline-block;
-  vertical-align: top;
-  border-top:solid 1px #1890ff;
-  background: #fff;
-  .top{
-      background: #fafafa;
-      padding:8px;
-      img{
-        width:25px;
-      }
-      img,span{
-        display: inline-block;
-        vertical-align: middle;
-      }
-      span{
-        font-size: 16px;
-        margin-left:10px;
+  .BMap_bubble_center:after{
+    content: ""; /* 伪元素不包含内容 */
+    position: absolute; /* 绝对定位相对于.arrow-down */
+    top: 100%; /* 向下定位 */
+    left: 50%; /* 水平居中定位 */
+    width: 0; /* 必须设置为0，因为我们不显示宽度 */
+    height: 0; /* 必须设置为0，因为我们不显示高度 */
+    margin-left: -15px; /* 根据需要调整，这里是让箭头中心对齐 */
+    border-left: 15px solid transparent; /* 左边框透明 */
+    border-right: 15px solid transparent; /* 右边框透明 */
+    border-top: 15px solid #fff; /* 上边框是三角形的颜色 */
+  }
+ 
+  .BMap_bubble_buttons{
+    top:4px !important;
+    >div:nth-child(2){
+      >div{
+        font-size: 26px !important;
       }
     }
-}
-.color1{
-  color:#1BCCC1;
-}
-.color2{
-  color:#FF691C ;
-}
-.color3{
-  color:#8942F5 ;
-}
-.color4{
-  color:#FF397F ;
-  span{
-    color:#333;
-    margin-left:10px;
+  }
+  >img{
+    display: none;
   }
 }
-.color5{
-  color:red
+.shadow{
+  display: none;
 }
-</style>
+
+    
+.BMap_bubble_buttons{
+  /* >div:nth-child(2){
+    width:100px;
+  } */
+}
+.el-table__header-wrapper { position: sticky; width: 100%; top:0px; z-index: 2;color:#333 }
+</style>

src/views/largeScreen/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { ref,onMounted } from "vue";
+window.open("http://192.168.1.100:8080/login");
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/siteDistribution/index.vue

@@ -1,452 +0,0 @@
-<template>
-  <div class="app-container SiteDistribution" style="padding:0">
-    <div class="top">
-      <div class="statistics" v-if="mode == 1">
-        <div class="item" v-for="(item, index) in statistics" :key="index">
-          <img :src="item.img" alt="">
-          <div class="text">
-            <span :style="{ color: item.color }">{{ item.num }}</span>
-            <span>{{ item.text }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="query" v-if="mode == 2">
-        <a-tree-select
-            v-model:value="city"
-            :tree-data="cityArray"
-            placeholder="请选择城市"
-            tree-default-expand-all
-            class="citySelect"
-            style="width:120px;margin-right:10px;"
-          >
-        </a-tree-select>
-        <a-select
-          v-model:value="siteSlect"
-          placeholder=""
-          :options="siteArray"
-          @change="handleChange"
-          class="state"
-        >
-        </a-select>
-        <a-input-search
-          v-model:value="siteName"
-          placeholder="站点名称"
-          enter-button
-          @search="onSearch"
-          class="siteName"
-        />
-      </div>
-      <div class="modeSwitching">
-        <div @click="switchMode(1)" :class="{ active: mode == 1 }">
-          <img src="@/assets/svg/map.svg" alt="">
-        </div>
-        <div @click="switchMode(2)" :class="{ active: mode == 2 }">
-          <img src="@/assets/svg/menu.svg" alt="">
-        </div>
-      </div>
-      <div class="city">
-
-      </div>
-    </div>
-    <div class="middle">
-      <div  id="map" ref="map" style="width:100%;height:100%;" v-if="mode == 1"></div>
-      <div class="table" v-if="mode == 2">
-        <tableC :data="tableData" />
-      </div>
-    </div>
-    <div class="bottom" v-if="mode == 1">
-      <div class="itemWrap">
-        <div class="item" @click="site(4)" :class="{ active: siteState.includes(4) }" v-if="siteState.includes(1)">
-          <img src="@/assets/svg/name.svg" alt="">
-          <p>名称</p>
-        </div>
-        <div class="item" @click="site(3)" :class="{ active: siteState.includes(3) }" v-if="siteState.includes(1)">
-          <img src="@/assets/svg/wifi.svg" alt="">
-          <p>在线</p>
-        </div>
-        <div class="item" @click="site(2)" :class="{ active: siteState.includes(2) }" v-if="siteState.includes(1)">
-          <img src="@/assets/svg/alerm.svg" alt="">
-          <p>告警</p>
-        </div>
-      </div>
-      <div class="item" @click="site(1)" :class="{ active: siteState.includes(1) }">
-         <img src="@/assets/svg/site.svg" alt="">
-         <p>站点</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-/*----------------------------------组件引入-----------------------------------*/
-import tableC from "./components/table"
-/*----------------------------------接口引入-----------------------------------*/
-import { ref,onMounted } from "vue";
-/*----------------------------------store引入----------------------------------*/
-/*----------------------------------公共方法引入--------------------------------*/
-import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
-/*----------------------------------常量声明-----------------------------------*/
-import zhanDian from "@/assets/images/zhanDian.png";
-import liXian from "@/assets/images/liXian.png";
-import weiChuLi from "@/assets/images/weiChuLi.png";
-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' }
-])
-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:"公司地址"}
-]) //点标记集
-const dian = ref([])
-
-// 表格数据
-const cityArray = ref([
-  { 
-    value: '1',
-    label: '上海',
-    children: [
-      {
-        value: '11',
-        label: '青浦',
-      },
-      {
-        value: '12',
-        label: '松江',
-      },
-    ]
-  },
-  { 
-    value: '2',
-    label: '全部',
-  },
-  
-])
-const city = ref(1)
-const siteSlect = ref("")
-const siteArray = ref([
-  { value:"", label:"全部" },
-  { value:"1", label:"在线" },
-  { value:"0", label:"离线" },
-])
-const siteName = ref("")
-const total = ref(100)
-const pageSize = ref(15)
-const currentPage = ref(1)
-const tableData = ref([
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-])
-/*----------------------------------方法声明-----------------------------------*/
-onMounted(() => {
-  init()
-})
-
-//初始化
-function init(){
-  initMap()
-  site(1)
-}
-/**
- * 切换模式
- * @param {Number} val 1:列表模式 2:地图模式
- */
-function switchMode(val) {
-  mode.value = val
-  if(val == 1){
-    setTimeout(() => {
-      init()
-      site(1)
-    })
-  }
-}
-
-/**
- * 站点隐、显控制
-*/
-function site(val){
-  //站点隐现其他项
-  siteState.value = siteState.value.includes(val) ? siteState.value.filter(item => item!== val) : [...siteState.value, val]
-  if(val == 1 || val == 2 || val == 3) {
-    //站点隐现（全部/在线/告警）
-    if(siteState.value.includes(1)){
-      dian.value = []
-      //站点在线并告警 / 所有站点
-      if(siteState.value.includes(2) && siteState.value.includes(3) || !siteState.value.includes(2) && !siteState.value.includes(3)){
-        markers(markerArray.value)
-      }
-      //告警设备隐现(离线)
-      if(siteState.value.includes(2) && !siteState.value.includes(3)){
-        for(let i=0;i<markerArray.value.length;i++){
-          if(!markerArray.value[i].state){
-            dian.value.push(markerArray.value[i])
-          }
-        }
-        markers(dian.value)
-      }
-      //在线设备隐现
-      if(!siteState.value.includes(2) && siteState.value.includes(3)){
-        for(let i=0;i<markerArray.value.length;i++){
-          if(markerArray.value[i].state){
-            dian.value.push(markerArray.value[i])
-          }
-        }
-        markers(dian.value)
-      }
-    }
-    if(!siteState.value.includes(1)){
-      markers()
-    }
-  }
-  //文本标注隐现4
-  if(siteState.value.includes(4)){
-    if(siteState.value.includes(1)){
-      labelState(dian.value.length == 0 ? markerArray.value : dian.value)
-    }else{
-      labelState()
-    }
-  }else{
-    labelState()
-  }
-}
-</script>
-<style lang="scss" scoped>
-.SiteDistribution{
-  position: relative;
-  overflow: hidden;
-  .top{
-    .statistics{
-      position: absolute;
-      z-index: 1;
-      top:20px;
-      left:20px;
-      width:40%;
-      height:78px;
-      display: flex;
-      flex-direction: row;
-      
-      .item{
-        width:100%;
-        height:100%;
-        background: #fff;
-        padding:14px 0 3% 3%;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        img{
-          vertical-align: middle;
-          margin-right:10px;
-          width:50px;
-          height:50px;
-        }
-        >div{
-          display: flex;
-          flex-direction: column;
-          color:#333;
-          font-size: 14px;
-          margin-top:2px;
-          span:nth-child(1){
-            font-weight: bold;
-            font-size: 16px;
-            margin-bottom:10px;
-          }
-        }
-      }
-    }
-    .modeSwitching{
-      position: absolute;
-      z-index: 1;
-      top:20px;
-      right:20px;
-      width: 68px;
-      height: 32px;
-      display: flex;
-      border-radius: 2px;
-      background: #fff;
-      font-size: 22px;
-      cursor: pointer;
-      box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
-      >div{
-        width:50%;
-        height:100%;
-        line-height: 115%;;
-        display: inline-block;
-        background: none;
-        text-align: center;
-        img{
-          width:16px;
-          transform: translateX(80px);
-          filter: drop-shadow(#333 -80px 1px 0px);
-        }
-      }
-      .active{
-        background: #48A4FF;
-        img{
-          width:16px;
-          transform: translateX(80px);
-          filter: drop-shadow(#fff -80px 1px 0px);
-        }
-      }
-    }
-    .query{
-      position: absolute;
-      right:100px;
-      top:20px;
-      z-index: 1;
-      >div{
-        display: inline-block;
-        margin-right:10px;
-      }
-      .state{
-        width:80px;
-      }
-      .siteName{
-        width:200px;
-      }
-    }
-  }
-  .middle{
-    width:100%;
-    height:100%;
-    position: absolute;
-    z-index: 0;
-    .table{
-      padding:20px;
-      margin-top:40px;
-    }
-  }
-  .bottom{
-    position: absolute;
-    z-index: 1;
-    bottom:20px;
-    right:20px;
-    .item{
-      padding:4px 8px 2px;
-      text-align: center;
-      border-bottom:1px solid #eee;
-      background: #fff;
-      cursor: pointer;
-      img{
-        font-size: 14px;
-        transform: translateX(80px);
-        filter: drop-shadow(#333 -80px 1px 0px);
-      }
-      >p{
-        font-size: 12px;
-        color:#333;
-        margin:6px 0 0px;
-      }
-    }
-    .item:last-child(1){
-      border-bottom:none;
-    }
-    .active{
-        background: #48A4FF;
-        img{
-          transform: translateX(80px);
-          filter: drop-shadow(#fff -80px 1px 0px);
-        }
-        p{
-          color:#fff;
-        }
-      }
-  }
-}
-
-</style>
-<style>
-
-.BMap_copCtrl,.anchorBL{
-  display: none;
-  
-}
-
-</style>
-<style lang="scss">
-.BMap_bubble_pop{
-  width:270px !important;
-  padding:0 !important;
-  border-radius: 4px !important;
-  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;
-  }
-  .BMap_bubble_center{
-    margin-top:-30px;
-    .boxs{
-      .title{
-        font-size: 16px;
-        line-height: 40px;
-        padding-left:20px;
-      }
-      .content{
-        padding:0 20px 4px;
-        border-top: 1px solid #E9E9F3;
-        >div{
-          border-top: 1px solid #E9E9F3;
-          height:40px;
-          line-height: 40px;
-          display: flex;
-          justify-content: space-between;
-        }
-        >div:nth-child(1){
-          border-top:none;
-        }
-      }
-    }
-  }
-  .BMap_bubble_center:after{
-    content: ""; /* 伪元素不包含内容 */
-    position: absolute; /* 绝对定位相对于.arrow-down */
-    top: 100%; /* 向下定位 */
-    left: 50%; /* 水平居中定位 */
-    width: 0; /* 必须设置为0，因为我们不显示宽度 */
-    height: 0; /* 必须设置为0，因为我们不显示高度 */
-    margin-left: -15px; /* 根据需要调整，这里是让箭头中心对齐 */
-    border-left: 15px solid transparent; /* 左边框透明 */
-    border-right: 15px solid transparent; /* 右边框透明 */
-    border-top: 15px solid #fff; /* 上边框是三角形的颜色 */
-  }
- 
-  .BMap_bubble_buttons{
-    top:4px !important;
-    >div:nth-child(2){
-      >div{
-        font-size: 26px !important;
-      }
-    }
-  }
-  >img{
-    display: none;
-  }
-}
-.shadow{
-  display: none;
-}
-
-    
-.BMap_bubble_buttons{
-  /* >div:nth-child(2){
-    width:100px;
-  } */
-}
-.el-table__header-wrapper { position: sticky; width: 100%; top:0px; z-index: 2;color:#333 }
-</style>